前端学习（五）HTML5部分新特性

什么是HTML5

定义：HTML5定义了HTML标准的最新版本，是对HTML的第五次重大修改，是下一代的HTML

概念：

• 它是一个新版本的HTML语言，定义了新的标签、特性和属性
• 拥有一个强大的技术集，这些技术集合是指：HTML5 CSS3 javascript，这是广义上的HTML5

拓展内容：

• 语义化标签：例如header、nav、article等

• 本地存储

• 兼容特性

• 2D、3D

• 动画、过渡

• CSS3特性

• 性能与集成

现状：

大多数属性已经被浏览器支持，是大势所趋

HTML5的新增标签

语义化标签

• 头部标签：header
• 导航栏标签：nav
• 内容标签：article
• 块级标签：section
• 侧边栏标签：aside
• 尾部标签：footer

音频标签audio

audio目前支持的三种格式

格式	IE9	火狐3.5	opera10.5	谷歌3.0	Safari3.0
Ogg Vorbis		√	√	√
MP3	√			√	√
Wav		√	√		√

audio的标签

属性	值	描述
autoplay	autoplay	该音频就绪后，马上播放
controls	controls	向用户显示控件，比如播放按钮
loop	loop	当播放结束时，重新开始播放
src	url	要播放音量的url或者路径

示例：

<audio autoplay="autoplay" loop="loop" controls="controls">
    <source src="media/snow.mp3"/>
    <source src="media/snow.opp"/> 
audio>

除了src标签，其余标签的值都可以省略，只写属性即可，一般推荐放多个source标签，以支持所有的浏览器

视频标签video

支持的视频格式：

格式	IE	FireFox	Opera	Chrome	Sarifa
Ogg	No	3.5+	10.5+	5.0+	No
MPEG4	9.0+	No	No	5.0+	3.0+
WebM	No	4.0+	10.6+	6.0+	No

video标签的属性

属性	值	描述
autoplay	autoplay	视频就绪时自动播放
controls	controls	向用户显示控件
width	pixers 像素	播放器宽度
height	pixers 像素	播放器高度
loop	loop	播放完后重新播放
preload	auto（预先加载） none（不预先加载）	规定是否预先加载视频
src	url	视频地址
poster	img-url	加载等待的画面图片
muted	muted	静音播放

示例：

<video autoplay controls loop muted width="400px" preload="auto" poster="img/dog.jpg">
    <source src="media/mi.mp4"  type="video/mp4"/>
    <source src="media/mi.ogg"  type="video/ogg"/>
video>

音视频标签总结

• 音频标签与视频标签的使用基本一致
• 多媒体标签在不同浏览器下情况不同，存在兼容性问题
• 谷歌浏览器的音视频标签禁止自动播放，除非打开mute静音属性

输入标签input

新增type属性

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

新增属性

属性	值	描述
required	required	表单拥有该属性表示其内容不能为空，必填
placeholder	提示文本（占位符）	表单的提示信息，存在默认值将不显示
autofocus	autofocus	自动聚焦属性，页面加载完成自动聚焦到指定表单
autocomlete	on/off	当用户在字段开始键入时，浏览器基于之前键入过的值，显示历史输入，默认是打开的，需要在表单内加上name属性
multiple	multiple	可以选择多个文件提交

示例：

<form action="get">
    <input type="email" name="124" required="required" autocomplete="off"><br>
    <input type="url" name="124" autofocus="autofocus"><br>
    <input type="date" name="124"><br>
    <input type="time" name="124"><br>
    <input type="month" name="124"><br>
    <input type="week" name="124"><br>
    <input type="number" name="124"><br>
    <input type="tel" name="124"><br>
    <input type="search" name="124" placeholder="nihao"><br>
    <input type="color" name="124"><br>
    <input type="file" name="124" multiple="multiple"><br>
    <input type="submit"><br>
form>