HTML5新特性

笔记来源：拉勾教育 - 大前端就业集训营

文章内容：学习过程中的笔记、感悟、经验

一、概述

1、概念

• 狭义：指HTML语言的第五个版本
• 广义：HTML5本身+CSS3+JavaScript技术的综合

1、HTML5优势

• 提高可用性和改进用户的友好体验
• 更好的语义化标签
• 可以给站点带来更多的多媒体元素（视频和音频）
• 可以很好地替代FLASH和Silverlight
• 当涉及到网站的抓取和索引的时候，对于SEO很友好
• 可被大量应用于移动应用程序和游戏
• 可移植性好

2、HTML5劣势

• 该标准并未能很好的被PC端浏览器所支持
• IE9以下的浏览器几乎都不兼容

二、HTML5新特性

1、新增语义化标签

• <header>：头部标签
• <nav>：导航标签
• <main>：主体标签
• <article>：独立内容的标签
• <section>：区段标签
• <aside>：侧边栏标签
• <footer>：尾部标签
  注： 这种语义化标准主要针对搜索引擎的，标签页面可以使用多次，在IE9中要把这些元素转换为块级元素，这些标签是双标签，移动端更喜欢用。
  其他标签

2、新增多媒体标签

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

（1）音频标签 <audio>

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

注： 可以使用格式工厂软件修改音视频格式

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

<!-- 音频的标签和属性 -->
    <!-- controls 显示控件 autoplay 自动播放（谷歌禁用） loop循环 -->
    <!-- h5 中如果标签属性名和属性值是一样的，那么可以省略属性值不写 -->
    <audio src="media/snow.mp3" controls autoplay loop></audio>
    <!-- preload 网页加载时加载，遇到autoplay失效 -->
    <audio src="media/snow.mp3" controls preload="preload" loop></audio>
    <audio src="media/snow.mp3" controls="controls"></audio>
<!-- 多种音频格式的兼容写法 -->
    <audio controls>
        <source src="media/snow.mp3" type="audio/mpeg">
        <source src="media/snow.ogg" type="audio/ogg">
        您的浏览器版本过低，不支持音频播放
    </audio>

（2）视频标签 <video>

格式	MIME-type	IE9	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>标签常见属性

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

<!-- 视频文件的标签和属性 -->
  <!-- muted解决自动静音播放问题 poster加载等待的画面图片 -->
  <!-- <video src="media/video.mp4" controls muted="muted" width="200px" height="300px" poster="images/pig.jpg"></video> -->
  <!-- 不同的浏览器兼容写法，需要添加多个视频资源文件 -->
  <!-- <video controls width="200px">
    <source src="media/video.mp4" type="video/mp4">
    <source src="media/video.ogg" type="video/ogg">
    您的浏览器版本过低，不支持 video 视频标签
  </video> -->
   <video src="media/video.mp4" muted width="200px" height="300px" controls="controls"></video>

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

3、新增表单标签

（1）输入标签

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

（2）<datalist>标签

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

<form action="">
        姓名：<input type="text" value=""><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"><br>
        城市：<input type="text" list="list01"><br>
        <!-- 预定义一些选项 -->
        <datalist id="list01">
            <option value="广州">gz</option>
            <option value="深圳">sz</option>
            <option value="北京">bj</option>
            <option value="上海">
        </datalist>
        <input type="submit" value="提交">
    </form>

（3）表单属性

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