![网页设计与制作教程:Web前端开发(第7版)](https://wfqqreader-1252317822.image.myqcloud.com/cover/945/50604945/b_50604945.jpg)
1.2.2 HTML5的基本语法
HTML文档由元素构成,元素由标签、元素和属性的内容3部分组成。
1.标签(tag)
HTML用标签规定网页元素在文档中的功能。标签是用一对尖括号“<>”括起来的单词或单词缩写。标签有两种形式:双标签和单标签。
(1)双标签
双标签包括开始标签和结束标签,其格式为:
![](https://epubservercos.yuewen.com/853F7D/29810394404576006/epubprivate/OEBPS/Images/17_01.jpg?sign=1739294058-X77xSGEovuuvuWY0aXnmkzvr9lbUFhu5-0-deb7ee4bac2369e04e414ba97a8d7c46)
开始标签标志一段内容的开始,结束标签是指与开始标签相对的标签。结束标签比开始标签多一个斜杠“/”。双标签也称闭合标签。例如,HTML文档从<html>开始,到</html>结束。
(2)单标签
单标签没有相对应的结束标签,其格式为:
![](https://epubservercos.yuewen.com/853F7D/29810394404576006/epubprivate/OEBPS/Images/17_02.jpg?sign=1739294058-9eNKkuUr1xkbqUxPDfPbUzQLvQa72GLr-0-b7cf44b9f134286d13c2f2433c4d34e3)
常见的单标签有<area>、<base>、<basefont>、<br>、<col>、<hr>、<img>、<input>、<param>、<link>、<meta>等。
使用标签时需要注意以下3点。
1)每个标签都要用一对尖括号“<>”括起来,如<p>,<table>,以表示这是HTML代码而非普通文本。注意,“<”“>”与标签名之间不能留有空格或其他字符,否则出错。
2)对于双标签,其结束标签名前加上符号“/”,表示该标签内容的结束,如</h1>。对于单标签,不用</标签>结尾。例如,换行标签<br>。
3)一个标签可以放在另外一个标签所能影响的片段中,以实现对某一段文档的多重标签效果,称为嵌套,但是要注意必须正确嵌套。例如,下面嵌套是错误的:
![](https://epubservercos.yuewen.com/853F7D/29810394404576006/epubprivate/OEBPS/Images/17_03.jpg?sign=1739294058-ERGSsx3DnblQM0UqDL42nMDd8zpU9JtN-0-64294476380f85e78db9053f57f7a68f)
改正如下:
![](https://epubservercos.yuewen.com/853F7D/29810394404576006/epubprivate/OEBPS/Images/17_04.jpg?sign=1739294058-iDoOt2vOHwEB3yUULyvLNykfe16kG1be-0-0344bd9791be180f0e7a2e3645e41112)
2.元素(element)
HTML文档中的元素是指从开始标签到结束标签的所有代码。HTML元素分为有内容的元素和空元素两种。
(1)有内容的元素
有内容的元素是由开始标签、结束标签以及两者之间的元素内容组成的,其中元素内容既可以是需要显示在网页中的文字内容,也可以是其他元素。例如,<title>和</title>是标签,下面代码是一个title元素:
![](https://epubservercos.yuewen.com/853F7D/29810394404576006/epubprivate/OEBPS/Images/18_01.jpg?sign=1739294058-v9IPWzAwhLIvU4iy4KhQetkzcuYArava-0-82fb25d170fcf1e2394abb48bdc70019)
(2)空元素
只有开始标签而没有结束标签,也没有元素内容,因此也称空元素(void elements)。例如,br、hr元素就是空元素。
(3)元素的嵌套
除了HTML文档元素<html>外,其他的HTML元素都是被嵌套在另一个元素之内的。在HTML文档中,html是最外层元素,也称为根元素。head、body元素是嵌套在html元素内的。body元素内又嵌套许多元素。HTML中的元素可以多级嵌套,但是不能互相交叉。例如,下面代码对于<head>和</head>标签来说,是一个head元素:
![](https://epubservercos.yuewen.com/853F7D/29810394404576006/epubprivate/OEBPS/Images/18_02.jpg?sign=1739294058-k6AAlSEziq33rpo6CJnp8DtgXRPy8npG-0-c9929b42b9e34a6528ad22126a5e6699)
同时,这个title元素又是嵌套在head元素中的另一个元素。
例如,下面是不正确的嵌套写法,p元素的开始标签在b元素的外层,但它的结束标签却放在了b元素结束标签内。
![](https://epubservercos.yuewen.com/853F7D/29810394404576006/epubprivate/OEBPS/Images/18_03.jpg?sign=1739294058-W2eHEs6hOUqjU8jkECQfgCSWUXY2iPvR-0-3f3e45447a0698998335d66588470152)
正确的HTML写法如下:
![](https://epubservercos.yuewen.com/853F7D/29810394404576006/epubprivate/OEBPS/Images/18_04.jpg?sign=1739294058-Qu6bXfHhhLlrtSj7hFdG1RhfNeEuOOHd-0-c992b0aef408573ea9a18a9f5c4890e9)
为了防止出现错误的HTML元素嵌套,在编写HTML文档时,建议先写外层的一对标签,然后逐渐往里写,这样既不容易忘记写HTML元素的结束标签,也可以减少HTML元素的嵌套错误。
3.属性
属性用来说明元素的特征,借助于元素属性,HTML网页才会展现丰富多彩且格式美观的内容。
元素的属性放置在元素的开始标签内,每个属性对应一个属性值,通常都是以“属性名="值"”的形式表示,出现在元素开始标签的“>”之前,用空格隔开后,可以指定多个属性,并且在指定多个属性时不用区分顺序。属性的使用格式为:
![](https://epubservercos.yuewen.com/853F7D/29810394404576006/epubprivate/OEBPS/Images/18_05.jpg?sign=1739294058-y7gEq2h0B1FaCXHN28IIQK3u93gLR8LS-0-ac9aa51cd03365489d285455ffe2bc2f)
例如,下面代码中的“border="1" cellspacing="10" cellpadding="20"”就是table元素的属性:
![](https://epubservercos.yuewen.com/853F7D/29810394404576006/epubprivate/OEBPS/Images/18_06.jpg?sign=1739294058-T4hW6PJvIUyTB34A7fyo5XVnKMddENeX-0-30b058350e51773f7e389702e951aa5d)
定义属性值时注意以下几点。
1)不定义属性值。HTML规定属性也可以没有值,例如:
![](https://epubservercos.yuewen.com/853F7D/29810394404576006/epubprivate/OEBPS/Images/18_07.jpg?sign=1739294058-VqTdfEpkwPpXI5P6609LWB4B8ivPMNqw-0-3589202c9675e2ddafa9f1c7af2bf6db)
浏览器会使用compact属性的默认值。但对于没有默认值的属性,不能省略属性值。
2)属性中的属性值可以包含空格,但是这种情况下必须使用引号。例如,下面代码是正确的写法:
![](https://epubservercos.yuewen.com/853F7D/29810394404576006/epubprivate/OEBPS/Images/19_01.jpg?sign=1739294058-yJTbOvSyCKYiKF1XZqNrQr6I7uUTxnbi-0-cbc2993bd47133bb44dba001ed3819b4)
下面代码是错误的写法:
![](https://epubservercos.yuewen.com/853F7D/29810394404576006/epubprivate/OEBPS/Images/19_02.jpg?sign=1739294058-MXo4YpLBxwRSFC8z2Qhk2lAFHXn24P48-0-18a28d5d02e7cf3804ad0bd817493e0d)
也就是说,属性值一定是连续字符序列,如果不是连续序列,则要加引号标注。
3)单引号和双引号都可以作为属性值。当属性值中含有单引号时,不能再用单引号包括属性值,要用双引号包括属性值。但是,当属性值中有双引号时,属性值中的双引号就要用数字字符引用(")或者字符实体引用(")来代替双引号。例如,下面代码是错误的:
![](https://epubservercos.yuewen.com/853F7D/29810394404576006/epubprivate/OEBPS/Images/19_03.jpg?sign=1739294058-ujXUlN7vfcpR3oX1V6U1Brmqa2EavpzE-0-c311e2e6dcf25afcc4699acfda712be6)
正确的写法为:
![](https://epubservercos.yuewen.com/853F7D/29810394404576006/epubprivate/OEBPS/Images/19_04.jpg?sign=1739294058-8l1mjn1tj7gbHTn1wYkD2YIfZ3chLnp0-0-a9798ce6794874d8aa9bf6fbe6b3aa5f)
或者
![](https://epubservercos.yuewen.com/853F7D/29810394404576006/epubprivate/OEBPS/Images/19_05.jpg?sign=1739294058-AcME4uPPyW4KSidkLhw6FjcHEDfWGPnp-0-0956534f006a694cf5b51373d5f095de)
title属性定义当鼠标移到元素上时显示该提示文本。
4)HTML建议属性和属性值使用小写,虽然属性和属性值对大小写不敏感。