HTML基础学习记录

最新推荐文章于 2024-07-02 11:08:14 发布

到秋天了

最新推荐文章于 2024-07-02 11:08:14 发布

阅读量226

点赞数

分类专栏：寒假任务文章标签： html

本文链接：https://blog.csdn.net/qq_51724176/article/details/113056657

版权

寒假任务专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、HTML的学习

1.网页的组成

网页是由前端三层：HTML（结构层）、css（样式层）、JavaScript（行为层），其他多媒体内容：图片、视频、音频、超链接等组成的。

2.HTML是什么

HTML是HyperText Markup Language的简写，即超文本标记语言，用于搭建网页的结构。（超文本: 普通文本只能显示文字,超文本除了显示基本文字之外还能显示图片,视频,音频,文件特殊效果等；标记是HTML的组成元素）

HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页

2.HTML特点

不需要编译
后缀名*.html或*htm

3.HTML基本结构

<!DOCTYPE html>
<html> 
<head>
    <title>网页的标题</title>
</head>
<body>
    网页的主体
</body>
</html>

4.HTML标签语法

标签名必须书写在一对尖括号<>内部。
< html >< /html >

标签分为单标签和双标签，双标签必须成对出现。

< p >< /p > 双标签
< br/ > 单标签

双标签包含开始标签和结束标签，结束标签必须书写关闭符号/，单标签也需要进行封闭书写。在HTML5中，单标签可以不写关闭符号。

(1)< html >标签

作用:定义HTML文件的根元素，表示整个的HTML文档，所有的标签要书写在标签内部

(2)< head >标签

作用:定义HTML文件的头部，它是所有头部元素的容器

(3)< title >标签

作用1:让页面拥有一个属于自己的标题。
作用2:title中的关键字可以作为搜索引擎抓取时的关键字，提高SEO搜索引擎优化。
作用3:内部的内容会显示在搜索结果的标题部分。
作用4:作为浏览器收藏夹默认的网页标题。

(4)< body >标签

作用:定义网页的主体部分，用于存放所有的HTML显示内容的标签< p >,< h1 >,< div >等。

< body >内部的元素内容会显示在浏览器窗口中。

(5)DTD

完整的HTML文件的第一行内容叫做文档定义类型，英文DocType Definition，简称DTD。也称作文档声明类型，DocType Declaration。

作用：告知浏览器该网页使用的是哪个版本的HTML规范，让浏览器按照对应版本的HTML语法进行解析页面。

5.HTML常用标签

HTML注释语法:
< !-- 书写注释内容 – >
注释的特点：注释只在源代码中可见，在浏览器窗口是不显示的。

(1)标题标签

< h1 >定义最大的标题，< h6 >定义最小的标题。< h1 >-< h6 > 标签都是双标签，且是容器级标签

< h1 >一级标题< /h1 >
< h2 >二级标题< /h2 >
< h3 >三级标题< /h3 >
< h4 >四级标题< /h4 >
< h5 >五级标题< /h5 >
< h6 >六级标题< /h6 >

(2)段落标签

< p >标签是双标签且为文本级标签。内部只能放置文本、图片、表单元素，或者废弃的< font >标签等。

< p >这是一个段落< /p >

(3)换行标签

< br / >（breaking）标签是HTML中一个简单的换行符。
< br / >标签是一个单标签。
在需要换行的位置可以使用< br / >标签书写，但是< br / >与< p >不同，< br / >没有建立新的段落的语义，只是简单的进行强制换行。

< p >这是第一< br / >个段落</p> 
< p >这是第二个段落< /p >

(4)文本格式化标签

标签	描述
b	定义粗体文本，bold
big	定义大号字
em	定义着重文字，emphasis,自带斜体效果
i	定义斜体字，italic
small	定义小号字
strong	定义加重语气，自带加粗效果
sub	定义下标字，subscript
sup	定义上标字，superccript
ins	定义插入字，自带下划线效果，insert
del	定义删除字，delete
s	不赞成使用，使用del代替，strike的简化
strike	不赞成使用，使用del代替
u	定义下划线，不赞成使用，使用css中样式代替，underline

(5)图像标签

标签的作用是在指定的位置插入一张图片。 
在HTML文件，常用的插入图片的类型有：jpg、png、gif。

< img >常用属性

属性名	描述
src	表示图片的路径；
width	表示图片的宽度；
height	表示图片的高度；
border	边框属性；它的值可以设置边框的厚度；
title	设置提示文本；
alt	设置图像没有找到时候的替换文本；

(6)音频视频标签

音频使用标签进行定义。

是双标签。

同图片一样，需要使用src属性设置音频查找的路径。

音频文件支持的格式包括：.mp3、.ogg、.wav。

<audio src="audio.mp3"> </audio>

视频的设置方法与音频非常类似。

视频使用标签进行定义。

是双标签。

使用src属性设置视频查找的路径。

视频文件支持的格式包括：.mp4、.ogg、.webm。

<video src="video.mp4"></video>

音频和视频控制条属性音频和视频加载后不会自动显示播放器的控制条，需要使用controls属性进行设置，属性值也是 controls。

<audio src="audio.mp3" controls="controls"> </audio>
<video src="video.mp4" controls="controls" ></video>

(7)超链接标签

在HTML中使用< a >标签可以创建链接。

a全称anchor，锚的意思。

< a >为双标签。

作用：在指定的位置添加超级链接，提供用户进行点击和跳转。

< a >标签可以实现两种跳转：跨页面跳转、页面内跳转。实现跳转的方式需要用到一些标签属性。

< a >链接内容< /a >

href属性

href全称hypertext reference，超文本引用，用于规定链接的目标地址。
书写方式如下：

< a href="目标地址" >链接内容< /a >

target属性

使用target 属性，可以定义被链接的文档在何处跳转显示。

属性值有两种：
_self：默认值，表示跳转的页面在当前窗口打开，不会打开新的窗口。
_blank：空白的，表示跳转的页面在新窗口打开。

< a href="http://www.lagou.com" target="_blank">R</a >

title属性
title设置的是鼠标悬停时的提示文本，与标签类似。

属性值：自定义的文字内容。该属性用于给用户进行提示，该链接的功能是什么，提高用户的体验。

<a href="smile.html" title="点击查看源网页">
<img src="images/smile02.png" /></a>

(8)无序列表标签

无序列表需要两个标签参与，分别是< ul >和< li >。ul：unordered list，表示定义一个无序列表的大结构。li：list item，列表项，定义的是无序列表内的某一项。< ul >和< li >是嵌套关系，快捷键：ul>li。一个列表中可以有任意个列表项。

<ul> 
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li> 
</ul>

(9)有序列表标签

有序列表的语法与无序列表非常类似，只是在语义上有差异。有序列表由两个标签组成，分别是< ol >和< li >。ol：ordered list，表示定义一个有序的列表的大结构。li：list item，定义的是有序列表的每一项。< ol >和< li >是嵌套关系，快捷键：ol>li。< ol >标签内部可以嵌套任意多个< li >标签。< ol > < li >列表项1< /li > < li >列表项2< /li > < li >列表项3< /li > < li >列表项4< /li > < /ol >

 <ol> 
 <li>列表项1</li>
 <li>列表项2</li> 
 <li>列表项3</li>
 <li>列表项4</li>
 </ol>

(10)定义列表标签

自定义列表不仅仅是一列项目，而是项目及其注释的组合。由三个标签组成完整的结构，包含< dl >、< dt >和< dd >。dl：definition list，表示定义一个自定义列表的大结构。dt：definition term，表示定义自定义列表中的一个主题或者术语。dd：definition description，定义解释项，表示描述或解释前面的定义主题。< dl >内部只能嵌套< dt >和< dd >，< dt >与< dd >是同级关系。

 <dl>
 <dt>主题</dt> 
 <dd>解释项</dd>
 </dl>

(11)布局标签

< div >标签
div：全称division，分割、区域、跨度的意思。俗称大盒子。

< div >是双标签，是最经典的容器级标签，内部可以放置任意内容。
作用：多用于划分网页区域，进行结构布局。一般将相关的内容使用< div >包裹起来，整体设置大的布局效果。

< span >标签
span：小区域、小跨度的意思。俗称小盒子。

< span >也是双标签，容器级标签。

作用：在不改变整体效果的情况下，可以辅助进行局部调整。

6.表格制作

(1)表格基础

创建一个简单的表格至少有三个标签组成，分别是< table >、< tr >、< td >标签。table：表格，定义的是整个的表格大结构。tr：table rows，表格的行，定义的是表格由多少行组成。td：table data，表格数据，也叫表格单元格，定义的是每一行内部的单元格。三者的关系：table>tr>td.一个表格中有多个行，每个行中有多个单元格。

< table >的属性
< table >标签可以添加border边框属性。属性值：数字，表示像素值。表格的单元格之间有默认的空隙，会导致双线边框。解决方法：设置标签样式属性style。属性值：border-collapse : collapse; 表示边框塌陷。

(2)表头单元格

如果要绘制表头，使用标签< th >，table head data，表头单元格。
在表格中绘制的时候，替换的是< td >的位置。
< th >标签中自带默认的css样式效果，文字显示粗体居中。

单元格属性
表格的单元格可以进行合并，通过< th >和< td >的两个属性可以进行合并设置。
rowspan：跨行和并。上下的合并。
colspan：跨列合并。左右的合并。
属性值：数字，数字是几表示跨几行或跨几列合并。

(3)分区标签

< table >内部最直接的子级包含四个分区标签，他们都是双标签。caption：表格的标题，内部书写标题文字。thead：table head，表格的头部。内部嵌套tr>th。tbody：table body，表格的主体。内部嵌套tr>td。tfoot：table foot，表格的页脚。内部嵌套tr>td。

7.表单

HTML 表单用于搜集不同类型的用户输入。

(1)表单域标签

HTML表单域使用< form >标签进行定义。
< form >标签是一个功能性标签，填写的表单信息要想正确的提交到后台服务器，必须放在一个< form >标签之内。

< form >标签为双标签，容器级标签。

表单域标签属性
标签通过对应属性规定提交数据的方法和提交位置。

属性名	属性值	描述
action	url	指定接收并处理表单数据的服务器程序的url地址
method	get/post	用于设置表单数据的提交方式
name	自定义名称	规定表单的名称

示例

 <form action="xxx.php" method="post/get" name="message">
  提示信息及表单控件书写位置 </form>

(2)表单元素

< input >标签常用属性

属性名	属性值	描述
type	text	单行文本输入框
type	password	密码输入框
type	radio	单选框
type	checkbox	复选框
type	butto	普通按钮
type	rese	重置按钮
type	submit	提交按钮
type	image	图像形式按钮
type	file	定义输入字段和"浏览"按钮，供文件上传。
type	hidden	定义隐藏的输入字段
name	自定义	定义控件的名称
value	自定义	定义控件的默认文本值
size	数字	定义控件的宽度
checked	checked	定义选框控件的默认被选中项
maxlength	数字	定义允许输入的最多的字符数

8.文本域< textarea >

< textarea >有两个标签属性，可以设置显示区域大小。rows：行，属性值是数字，数字是几表示文本框显示的最大行数，如果超过了行数，会被隐藏并且出现滚动条。cols：列，属性值是数字，数字是几，表示在出现滚动条之后，每一行显示的最大字节数（一个汉字按2字节计算）。

<textarea cols="30" rows="10">默认输入文字</textarea>

二、制作一个登录框

代码如下：

<html>
<head>
<title>test</title> 
</head>
<body >
<fieldset>
<table background="images\bg_img1.jpg " width="933" height="412">
 <tr height="170">
 <td width="570px"> </td>
 <td> </td>
 </tr> 
 <tr>
<td> </td>        
<td><table>
<form method ="POST" action="http://localhost:8080/test/hello.html?login=%B5%C7%C2%BC" name="frmLogin"  >
 <tr>
 <td>用户名：</td>
 <td><input type="text" name="username" value="Your name" size="20" maxlength="20" οnfοcus="if (this.value=='Your name')  this.value='';" /></td>
 <td > </td>
 <td> </td>
 </tr>
 <tr>
 <td>密  码：</td>
 <td><input type="password" name="password" value="Your password" size="20" maxlength="20" οnfοcus="if (this.value=='Your password')  this.value='';" /></td>
 <td> </td>
 <td> </td>
 </tr>
 <tr>
 <td>验证码:</td>
 <td><input type="text" size="" name="inputcode" value="Your code" οnfοcus="if (this.value=='Your code')  this.value='';" /></td>
 <td><img src="images\bg_img2.gif" alt="打不开网页"> </td>
 <td><a href="#" οnclick="shuaxin();">刷新</a></td>
 </tr>
 <tr>
 <td><input type="checkbox" name="zlogin" value="1">自动登录</td>
 </tr>
 </table>
 </td>
  <tr>
  <td> </td>   
  <td><table>
   <tr>
  <td><input type="submit" name="login" value="登录" onClick="return validateLogin()"/></td>
  <td><input type="reset" name="rs" value="重置"></td>
  <td><input type="button" name="button" value="注册" οnclick="location.href='http://localhost:8080/test/zc.html?login=%B5%C7%C2%BC'"></td>
  </tr>
 </tr>
 </table>
 </td>
 </table>
</fieldset>
</form>
<script language="javascript">
  function validateLogin(){
    var sUserName = document.frmLogin.username.value ;
    var sPassword = document.frmLogin.password.value ;
    var sinputCode =document.frmLogin.inputcode.value ;  
    if ((sUserName =="") || (sUserName=="Your name")){
     alert("请输入用户名!");
     return false ;
    }
     
    if ((sPassword =="") || (sPassword=="Your password")){
     alert("请输入密码!");
     return false ;
    }
    if ((sinputCode =="") || (sinputCode=="Your code")){
        alert("请输入验证码!");
        return false ;
       }
   } 
  </script>
</body>
</html>

效果图如下：
在这里插入图片描述

到秋天了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML基础学习记录

HTML基础学习记录一、HTML的学习1.HTML是什么一、HTML的学习1.HTML是什么HTML是HyperText Markup Language的简写，即超文本标记语言。（超文本: 普通文本只能显示文字,超文本除了显示基本文字之外还能显示图片,视频,音频,文件特殊效果等；标记是HTML的组成元素）HTML 不是一种编程语言，而是一种标记语言 (markup language)标记语言是一套标记标签 (markup tag)HTML 使用标记标签来描述网页...
复制链接

扫一扫