（七）HTML5与CSS3新增特性

1. HTML5新特性

IE9+以上的浏览器才支持

1.1 HTML5新增语义化标签

• <header>：头部标签
• <nav>：导航标签
• <article>：内容标签
• <section>：定义文档某个区域
• <asider>：侧边栏标签
• <footer>：尾部标签

header 头部nav/导航 aside侧边栏，article 内容标签，section区域，footer尾部

 

1.2 HTML5新增多媒体标签

1. 视频 <vedio>

所有浏览器支持 mp4 格式。

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

考虑兼容性问题：（类似于字体）

• autoplay="autoplay"  自动播放
• controls="controls" 显示控件
• width 设置宽度
• height 设置高度
• loop=”loop” 设置循环播放
• preload="auto/none" 是否预加载
• src=url 视频地址
• poster=url 封面图片
• muted=muted 静音播放

2. 音频 <audio>

所有浏览器支持 mp3 格式。

• controls：显示控件
• autoplay：（谷歌禁用）
• loop=loop 设置循环播放

1.3 HTML5 新增 input 类型

• type="email"
• type="url"
• type="date"
• type="time"
• type="month"
• type="week"
• type="number"
• type="tel"
• type="search"
• type="color"

1.4 HTML5新增的表单属性

属性	值	说明
required	required	表单拥有该属性表示其内容不能为空，必填
placeholder	提示文本	表单的提示信息
autofocus	autofocus	自动聚焦属性，页面加载完成自动聚焦到指定表单
autocomplete	off/on