1.H5发展历史
由上面的图可以得知，现在的HTML5还不是一个最终统一的版本，所以说HTML5用在手机端的开发
2 HTML5的支持浏览器
不同的浏览器显示的效果可能不一样。因为HTML5没有一个统一的标准，不同的浏览器解析时不一样的，现在还处于一个推广的阶段，但是大部分的还是一样的
HTML5的特点
1、更简单,但是在实际开发中要注意书写规范，利于后期维护
2、标签的语义化
扩展：语义化的重要性：
① 当页面加载失败的时候，还能够呈现出清晰的结构
② 有利于SEO优化，利于被搜索引擎收录（即便于网络爬虫的识别）
③ 在项目开发及维护时，语义化的也很大程度上降低开发难度，节省成本
3、语法更宽松
4、多设备跨平台
5、自适应网页设计
HTML4标签写法（之前的写法）
HTML5标签语义化写法
HTML5标签语义化
html5与html4的区别
（1）废除了一些过时的html4标签：center、font、u
（2）添加了一些新的元素
比如：更加智能的表单元素：date、email、 url等；
更加合理的结构标签：section、nav、aside等；
（3）新的全局属性：meta、lang、等
（4）文档类型声明：<!doctype html > 的简化
（5）新的js API
html5新增标签类型有：
结构标签 Web应用标签 表单标签 其他类型标签
1、结构标签：
<header> 头标签
<nav> 导航标签
<article> 文章标签
<aside> 侧边栏导航
<footer> 页脚
<section> 章节、页眉、栏目(大盒 子)
<hgroup> 标题组合元素
<figure> 独立的流内容元素（图像、图表、照片、代码）
figcaption为 < figure > 元素定义标题。
Main 主体内容 (兼容)
dialog 标记定义一个对话框(会话框)类似微信,只有 Chrome 和 Safari 6 支持 标签
<dialog open></dialog> open 规定 dialog 元素是有效的，用户可以与它进行交互
canvas标记定义图片
HTML5 的多媒体标签的出现意味着富媒体的发展以及支持不使用插件的情况下即可操作媒体 文件，极大地提升了用户体验
新增结构元素的说明：
（1）、header标签：
定义文档的页眉，表示页面中一个内容区块或者整个页面的标题和导航信息。
它不局限于写在网页的头部，也可以写在网页内容里面，通常<header>标签至少包含（但不局限于）一个标题标记（<h1>~<h6>）,
还可以包含<hgroup>标签，包括表格内容、表单、<nav>导航等
（2）、footer标签：
定义页脚内容；包含了页面、文章或是部分内容有关的信息，比如文章的作者或者日期。
（3）section标签：
定义文档中的节；比如：章节、页眉、页脚或是文档其他部分，可以与h1-h6等元素结合起来使用，标示文档的结构，属于独立成节的内容，用来表现普通的文档内容或是应用区块，通常由内容及其标题组成。
（4）、 article标签 ：
表示页面中的一块与上下文不相关的独立内容；譬如博客中的一篇文章或者报纸中的一篇文章；代表一个独立的、完整的相关内容块；可独立于页面其他内容使用；一般来说，article会有标题部分（通常包含在<header>内），有时也会包含footer，并且article可以嵌套，例如：一篇博客文章，可以用article显示，然后一些评论可以用article形式嵌入其中；
（5） nav标签：
表示页面中导航链接的部分、① 传统的导航条 ② 腾讯新闻 ③侧边栏导航 ④内业导航 ：百度百科 ⑤翻页操作
（6）aside标签：
表示acticle元素的内容之外的，与article元素的内容相关的辅助信息。它包含的内容与页面的主要内容是分开的可以被删除，但不会影响到网页的内容、章节或其他；可做为：如广告、成组的链接、侧边栏等；
（7） hgroup标签：
是对网页或者区段section的标题元素（h1~h6）进行组合；例如：在一区段中有连续多个h标签，则可以用hgroup将他们进行括起来。
（8）figure标签：
表示一段独立的流内容，一般表示文档主体流内容中的一个独立单元，用于对元素进行组合，多用于图片与描述内容组合；
使用figcaption元素为figure元素添加标题, figure 中只能放置一个 figcaption;
figure 是一种元素的组合，带有可选 标题。用来表示网页上一块独立的内容。
2、新增web应用标签：
progress 表示进程
meter 表示测量尺度
details 描述文档或文档细节（只有Chrome 支持）
datalist 定义选项列表。
（1）progress标签：
状态标签，显示进度，（任务过程：安装、加载）；Ie9及更低版本不支持，多用于js控制（ 此标签不常用）
属性：value: 设置已经完成的情况
max：设置最终要完成的情况
应用代码：
<progress id=“pr” value=“30” max=“100” > </progress>
(2）meter标签：
用于表示已知范围或分数值内的标量测量,也被称为尺度；属性仅用于已知最大和最小值的度量；ie浏览器不支持（ 此标签不常用）
常用属性：value：设置 规定度量的当前值
min：规定范围的最小值
max：规定范围的最大值
应用代码：
<meter id=”mt” value=”30” min=”10” max=”100”> </meter>
（3）details标签：折叠区块
用于描述文档或文档某个部分的细节；
目前只有 Chrome 和 Safari 6 支持<details> 标签。
<summary>在其内，配合使用，为其定义标题；并且该是其内第一个标签
属性：open =”open” :设置信息是否可见
应用：
<details open="open">
<summary>标题</summary>
<p>详细内容描述</p>
</details>
（4）datalist标签：
定义选项列表，与input配合使用定义input可能的值；
应用：
(1)将option当作单标记使用
<input id="mycity" list="city" />
<datalist id=”city ” >
<option value="shanghai" />
<option value="beijing" />
<option value="wuhan"/>
</datalist>
（2）另一种写法
<input id="mycity" list="city" />
<datalist id=”city ” >
<option value="1">上海</option>
<option value="2">北京</option>
<option value="3">武汉</option>
</datalist>
怎样让老浏览器兼容新标签
第一种兼容设置方法：（放在header里，css引用之前的位置）
<!--[if lt IE 9]>
<script type="text/javascript">
var e=("abbr,article,aside,audio,canvas,datalist,details,"+
"figure,footer,header,hgroup,mark,menu,meter,nav,output,"+
"progress,section,time,video").split(',');
for(var i=0;i<e .length;i++){
document.createElement(e[i]);
}
</script>
<![endif]-->
<style>
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary
{
display: block;
}
</style>
第二种用框架的方法，用到条件注释加JS代码实现 ：
<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<![endif]-->
直接加入这一句代码就可实现兼容问题，关于条件注意中的
是判断是否小于IE9以下浏览器，如果是就执行这段JS代码 ，如果不是，就忽略掉。至于JS中的链接直接打开进去看看就知道了，也是一大段的代码。
建议使用第二种，因为不用我们自己手写相关的js代码，同时也可以降低代码的出错率，我们可以选择把第二种的js文件下载下来放入到我们的文件中，这样可以避免在网速比较慢的情况下，页面出错。
3、新增的其他元素
1）mark
高亮显示文字，典型应用搜索结果中高亮显示搜素关键字。
写法：<mark></mark>
2）source 标签
标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源。
（2）video
定义视频，比如电影片段或其他视频流；
写法：<video src=”” ></video>
ogg 文件，适用于Firefox、Opera 以及 Chrome 浏览器。
当前，<video>元素支持三种视频格式： .MP4, .WebM, 和 .ogg:
可设置属性：
src ：视频的路径
Width: 视频播放器的宽度
height： 视频播放器的高度
autoplay：autoplay ; 表示立刻播放
controls：controls;显示播放控制组键
loop：loop; 反复播放；布尔值，如果设置了就会重复播放否则不会；
muted：muted ; 处于静音状态
poster; 指定视频数据载入时显示的图片
preload: auto / metadata / none ;表示预先载入视频
取值none不预先载入；auto一旦页面加载就会开始加载视频，默认值；
metadata 页面加载后仅加载元数据，和默认有点类似；
（主流浏览器都不支持，除了IE；）
兼容浏览器的写法：
<video width=”200”height=”200”controls=”controls”>
<source src="movie.mp4" type="video/mp4"></source>
<source src="movie.ogg" type="video/ogg"></source>
（还可以加载其他格式）
您的浏览器不支持 video 标签。
</video>
注： 定义多种媒体类型，例如、中的文件类型
（3）audio
定义音频，比如音乐或其他音频流
写法：
<audio src=“ ”> </audio>
Safari 浏览器，音频文件必须是 MP3 或 Wav 类型 mpeg。
兼容浏览器写法：
<audio controls=”controls”>
<source src="horse.mp3" type="audio/mpeg">
<source src="horse.ogg" type="audio/ogg">
<embed height="50" width="100" src="horse.mp3">
</audio>
4、新增表单标签以及属性
Html表单一直都是web的核心技术之一，html5为表单添加了新的js功能和结构上更加自由的写法，极大的提高了开发效率，xhtml中需要放在form中，而html5中表单元素可以放在页面任何位置；
新增表单类型元素：
email 邮箱
url 网址
number 数值
range 范围数值
date 日期
search 搜索
color 颜色
1、 email： 邮箱类型的文本框验证
应用： <input name=”email1” type=”email” required />
2、 url : 输入URL地址的文本框
应用： <input name=”url1” type="url" required />
3、 color ： 用来选取颜色。
应用： <input name=”color1” type="color" required />
4、 number： 用来输入数字的文本框。
属性：min ：允许的最小值
max： 允许的最大值
step： 规定的间隔值
value：默认值
应用 ：
<input name=”number1” type="number" value="20" minn="10" max="100" step="5" required />
5、 range： 用来只允话输入一段范围内数值的文本框
属性： min 最小值
max 最大值
step 拖动的步幅间隔值
value：默认值
应用：
<input name="range1" type="range" value="25" min="0" max="100" step="5" />
6、 search : 用于搜索域，显示为常规的文本框，除了火狐浏览
器其他都会在输入框里显示一个取消搜索的符号
应用：<input name=”search1” type="search" />
7、 date : 提供多个选取日期和时间的新输入类型
属性：
·date - 选取日、月、年
·month - 选取月、年
·week - 选取周和年
·time - 选取时间（小时和分钟）
·datetime - 选取时间、日、月、年（UTC世界标准时间）
·datetime-local - 选取时间、日、月、年（本地时间）
8、 output ：用于不同类型的输出，比如计算或脚本输出，显 示计算结果
注：必须从属于某个表单。即，必须将它书写在表单内部，或对它添加form属性。
应用：
第一种：
<form oninput="out.value=parseInt(a.value)+parseInt(b.value)">
"0"
<input type="range" id="a" value="50" >
"100"
<input type="number" id="b" value="50" >
"="
<output name="out" for="a b">
"120"
</output>
</form>
第二种：
<form oninput="cun.value=num1.valueAsNumber + num2.valueAsNumber">
<input type="number" value="30" id="num1"> +
<input type="number" value="20" id="num2"/> =
<output name="cun" for="num1 num2">
50
</output>
</form>
对新元素样式的使用：
注意，跟 input 标签设置样式一样，但是要设置标签中局部的样式不能实现。如改变日历的背景色，颜色框的按钮效果，等，这些都不可以实现
9、 form ：可以通过id 匹配所属表单,可以实现表单元素放在表单之外；
应用：<form id=”myform”></form>
<input type=”text” form=”myform” />
表单验证
HTML5增加了大量在提交时对表单及表单元素内容有效性验证的功能。
1、自动验证
1）、required
可以应用在大多数输入元素上（除了隐藏元素和图片），在提交时如果元素内容为空白，则不允许提交，同时显示提示文字。
2）、pattern
将属性值设为某个格式的正则表达式，在提交时会检查其内容是否符合给定格式。
例：<input pattern = “[0-9][A-Z]{3}” title="输入内容：一个数与三个大写字母" placeholder=‘输入内容：一个数与三个大写字母’>
1:用户名验证规则 : 用户名长度为6~12并且由字母组成
pattern="[A-z]{6,12}"
2:密码验证规则 : 密码必须是数组与字母组合
pattern="[A-Za-z].[0-9]|[0-9].[A-Za-z]"
（3） placeholder属性：
文本框处于未输入状态时文本框中显示的输入提示。
（4） autofocus属性：给文本框、选择框、或者按钮控件加上该属性，当打开页面时，该控件自动获得焦点，一个页面只能有一个。
（5） autocomplete属性：输入富足和所用的自动完成功能，是一个节省输入时间，同时也十分方便的功能。只有三种：on/off/""。on可显示指定候补输入的数据列表，使用datalist元素与list属性提供候补输入的数据列表，自动完成时，可以将该datalist元素中的数据作为候补输入的数据在文本框中显示：
<input type="text" name="greeting" autocomplete="on" list ="greeting">
(6)Novalidate属性 取消验证 可以对form表单添加novalidate属性，即使form表单中的input添加了required，也将不进行验证
在 Safari 和 Internet Explorer 9 及之前的版本中不支持 novalidate 属性。
