![网页设计与制作教程: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=1739287911-jVA1aRQNoCL4Thd17I570yZUd6h9zFQY-0-29c091f50be4f7599ec7ae5cbdf80424)
开始标签标志一段内容的开始,结束标签是指与开始标签相对的标签。结束标签比开始标签多一个斜杠“/”。双标签也称闭合标签。例如,HTML文档从<html>开始,到</html>结束。
(2)单标签
单标签没有相对应的结束标签,其格式为:
![](https://epubservercos.yuewen.com/853F7D/29810394404576006/epubprivate/OEBPS/Images/17_02.jpg?sign=1739287911-Zsdr2YooqWkDgaCa3eEkYlrPJc5TimcQ-0-8a26c38ff771c7d75862451878735e52)
常见的单标签有<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=1739287911-TC8t7RAlksVYezbUanpwN5aURrmPhWWm-0-f2862ce66aa2ef3089477fd579a5b3a7)
改正如下:
![](https://epubservercos.yuewen.com/853F7D/29810394404576006/epubprivate/OEBPS/Images/17_04.jpg?sign=1739287911-OJhEroLZ6T0xXYNouAfdjyRoJphzFn4R-0-2b9524edab5bc15f7a448fbcfb30dac9)
2.元素(element)
HTML文档中的元素是指从开始标签到结束标签的所有代码。HTML元素分为有内容的元素和空元素两种。
(1)有内容的元素
有内容的元素是由开始标签、结束标签以及两者之间的元素内容组成的,其中元素内容既可以是需要显示在网页中的文字内容,也可以是其他元素。例如,<title>和</title>是标签,下面代码是一个title元素:
![](https://epubservercos.yuewen.com/853F7D/29810394404576006/epubprivate/OEBPS/Images/18_01.jpg?sign=1739287911-p3t4cRTLZsfmssWkeih9NN9UvVeMm9jY-0-ce9e5edc071a77258d28398ef8622a61)
(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=1739287911-IkcH3I1dSYtEWwZLzYrRBBOXxMgThYu6-0-696fef2d8892233482eb4f4a5f6b721e)
同时,这个title元素又是嵌套在head元素中的另一个元素。
例如,下面是不正确的嵌套写法,p元素的开始标签在b元素的外层,但它的结束标签却放在了b元素结束标签内。
![](https://epubservercos.yuewen.com/853F7D/29810394404576006/epubprivate/OEBPS/Images/18_03.jpg?sign=1739287911-NnVmaFwIh6yl6VmxRA2liE22QOfwblH6-0-4cee5d2278fb36c23308175269f4004d)
正确的HTML写法如下:
![](https://epubservercos.yuewen.com/853F7D/29810394404576006/epubprivate/OEBPS/Images/18_04.jpg?sign=1739287911-3xoQemJJXl1uGQ2ph7pGsXKTlxB8t7gJ-0-84f4b8019889ae59d89e8f73c8835182)
为了防止出现错误的HTML元素嵌套,在编写HTML文档时,建议先写外层的一对标签,然后逐渐往里写,这样既不容易忘记写HTML元素的结束标签,也可以减少HTML元素的嵌套错误。
3.属性
属性用来说明元素的特征,借助于元素属性,HTML网页才会展现丰富多彩且格式美观的内容。
元素的属性放置在元素的开始标签内,每个属性对应一个属性值,通常都是以“属性名="值"”的形式表示,出现在元素开始标签的“>”之前,用空格隔开后,可以指定多个属性,并且在指定多个属性时不用区分顺序。属性的使用格式为:
![](https://epubservercos.yuewen.com/853F7D/29810394404576006/epubprivate/OEBPS/Images/18_05.jpg?sign=1739287911-T5Ot4INxFOzzILrg791oZ8t37wCdgD6M-0-76274dbd10bf963953e1a568290b4031)
例如,下面代码中的“border="1" cellspacing="10" cellpadding="20"”就是table元素的属性:
![](https://epubservercos.yuewen.com/853F7D/29810394404576006/epubprivate/OEBPS/Images/18_06.jpg?sign=1739287911-fiV6u6VqNAvwBnwC3F7ZHA7JCTHasd2t-0-adb343a708838593d76ac606fd9bce4e)
定义属性值时注意以下几点。
1)不定义属性值。HTML规定属性也可以没有值,例如:
![](https://epubservercos.yuewen.com/853F7D/29810394404576006/epubprivate/OEBPS/Images/18_07.jpg?sign=1739287911-e6VmAH8sYf1HaPWCYCL6ZvZJ1X8KJIRU-0-a52b5e11d17b08f8fe2ade435db86b7f)
浏览器会使用compact属性的默认值。但对于没有默认值的属性,不能省略属性值。
2)属性中的属性值可以包含空格,但是这种情况下必须使用引号。例如,下面代码是正确的写法:
![](https://epubservercos.yuewen.com/853F7D/29810394404576006/epubprivate/OEBPS/Images/19_01.jpg?sign=1739287911-eJGVdbqRq3eYARqQkevyHerpCk5Z5tsi-0-bcb134300c814131874831d82cab0671)
下面代码是错误的写法:
![](https://epubservercos.yuewen.com/853F7D/29810394404576006/epubprivate/OEBPS/Images/19_02.jpg?sign=1739287911-GyeeUTZTHP8Eg8G1Ca14eHGfzCjAAzyZ-0-9ef74d14c983e7cb31ae2b52976c9740)
也就是说,属性值一定是连续字符序列,如果不是连续序列,则要加引号标注。
3)单引号和双引号都可以作为属性值。当属性值中含有单引号时,不能再用单引号包括属性值,要用双引号包括属性值。但是,当属性值中有双引号时,属性值中的双引号就要用数字字符引用(")或者字符实体引用(")来代替双引号。例如,下面代码是错误的:
![](https://epubservercos.yuewen.com/853F7D/29810394404576006/epubprivate/OEBPS/Images/19_03.jpg?sign=1739287911-ivUdr83Fi6yis0k9xWCR01LKOKGfXWuC-0-e062b2b8f9599d052aed5a26f71490fb)
正确的写法为:
![](https://epubservercos.yuewen.com/853F7D/29810394404576006/epubprivate/OEBPS/Images/19_04.jpg?sign=1739287911-wg9wAzsgaD8iyozy9eDXJUVXP1kLGsg3-0-325525e29af28ebf509b102bbaca747e)
或者
![](https://epubservercos.yuewen.com/853F7D/29810394404576006/epubprivate/OEBPS/Images/19_05.jpg?sign=1739287911-q7sFFyMokVe0MwJNMxc5zXoCq4SDEZFq-0-6e7bdc48dc456249c6057ebfcb2ff47b)
title属性定义当鼠标移到元素上时显示该提示文本。
4)HTML建议属性和属性值使用小写,虽然属性和属性值对大小写不敏感。