菜鸟高飞路之HTML5的新特性

这些新特性都有兼容性问题，基本上是IE9+以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性

一、新增语义化标签

<header> ：头部标签

<nav> ：导航标签

<article> ：内容标签

<section> ：定义文档某个区域

<aside> ：侧边栏标签

<footer> ：尾部标签

二、新增的多媒体标签

使用它们可以很方便的在页面中嵌入音频和视频，而不再去使用flash和其他浏览器插件

1.视频 <video>

当前<video>元素支持三种视频格式：mp4、webm、ogg （尽量使用mp4）

1.语法：

<video src="文件地址" controls>
</video>

<video controls>
    <source src="1.mp4"></source>
    <source src="1.ogg"></source>
</video>

<video> ：视频标签

<source> ：<source>标签为媒体元素定义媒体资源，<source>标签允许规定两个视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。

2.视频<video>常见属性

属性	值	描述
autoplay	autoplay	视频就绪自动播放(谷歌浏览器需添加muted来解决自动播放问题)
muted	muted	静音播放
controls	controls	向用户显示播放控件
width	像素	设置播放器宽度
height	像素	设置播放器高度
loop	loop	循环播放
src	url	视频url地址

2.音频 <audio>

当前<audio>元素支持三种音频格式：mp3、wav、ogg（尽量使用mp3）

语法：

<audio src="文件地址" controls>
</audio>

<audio controls>
    <source src="1.mp3"></source>
    <source src="1.ogg"></source>
</audio>

音频标签和视频标签使用方式基本一致

三、新增的input类型

属性值	说明
type = "email"	限制用户输入必须为Email类型
type = "url"	限制用户输入必须为url类型
type = "date"	限制用户输入必须为日期类型
type = "time"	限制用户输入必须为时间类型
type = "month"	限制用户输入必须为月类型
type = "week"	限制用户输入必须为周类型
type = "number"	限制用户输入必须为数字类型
type = "tel"	限制用户输入必须为手机号码类型
type = "search"	搜索框
type = "color"	生成一个颜色选择表单

四、新增的表单属性

 1.required属性

值：required

说明：表单拥有该属性表示其内容不能为空，必填

 

2.placeholder属性

值：提示文本

说明：表单的提示信息，存在默认值将不显示

 

 3.autofocus属性

值：autofocus

说明：自动聚焦属性，页面加载完成自动居家到指定表单

 

 4.disabled属性

值：disabled

说明：禁用表单属性

 

5.autocomplete属性 

 值：off/on

说明：自动补全属性，默认已经打开，还要配合name属性实现，按照name的组名将成功提交的数据存在浏览器中，用提示的方式显示