下载掌阅APP，畅读海量书库
立即打开
HTML5是英文Hyper Text Markup Language 5的缩写，中文为超文本标记语言，它不是一种编程语言，而是一种描述网页结构和内容的语言。通过HTML5标签不仅可以编写网页文档，还可以影响浏览器的运行、服务器的解析、搜索引擎的识别和内容的抓取。
HTML5是从HTML 1的基础上发展而来的，在2014年最终定型。它经历了从HTML 1到HTML 4的漫长演变，是目前最新的超文本标记语言标准。虽然之前的HTML版本也可以制作网页，但是以前的HTML版本都是由各个公司自己制定的标准，所以各个公司开发的HTML各有不同，这就导致了各个公司开发的HTML文档只能在各自公司生产的浏览器上完美运行。为了解决这种问题，经过长期的努力，终于创建出了语法规范、功能强大、标准统一的HTML5。HTML5为网页前端开发制定了一个规范的标准，在这个标准上，视频、音频、图像、动画，甚至设备之间的交互都能得到很好地实现。
标签是HTML的书写规则，在HTML5中被拓展到了7类。这7类被称作内容模型，它们分别是元数据型、区块型、标题型、文档流型、语句型、内嵌型和交互型。虽然将HTML5标签拓展到了7类，但是有些标签还是无法划分到任何一个类别之中，这类标签被称为穿透型标签，还有一些标签可以同时划分到多个类别中，这类标签被称为混合型标签。在这个内容模型中，除了元数据型的标签通常使用在＜head＞标签内部，其他类型的标签都使用在＜body＞标签内部。HTML5的内容模型如图2.1所示。
图2.1 HTML5的内容模型
元数据型（Metadata Content）用来设置或者说明页面的表现和行为，或者用来在当前文档和其他文档之间建立联系。这类标签有：＜base＞、＜command＞、＜link＞、＜meta＞、＜noscript＞、＜script＞、＜style＞和＜title＞。
区块型（Sectioning Content）用来定义页面的结构和范围。这类标签有：＜article＞、＜aside＞、＜nav＞、＜section＞、＜main＞、＜header＞和＜footer＞。
标题型（Heading Content）用来在文档中书写章节的标题和定义标题的区块。这类标签有：＜h1＞到＜h6＞和＜hgroup＞。
文档流型（Flow Content）标签几乎包括所有的HTML标签，除了元数据型的＜base＞和＜title＞标签外。
语句型（ Phrasing Content）用来在文档中书写和定义文本的内容。这类标签有：＜span＞、＜strong＞、＜label＞、＜br＞、＜small＞和＜sub＞等。
内嵌型（Embedded Content）用来在文档中引入其他资源或者插入其他脚本语言，以弥补HTML5的不足。这类标签有：＜audio＞、＜embed＞、＜video＞、＜canvas＞、＜iframe＞、＜img＞、＜math＞、＜object＞和＜svg＞。
交互型（Interactive Content）用来与用户互动。这类标签有：＜a＞、＜audio＞、＜video＞、＜button＞、＜embed＞、＜iframe＞、＜img＞、＜input＞、＜keygen＞、＜label＞、＜object＞、＜select＞、＜textarea＞等。
虽然HTML5采用了内容模型来划分标签的类别，但是有些标签可以划分在多个类别中。有的标签虽然被划分在同一个类别中，但是功能和使用方法却大不相同。因此，本书将按标签在文档中的结构顺序和功能类型对标签进行分类和讲解。按照这样的分类标准，可以将HTML5标签划分成自上而下的树状结构。上层为文档结构标签，它包括＜html＞（文档）标签、＜head＞（头部）标签和＜body＞（主体）标签；中层为内容结构标签，它包括＜head＞（页头）标签、＜main＞（主要内容）标签、＜footer＞（页脚）标签等；下层为头部功能标签和文档内容标签，它包括标题标签、元信息标签、资源链接标签、图片标签、文本标签、文本格式标签、超链接标签、列表标签、表格标签、表单标签、音视频标签、行内框架标签等。它还有一个用来注释内容的标签。HTML5标签的分类，如图2.2所示。
图2.2 HTML5标签的分类
HTML5的语法
HTML5标签的语法有两种，一种是标准标签（也称为双标签），一种是空标签（也称为单标签）。
（1）语法格式说明
①标准标签是最常见的标签类型，它由开始标签和结束标签组成，两个标签之间通常嵌套其他标签或者放置文本内容。它必须成对出现，也就是开始标签和结束标签缺一不可。
②开始标签以英文小于号“＜”开头，以英文大于号“＞”结尾，括号内放置标签名和属性，其中，标签名放置在前，属性放置在后，中间使用空格分开。
③结束标签以英文小于号和正斜杠“＜/”开头，以英文大于号“＞”结尾，括号内放置与开始标签同名的标签名。
④开始标签内书写的属性有两种，一种是必要属性，必须书写，否则标签的功能无法实现，比如：＜img＞标签如果不书写src属性将无法引入图片；另一种是可选属性，可根据需要选择使用，当然也可以不使用。属性与属性之间用空格符分开，之间使用一个空格符就好。如果属性之间使用了多个空格符，在HTML文档中显示为多个空格符，但是在浏览器中只会显示出一个空格符。
⑤属性由属性名和属性值两部分构成，属性名和属性值之间使用等号“=”相连，属性值放置在英文的引号“""”之内。
● 当属性内有多个属性值时，使用空格将各个属性值分开。例如：＜p class="a1 a2 a3"＞＜/p＞。
● 当属性值省略不写时，浏览器在解析时会自动使用默认属性值。例如：＜style＞＜/style＞等同于＜style type="text/css"＞＜/style＞。
● 当属性值与属性名相同，并且只有这唯一的一个属性值时，属性可以简写为属性名。例如：＜input type="text"required="required"＞等同于＜input type="text"required＞。
● 属性值可以为空值，也就是在英文的双引号“""”里面可以不写属性值或者写空格符“ ”。它代表此属性未定义值或者使用属性的默认值。
● 当属性值为长度值时，可以省略单位。当属性值为百分比值时，不能省略百分号“％”。例如：＜p width="100"＞＜/p＞或者＜p width="60％"＞＜/p＞。
⑥在书写标签时建议使用英文的小写字母，不要使用英文的大写字母，更不要大小写字母混合使用。
（2）使用案例
在浏览器中显示的效果如图2.3所示。
图2.3 使用案例的显示效果
（1）语法格式说明
①空标签只有开始标签，没有结束标签，标签无法也不能嵌套其他标签或者放置文本内容。所以不能书写成：＜br＞＜/br＞。
②空标签的书写方法与标准标签的开始标签书写格式相同。
③在HTML5中虽然可以运行以前版本的HTML标签，例如：＜br/＞、＜br/＞，但不建议这么书写。
④常用的空标签有：＜meta＞、＜link＞、＜base＞、＜img＞、＜br＞、＜hr＞、＜embed＞和＜input＞等。
（2）使用案例
在浏览器中显示的效果为画出一道横线，如图2.4所示。
图2.4 空标签的显示效果
（1）语法格式说明
①注释标签用来注解源代码的内容或者给文档添加脚本。当它注解内容时，注释的内容只会在源代码中显示，不会在浏览器中显示；当用它添加脚本时，如果浏览器不支持书写的脚本，脚本不会执行，也不会显示在浏览器中。
②注释的内容通常写在需要注解的代码前面。它可以单行书写，也可以多行书写，多行书写时使用回车键换行。
③注释标签左侧以英文小于号、感叹号和两个减号“＜！--”开始，中间书写注解内容，右侧以两个减号和大于号“--＞”结束。
④注释标签不建议和注释的内容紧挨在一起书写，之间最好留一个空格的间距。
（2）使用案例
以前版本的HTML标签在书写时，经常使用自定义的标签名称来定义文档的结构和文本的内容。虽然这样也可以实现文档的功能，但是在书写时需要人为地给标签添加一个自定义的标签语义属性，这样使用起来不仅费时费力，还使标签的语义五花八门，也不便于搜索引擎和浏览器的理解。例如：以前经常使用块标签＜div＞和行内标签＜span＞来自定义网页的布局和文本的结构。
自从HTML5标准制定成型以后，虽然增加了很多标签，但是每一个HTML5标签都有自己明确的用途和特定的功能，每一个标签也都能更恰当地表达出自己的语义、更好地体现出页面的内容与结构、更容易被搜索引擎收录、更容易让屏幕阅读器读出网页中的内容和被更多的浏览器和网络设备支持，所以在使用标签时，不要随意选择标签，更不要不使用标签直接书写文字和内容，应按照标签的功能和语义合理选择标签使用。
HTML5标签的显示模式
显示模式是指标签在浏览器中显示出的状态，除了头部功能标签以外，每个标签都有自己默认的显示模式。显示模式的种类很多，但常用的显示模式有三种，可以分为块标签、行内标签和行内块标签，如图2.5所示。
块标签，也称为块级元素。它的主要功能是布局页面和承载内容。它的特点是无论标签中是否有内容，在浏览器中都独自占一行显示，并且标签所占区域的宽高值可以通过设置改变。在HTML5标签中，可以将块标签分为内容结构块标签和文档内容块标签。内容结构块标签有：＜header＞页头标签、＜nav＞导航标签、＜main＞主要内容标签、＜article＞独立内容标签、＜section＞区块内容标签、＜aside＞周边内容标签、＜footer＞页脚标签、＜hgroup＞标题分组标签、＜div＞标签等；文档内容块标签有：＜h1＞到＜h6＞标题标签、＜p＞段落标签、＜hr＞水平线标签、＜pre＞预格式文本标签、＜blockquote＞大段引用标签、＜q＞小段引用标签、＜address＞地址标签、＜ol＞有序列表标签、＜ul＞无序列表标签、＜li＞列表项标签、＜dl＞自定义列表标签、＜table＞表格标签、＜tr＞表格的行标签、＜form＞表单标签、＜option＞标签、＜figure＞流内容分组标签、＜audio＞音频标签、＜video＞视频标签等。
图2.5 HTML5标签的显示模式
行内标签，也称为行内元素。它的主要功能是承载内容和给内容添加语义。它的特点是在连续书写多个行内标签并且页面中有足够的宽度空间时，元素可以与其他行内标签共享同行的空间，在浏览器中显示为一个元素挨着一个元素排列。行内标签所占的区域的宽度和高度值由标签中内容的宽高值决定，而不能通过设置改变。在HTML5标签中，可以将行内标签分为内容结构行内标签和文档内容行内标签。内容结构行内标签有：＜span＞行内标签、＜br＞标签等；文档内容行内标签有：＜i＞斜体文本标签、＜em＞强调文本标签、＜b＞粗体文本标签、＜strong＞重要文本标签、＜del＞删除文本标签、＜sub＞下标文本标签、＜sup＞上标文本标签、＜time＞日期/时间标签、＜small＞旁注标签、＜abbr＞缩写、＜a＞超链接标签、＜input＞输入控件标签、＜select＞下拉列表标签、＜textarea＞文本框标签、＜lable＞输入控件的标注标签等。
行内块标签，也称为行内块元素。它是一种比较特殊的标签，既有块标签的特点，也有行内标签的特点。它的特点是在连续书写多个行内块标签并且页面中有足够的宽度空间时，元素可以与其他行内块标签或者行内标签共享同行的空间，标签所占区域的宽高值也可以通过设置值改变，并且行内块标签都自带文本属性。带有文本属性的标签在代码中换行时会在标签之间自动添加一个空格的间隔。在HTML5标签中，可以将行内标签分为内容结构行内块标签和文档内容行内块标签。内容结构行内块标签有：＜iframe＞内联框架标签等；文档内容行内块标签有：＜img＞图片标签等。
当然，这些显示模式也不是不可改变的，它们可以通过CSS和JS强行转换，转换后的标签将失去原有的显示模式，而转化成新标签的显示模式。这里要注意一点，将非行内块标签转化为行内块标签时，一定要在标签中书写内容或者设置宽高值，否则会因为元素没有宽高值而无法显示。
HTML5标签的嵌套原则是按照内容模型来划分的，但是这种划分方法会导致有的类同时包含了多种显示模式的标签，不同显示模式的标签嵌套的原则也不相同，所以这里还是按照以前的显示模式来讲解标签的嵌套方法。通常嵌套的原则有以下两种情况：
这类标签有自己固定的嵌套格式，在使用时必须按它的格式书写，不能随意改变。比如：
①在列表标签中，＜ol＞有序列表标签和＜ul＞无序列表标签中要嵌套＜li＞列表项标签；＜dl＞自定义列表标签中要嵌套＜dt＞和＜dd＞列表项标签。
②在表格标签中，＜table＞表格标签中要嵌套表格布局标签或者＜tr＞表格行标签，在＜tr＞表格行标签内要嵌套＜th＞或者＜td＞表格单元格标签。
③在表单标签中，＜form＞表单标签中要嵌套其特有的输入控件标签和文本标签。
这类标签虽然没有固定的嵌套格式，但还是有一定的嵌套规律可循。比如：
①块级标签内可以嵌套不平级的块级标签，通常大层级块标签嵌套小层级块标签，小层级块标签嵌套非块级标签或者文字。
②行内标签内不可以嵌套块级标签，但是行内标签可以互相嵌套。
在使用嵌套时，合理使用嵌套可以使文档层次清晰、结构合理，也有助于开发人员的阅读、编写和查错，还有助于提高浏览器的渲染效率。所以如无必要，尽量少用嵌套，因为过多的嵌套会使文档结构复杂，不便于开发，还会降低浏览器的渲染效率。