零基础必看！HTML5从入门到精通-HTML5标签与属性

HTML5历史

HTML5草案的前身是Web Applications 1.0，于2004年由Web超文本应用技术工作组（Web Hypertext Application Technology Working Group）-WHATWG提出，2007年被W3C采纳，并成立新的 HTML 工作团队。

HTML 5 的第一份正式草案于2008年1月22日公布。HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备对部分 HTML5 支持。

2012年12月17日，万维网联盟（W3C）正式宣布HTML5规范已经正式定稿。根据W3C的发言稿称：“HTML5是开放的Web网络平台的奠基石”。

2013年5月6日， HTML 5.1正式草案公布。该规范定义了第五次重大版本，第一次要修订万维网的核心语言超文本标记语言（HTML）。这个版本不断推出新功能，帮助Web应用程序的作者努力提高新元素的操作性能。

2014年10月29日，万维网联盟宣布经过近八年的艰辛努力，HTML5标准规范最终制定完成，并已公开发布。

新增语法

HTML5在之前的HTML语法的基础上进行了相应的改进，下面将详细讲解五种改进的语法方式。

1.DOCTYPE文档及编码

HTML5模式下的DOCTYPE文档写法非常简单，只需要通过一句代码即可实现。具体示例如下。

<!DOCTYPE html>

比起HTML4.01和XHTML2.0时的DOCTYPE文档写法。HTML5模式下的DOCTYPE文档写法更简便。除了文档简便，其编码写法也得到了简化，只需要指定编码方式即可。具体示例如下。

2. 忽略元素大小写

XHTML2.0对大小写要求非常严格，规定所有标签和属性都必须小写。在HTML5语法中，大小写没有那么的严格，忽略元素大小写。具体示例如下。

<body>

</body>

以上写法在HTML5中都是正确的，但这里要注意，按照W3C组织规定的标准，应尽量采用统一小写的方式来操作HTML标签和属性。

3. 属性布尔值

HTML4.01和XHTML2.0中，标签属性必须完整展示，即属性名和属性值同时存在。如设置复选框的选中状态，具体示例如下。

在HTML5语法中，可以只写属性名。当只写属性名时，默认属性值为true。如果不写此属性，默认值是false。true和false分别代表真和假，属于数据类型中的布尔值类型。具体示例如下。

4. 属性省略引号

HTML5语法中对操作属性值中的引号没有太多的要求，可以采用双引号，也可以采用单引号，甚至可以不写引号。具体示例如下。

以上属性值的写法都是正确的，但是要注意一点，当属性值中间有空格隔开时，需要加上引号。具体示例如下。

同样根据W3C组织规定的规范标准，应尽量给属性名添加引号且最好为双引号，这也是行业中一直遵守的规范写法。

5. 简化标签

HTML4.01和XHTML2.0中，单标签必须用斜杠进行闭合操作，如input标签写法。具体示例如下。

在HTML5语法中，对于单标签不需要闭合操作，直接书写单标签即可，在前面章节中也是这样操作的，这是W3C推荐的标准写法。具体示例如下。

HTML5新增标签

在HTML5新规范中，新增了一些便于使用的标签，新标签可分为结构标签、媒体标签、表单控件标签和其他标签四类。下面详细讲解这些新标签。

结构标签

在HTML5结构标签出现之前，当写页面中的布局结构时，都是采用<div>标签来实现。现在可以采用HTML5提供的结构标签进行布局，而且这些结构标签通常都带有语义化，因此更有利于优先搜索引擎，这是W3C推荐的方式，未来将通过逐步利用结构标签来取代<div>标签的方式实现页面布局。接下来讲解HTML5中新增的结构标签。

1. <header>、<footer> 标签

<header>和<footer>标签用于描述网页结构中的页眉部分和页脚部分，页眉通常包含布局中的头部信息，页脚通常包含布局中的尾部信息。

2. <hgroup>、<nav> 标签

<hgroup>标签用于标题组合，即一个标题和一个子标题，或者标语的组合。<nav>标签用于页面的导航结构部分。

3. <article>、<aside> 标签

<article>标签用于描述独立的内容部分，可包含其他语义化标签。<aside>标签定义用于<article>标签以外的内容，一般用于辅助信息或侧边栏。

4. <section>、<figure> 标签

<section>标签用于描述页面上的版块，划分页面上的不同区域。<figure>标签用于描述图像或视频，其包含一个子标签<figcaption>用于描述图像或视频的标题部分。

媒体标签

媒体标签用于描述网页中的音频或视频元素，可以在网页中添加音频或视频文件，并增加一些与音频、视频有关的属性和方法，下面分别来学习音频标签和视频标签。

1. <audio>音频标签

<audio>音频标签通过src属性来添加音频的地址，支持常见音频格式，如MP3、OGG等。默认不显示音频的控件，通过controls属性对控件进行显示。

默认情况下，音频的初始状态是暂停状态，通过autoplay属性可进行自动音频播放；在默认情况下，音频播放结束就会停止，如果想循环播放可通过添加loop属性来实现。

2. <video>视频标签

<vido>视频标签与<audio>音频标签类似，通过src属性添加视频的地址，支持常见视频格式，如MP4、OGV等。同样需要controls属性添加和显示播放控件。

<video>视频标签同样也支持autoplay属性和loop属性。而且可添加width、height属性来控制控件的尺寸。

除了上边介绍的<audio>和<video>操作外，还会涉及到很多与音频、视频有关的JavaScript接口，通过JavaScript接口的操作可实现自定义控件，可以实现更加美观和统一的播放器效果。由于本教程不涉及JavaScript部分，这里不进行展开讨论。

表单控件标签

在介绍新表单控件前，先来回顾一下，在前面章节中介绍的表单控件<input>，通过设置type属性可以展示不同的表单控件，如输入框、密码框、单选按钮、复选框、“上传”按钮、“提交”按钮等。在HTML5规范中对<input>标签的type属性值进行扩展，添加新的表单控件元素，下面进行详细讲解。

1. email、url、tel值

当<input>标签的type属性值为email时，表示用于邮箱地址的文本字段。当提交的内容不是正确的email值时，默认会有提示信息产生。

当<input>标签的type属性值为url时，表示用于链接地址的文本字段。当提交的内容不是正确的url值时，默认会有提示信息产生。

当<input>标签的type属性值为tel时，表示用于电话号码的文本字段。当输入错误值时不会产生提示信息，在移动端中会展现对应数字键盘。如图所示。

图手机上展现数字键盘

当<input>标签的type属性值为url时，表示用于链接地址的文本字段。如果提交的内容不是正确的url值时，默认会有提示信息产生。

2. range、color值

当<input>标签的type属性值为range时，展示为滑块拖拽的效果。当<input>标签的type属性值为color时，展示为获取颜色值的效果，当单击颜色按钮时，会弹出获取颜色的面板层。

3． search、number值

当<input>标签的type属性值为search时，表示用于搜索的文本字段。与文本输入框效果相似，当输入搜索内容时，会显示带有关闭按钮的效果。

当<input>标签的type属性值为number时，表示用于微调数字的文本字段。在输入框中会显示带有上下单击按钮的效果。

4． date、week、month、time值

当<input>标签的type属性值为date、week、month、time时，表示用于日期和时间的文本字段。这几个值都提供带有单击选择框的效果。

下面介绍一些HTML5表单控件里新添加的属性操作。

（1）placeholder属性

placeholder属性用来规定帮助用户填写输入字段的提示信息。

（2）autocomplete属性

autocomplete属性用来规定是否启用自动完成功能的表单，默认值为on，规定启用自动完成功能；off值规定禁用自动完成功能。启动自动完成功能即当再次输入提交过的内容时会显示自动完成提示层。禁止自动完成即不会显示自动完成提示层。

（3）autofocus属性

autofocus属性规定加载完页面输入框会自动获取光标。

（4）required属性

required属性规定在提交时输入框的内容不能为空，如果内容为空，单击提交按钮时会显示提示信息层。

（5）pattern属性

pattern属性规定输入字段值的模式或格式。如 pattern="[0-9]" 表示输入值必须是0 ~9之间的数字。当输入的字段如规定不一致时，会显示提示信息层。

其他标签

1. <mark>标签

<mark>标签用于描述突出显示部分的文本。默认情况下会添加黄色的背景色。

2. <progress>标签

<progress>标签用于定义运行中的进度或进程。一般需要配合JavaScript来展示进度条的动态效果。有两个可选的属性，max属性表示完成的值，value属性表示当前的值。

3． <time>标签

<time>标签用于描述日期或时间，其datetime属性定义元素的日期和时间，如果未定义该属性，则必须在元素的内容中规定日期或时间。显示效果与普通的<span>标签相同，<time>属于语义化标签，没有默认样式。

4．<ruby>标签

<ruby>标签用于定义注解，一般用在中文注音中。其有一个配套的<rt>子标签，用来添加注解。

5．<canvas>标签

<canvas>标签用于定义图形，例如图表和其他图像。通常利用<canvas>标签绘制一些HTML不能绘制的图形，但<canvas>标签需要配合JavaScript才能使用。这里简单了解即可。

6．<details>标签

<details> 标签用于描述文档或文档某个部分的细节。与 <summary> 标签配合使用可以为details定义标题。标题是可见的，用户点击标题时，会显示出 details的内容。

7．<datalist>标签

<datalist>标签定义选项列表，与input元素配合使用，定义input可能的值。datalist及其选项不会被显示出来，仅仅是合法的输入值列表。需使用input元素的list属性来绑定datalist。这种方式的好处是增强了用户体验，同时可提示用户完成输入。

8．<output>标签

<output> 标签用于定义执行计算后的显示结果，配合简单的JavaScript进行操控。在<form>表单上定义一段JavaScript操作用来计算结构。在<output>标签上定义一个for属性用于指定一个或多个相关的元素。

HTML5新增属性

HTML5除了新增标签还提供了新的标签属性，这些属性可以用在任意标签上。下面将详细介绍HMTL5新增属性。

data-*属性

固定与自适应混合布局是很常见的组合方式，如千锋官网的头部效果。data-*属性用于自定义属性，所谓data-*实际上是data-前缀加上自定义的属性名，使用这样的结构可以进行数据存放。使用data-*可以解决自定义属性混乱无管理的现状。

data-*设置在HTML标签上，页面中不显示任何数据，只能通过JavaScript的方式来获取数据。其设置示例如下。

hidden属性

hidden属性用于隐藏HTML标签与CSS的display属性值为none的效果相似，但它是通过属性隐藏，而不是样式隐藏。其设置示例如下。

spellcheck

spellcheck 属性规定是否对元素内容进行拼写检查。当输入的单词错误时，会出现下画线提示信息。

contenteditable属性

contenteditable属性规定是否可编辑元素的内容。设置contenteditable属性的HTML标签元素，当单击时可以进行文本编辑操作，与输入框的效果类似。

HTML5其他功能

HTML5新规范中提供了很多功能强大的特性，为开发者带来了极大的方便。大部分功能都需要配合JavaScript才能完成，这里只简单的介绍一些便于使用的功能。至于如何更好地使用这些功能，需了解JavaScript语法后才可以彻底地掌握，这里不再进行深入讨论。

拖放文件

拖放是指对计算机中的文件或文件夹进行拖动处理，从而把文件移动到指定的位置。这些操作在HTML5诞生之前只能在计算机上进行操作，而在HTML5新规范中可以把文件拖动到浏览器中进行操作。这样可以更加方便地进行计算机与浏览器之间的交互处理。如QQ邮箱的拖动文件上传的功能。实现HTML5拖动操作，利用的是JavaScript接口中的drag & drop这两个方法。