HTML5新增特性

HTML5简介

它是万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改。由于取代HTML4与XHTML的新一代标准版本，所以叫HTML5

H5新变化

• XHTML可扩展超文本标记语言
  • XHTML是一种增强了的HTML，他的可扩展性和灵活性将适应未来网络应用更多的需求
• HTML5
  • HTML5的设计目的是为了移动设备上支持多媒体
  • 增加了新特性：语义特性，本地存储特性，设备兼容特性，连续特性，网页多媒体特性，三维、图形及特效特性，性能与集成特性，CSS3特性
  • 废弃了一些元素和属性比如font、center等。。。
• HTML5优势与劣势
  • 优势
    • 提高可用性和改进用户的友好体验
    • 更好的语义化标签
    • 可以给站点带来更多的多媒体元素（视频和音频）
    • 可以很好的替代FLASH和Silverlight
    • 当涉及到网站的抓取和索引的时候，对于SEO很友好；
    • 可移植性好
  • 劣势
    • 该标准并未能很好的被PC端浏览器所支持
    • IE9以下的浏览器几乎都不兼容
• HTML5前景趋势
  • 移动开发优先
  • 游戏开发
• 广义的HTML5
  • 狭义的HTML5是指HTML语言的第五个版本
  • 而广义的HTML5是（HTML5 + CSS3 + JavaScript） 技术的综合

HTML5新增语义化标签

• 以前制作网页布局，我们基本用div来做。div就是一个普通的块级标签，对于搜索引擎来说，是没有语义的

<div class="header"></div>
<div class="nav"></div>
<div class="content"></div>
<div class="footer"></div>

• <header>： 头部标签
• <nav>： 导航标签
• <main>： 主题标签
• <acticle>： 独立的内容标签
• <section>： 区段标签
• <aside>： 侧边栏标签
• <footer>： 尾部标签

注意事项

• 这种语义化标准主要针对搜索引擎的
• 这些新标签页面中可以多次使用
• 在IE9中，需要把这些元素转换为块级元素
• 其实，移动端更喜欢用这些标签
• HTML5还有很多其他标签

HTML5新增多媒体音频标签

HTML5在不适用插件的情况下也可以原生的支持音频格式文件的播放，当然支持的格式是由限的

• 音频格式：

格式	MIME-type	IE9	Firefox3.5	Opera10.5	Chrome3.0	Safari3.0
Ogg	audio / mpeg		√	√	√
MP3	audio / ogg	√			√	√
Wav	audio / wav		√	√		√

• <audio>音频标签语法格式

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

<!-- H5中，如果标签的属性名与属性值相同，那么可以省略属性值不写 -->
<audio src="文件地址" controls></audio>

<!-- 兼容写法 -->
<audio controls="controls">
  <source src="xl.mp3" type="audio/mpeg"></source>
  <source src="xl.ogg" type="audio/ogg"></source>
  您的浏览器暂不支持audio标签
</audio>

• <audio>音频标签常见属性

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮
loop	loop	如果出现该属性，则每当音频结束时重新开始播放
preload	preload	如果出现该属性，则音频在页面加载时进行预加载，并预备播放。如果使用"autoplay"，则忽略该属性
src	url	要播放的音频的URL

HTML5新增多媒体视频标签

HTML5在不使用插件的情况下也可以原生的支持视频格式文件的播放，当然支持格式是由限的

• 视频格式

格式	MIME-type	IE	Firefox	Opera	Chrome	Safari
Ogg	video/ogg	x	3.5+	10.5+	5.0+	x
MP4	video/mp4	9.0+	x	x	5.0+	3.0+
WebM	video/webm	x	4.0+	10.6+	6.0+	x

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

<!-- H5中，如果标签的属性名与属性值相同，那么可以省略属性值不写 -->
<video src="文件地址" controls></video>

<!-- 兼容写法 -->
<video controls="controls">
  <source src="xl.mp4" type="audio/mpeg"></source>
  <source src="xl.ogg" type="audio/ogg"></source>
  您的浏览器暂不支持audio标签
</video>

• <video>视频标签常见属性

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

<video src="文件地址" controls muted width="200px" height="200px" poster="xl.jpg"></video>

总结

• 音频标签和视频标签使用基本一致
• 浏览器支持情况不同
• 我们可以给食品标签添加muted属性进行自动静音播放视频，音频不可以
• 视频标签是重点，我们经常设置自动播放，循环和设置大小属性，不使用controls控件

HTML5新增input表单

H5新增<input>表单类型

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

<from action="">
  姓名：<input type="text">
  <br/>
  邮箱：<input type="email">
  <br/>
  个人网站：<input type="url">
  <br/>
  生日：<input type="date">
  <br/>
  时间：<input type="time">
  <br/>
  月份：<input type="month">
  <br/>
  周：<input type="week">
  <br/>
  年龄：<input type="number" max="100" min="0" step="4" value="4">
  <br/>
  年龄范围：<input type="range" max="100" min="0" step="4" value="4">
  <br/>
  手机：<input type="tel">
  <br/>
  搜索框：<input type="search">
  <br/>
  颜色：<input type="color">
  <input type="submit" value="提交">
</from>

HTML5新增可输入表单datalist

• <datalist>标签规定了<input>元素可能的选项列表
• <datalist>元素包含了一组<option>元素，这些元素表示预定义可选值，在<input>元素输入过程中，会自动响应<option>元素的值
• 绑定<input>标签必须设置list属性，属性值等于<datalist>标签的id属性值

城市：<input type="text" list="city"></input>
<datalist id="city">
  <option value="北京">bj</option>
  <option value="上海">sh</option>
  <option value="广州">gz</option>
  <option value="京">
  <option value="津">
  <option value="冀">
</datalist>

HTML5新增表单属性

属性	值	描述
required	required	表单拥有该属性表示其内容不能为空，必填
placeholder	提示文本	表单的提示信息，存在默认值将不显示
autofocus	autofocus	自动聚焦属性，页面加载完成自动聚焦到指定表单，一般页面中放1个
autocomplete	off / on	当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。默认已经打开，如autocomplete=“on”；关闭autocomplete=“off”；需要放在表单内同时加上name属性；同时成功提交
multiple	multiple	可以多选文件提交

<input type="text" required autofocus placeholder="内容不能为空且已自动聚焦" autocomplete="on" name=""search ></input>