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>1234567891011121314151617
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>123456
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>123456789101112131415
)]
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">123456
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>12345678910
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>12345678910
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>12345678910
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>12345678910
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>12345
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>1234567891011121314151617
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>1234
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>123456
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>123456
四、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>123456789
<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>123456
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>12345
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>1
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>123456
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>12345
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>1234567891011121314151617181920
400 186 1886
