HTML5简介及新增标签
一、HTML5概述
1.1、什么是 HTML5
HTML5 是HTML最新的修订版本（超文本标记语言的第五次重大修改），2014年10月由万维网联盟（W3C）完成标准制定。
HTML5 的设计目的是为了在移动设备上支持多媒体。
HTML5 简单易学。
HTML5 是下一代 HTML 标准。
HTML，HTML 4.01的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。
HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。
1.2、HTML5 是如何起步的
HTML5 是 W3C 与 WHATWG 合作的结果，WHATWG 指 Web Hypertext Application Technology Working Group。
WHATWG 致力于 web 表单和应用程序（Application），而 W3C 专注于 XHTML 2.0。在 2006 年，双方决定进行合作，来创建一个新版本的 HTML。
HTML5 中的一些有趣的新特性：
-
用于绘画的 canvas 元素
-
用于媒介回放的 video 和 audio 元素
-
对本地离线存储的更好的支持
-
新的特殊内容元素，比如 article、footer、header、nav、section
-
新的表单控件，比如 calendar、date、time、email、url、search
1.3、HTML5 浏览器支持（重要）
现代的浏览器都支持 HTML5。最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。
此外，所有浏览器，包括旧的和最新的，对无法识别的元素会作为行内元素自动处理。
正因为如此，你应该 “教会” 浏览器处理 “未知” 的 HTML 元素。
1.3.1、将 HTML5 元素定义为块元素
HTML5 定了 8 个新的 HTML 语义（semantic） 元素。所有这些元素都是 块级 元素。
为了能让旧版本的浏览器正确显示这些元素，你可以设置 CSS 的 display 属性值为 block:
header, section, footer, aside, nav, main, article, figure {
display: block;
}
1.3.2、为 HTML 添加新元素(自定义标签)
你可以为 HTML 添加新的元素。
该实例向 HTML 添加的新的元素，并为该元素定义样式，元素名为 <myHero> ：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>为 HTML 添加新元素</title>
<script>
document.createElement("myHero")
</script>
<style>
myHero {
display: block;
background-color: #ddd;
padding: 50px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
<myHero>我的第一个新元素</myHero>
</body>
</html>
注:JavaScript 语句 document.createElement(“myHero”) 是为 IE 浏览器添加新的元素。
1.3.3、Internet Explorer 浏览器问题
你可以使用以上的方法来为 IE 浏览器添加 HTML5 元素，但是：
Internet Explorer 8 及更早 IE 版本的浏览器不支持以上的方式。
我们可以使用 Sjoerd Visscher 创建的 “HTML5 Enabling JavaScript”, " shiv" 来解决该问题：
html5shiv 是一个针对 IE 浏览器的 HTML5 JavaScript 补丁，目的是让 IE 识别并支持 HTML5 元素。
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
以上代码是一个注释，作用是在 IE 浏览器的版本小于 IE9 时将读取 html5.js 文件，并解析它。
注意：国内用户请使用国内静态资源库（Google 资源库在国内不稳定）：
<!--[if lt IE 9]>
<script src="https://cdn.bootcdn.net/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->
针对IE浏览器html5shiv 是比较好的解决方案。html5shiv主要解决HTML5提出的新的元素不被IE6-8识别，这些新元素不能作为父节点包裹子元素，并且不能应用CSS样式。
html5shiv.js 引用代码必须放在 <head>元素中，因为 IE 浏览器在解析 HTML5 新元素时需要先加载该文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>兼容性</title>
</head>
<body>
<!--
现代的浏览器都支持 HTML5。
最新版本的 Safari、Chrome、Firefox 以及 Opera 支持大部分 HTML5 特性。
Internet Explorer 9 将支持某些 HTML5 特性。
浏览器对无法识别的元素(标签)会作为行内元素自动处理
<hero>、<jeb>、<xxx>官方没有提供，但是符合标签语法规范，那么浏览器就当成标签来解析。
这几个标签都是行内标签
我们实际开发的时候，能不能自定义标签？可以，但是大可不必
老版本浏览器无法识别H5新的标签，那么就会当成自定义标签（行内元素）
你应该 **"教会"** 浏览器处理 **"未知"** 的 HTML 元素。
解决方法：
1、告诉老版本浏览器，这些标签都是什么类型。通过CSS样式设置元素的类型。
header, section, footer, aside, nav, main, article, figure都是H5里面提供的块级标签，老版本浏览器不识别，那么我们就告诉老版本浏览器怎么解析。
myHero、xxx、jeb都是自定义的标签，我们可以告诉浏览器怎么去解析。
该方式IE8及其更早的IE浏览器不支持该方式。
2、html5shiv 是一个针对 IE 浏览器的 HTML5 JavaScript 补丁，目的是让 IE 识别并支持 HTML5 元素。
-->
<!-- 浏览器对无法识别的元素(标签)会作为行内元素自动处理 -->
<wsh>ddd</wsh>
<zt>ddd</zt>
</body>
</html>
友情链接：https://www.bootcdn.cn/html5shiv/
1.4、HTML5语义化
在HTML5添加新标签的时候，提出了一个关键词 “语义”。
- 语义= 意义
- 语义元素 = 有意义的元素
一个语义元素能够清楚的描述其意义给浏览器和开发者。
-
无语义 元素实例：
<div>和<span>- 无需考虑内容. -
语义元素实例：
<form>，<table>，and<img>- 清楚的定义了它的内容.
HTML5新标签的优点:
-
更注重于内容而不是形式：之前的标签更注重于怎么把内容显示到页面中，新标签更加容易明显的让人明白存放的是什么东西；
-
对人的友好：更加的语义化，高度的描述性，更加的直观，增加代码的可读性；
-
对计算机的友好：浏览器更容易解析，搜索引擎更容易抓取文档内容，之前的定义区块，都是使用div结合id和class使用，会出现各种各样的命名；现在定义的新标签更规范；
-
代码更加的简洁；
1.5、HTML5特性
1.5.1、新语义元素
HTML5 添加了很多语义元素如下所示：
| 标签 | 描述 |
|---|---|
<article> | 定义页面独立的内容区域。 |
<aside> | 定义页面的侧边栏内容。 |
<bdi> | 允许您设置一段文本，使其脱离其父元素的文本方向设置。 |
<command> | 定义命令按钮，比如单选按钮、复选框或按钮 |
<details> | 用于描述文档或文档某个部分的细节 |
<dialog> | 定义对话框，比如提示框 |
<summary> | 标签包含 details 元素的标题 |
<figure> | 规定独立的流内容（图像、图表、照片、代码等等）。 |
<figcaption> | 定义 <figure> 元素的标题 |
<footer> | 定义 section 或 document 的页脚。 |
<header> | 定义了文档的头部区域 |
<mark> | 定义带有记号的文本。 |
<meter> | 定义度量衡。仅用于已知最大和最小值的度量。 |
<nav> | 定义导航链接的部分。 |
<progress> | 定义任何类型的任务的进度。 |
<ruby> | 定义 ruby 注释（中文注音或字符）。 |
<rt> | 定义字符（中文注音或字符）的解释或发音。 |
<rp> | 在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。 |
<section> | 定义文档中的节（section、区段）。 |
<time> | 定义日期或时间。 |
<wbr> | 规定在文本中的何处适合添加换行符。 |
1.5.2、HTML5 表单
新表单元素, 新属性，新输入类型，自动验证。
1.5.3、HTML5已移除的元素
<acronym>：定义首字母缩写,HTML5 中不支持 <acronym> 标签。请使用 标签代替
<basefont>：规定页面上的默认字体颜色和字号：
<big>：呈现大号字体效果
<dir>：定义目录列表,类似于ul和ol
<center>：对其所包括的文本进行水平居中。
<font>：规定文本的字体、字体尺寸、字体颜色。
<frame>：定义 frameset 中的一个特定的窗口（框架）
<frameset>：可定义一个框架集。
<noframes>：可为那些不支持框架的浏览器显示文本。noframes 元素位于 frameset 元素内部。
<strike>：可定义加删除线文本定义。
<tt>：呈现类似打字机或者等宽的文本效果。
<!-- acronym用来定义缩写，现在使用abbr来替代 -->
<acronym title="华杉科技">HS</acronym>希望你更好！
<!-- basefont: 规定页面上的默认字体颜色和字号，直接给html设置字体和颜色即可 -->
<basefont color="red" size="7">
<!-- big: 呈现大号字体效果 -->
<big>大号字体</big>
<!-- center: 对其所包括的文本进行水平居中。 -->
<center>文字居中</center>
<!-- font：规定文本的字体、字体尺寸、字体颜色 -->
<font color="yellow" size="5">我是font的内容</font>
<!--
frameset 可定义一个框架集
frame 定义 frameset 中的一个特定的窗口
noframes 可为那些不支持框架的浏览器显示文本。noframes 元素位于 frameset 元素内部。
-->
<!-- strike 可定义加删除线文本定义。目前使用del来实现删除文本 -->
<strike>删除文本</strike>
<!-- <tt>：呈现类似打字机或者等宽的文本效果。 -->
<tt>打印机字体</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><section><article><aside><figcaption><figure><footer>
2.1、HTML5 header 元素
<header>元素描述了文档的头部区域。
<header>元素主要用于定义内容的介绍展示区域。
在页面中你可以使用多个<header>元素(文档头、独立内容头)。
原来写一个页面，比如有头部和底部。我们都是定义一个div，只不过头部有一个class=header；尾部的div是class=footer；
现在html5出现以后，主张语义化标签。现在我们写样式的时候。选择器直接就写header就可以了。不需要这么写 div.header这样的好处是使得文档结构层次清晰。利于代码编写和开发；还有搜索引擎优化等等的好处。
<div class="header">
我是用div="header"定义的头部内容
</div>
<!-- 直接用header可以使代码更简单易懂，更容易被浏览器解析，有助于搜索引擎优化 -->
<header>
我是用header定义的头部内容
</header>
2.2、HTML5 nav 元素
<nav>标签定义导航链接的部分。
<nav>元素用于定义页面的导航链接部分区域，但是，不是所有的链接都需要包含在 <nav>元素中!
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>新布局标签</title>
<style>
nav a{
text-decoration: none;
color: black;
}
</style>
</head>
<body>
<nav>
<a href="">首页</a>
<a href="">京东超市</a>
<a href="">优惠券</a>
<a href="">京东生鲜</a>
<a href="">京东家电</a>
<a href="">品牌闪购</a>
</nav>
</body>
2.3、HTML5 article 元素
<article>标签定义独立的内容。
article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。它可以是一篇博客或报刊中的文章、一篇论坛帖子、一段用户评论或独立的插件，或其他任何独立的内容。除了内容部分，一个article元素通常有它自己的标题（一般放在一个header元素里面），有时还有自己的脚注。
注：article元素是可以嵌套使用的，内层的内容在原则上需要与外层的内容相关联。例如，一篇博客文章中，针对该文章的评论就可以使用嵌套article元素的方式；用来呈现评论的article元素被包含在表示整体内容的article元素里面。
<article>
<header>
<h1>标题</h1>
<p>时间</p>
</header>
<section>
内容内容内容内容内容内容内容内容内容内容<br>
内容内容内容内容内容内容内容内容内容内容<br>
内容内容内容内容内容内容内容内容内容内容 <br>
内容内容内容内容内容内容内容内容内容内容<br>
内容内容内容内容内容内容内容内容内容内容 <br>
内容内容内容内容内容内容内容内容内容内容 <br>
内容内容内容内容内容内容内容内容内容内容 <br>
内容内容内容内容内容内容内容内容内容内容
</section>
<article>
<header>
<h3>天使在人间的评论</h3>
<p>7月16日 03:10</p>
</header>
<p>内容内容内容内容内容内容内容内容内容内容</p>
</article>
<article>
<header>
<h3>天使在人间的评论</h3>
<p>7月16日 03:10</p>
</header>
<p>内容内容内容内容内容内容内容内容内容内容</p>
</article>
<article>
<header>
<h3>天使在人间的评论</h3>
<p>7月16日 03:10</p>
</header>
<p>内容内容内容内容内容内容内容内容内容内容</p>
</article>
</article>
2.4、HTML5 section 元素
<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
根据W3C HTML5文档: 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>元素应该包含它的包含元素
一个页脚通常包含文档的作者，著作权信息，链接的使用条款，联系信息等
文档中你可以使用多个 <footer>元素.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>尾部</title>
<style>
/* 尾部 */
.footer_div {
overflow: hidden;
background-color: #3D2D22;
clear: both;
}
.footer_div .footer-left_div,
.footer_div .footer-right_div {
float: left;
margin-top: 30px;
}
.footer_div .footer-left_div {
margin-left: 50px;
}
.footer_div .footer-right_div {
margin-left: 60px;
}
.footer_div .footer-left_div span {
color: white;
}
.footer_div .footer-left_div a,
.footer_div .footer-right_div a,
.footer_div .footer-last_div a {
margin: 0 10px;
font-size: 14px;
color: white;
text-decoration: none;
}
.footer-last_div {
overflow: hidden;
float: left;
margin-top: 30px;
margin-left: 65px;
margin-bottom: 30px;
}
.footer_div a:hover {
color: red;
}
</style>
</head>
<body>
<!-- 尾部 -->
<footer>
<div class="footer_div">
<div class="footer-left_div">
<a href="">品牌动态</a><span> |</span>
<a href="">生产经营资质</a><span> |</span>
<a href="">企业合作</a><span> |</span>
<a href="">发票申请</a><span> |</span>
<a href="">平台规则</a><span> |</span>
<a href="">帮助服务</a><span> |</span>
<a href="">联系我们</a><span> |</span>
</div>
<div class="footer-right_div">
<a href="">400-999-6665</a>
<a href="">WEIBO</a>
<a href="">WECHAT</a>
<a href="">京东商城</a>
</div>
<div class="footer-last_div">
<a href="">深圳市悦轩商城科技股份有限公司</a>
<a href="">粤CP备16039394号-6</a>
<a href="">京公网安备4403070200239</a>
<a href="">公司地址:深圳市龙岗区坂田街道布龙339鸿生源工业园A座5楼</a>
</div>
</div>
</footer>
</body>
</html>
2.7、HTML5 figure 和 figcaption 元素
<figure>标签规定独立的流内容（图像、图表、照片、代码等等）。
<figure>元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。
<figcaption>标签定义 <figure>元素的标题.
<figcaption>元素应该被置于 “figure” 元素的第一个或最后一个子元素的位置。
<figure>
<img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
<figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption>
</figure>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>新布局标签</title>
<style>
body {
margin: 0;
}
header {
height: 120px;
border: 1px solid rebeccapurple;
}
nav {
height: 40px;
width: 700px;
border: 1px solid black;
top: 60px;
right: 60px;
position: absolute;
}
ul {
/* 去除每行前面的标记 */
list-style: none;
padding: 0;
margin: 0;
}
li {
float: left;
line-height: 40px;
padding: 0 15px;
}
main {
height: 400px;
width: 1000px;
border: 1px solid red;
margin: 10px auto;
}
section {
height: 200px;
border: 1px solid black;
}
aside {
width: 50px;
height: 300px;
border: 1px solid red;
right: 0;
top: 200px;
position: fixed;
}
footer {
height: 100px;
border: 1px solid black;
}
</style>
</head>
<body>
<!--
H5之前布局标签只有div。
H5新增了8个语义化的布局标签。
新布局标签的用法：这些标签用法上和div一模一样，你可以认为他们是已经定义了名称div。
新布局标签的作用：
header：描述了网页文档的头部区域
nav：定义导航链接的部分
article：定义独立的内容
main: 用于指定文档的主体内容
section：定义文档中的节
aside：定义页面主区域内容之外的内容
footer：描述了文档的底部区域
figure：规定独立的流内容（图像、图表、照片、代码等等）
figcaption：定义<figure>元素的标题.
切记：我们所谓的布局标签，只是用来承载指定的内容，并放置到页面的指定位置。
header、head、thead：
head：定义网页结构的头部，用来定义网页的元信息。
header：定义网页内容的头部
thead：定义表格的头部
-->
<header>
<header>页面内容头部</header>
<nav>
<!-- 导航nav -->
<ul>
<li><a href="">导航nav</a></li>
<li><a href="">首页</a></li>
<li><a href="">京东超市</a></li>
<li><a href="">优惠券</a></li>
<li><a href="">京东生鲜</a></li>
<li><a href="">京东家电</a></li>
<li><a href="">品牌闪购</a></li>
</ul>
</nav>
</header>
<main>
<!-- 内容主题main -->
<section>
section主体部分一
</section>
<section>
section主体部分二
</section>
</main>
<aside>
侧边栏aside
</aside>
<footer>
<footer>页面内容尾部footer</footer>
</footer>
</body>
</html>
三、HTML5新表单元素
3.1、HTML5 新的 input 类型
HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。
| 控件名称 | type属性值 | 描述 |
|---|---|---|
| 电子邮箱 | 包含 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 字段的值自动进行验证。 |
注意:并不是所有的主流浏览器都支持新的input类型，不过您已经可以在所有主流的浏览器中使用它们了。即使不被支持，仍然可以显示为常规的文本域。
<body>
<!--
我们通过input标签的type属性，可以实现各种控件效果，H5之前type属性的值：
text、password、radio、checkbox、file、hidden、submit、reset、button
新的 input 类型（type的值）:
email：定义电子邮箱，有简单的校验
color：拾色器
日期相关：
date 定义年月日选择器
datetime-local 定义年月日时分选择器
month 定义年月
week 定义年中的周数
time 定义时分
number 定义数值框,有检验
range 数值滑块
无论是数值框还是数值滑块，都具有如下三个属性：
max 最大值
min 最小值
step 步长
search 搜索框
tel 电话号码框，没有校验
url url地址输入框，有简单的校验
-->
<form action="">
<p>
电子邮箱： <input type="email" name="email">
</p>
<p>
拾色器<input type="color" name="color">
</p>
<p>
年月日: <input type="date" name="date">
</p>
<p>
年月日时分: <input type="datetime-local" name="datetime-local">
</p>
<p>
年月: <input type="month" name="month">
</p>
<p>
年中的周数: <input type="week" name="week">
</p>
<p>
时分: <input type="time" name="time">
</p>
<p>
数值: <input type="number" name="number">
</p>
<p>
数值滑块空间:<input type="range" min="2" max="20" step="3">
</p>
<p>
搜索框: <input type="search" name="search">
</p>
<p>
电话框: <input type="tel" name="tel">
</p>
<p>
URL: <input type="url" name="url">
</p>
<button type="submit">提交</button>
</form>
</body>
3.2、HTML5 新的表单属性
3.2.1、*form / input autocomplete 属性
autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。
当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。
提示: autocomplete 属性有可能在 form元素中是开启的，而在input元素中是关闭的。
注意: autocomplete 适用于 <form> 标签，以及以下类型的 <input> 标签：text, search, url, tel, email, password, datepickers, range 以及 color。
HTML form 中开启 autocomplete (一个 input 字段关闭 autocomplete )：
<!--
在整个表单中，我们在输入框中提交的历史数据，都会自动提示
autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。
关于自动补全，一定是分场景的：
如果是注册，我们肯定不需要自动补全功能
如果是登录，用户名可以开启自动补全
如果autocomplete="off"添加给form表单，那么表单里面的所有元素都关闭自动补全
-->
<!-- <form action="" autocomplete="off"> -->
<form action="">
用户名: <input type="text" name="username" autocomplete="off"> <br>
密 码: <input type="password" name="password"><br>
姓 名: <input type="text" name="name"><br>
<button type="submit">提交</button>
</form>
3.2.2、*form novalidate 属性
novalidate 属性是一个 boolean(布尔) 属性.
novalidate 属性规定在提交表单时不应该验证 form 或 input 域。
无需验证提交的表单数据：
<!-- novalidate提交信息时不会再进行校验 -->
<form action="#" method="get" novalidate autocomplete="off">
邮箱：<input type="email" name="email"><br>
URL：<input type="url" name="url"><br>
<button type="submit">提交</button>
</form>
3.2.3、*input placeholder 属性
placeholder 属性提供一种提示（hint），描述输入域所期待的值。
简短的提示在用户输入值前会显示在输入域上。
注意: placeholder 属性适用于以下类型的 <input>标签：text, search, url, tel, email 以及 password。
3.2.4、*input required 属性
required 属性规定必须在提交之前填写输入域（不能为空）。
注意:required 属性适用于以下类型的 <input>标签：text, search, url, tel, email, password, date pickers, number, checkbox, radio 以及 file。
3.2.5、input step 属性
step 属性为输入域规定合法的数字间隔。
如果 step=“3”，则合法的数是 -3,0,3,6 等
提示：step 属性可以与 max 和 min 属性创建一个区域值.
**注意：**step 属性与以下type类型一起使用: number, range, date, datetime, datetime-local, month, time 和 week.
3.2.6、input autofocus 属性
autofocus 属性是一个 boolean 属性.
autofocus 属性规定在页面加载时，域自动地获得焦点。
<!--
placeholder 属性提供一种提示（hint），描述输入域所期待的值。
required 属性规定必须在提交之前填写输入域（不能为空）。
如果我们使用正则校验，required其实可以不使用。
这个属性也是重要的，原因是很多框架中还在用这个属性
step 属性为输入域规定合法的数字间隔。
autofocus 属性规定在页面加载时，域自动地获得焦点。
-->
<form action="">
用户名: <input type="text" name="username" autocomplete="off" placeholder="请输入用户名"> <br>
密 码: <input type="password" name="password" placeholder="请输入密码" autofocus required><br>
姓 名: <input type="text" name="name" placeholder="请输入姓名"><br>
<button type="submit">提交</button>
</form>
)]
3.2.7、input form 属性
form 属性规定输入域所属的一个或多个表单。
**提示:**如需引用一个以上的表单，请使用空格分隔的列表。
位于form表单外的 input 字段引用了 HTML form (该 input 表单仍然属于form表单的一部分):
<form action="#" id="form1">
First name: <input type="text" name="fname"><br>
<input type="submit" value="提交">
</form>
Last name: <input type="text" name="lname" form="form1">
3.2.8、input formaction 属性
formaction 属性用于描述表单提交的URL地址.
formaction 属性会覆盖<form>元素中的action属性.
注意: formaction 属性用于 type=“submit” 和 type=“image”.
以下HTMLform表单包含了两个不同地址的提交按钮：
<!-- input formaction 属性
formaction 属性用于描述表单提交的URL地址.
点击新提交页面会转跳到百度页面提交内容
-->
<form action="#">
用户名：<input type="text" name="id"><br>
密码：<input type="password" name="pwd"><br>
<input type="submit">
<input type="submit" value="新提交" formaction="https://www.baidu.com/">
</form>
3.2.9、input formenctype 属性
formenctype 属性描述了表单提交到服务器的数据编码 (只对form表单中 method=“post” 表单)
formenctype 属性覆盖 form 元素的 enctype 属性。
注意: 该属性与 type=“submit” 和 type=“image” 配合使用。
第一个提交按钮已默认编码发送表单数据，第二个提交按钮以 “multipart/form-data” 编码格式发送表单数据:
<!-- input formenctype 属性
formenctype 属性描述了表单提交到服务器的数据编码 (只对form表单中 method="post" 表单)
提交图片时一般用formenctype="multipart/form-data"
-->
<form action="#" method="post">
用户名：<input type="text" name="id"><br>
密码：<input type="password" name="pwd"><br>
<input type="submit">
<input type="submit" value="新提交" formenctype="multipart/form-data">
</form>
3.2.10、input formmethod 属性
formmethod 属性定义了表单提交的方式。
formmethod 属性覆盖了 <form>元素的 method 属性。
注意: 该属性可以与 type=“submit” 和 type=“image” 配合使用。
重新定义表单提交方式实例:
<!-- input formmethod 属性
formmethod 属性定义了表单提交的方式。
点击新提交，页面会以post的提交方式提交
-->
<form action="#">
用户名：<input type="text" name="id"><br>
密码：<input type="password" name="pwd"><br>
<input type="submit">
<input type="submit" value="新提交" formmethod="post">
</form>
3.2.11、input formnovalidate 属性
novalidate 属性是一个 boolean 属性.
novalidate属性描述了 <input> 元素在表单提交时无需被验证。
formnovalidate 属性会覆盖 <form> 元素的novalidate属性.
注意: formnovalidate 属性与 type=“submit” 一起使用
两个提交按钮的表单(使用与不适用验证 ):
<!-- input formnovalidate 属性
novalidate属性描述了 `<input>` 元素在表单提交时无需被验证。
注意: formnovalidate 属性与 type="submit" 一起使用
点击新提交 type="email"不会进行校验
-->
<form action="#">
邮箱：<input type="email" name="e-mail"><br>
<input type="submit">
<input type="submit" value="新提交" formnovalidate>
</form>
3.2.12、input height 和 width 属性
height 和 width 属性规定用于 image 类型的 <input>标签的图像高度和宽度。
注意: height 和 width 属性只适用于 image 类型的<input>标签。
提示:图像通常会同时指定高度和宽度属性。如果图像设置高度和宽度，图像所需的空间 在加载页时会被保留。如果没有这些属性， 浏览器不知道图像的大小，并不能预留 适当的空间。图片在加载过程中会使页面布局效果改变 （尽管图片已加载）。
定义了一个图像提交按钮, 使用了 height 和 width 属性:
<!-- input height 和 width 属性
注意: height 和 width 属性只适用于 image 类型的<input>标签。 -->
<form action="#">
<input type="image" src="../images/login.png" width="100" height="50">
</form>
3.2.13、*input list 属性
list 属性规定输入域的 datalist。datalist 是输入域的选项列表。
<!--
datalist：规定输入域的选项列表。必须和input输入框结合使用
input标签的list属性值 和 datalist的id属性值保持一致
列表项是由option来定义的
当我们在input输入框输入内容的时候，它会匹配数据列表中的列表项。由option的value来进行匹配。
-->
<input type=“text” name=”data” list=”dlist”>
<datalist id=”dlist”>
<option value="CAD">CAD制图是一款制图软件，设计人员利用计算机及其图形设备进行设计工作</option>
<option value="HTML5">HTML5是构建Web内容的一种语言描述方式。</option>
<option value="JAVASCRIPT">JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。</option>
<option value=".NET">.NET是一种用于构建多种应用的免费开源开发平台，</option>
<option value="JAVA">Java 是一个通用术语，用于表示 Java 软件及其组件</option>
</datalist>
3.2.14、input multiple 属性
multiple 属性是一个 boolean 属性.
multiple 属性规定<input>元素中可选择多个值。
注意: multiple 属性适用于以下类型的 <input>标签： file
<form action="#">
<input type="file" name="file" multiple><br>
<input type="submit">
</form>
3.2.15、*input pattern 属性
pattern 属性描述了一个正则表达式用于验证 <input>元素的值。
注意:pattern 属性适用于以下类型的 <input>标签: text, search, url, tel, email, 和 password.
提示： 是用来全局 title 属性描述了模式.
提示： 在我们的 JavaScript 教程中学习到有关正则表达式的内容
<!-- input pattern 属性
pattern 属性描述了一个正则表达式用于验证 <input>元素的值。 -->
<form action="#">
<input type="tel" name="phone" pattern="^(1[3456789])\d{9}$" title="请输入正确的手机号"><br>
<input type="submit">
</form>
3.2.16、*input min 和 max 属性
min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定（约束）。
注意: min、max 和 step 属性适用于以下类型的 <input> 标签：date pickers、number 以及 range。
<input> 元素最小值与最大值设置:
<!-- input min 和 max 属性
min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定（约束）。 -->
<form action="#">
<input type="date" min="1940-10-01">
<input type="submit">
</form>
四、HTML5多媒体标签
4.1、HTML5 Video(视频)
很多站点都会使用到视频，HTML5 提供了展示视频的标准。
直到现在，仍然不存在一项旨在网页上显示视频的标准。
今天，大多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。
HTML5 规定了一种通过 video 元素来包含视频的标准方法。
4.1.1、浏览器支持
Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持 <video>元素.
注意: Internet Explorer 8 或者更早的IE版本不支持 <video>元素。
4.1.2、HTML5 (视频)- 如何工作
如需在 HTML5 中显示视频，您所有需要的是：
<!-- autoplay如果出现该属性，则视频在就绪后马上播放。 -->
<!-- controls属性：添加播放控制及音量控制功能栏。 -->
<!-- loop属性·：当媒介文件完成播放后再次开始播放。(循环播放) -->
<!-- muted属性：视频的音频输出为静音。 -->
<!-- poster属性：规定视频正在下载时显示的图像，直到用户点击播放按钮。(视频封面) -->
<!-- width 和 height可以设置视频的大小 -->
<video src="/video/华丽耀眼的白孔雀.mp4" width="200" height="400" controls loop muted poster="../images/music.jpg">
</video>
<video>元素提供了 播放、暂停和音量控件来控制视频。
同时 <video>元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度，所需的视频空间会在页面加载时保留。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能再加载时保留特定的空间，页面就会根据原始视频的大小而改变。
<video>与</video>标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。
<video>元素支持多个 <source>元素. <source>元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式：
<video width="320" height="240" controls>
<!-- type="video/mp4" 是mimetype类型 -->
<!-- 如果浏览器不支持mp4格式，则会显示ogg格式 -->
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>
4.1.3、视频格式与浏览器的支持
当前， <video>元素支持三种视频格式： MP4, WebM, 和 Ogg:
| 浏览器 | MP4 | WebM | Ogg |
|---|---|---|---|
| Internet Explorer | YES | NO | NO |
| Chrome | YES | YES | YES |
| Firefox | YES | YES | YES |
| Safari | YES | NO | NO |
| Opera | YES (从 Opera 25 起) | YES | YES |
- MP4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
- WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
- Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
视频格式
| 格式 | MIME-type |
|---|---|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
什么是 MIME TYPE？
首先，我们要了解浏览器是如何处理内容的。在浏览器中显示的内容有 HTML、有 XML、有 GIF、还有 Flash ……那么，浏览器是如何区分它们，决定什么内容用什么形式来显示呢？答案是 MIME Type，也就是该资源的媒体类型。
媒体类型通常是通过 HTTP 协议，由 Web 服务器告知浏览器的，更准确地说，是通过 Content-Type 来表示的，例如:Content-Type: text/HTML
表示内容是 text/HTML 类型，也就是超文本文件。为什么是“text/HTML”而不是“HTML/text”或者别的什么？MIME Type 不是个人指定的，是经过 ietf 组织协商，以 RFC 的形式作为建议的标准发布在网上的，大多数的 Web 服务器和用户代理都会支持这个规范 (顺便说一句，Email 附件的类型也是通过 MIME Type 指定的)。
通常只有一些在互联网上获得广泛应用的格式才会获得一个 MIME Type，如果是某个客户端自己定义的格式，一般只能以 application/x- 开头。
XHTML 正是一个获得广泛应用的格式，因此，在 RFC 3236 中，说明了 XHTML 格式文件的 MIME Type 应该是 application/xHTML+XML。
当然，处理本地的文件，在没有人告诉浏览器某个文件的 MIME Type 的情况下，浏览器也会做一些默认的处理，这可能和你在操作系统中给文件配置的 MIME Type 有关。比如在 Windows 下，打开注册表的“HKEY_LOCAL_MACHINESOFTWAREClassesMIMEDatabaseContent Type”主键，你可以看到所有 MIME Type 的配置信息。
more:https://www.cnblogs.com/jsean/articles/1610265.html
4.1.4、video标签相关属性
| 属性 | 值 | 描述 |
|---|---|---|
| muted | muted | 如果出现该属性，视频的音频输出为静音。 |
| autoplay | autoplay | 如果出现该属性，则视频在就绪后马上播放。 |
| controls | controls | 添加播放控制及音量控制功能栏。 |
| height | Pixels | 指定播放器的高度，以pixel为单位。 |
| loop | loop | 如果指定，视频将重复播放。 |
| poster | url | 指定视频的预览图。 |
| preload | auto metadata none | 如果指定，视频会在加页面加载过程中被加载。当autoplay被指定时，会被忽略。 auto - 当页面加载后载入整个音频 meta - 当页面加载后只载入元数据 none - 当页面加载后不载入音频 |
| src | url | 目标视频的URL。 |
| width | pixels | 指定播放器的宽度，以pixel为单位。 |
4.2、HTML5 Audio(音频)
用法大致都和video相同
HTML5 提供了播放音频文件的标准。
直到现在，仍然不存在一项旨在网页上播放音频的标准。
今天，大多数音频是通过插件（比如 Flash）来播放的。然而，并非所有浏览器都拥有同样的插件。
HTML5 规定了在网页上嵌入音频元素的标准，即使用 <audio>元素。
4.2.1、浏览器支持
Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 都支持 <audio>元素.
注意: Internet Explorer 8 及更早IE版本不支持 <audio>元素.
4.2.2、HTML5 Audio - 如何工作
如需在 HTML5 中播放音频，你需要使用以下代码：
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
control 属性供添加播放、暂停和音量控件。
在<audio>与 </audio>之间你需要插入浏览器不支持的<audio>元素的提示文本 。
<audio>元素允许使用多个 <source>元素. <source>元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件
4.2.3、音频格式及浏览器支持
目前, <audio>元素支持三种音频格式文件: MP3, Wav, 和 Ogg:
| 浏览器 | MP3 | Wav | Ogg |
|---|---|---|---|
| Internet Explorer 9+ | YES | NO | NO |
| Chrome 6+ | YES | YES | YES |
| Firefox 3.6+ | YES | YES | YES |
| Safari 5+ | YES | YES | NO |
| Opera 10+ | YES | YES | YES |
音频格式的MIME类型
| Format | MIME-type |
|---|---|
| MP3 | audio/mpeg |
| Ogg | audio/ogg |
| Wav | audio/wav |
4.2.4、Audio标签属性
| 属性 | 属性值 | 描述 |
|---|---|---|
| autoplay | autoplay | 如果指定, 音频会在准备好后立即播放. |
| controls | controls | 显示播放控制工具栏… |
| loop | loop | 如果指定，则循环播放. |
| muted | muted | 如果出现该属性，则音频输出为静音。 |
| preload | auto metadata none | 如果指定，视频会在加页面加载过程中被加载。当autoplay被指定时，会被忽略。 auto - 当页面加载后载入整个音频 meta - 当页面加载后只载入元数据 none - 当页面加载后不载入音频 |
| src | url | 目标音频的URL. |
4.3、source标签
video和audio元素的子元素，可指定多个文件来源，用来解决浏览器的兼容问题
如果使用了source元素，则不可以在video和audio中设置src属性
<source>标签为媒介元素（比如 <video>和 <audio>）定义媒介资源。
<source>标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。
五、其他常用HTML5新标签
5.1、HTML5文本格式化标签
<time>标签定义日期或时间，或者两者;
<mark>标签定义带有记号的文本。请在需要突出显示文本时使用 < mark > 标签。
<ruby>在文字上方注音，不常用，主流浏览器基本都支持,需要使用rt标签定义注音，例如:
<ruby>饕餮<rt>tao tie</rt></ruby>
5.2、HTML5度量条
定义已知范围或分数值内的标量测量,计数仪表,也被称为 gauge（尺度）。例子：磁盘用量、查询结果的相关性，等等。
注释：<meter>标签不应用于指示进度（在进度条中）。如果标记进度条，请使用 <progress>标签。
| 属性名 | 属性作用 |
|---|---|
| value | 规定计量条当前默认显示值 |
| max | 规定范围的最大值,默认值为1 |
| min | 规定范围的最小值,默认值为0 |
| low | 规定被视作低的标准 |
| high | 规定被视作高标准 |
| form | 规定所属的一个或多个表单 |
| optimum | 定义度量条的最佳标准值，最佳必须在低和高之间 |
<h3>HTML5度量条</h3>
<!-- meter 定义度量条 -->
默认：<meter max="100" min="1" value="30"></meter> <br>
低：<meter max="100" min="1" value="10" low="20" high="80"></meter> <br>
高：<meter max="100" min="1" value="90" low="20" high="80"></meter> <br>
最佳：<meter max="100" min="0" value="60" low="30" high="80" optimum="60"></meter><br>
5.3、HTML5进度条
<progress>标签定义运行中的任务进度（进程）。
请将 <progress>标签与 JavaScript 一起使用来显示任务的进度。
progress元素的属性
max属性:规定当前进度的最大值
value属性:规定进度条当前默认显示值
form属性:规定进度条所属的一个或多个表单
注：max和value属性的值必须是一个类型数值,可以是小数或整数
<h3>HTML5进度条</h3>
<!-- progress 标签定义运行中的任务进度 -->
<progress></progress><br>
<progress value="30" max="100"></progress><br>
<progress value="0.6" max="1"></progress><br>
5.4、HTML5详情标签
“details" 元素用于描述有关文档或文档片段的详细信息。
“summary” 元素应该是 “details” 元素的第一个子元素。可以为details定义标题.标题是可见的,用户点击标题时,会显示details中的内容。
details元素的属性:
open属性:规定在html页面中details是可见的
注:目前还不是所有浏览器都支持，但是之后肯定会都支持的
<h3>详情标签</h3>
<!--
details：用于描述有关文档或文档片段的详细信息。
open属性:规定在html页面中details是可见的
想要折叠起来的，都包裹在details里面
summary：用来给details添加标题
-->
<details>
<summary>工作进度报表</summary>
默认：<meter max="100" min="1" value="30"></meter> <br>
低：<meter max="100" min="1" value="10" low="20" high="80"></meter> <br>
高：<meter max="100" min="1" value="90" low="20" high="80"></meter> <br>
最佳：<meter max="100" min="0" value="60" low="30" high="80" optimum="60"></meter><br>
</details>
<details>
<summary>下载进度表</summary>
<progress></progress><br>
<progress value="30" max="100"></progress><br>
<progress value="0.6" max="1"></progress><br>
</details>
