HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。H5有兼容性问题，如果不考虑低版本浏览器，H5是绝对的主流。移动端开发则必须选它。H5带来了革命性的变化。
一、什么是H5
HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。
HTML5 是 W3C 与 WHATWG 合作的结果。
W3C 指 World Wide Web Consortium，万维网联盟
WHATWG 指 Web Hypertext Application Technology Working Group。
WHATWG 致力于 web 表单和应用程序，W3C致力于XHTML2.0
在 2006 年，双方决定进行合作，来创建一个新版本的 HTML。
H5有兼容性问题，如果不考虑低版本浏览器，H5是绝对的主流。移动端开发则必须选它。
二、HTML5 设计理念：
1、避免不必要的复杂性，做减法，比如：
(1)文档声明
html5：
<!doctype html>
html4：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
(2)字符编码
html5：
<meta charset="UTF-8" />
html4：
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
(3)省略链接css、JavaScript type声明
html5：
<link rel="stylesheet" href="base.css" />
<script></script>
html4：
<link rel="stylesheet" href="base.css" type="text/css" />
<script type="text/javascript"></script> 2、支持已有内容：完全向下兼容
3、新增语义元素，给内容分区
4、减少脚本操作（比如给表单新增了email等类型，required属性可以直接进行简单的表单验证）
5、语法相对于XHTML更加宽松
三、H5的革命性变化
1、新增了语义化标签
2、新增了表单控件，自带验证功能，减少了一些JS操作
3、新增了画图功能：画图、游戏开发 canvas
4、多媒体：视频、音频 ，之前需要使用flash才能播放视频
5、本地存储。离线应用
6、地理定位。本地服务，附近的人
四、语义化标签
1、什么是语义化标签
之前学过的语义化标签：
ul unorder list 无序
li 列表项
p 段落
img
a
div不是语义化标签：将div分身成各种有语义化的名字。
header 头部
section 区域
article 文章（内容区域，主体区域）
aside 侧边栏
footer 尾部
nav 导航
//jS 就像JS起名也要起个有意义的名字
var a=1;//a是无语义化的
var name='张三' //name是有的 2、有什么用？
a、让结构更加清晰，更容易维护
b、对SEO更友好。SEO：搜索引擎优化，分站内和站外 （更看重这一块，目标：让网站排名靠前，内容出现在前面）
3、有哪些？
H5的新标签几乎都是语义化标签：布局标签+功能型标签
五、学H5要注意的事项
1、注意浏览器的兼容性问题，IE9以上、现代浏览器支持：谷歌、火狐以及使用了他们内核的浏览器，比如国产的那些浏览器
PS:浏览器内核：Trident（IE），Webkit或Blink(谷歌、Safari)，Gecko（火狐）
2、从第二点以后的新特性需要使用JS来实现（canvas、地理定位、本地存储、音视频控制等）
3、如何解决第一块兼容性问题：（扩展知识）
-
优雅降级（主流）
一开始就用最好最先进的技术来开发网页，而不管低版本浏览器，只保证在低版本浏览器中可用，不保证好看。
针对现代浏览器来开发。然后在老机型（老的浏览器）做适当的适配。
即不用考虑兼容性问题。
公司没有要求，默认就是优雅降级，即不用考虑兼容性问题。
-
渐进增强
用最保守最没有兼容性问题的标签或技术来开发。
优先保证在低版本浏览器能适配和好用，在高版本浏览器中可以做些锦上添花的效果。针对低版本浏览器。
适用场景：教育产品，偏远山区。老旧设备。
六、新增的表单类型（新增的表单控件类型）
回顾：表单控件有：
<input type="text|radio|password|checkbox|button|submit|file|reset">现在在H5中新增了更多的的控件类型：
<input type="text|radio|password|checkbox|button|submit|file|reset|number|tel|email|date|search|url|range|week|time">新增了有：数字 电话 邮箱 日期 搜索 网址 滑块 星期等控件。
在电脑上外观差异有，但是不大，真正要使用它的理由请看手机端。
七、新增的表单控件属性
1、autocomplete
自动完成 用在form标签上，可选。
2、novalidate
不自动验证，即取消掉required属性的作用，加了它以后，require自动失效。
用在form标签上：
<form novalidate="novalidate">
<input type="text" required>
<input type="submit">
</form>3、placeholder 常用
输入框的文本提示，用来增强用户体验。
可用于任意的输入框中。
<form>
<input type="text" required placeholder="请输入您的用户名">
<input type="password" placeholder="请输入您的密码">
<input type="submit">
</form>4、min,max,step
<!--
1.min 最小值
2.max 最大值
3.step 增量 每次增加多少，默认是1
用于range和number控件中
-->
<!-- 浏览器会显示上下小箭头，数字，手机上会显示数字面板 -->
数字：<input type="number" placeholder="数字" max="100" min="10" value="20" name="">
<br>
<!-- 浏览器会显示滑块，通过value获取滑块的值 -->
滑块：<input type="range" id="rg" placeholder="滑动条" max="100" min="10" value="20" name="">5、autofocus
自动聚焦 增加用户体验的。
给要自动获得焦点的控件添加，只能添加一个，多了也会用第一个
<form>
<!-- 要让谁自动获得焦点就给谁添加，一般只添加一个 -->
<input type="text" autofocus="" required placeholder="请输入您的用户名">
<input type="email" required="">
<input type="submit">
</form>6、required 常用
让控件必填，之前只能用JS来实现，减少了脚本操作。
注意：它只能验证是否非空，其他的要配合JS或pattern属性使用
<form >
<!-- required属性 -->
<input type="text" autofocus="" required placeholder="请输入您的用户名">
<input type="email" required="">
<!-- required和pattern属性结合使用能验证如下是否为正确手机号 -->
<input type="number" pattern="^1[3-9]\d{9}$" required >
<input type="submit">
</form>7、pattern 常用
写正则的，注意，不需要写//
pattern='正则表达式' ;//正则表达式跟JS的写法一样
<input type="number" pattern="^1[3-9]\d{9}$" required >8、list
配合新增的datalist标签来使用，如下：
<form>
<!-- 配合datalist使用，效果类似于select -->
<input type="text" name="" list="lists">
<!-- 以下写法也是可以的 -->
<datalist id="lists">
<option value="IE">IE1</option>
<option value="chrome">谷歌</option>
<option value="firefox">火狐</option>
<option value="Safari">苹果</option>
</datalist>
<!-- 注意：IE10以上单击出来，火狐双击出来，Safari不支持 -->
</form>此资源下载链接已被无情的隐藏，请输入验证码解锁：
请关注本站公众号回复“验证码”，获取验证码。
在微信里搜索“WEB前端全栈圈”或者“imqdcn”或者微信扫描二维码都可以关注微信公众号
