下载掌阅APP，畅读海量书库
立即打开
HTML的全称是超文本标记语言，它包括一系列标签。通过这些标签可以将网络上的文档格式统一，使分散的互联网资源链接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。
超文本是通过超级链接将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找、检索信息提供方便。
HTML5 是互联网的新一代标准，被认为是互联网的核心技术之一。HTML5 在以前HTML4.01 的基础上进行的改进，HTML 5.1 于 2014 年 10 月由万维网联盟（W3C）完成标准制定。该版本推出了很多新功能，包括HTML和XHTML的标签，以及相关的API、Canvas等，同时HTML5 的图像img标签及svg也进行了改进，性能得到进一步提升。因此HTML5 是一个新版本的HTML语言，具有新的元素、属性和行为。
HTML5 表单是实现用户与页面后台交互的主要组成部分，HTML5 在表单的设计上功能更加强大。input类型和属性的多样性大大地增强了HTML可表达的表单形式，再加上新增加的一些表单标签，使得原本需要JavaScript来实现的控件，可以直接使用HTML5 的表单来实现，一些如内容提示、焦点处理、数据验证等功能，也可以通过HTML5 的智能表单属性标签来完成。
HTML5 的canvas元素可以实现画布功能，该元素通过自带的API结合使用JavaScript脚本语言在网页上绘制图形和处理，拥有绘制线条、弧线以及矩形，用样式和颜色填充区域，书写样式化文本，以及添加图像的方法，且使用JavaScript可以控制其每一个像素。HTML5 的canvas元素使得浏览器无须Flash或Silverlight等插件就能直接显示图形或动画图像。
HTML5 最大的特色之一就是支持音频、视频，通过＜audio＞、＜video＞两个标签来实现对多媒体中的音频、视频使用的支持，只要在Web网页中嵌入这两个标签，而无须第三方插件（如Flash）就可以实现音视频的播放功能。HTML5 对音频、视频文件的支持使得浏览器摆脱了对插件的依赖，加快了页面的加载速度，扩展了互联网多媒体技术的发展空间。
HTML5 引入Geolocation的API可以通过GPS或网络信息实现用户定位功能，定位更加准确、灵活。通过HTML5 进行定位，除了可以定位自己的位置，还可以在他人对你开放信息的情况下获得他人的定位信息。
HTML5 是专门为承载丰富的Web内容而设计的，并且无须额外插件；HTML5 是跨平台的，被设计为在不同类型的硬件（PC、平板、手机、电视机等）之上运行。HTML5 中最重要的 3 项技术是HTML5 核心规范、CSS（Cascading Style Sheets，层叠样式表）和JavaScript。这 3 项技术的作用如下：
●HTML5 核心规范定义用以标记内容的元素，并明确其含义；
●CSS用于控制标记过的内容呈现在用户面前的外貌；
●JavaScript用来操纵HTML文档的内容以及响应用户的操作。
HTML5 还引入了原生的多媒体支持（用于媒介回放的video和audio元素），并引入了可编程内容（用于绘画的canvas元素，必须用到JavaScript）和语义Web。HTML5 具有若干新特性：
●对本地离线存储更好的支持；
●新的特殊内容元素，比如article、footer、header、nav、section；
●新的表单控件，比如calendar、date、time、email、url、search。
不管是移动App还是仍然占重要地位的Web应用程序，越来越多的开发人员选择HTML5 技术。在企业的前端开发中，HTML5 的使用率也很高，因为HTML5 作为开发工具而言，具有灵活、语法规定较松散的特点，使开发更快捷、更轻松。
随着互联网全面的快速发展，现代的浏览器都已经支持HTML5。作为最前沿的Web技术，HTML5 持有canvas标签和多种选择的游戏开发引擎，也让游戏开发更便捷；同时它可以更丰富地展现页面，让用户体验得到极大提高。
HTML常用的基础标签包括超链接标签和表格类标签等。
＜a＞标签定义超链接，用于从一个页面链接到另一个页面。＜a＞标签最重要的属性是href属性，它指定链接的目标。在所有浏览器中，链接的默认外观如下：
●未被访问的链接带有下划线，而且是蓝色的；
●已被访问的链接带有下划线，而且是紫色的；
●活动链接带有下划线，而且是红色的。
表 2.1 超链接标签属性
表 2.2 超链接中target属性说明
语法：
实例 ：demo2_1_a_tag.html
运行结果如图 2.1 所示：
图 2.1＜a＞标签的运行结果
点击第一个链接，可以在本页面打开外部链接的指定网页；点击第二个链接，可以打开本项目内的网页。除了文字之外还能把图片作为链接，第三个链接就是一个logo图标，在网页中点击logo图标就可以跳转到目标网页。
表格类标签包括表格标签＜table＞、表格中的表头单元格标签＜th＞、表格中的行＜tr＞、表格中的单元＜td＞、表格标题标签＜caption＞、表格的表头标签＜thead＞、表格的页脚（脚注或表注）标签＜tfoot＞、表格主体（正文）标签＜tbody＞。
＜table＞标签定义HTML表格。HTML表格由table元素以及一个或多个tr、th或td元素组成，更复杂的HTML表格也可能包括caption、thead、tfoot以及tbody元素。其中，td或th可以使用下面的两个属性达到跨行或跨列的目的。
●表格跨行rowspan
●表格跨列colspan
实例 ：demo2＿2＿table＿tag.html
运行结果如图 2.2 所示。
图 2.2 ＜table＞标签的运行结果
需要注意，在早先发布的HTML规范中，＜br＞、＜hr＞、＜img＞等标记元素是无须“封闭自身”的，这就造成了HTML规范不严谨，所以后来出现了更规范的XHTML规范语言。在XHTML中，所有类似＜br＞这样的孤立标签都需要自行封闭，具体的做法就是在标签名字的后面跟个“/”。例如＜br/＞，逻辑上＜br/＞等价于＜br＞…＜/br＞，这样做的目的是尽量减少网页的代码量，同时保持逻辑严谨。
HTML常用的高级标签包括表单＜form＞标签、下拉列表＜select＞标签、多行文本框＜textarea＞标签和按钮＜button＞标签等。
＜form＞标签用于为用户输入创建HTML表单，用于向服务器传输数据。＜form＞标签是块级元素，其前后会产生折行。表 2.3 是＜form＞标签的属性。
表 2.3 ＜form＞标签的属性
续表
表 2.3 中的＜form＞标签的enctype属性用来指定将数据发到服务器时浏览器使用的编码类型。它一共有 3 种类型：
●application/x－www－form－urlencoded：窗体数据被编码为“名/值”对，即把表单数据转换成一个字串（类似于name1 ＝ value1＆name2 ＝ value2…），然后把这个字串追加到URL后面，用“？”分割，加载这个新的URL。这是标准的、默认的编码格式。
●multipart/form－data：窗体数据被编码为一条消息，页上的每个控件对应消息中的一个部分，用于一般文件的上传。
●text/plain：窗体数据以纯文本形式进行编码，其中不含任何控件或格式字符。
＜form＞标签能够包含＜input＞标签，用于搜集用户信息。根据＜input＞不同的type属性，可以变化为多种形态，比如文本字段、复选框、单选框、提交按钮等，它还可以包含menus、textarea、fieldset、legend和label元素。表 2.4 是＜input＞标签的属性，表 2.5＜input＞标签type的属性。
表 2.4 ＜input＞标签的属性
续表
表 2.5 ＜input＞标签type的属性
实例 ：demo2＿3＿form＿tag.html
运行结果如图 2.3 所示。
图 2.3 ＜form＞表单运行结果
由于表单标签使用广泛，可以说它是HTML使用频率很高的标签了。在HTML5 中表单有不少的新特性。
实例 ：demo2＿4＿form＿tag＿html5.html
运行结果如图 2.4 所示。
图 2.4 HTML5 新特性
＜select＞标签可创建单选或多选菜单，通常在网页中用来实现下拉菜单，用于表单下拉选择所需项。通常要选择如省、市、县、年、月等数据时，即可使用下拉菜单表单进行设置。
由＜select＞标签和＜option＞标签配合使用，其中＜select＞标签是下拉列表菜单标签，＜option＞标签是下拉列表数据标签，＜option＞还有value属性，是＜option＞的数据值（用于数据的传值）。其语法格式如下：
实例 ：demo2＿5＿select＿tag.html
运行结果如图 2.5 所示。
图 2.5 ＜select＞标签的运行结果
＜textarea＞标签定义多行输入字段（文本域），是多行纯文本编辑控件，用户可在其文本区域中写入文本。文本区域中可容纳无限数量的文本，其中的文本的默认字体是等宽字体。可以通过cols和rows属性来设置textarea的大小，不过更常用的方式是使用CSS的height和width属性设置。
实例 ：demo2＿6＿textarea＿tag.html
运行结果如图 2.6 所示。
图 2.6 ＜textarea＞标签的运行结果
需要注意，＜textarea＞＜/textarea＞开始结束标签要放在一行，否则部分浏览器会出现文本框左边不能编辑的现象。
＜button＞标签定义一个按钮，在该标签中可以放置一些内容（文本、图像等），这是该标签与使用＜input＞标签创建的按钮之间的不同之处。＜input＞标签也可以用来定义按钮，但它是一个空标签（没有元素内容），不能放置元素内容，因此它的功能没有＜button＞标签强大。所以，＜button＞标签与＜input type ＝＂ button＂＞相比，提供了更为强大的功能和更丰富的内容。＜button＞与＜/button＞标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。例如，可以在按钮中包括一个图像和相关的文本，用它们在按钮中创建一个吸引人的标记图像。
实例 ：demo2＿7＿button＿tag.html
运行结果如图 2.7 所示。
图 2.7 ＜button＞标签的运行结果
需要注意，＜button＞标签功能虽然强大，但是在＜form＞中建议使用＜input＞标签来创建按钮，因为在＜form＞中的＜button＞标签，不同的浏览器可能提交不同的按钮值。
同时也要注意，在实际应用中经常出现以下情况，在＜form＞表单中，用＜a＞标签来实现不用于提交的按钮，原因是＜a＞标签在IE各浏览器下的兼容性好，而＜input＞标签的伪类选择器用CSS在IE各浏览器下体现不出来；另外，＜a＞标签可以控制行高，＜input＞标签在各浏览器参差不齐，对齐不太好控制。
为了更好地处理互联网应用，HTML5 添加了很多新元素及功能，比如图形绘制、多媒体内容、更好的页面结构、更好的形式处理等。
HTML5 提供了播放音频文件的标准，即使用＜video＞标签，controls提供了播放、暂停和音量控件来控制视频，也可以使用DOM操作来控制视频的播放暂停，如play（）和pause（）方法。同时＜video＞标签也提供了width（宽度）和height（高度）属性来设置控制视频的尺寸，所需的视频空间会在页面加载时保留这两个属性。如果没有设置这些属性，浏览器就无法在加载视频时保留特定的空间，页面就会根据原始视频的大小而设定。
＜video＞标签支持多个＜source＞标签，该标签可以链接不同的视频文件，浏览器将使用第一个可识别的视频格式文件，目前＜video＞标签支持两种视频格式文件：MP4 和WebM格式。
HTML5 提供了播放音频文件的标准，即使用＜audio＞标签，＜audio＞元素允许使用多个＜source＞标签，该标签可以链接不同的音频文件，浏览器将使用第一个可支持的音频文件，目前＜audio＞标签支持三种音频格式文件：MP3、WAV和OGG格式。
实例 ：demo2＿8＿video＿audio＿tag.html
程序运行如图 2.8 所示。
图 2.8 ＜video＞和＜audio＞标签的运行结果
HTML5 提供了若干语义化标签，通过标签名就能判断出该标签内容。比如＜header＞、＜footer＞、＜article＞、＜section＞、＜nav＞、＜aside＞、＜hgroup＞等都是HTML5 新增的语义化区块标签。和传统HTML文档中书写方式的标签相比，使用这些标签的好处是使得HTML文档结构层次清晰、规范、可读性好，有利于代码编写和开发。
实例 ：demo2＿9＿semantization＿tag.html
运行结果如图 2.9 所示。
图 2.9 语义化标签的运行结果
在实际操作中，采用＜div＞标签来布局整个最外层部分，采用＜section＞标签来定义内部的章节。从语法上来说，也可以用＜section＞标签来代替＜div＞标签，但是通常不建议使用＜section＞标签来代替＜div＞标签进行布局。通常采用＜nav＞标签进行导航。
另外就是＜div id＝ bodies＞的区域内的具体章节的定义，因为涉及内部章节，所以可以采用＜section＞标签来定义。采用若干个＜section＞标签来定义若干个章节，而每个章节的内部又都是一个＜article＞标签，它是描述有关part的具体文章；每个＜article＞内部，有时候文章的结构又会有嵌套关系，那么这个被嵌套的区域就可以采用＜section＞标签来表示整个文章内的又一个分节。所以，如果仍然采用＜div＞标签的话，在语义上就显得很不合适。
还有一点需要说明，使用了这些语义化标签和不使用这些标签，看上去可能效果差不多，导航等并没有显示出应该有的状态，这只是HTML在内容上的显示效果，通常语义化标签最终还是需要和CSS相结合，对网页进行美化。因此使用语义化标签最终目的还是使得HTML文档清晰、规范，有助于代码开发维护。