HTML5新增特性总结

HTML5支持的浏览器

现在的浏览器都支持HTML5。

最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特 性。Internet Explorer 9 将支持某些 HTML5 特性。

自定义标签

<myHero> 可以为HTML添加新的元素，并定义元素的样式。

HTML5的新布局标签

1.header元素

<header> 描述文档的头部区域。用于定义内容的介绍展示区域。

2.nav元素

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

🚨不是所有的链接都在 <nav> 元素中！

3.article元素

<article> 标签定义独立的内容。可以嵌套使用。

4.section元素

<section> 定义文档中的节、段落。或者章节、页眉的其他部分。

5.footer元素

<footer> 描述了文档的底部区域。在文档中可以多次使用。

HTML5新表单元素

1.新的input类型

控件名称	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 字段的值 自动进行验证。

2.新的表单控件

datalist元素（重要）

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

<input type = “text” name=”data” list=”dlist”>
<datalist id=”dlist”>
<option value="可乐" >CAD</option>
<option value="奶茶">HTML5</option>
<option value="牛奶" >JAVASCRIPT</option>
<option value="啤酒">.NET</option>
<option value="茶">JAVA</option>
</datalist>

效果如下：

HTML新的表单属性

1.form novalidate属性

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

例：

<form action="demo-form.php" novalidate>
E-mail: <input type="email" name="user_email">
<input type="submit">
</form

2.input placeholder属性

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

例：

<td>登陆账号</td>
            <td>
                <input type="text" placeholder="邮箱/ID/手机号">
            </td>

3.input required属性

required 属性规定必须在提交之前填写输入域（不能为空）。

注意:required 属性适用于以下类型的 <input> 标签：text, search, url, tel, email, password, date pickers, number, checkbox, radio 以及 file。

4.input step

step 属性为输入域规定合法的数字间隔。

提示：step 属性可以与 max 和 min 属性创建一个区域值.

🚨注意：step 属性与以下type类型一起使用: number, range, date, datetime, datetime-local, month, time 和 week.

5.input height和width属性

用来规定用于image类型的input标签图像的高度和宽度。

🚨注意: height 和 width 属性只适用于 image 类型的 <input> 标签。

6.input list属性

list 属性规定输入域的 datalist。datalist 是输入域的选项列表。

7.input multiple属性

multiple 属性规定 <input> 元素中可选择多个值。

🚨注意: multiple 属性适用于以下类型的 <input> 标签： file

8.input pattern属性

pattern 可以指定一个正则表达式来对复杂的字符格式进行校验。

HTML5多媒体标签

1.video标签相关属性

属性	值	描述
muted	muted	视频的音频输出为静音
autoplay	autoplay	视频马上播放。
controls	controls	视频的控制功能栏
height	Pixels	播放器的高度
loop	loop	视频重复播放
poster	url	视频的预览图
src	url	目标视频的URL.
width	pixels	指定播放器的宽度，以pixel为单位.

2.HTML5 Audio（音频）

2.1、如何工作

需要使用一下代码：

<audio controls>
<source src="目标音频的URL" type="audio/ogg">
<source src="目标音频的URL" type="audio/mpeg">
</audio>

control属性供添加播放、暂停和音量控件。

2.2、Audio的标签属性

属性	属性值	描述
autoplay	autoplay	音频准备好立即播放
controls	controls	显示播放控制工具栏
loop	loop	循环播放
muted	muted	音频输出为静音
src	url	目标音频的URL