第十章 - HTML5新特性

1. HTML5新特性

HTML5新特性主要是针对于以前的不足，新增了一些新的标签，新的表单和新的表单属性等。

1.1 HTML5新增的语义化标签

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

[注]

这种语义化标准主要是针对浏览引擎的

• 这些新标签在页面中可以使用多次
• 在IE9中，需要把这些元素转换为块级
• 移动端使用这些标签比较多
• HTML5还新增了许多其它标签

1.2 HTML5新增的多媒体标签

新的多媒体标签，主要包含两个

1. 视频： <video>

2. 音频： <audio>

• 视频 <video>标签

当前<video>元素支持三种格式MP4,webM，Ogg,尽量使用MP4格式

[语法]

<video src="视频地址" controls="controls"></vedio>

video常见属性

属性	值	描述
autoplay	autoplay	视频就绪自动播放(注，谷歌需要添加muted解决自动播放问题)
controls	controls	向用户显示播放控件
width	px（像素）	设置播放器宽度
height	px（像素）	设置播放器高度
loop	loop	是否循环播放
preload	auto(预加载) none(不加载)	规定是否预加载视频(有了autoplay就忽略该属性)
src	url	视频url地址
poster	Imgurl	加载等待的画面图片
muted	muted	静音播放

• 音频<audio>

当前<audio>元素支持3中音频格式mp3,wav,ogg

[语法]

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

<audio>常见属性

属性	值	描述
autoplay	autoplay	自动播放
controls	controls	用户显示控件，比如播放按钮
loop	loop	循环播放
src	url	音频地址

1.3 HTML5新增input类型

属性值	说明
type="email"	限制用户输入必须为Email类型
type="url"	限制用户输入必须为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	默认已打开，autocomplete="on" ；关闭 autocomplete="off"
multiple	multiple	可以多选文件提交