Html5
HTML5 ≈ 标签(HTML5) +CSS3+JAVASCRIPT
IE9 chrome谷歌 FF Opear Safari 2010开始支持HTML5
DTD文档声明 <!DOCTYPE html>
字符集 <meta charset=”utf-8”>
标签书写的改变
a) 不允许写结束标签(单标签)
br、hr、img、input、link、param、keygen、area、base、col、wbr、.....
b) 可以忽略结束标签（框架内部的列表选项）
li、tr、td、dd、dt、option、p...
c) 可以忽略的标签（可以不写）
head、body、html、tbody、thead、colgroup
有些单属性设置的时候可能需要加上 布尔值 checked=true（格式）
新增的标签:
结构标签：标签名字有特殊意义的div
Section 主体内容、文章
article 完整的文章、新闻、博文、评论
aside 非主体内容（一般侧边栏）
header页面或文章头部区域
Footer 页面或文章底部区域
Hgroup一组标题区域
Nav 导航区域（页面中文章的分页区域）
Figure 内容描述解释区域
<figure>
<figcaption><img src="t011f8ea1d640ac90d5.jpg" ></figcaption>
<P>中国反恐工作面临“严峻”挑战</P>
</figure>
Figcaption 描述配合标签 （定义描述主体如图片，把图片包含其内部）
Address 真实地址或者url地址区域
新增的其他标签:
Audio 用于播放音频文件
格式:(普通格式)
<audio src=”音频地址” controls autoplay loop>后备内容：您的浏览器不支持该功能</audio>
格式:（完整格式）
<audio controls>
<source src=“音频地址” type=”audio/mp3”>
<source src=“音频地址” type=” audio/wav”>
<source src=“音频地址” type=”audio/ogg”>
后备内容：您的浏览器不支持该功能
</audio>
注意其中preload属性为音频是否预加载
值一：none 不预加载（默认值）
值二：auto 预先加载(打开页面就加载)
注意: preload属性和autoplay属性冲突.
video 视频标签和audio标签用法一样
其中它的source的type属性的值为video/mp4
<source src=“视频地址” type=” video/mp4”>
<source src=“视频地址” type=” video/视频格式”>
Video比audio多的两个属性:
Width:设置视频窗口宽度
Height：高度
Poster：使用方法=“url”引入播放视频前背景图片；
Canvas 画布标签
embed 多媒体标签 1属性src=“用于引入flash路径”
<embed src="http://img5.3lian.com/flash/01/26/58.swf"></embed>
Meter 状态标签
<meter max="100" min="0" value="59" low="60" high="85" optimum="100"></meter>
max 最大值 min 最小值 value指定值
high指定边线值 大于指定值 默认绿色警告
low 指定边线值 小于指定值 默认红色警告
optimum 设置是否大于最大边线值或者小于最小边线值 optimum若大于最大边线值->指定值大于最大边线值时为绿色
optimum若小于最小边线值->指定值小于最小边线值时为绿色（也是默认的无optimum设定时的状态）
Progress 进度条标签
<progress max="100" value="0"></progress>
max 进度条最大值-整数
value 进度条当前值-整数
mark 高亮标记标签
<p>近几日，<mark style="background:purple">苍老师</mark>要到烟台演出，据说门票580元，可惜俺去不了</p>
time 标注时间的标签
<p><time datetime="2014-05-08T19:30:28">今晚日落时分</time>，在宿舍洗干净等着我.</p>
<p><time datetime="2014-05-08T19:30:28" pubdate>今晚日落时分</time>，发布MH370事故报告.</p>
属性1: datetime解释具体的时间
属性2: pubdate设定当前时间为发布时间（单属性）
格式: 年-月-日T时:分:秒
年-月-日T时:分:秒+08:00 带时区时间
年-月-日T时:分:秒Z 国际统一时间
Ruby 设定文字的拼音或者其他音译解释
Rt 用于设置音标的标签
<ruby>
漢 <rt>han</rt>
</ruby>
<p>猥(zheng)琐(zhi)</p>
Rp 当浏览器不支持拼音注释时 使用
Details 细节描述标签
Summary 描述的标题标签
datalist 可选的数据下拉列表标签（下来菜单）
使用:
1.为datalist添加一个id
2.在input标签中使用list属性指定id即可
dialog 对话标签
该标签需要配合dt和dd标签使用
dt标签用于表示姓名或者昵称
dd用来表示对话内容
abbr 缩写代码标签
title属性用于描述详细内容
4.删除的标签
删除的标签分4种:
1.可以使用CSS代替的标签
font、big、center、u、tt、basefont、s、strike..
2.框架集标签
frame和frameset 被删除了，但是iframe没有删除
3.只有部分浏览器支持的标签
bgsound、applet、blink、marquee..
4.被替换的标签
Rb->ruby 代替
Acronym->abbr代替
Xmp->code 代替
。。。
新增的属性（智能表单）
新增的表单属性.type的新类型
email 邮件地址表单
url url地址表单
number 数值表单
range 滑块表单
search 搜索表单 chrome 可以使用results=”n” 搜索小图标
color 颜色表单
tel 电话表单 没有验证规则 和type=text没区别
date 日期表单
time 时间表单
datetime 完整的日期时间表单
week 周选取表单
month 月选取表单
表单的新用法:(分散式表单书写规则)
html5为了布局的方便，设定了新的表单使用方式
1.为form标签添加id
2.为所有当前form中的表单标签添加form属性指定form标签的id，即可绑定该表单,任意位置都可以使用.
output标签 表单值输出标签
其他表单属性：
Autofocus 自动获取焦点属性 （焦点只能有一个）
placeholder 用于设定表单的提示信息 不会随表单提交给服务器
Form 为表单设定归属于哪一个form表单当中（值为form标签的id）
Required 设定字段的值必须由用户填写,不写不能提交
Min 设定表单的最小值 （number类型 、时间类型、滑块类型）
max 设定表单的最大值 （number类型、时间类型、滑块类型）
Multiple 多选下拉列表属性(select) 多选文件上传表单（input type=”file”）
Step 设定表单数值的增加或者减小的值(适合number表单)
Pattern 设定一个表单的自定义验证规则.
Formaction 设定当前提交按钮的提交页面（该设置会覆盖form标签的action属性）
Formmethod 设定当前按钮的提交方式 （该设置会覆盖form标签的method属性）
Formenctype 设定当前按钮的提交类型（该设置会覆盖form标签的enctype属性）
Formtarget 设定当前按钮提交之后的页面打开方式.（该设置会覆盖form标签的target属性）
Formnovalidate 设定当前按钮提交的验证方式.（该设置会覆盖form标签的novalidate属性）
novalidate 禁止验证属性 form标签使用后，所有该表单中需要验证的表单将不做验证操作
新增的其他属性:
a 标签增加了media属性
meta 标签增加了charset属性
link标签增加了size的属性
base 标签增加了target属性
ol标签 增加了 reversed属性
style标签 增加了scoped属性 用于设定CSS作用范围（重要但是不能用）
script 标签增加了 async属性
html标签增加了 mainfest属性 离线网站应用的属性
删除的属性
1.页面中终于表示样式的属性全部删除
例如 body 标签中 bgcolor、background、vlink、alink、等...
2.删除了部分无用的属性
link标签中target属性,img标签中name属性...
新增的全局属性
ContentEditable 设定内容可以编辑
设定具有该属性的元素是否具备可以编辑的功能（页面中临时改变，如果需要改变真实内容，需要其他语言配合）
designMode 设定页面所有元素是否可以编辑（只能在JS中设置）
可以再JS中通过语法
document.designMode= ‘on’ ; 设置该选项
Hidden 设定元素是否显示
在HTML5中 该属性可以对任何元素使用，设定该元素为不显示状态，效果和display:none效果相似
Spellcheck 设定元素进行英文拼写检测属性（不支持汉字）（未实现）
tabindex 设定tab键的索引属性
video 视频标签
格式:(普通格式)
<video src=”视频地址” controls>后备内容</video >
Width:设置视频的宽度
height：设置视频的高度
poster: 设置视频预览图片
Details 细节描述标签
Summary 描述的标题标签
<details>
<summary>手贱请点击</summary>
<p>
色戒信息<br />
主演:梁朝伟、汤唯、王力宏...
</p>
</details>
datalist 可选的数据下拉列表标签（下来菜单）
<input type="text" name="user" value="" list="lamp84" />
<datalist id="lamp84">
<option>丛涛的不归路</option>
<option>丛浩的不归路</option>
</datalist>
dialog 对话标签
<dialog>
<dt>丛浩:</dt>
<dd>小玲，今天晚上有空吗？</dd>
<dt>小玲:</dt>
<dd>我们一起翻滚吧~</dd>
<dt>莹莹:</dt>
<dd>你们不要这样子啦~~</dd>
</dialog>
abbr 缩写代码标签<abbr title="开房菜">KFC</abbr>
title属性用于描述详细内容
删除的标签
删除的标签分4种:
1.可以使用CSS代替的标签font、big.
2.框架集标签frame和frameset 被删除，但iframe木删除
3.只有部分浏览器支持的标签bgsound、marquee..
4.被替换的标签
Rb->ruby 代替-解释汉字
Acronym->abbr代替 <abbr title="开房菜">KFC</abbr>
Xmp->code 代替-代码
。。。
新增的表单属性.type的新类型
email 邮件-规定格式@
url url地址-规定格式http://www...
number 数值
range 滑块(max="100" value="0")
滑块通过（output对标签）标签实现滑动显示值
滑块:<input type="range" name="fen1" max="100" value="0" />
<!--仅opear浏览器有效-->
<output onforminput="value=fen1.value" >0</output>
search 搜索chrome 可以使用results=”n” 搜索小图标
<input type="search" name="keywords" value="" results="n" />
color 颜色表单
tel 电话表单 没有验证规则 和type=text没区别
date 日期表单
time 时间表单
datetime 完整的日期时间表单
week 周选取表单
month 月选取表单
表单的新用法:(分散式表单书写规则)
<!--使用前-->
<form action="1.php" method="get">
<input type="text" name="username" value="" placeholder="请输入名字" autofocus >
<!-- Autofocus 自动获取焦点(单属性)->
<!-- placeholder设定表单的提示信息不会自动提交和value的区别->
<button type="submit">提交</button>
</form>
<!--使用后-->
<form action="1.php" method="get" id="myform"></form>
<input type="text" name="username" value="" form="myform" >
<button type="submit" form="myform">提交</button>
表单的其他属性
Required 设定字段的值必须由用户填写,不写不能提
用户名:<input type="text" name="username" value="" required /><br>
Min 设定最小值 （number 、时间、滑块）
max 设定最大值 （number、时间、滑块）
Multiple多选文件上传
多文件上传:<input type="file" name="face" multiple value="" /><br>
Step 数值的增加或减小段
数值<input type="number" name="no" value="" step="5" >
Pattern自定义验证规则 =“”
电话:<input type="tel" name="tel" value="" pattern="\d{11}"><br>
电话：<input type="tel" name="tel" value="" pattern="^1((3\d)|(47)|(5[0-35-9])|(8[0-35-9]))\d{8}$"><br>
Formaction 当前按钮提交页面formaction="2.php"
Formmethod 当前按钮提交方式f ormmethod="post"
Formenctype 当前按钮提交类型
Formtarget 当前按钮提交后页面打开方式formtarget="_blank"
Formnovalidate 当前按钮页面无验证提交（单属性）
novalidate form里面的的禁止验证属性 设定后，该页面中所有设定验证的表单将不做验证就可提交（单属性）
新增的其他属性:
a 增media属性
meta 增charset
link增size
base 增target
ol 增reversed----à列表的序号倒过来
<!doctype html>
<meta charset="utf-8" >
<ol reversed type="a">
<li>曾小玲
<li>付莹莹
<li>许雪颖
<li>詹慧婷
</ol
style标签 增加了scoped属性 用于设定CSS作用范围（重要但是不能用）
script增 async
html增mainfest 离线网站应用的属性
删除的属性
1.页面中表示样式的属性全部删除bgcolor、background、vlink、alink、等...
2.删除了无用属性link标签中target属性,img标签中name属性...
新增的全局属性
contentEditable 设定内容可以编辑
设定具有该属性的元素是否具备可以编辑的功能（页面中临时改变，如果需要改变真实内容，需要其他语言配合）
designMode 设定页面所有元素是否可以编辑（只能在JS中设置）
可以再JS中通过语法
document.designMode= ‘on’ ; 设置该选项
hidden 设定元素是否显示
在HTML5中 该属性可以对任何元素使用，设定该元素为不显示状态，效果和display:none效果相似
Spellcheck 设定元素进行英文拼写检测属性单属性（不支持汉字）（未实现）
tabindex 设定tab键的索引顺序
<!doctype html>
<meta charset="utf-8" >
<script>
//设定页面所有内容可以编辑
//document.designMode='on';
</script>
<p hidden>请问:饥饿和饥渴有什么区别？答案:区别就是可以表示黄瓜的2种的不同用法!</p>
<p contentEditable>请问:饥饿和饥渴有什么区别？答案:区别就是可以表示黄瓜的2种的不同用法!</p>
<p hidden>请问:饥饿和饥渴有什么区别？答案:区别就是可以表示黄瓜的2种的不同用法!</p>
<p spellcheck> spellcheck </p>
<hr> value=”” placeholder=”请输入名字”该属性 不会提交默认字
<input type="text" name="user" value="" tabindex=1 autofocus />
<input type="text" name="user" value="" tabindex=4>
<input type="text" name="user" value="" tabindex=2 />
<input type="text" name="user" value="" tabindex=5>
<input type="text" name="user" value="" tabindex=3 />
<button type="submit" tabindex=6>提交</button>
HTML5及DOM2.3扩展
innerHTML 获取/设置元素内部所有的内容，包括文本，标签注释等...解析HTML标签
innerText / textContent获取/设置元素内容的文本内容，该方法设置时不解析HTML标签
outerHTML 获取当前元素和元素内部的所有内容，包括文本、注释、标签等....可以解析HTML标签效果.
outerText获取当前元素和元素内部的所有文本内容，但是效果和innerText一样 不解析HTML标签
节点新增的属性：关系属性
firstElementChild 获取元素的第一个子元素节点
lastElementChild 获取元素的最后一个子元素节点
nextElementSibling获取下一个兄弟元素节点
previousElementSibling获去上一个兄弟元素节点
ChildElementCount 获取某个元素的子元素节点个数
children获取元素所有子元素节点的列表数组
新的获取元素的方法：
getElementsByClassName() 通过元素的class属性来获取节点集合
格式1：document.getElementsByClassName() 全文档查找
格式2: 元素节点.getElementsByClassName() 元素内部查找
getElementsByTagName() 通过元素的标签名来会获取属性节点集合
格式1：document.getElementsByTagName() 全文档查找
格式2: 元素节点.getElementsByTagName() 元素内部查找
querySelector() 通过CSS选择器来查找所有符合当前选择器的元素，但是返回第一个
querySelectorAll() 通过CSS选择器来查找所有符合当前选择器的元素，返回所有符合当前选择器的数组
