html5 新特性，新标签

一、HTML5 概述

1.1、什么是 HTML5

HTML5 是HTML最新的修订版本（超文本标记语言的第五次重大修改），2014年10月由万维网联盟 （W3C）完成标准制定。

HTML5 的设计目的是为了在移动设备上支持多媒体。

HTML5 简单易学。

HTML5 是下一代 HTML 标准。

HTML，HTML 4.01的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。

HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。

HTML5 中的一些有趣的新特性：

• 用于绘画的 canvas 元素
• 用于媒介回放的 video 和 audio 元素
• 对本地离线存储的更好的支持
• 新的特殊内容元素，比如 article、footer、header、nav、section
• 新的表单控件，比如 calendar、date、time、email、url、search

1.2、将 HTML5 元素定义为块元素

HTML5 定了 8 个新的 HTML 语义（semantic） 元素。

所有这些元素都是 块级 元素。 为了能让旧版本的浏览器正确显示这些元素，你可以设置 CSS 的 display 属性值为 block:

header,section,footer,aside,nav,main,article.figure{

display:block;

}

1.3、为 HTML 添加新元素(自定义标签)

你可以为 HTML 添加新的元素。

该实例向 HTML 添加的新的元素，并为该元素定义样式，元素名为 <myHero>

<myHero>我的第一个新元素 </myHero>

1.4、HTML5语义化

在HTML5添加新标签的时候，提出了一个关键词 “语义”。

• 语义= 意义
• 语义元素 = 有意义的元素

一个语义元素能够清楚的描述其意义给浏览器和开发者。

无语义 元素实例：<div>和<span> - 无需考虑内容.

语义元素实例：<form>,<table>,and<img>- 清楚的定义了它的内容.

HTML5新标签的优点:

• 更注重于内容而不是形式：
• 之前的标签更注重于怎么把内容显示到页面中，新标签更加容易明显的 让人明白存放的是什么东西；
• 对人的友好：更加的语义化，高度的描述性，更加的直观，增加代码的可读性；
• 对计算机的友好：浏览器更容易解析，搜索引擎更容易抓取文档内容，之前的定义区块，都是使用 div结合id和class使用，会出现各种各样的命名；现在定义的新标签更规范；
• 代码更加的简洁；

1.5、新语义元素

HTML5 添加了很多语义元素如下所示：

标签	描述
<article>	定义页面独立的内容区域。
<aside>	定义页面的侧边栏内容。
<bdi>	允许您设置一段文本，使其脱离其父元素的文本方向设置。
<command>	定义命令按钮，比如单选按钮、复选框或按钮
<details>	用于描述文档或文档某个部分的细节
<dialog>	定义对话框，比如提示框
<summary>	标签包含 details 元素的标题
<figure>	规定独立的流内容（图像、图表、照片、代码等等）。
<figcaption>	定义<figcaption> 元素的标题
<footer>	定义 section 或 document 的页脚。
<header>	定义了文档的头部区域
<mark>	定义带有记号的文本。
<meter>	定义度量衡。仅用于已知最大和最小值的度量。
<nav>	定义导航链接的部分。
<progress>	定义任何类型的任务的进度。
<ruby>	定义 ruby 注释（中文注音或字符）。
<rt>	定义字符（中文注音或字符）的解释或发音。
<rp>	在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。
<section>	定义文档中的节（section、区段）。
<time>	定义日期或时间。
<wbr>	规定在文本中的何处适合添加换行符。

语义化标签的使用：

·<!-- 头部 -->
 <header>
       <ul>
        <li><a href="#">这是头部</a></li>
       </ul> 
    </header>
<!-- 导航栏 -->
<nav>
    <ul>
        <li><a href="#">导航1</a></li>
        <li><a href="#">导航1</a></li>
        <li><a href="#">导航1</a></li>
        <li><a href="#">导航1</a></li>
    </ul>
</nav>.......·

1.5、HTML5已移除的元素

<acronym> ：定义首字母缩写,HTML5 中不支持<acronym>标签。请使用 标签代替

<basefont> ：规定页面上的默认字体颜色和字号：

<big> ：呈现大号字体效果

<dir> ：定义目录列表,类似于ul和ol

<center>：对其所包括的文本进行水平居中。

<font> ：规定文本的字体、字体尺寸、字体颜色。

<frame> ：定义 frameset 中的一个特定的窗口（框架）

<frameset> ：可定义一个框架集。

<noframes> ：可为那些不支持框架的浏览器显示文本。noframes 元素位于 frameset 元素内部。

<strames> ：可定义加删除线文本定义。

<tt> ：呈现类似打字机或者等宽的文本效果。

二、HTML5新布局标签

许多现有网站都包含以下HTML代码：<div id="nav"> ， <div class="header">，或者 <div id="footer">,来指明导航链接，头部，以及尾部。

首先要清楚一个概念，HTML并不是用来写页面样式的，而是用来表示一个网页的基本架构的，样式 用CSS来实现。

HTML5除了提出很炫的新效果以外还加强了语义化结构

HTML5新增的还有article、nav、header、footer…等等等，其实现效果都是和div一样没有效果，但是 合理使用却能让页面结构更加清晰有逻辑。

如果了解H5之前的HTML，会发现之前页面布局完全就是使用的div+css,但是div是不能滥用的,只能用来 做整体的布局，细节部分还是要用其他标签，一方面程序可读性和维护性加强，另一方面，可以用下级 选择器来写样式，减少了class和id的命名，可以精简网页的结构；而且语义化结构 有条理才能让搜索引 擎更加友好。

HTML5 提供了新的语义元素来明确一个Web页面的不同部分:

<header>: 头部标签

<nav>: 导航栏标签

<article>: 文档、页面 独立的、完整的 类型标签

<section>: 定义文档中的章节类型标签

<aside>:定义页面主区域内容外的内容

<footer>: 文档底部区域

2.1、HTML5 header 元素

<header>元素描述了文档的头部区域。

<header> 元素主要用于定义内容的介绍展示区域。

在页面中你可以使用多个<header>元素(文档头、独立内容头)。

2.2、HTML5 nav元素

<nav>:标签定义导航链接的部分。

<nav>元素用于定义页面的导航链接部分区域，但是，不是所有的链接都需要包含在<nav>元素中！

<nav> <a href="">前端</a> <a href="">HTML</a> <a href="">css</a> <a href="">JavaScript</a> </nav>

2.3、HTML article元素

<article>标签定义独立的内容

article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。它可以是一篇 博客或报刊中的文章、一篇论坛帖子、一段用户评论或独立的插件，或其他任何独立的内容。除了内容 部分，一个article元素通常有它自己的标题（一般放在一个header元素里面），有时还有自己的脚注。

注：article元素是可以嵌套使用的，内层的内容在原则上需要与外层的内容相关联。例如，一篇博客文 章中，针对该文章的评论就可以使用嵌套article元素的方式；用来呈现评论的article元素被包含在表示整 体内容的article元素里面。

2.4、HTML section元素

<section>标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。

从字面理解就是区块、部分的意思，相对于article元素更加广泛，每个区块都可以使用，比如页面里的 导航菜单、文章正文、文章的评论等。

• section元素用于对网站或应用程序中页面上的内容进行分块，section元素的作用是对页面上的内 容进行分块，或者说对文章进行分段；
• 一个section元素通常由内容及其标题组成。通常不推荐为那些没有标题的内容使用section元素，
• section元素并非一个普通的容器元素；当一个内容需要被直接定义样式或通过脚本定义行为时，推 荐使用div而非section元素；
• 如果article、nav、aside元素都符合某条件，那么就不要用section元素定义； section元素中的内容可以单独存储到数据库中或输出到word文档中。

2.5、HTML5 aside元素

<aside> 标签定义页面主区域内容之外的内容（比如侧边栏）。

aside 标签的内容应与主区域的内容相关。

2.6、HTML5 footer元素

<footer>元素描述了文档的底部区域.

<footer>元素应该包含它的包含元素

一个页脚通常包含文档的作者，著作权信息，链接的使用条款，联系信息等

三、HTML新表单元素

HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。

控件名称	type属性	描述
电子邮箱	email	包含 e-mail 地址的输入域(有校验)，
拾色器	color	color 类型用在input字段主要用于选取颜色 选择你喜欢的颜色
日期字段	date datetime datetime-local month week time	定义日期字段：包含年月日 定义日期字段：（UTC 时间）(仅opera支持) 定义日期字段：包含年月日时分（无时区）定义日期：年月 定义年中的周数 定义时间
数值框	number	输入类型用于包含数字值的输入字段，可以设置可接受数字的限制。 使用min属性和max属性设置最小和最大值 step设置数字间隔 如果step=“3” ,那么数值间隔是3
数值滑块空间	range	用于应该包含一定范围内数字值的输入域。。 range 类型显示为滑动条。 使用min属性和max属性设置最小和最大值,step设置数字间隔
搜索框	search	用于搜索字段，比如站内搜索或谷歌搜索等。
电话号码框	tel	定义输入电话号码字段,但是不会进行校验
URL地址	url	包含 URL 地址的输入字段。会在提交表单时对 url 字段的值自动进行验证。

email自带校验功能 要在表格中输入@符号，如果没有输入规定的格式会报错

date 定义日期，在不同浏览器内核解析，默认显示效果会有不同。

search 用来搜索，跟文本框的区别是后面有×号，可以清除文本框中输入的内容。

tel :电话号码可以定义手机号码长度，在不设置request标签 提交不会进行校验。

注意:并不是所有的主流浏览器都支持新的input类型，不过您已经可以在所有主流的浏览器中使用它们 了。即使不被支持，仍然可以显示为常规的文本域。

3.2、HTML5新的表单控件

3.2.1、HTML5 detalist元素（重要 ）

<datalist>元素规定输入域的选项列表。

<datalist>属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时， 浏览器应该在该域中显示填写的选项：

使用 <input> 元素的list属性与 <datalist> 元素绑定。

datalist 表单中h5新属性
<input type="text" name="list" list="mylist">
<datalist id="mylist">
<option value="cad">cad</option>·

​ <option value="html">html</option>

</datalist><br>

效果图如下：

3.3.1、form / input autocomplete 属性

autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。

当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。

提示: autocomplete 属性有可能在 form元素中是开启的，而在input元素中是关闭的。

注意：autocomplete 会根据浏览器设置进行显示 ，如下图：可以查看浏览器设置 点击个人设置可以查看

点击下面按钮可以自由进行设置

当浏览器上面设置打开情况之下，也可以在页面进行设置开关，autocomplete 设置on 和off 进行设置。如下

<form action="" autocomplete="on">
姓名:<input type="text" name="fname"><br>
邮箱: <input type="email" name="email" autocomplete="off"><br>

`

3.3.2、form novalidate 属性

novalidate 属性是一个 boolean(布尔) 属性.

novalidate 属性规定在提交表单时不应该验证 form 或 input 域。

3.3.3、input placeholder 属性

placeholder 属性提供一种提示（hint），描述输入域所期待的值。

简短的提示在用户输入值前会显示在输入域上。

注意: placeholder 属性适用于以下类型的 <input> 标签：text, search, url, tel, email 以及 password。

四、HTML5多媒体标签

4.1、HTML5 Video(视频)

很多站点都会使用到视频，HTML5 提供了展示视频的标准。

直到现在，仍然不存在一项旨在网页上显示视频的标准。

今天，大多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。 HTML5 规定了一种通过 video 元素来包含视频的标准方法。

4、2.视频的相关属性

属性	值	描述
muted	muted	如果出现该属性，视频的音频输出为静音。
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。
controls	controls	添加播放控制及音量控制功能栏。
height	px	指定播放器的高度，以pixel为单位。
loop	loop	如果指定，视频将重复播放。
poster	url	指定视频的预览图
preload	auto metadata none	如果指定，视频会在加页面加载过程中被加载。当autoplay被指定时，会被忽略。 auto - 当页面加载后载入整个音频 meta - 当页面加载后只载入元数据 none - 当页面加载后不载入音频
src	URL	目标视频的URL
width	px	指定播放器的宽度，以pixel为单位

注意：自动播放在谷歌内核中可能不支持，加一个静音就可以自动播放。

4、3音频标签

<audio>目前, 视频元素支持三种音频格式文件: MP3, Wav, 和 Ogg

注意：音频标签的属性与视频标签相同，不过要写音频标签的话必须要加controls