H5笔记（一） -基本特性
1、验证代码工具：
在线CSS代码分析工具-CssStats：http://www.cssstats.com
W3C统一验证工具：http://validator.w3.org/unicom/
2、代码压缩工具：ctrl+shift+左大括号
或者，站长之家（PR查询等效果）-->代码压缩：tool.chinaz.com/Tools/CssFormat.aspx，将css代码复制可以压缩。
3、H5新标签：
（ie9以上版本才支持,移动端可兼容）
变化：
文档类型设定：
HTML: sublime 输入 html:4s
XHTML: sublime 输入 html:xt
HTML5: sublime 输入 html:5 <!DOCTYPE html>
字符设定：
HTML和XHTML中：<meta http-equiv="charset" content="utf-8">
HTML5：<meta charset="utf-8">
新标签：
（1）<header> 定义文档页眉，头部 </header>
（2）<nav> 定义导航栏链接部分 </nav>
（3）<footer> 定义文档或节的页脚，底部</footer>
（4）<article> 定义文章</article>
（5）<section> 定义文档中的节 </section>
（6）<aside> 定义其所处内容之外的内容，侧边</aside>
（7）标签定义选线列表（输入关键字就会匹配）：datalist，与input配合使用
<input type="text" value="请选择" list="star"/>
<datalist id="star"><option value="1">1</option><option value="2">2</option></datalist>
（8）将表单内的相关元素分组：fieldset,与legend配合使用
<fieldset>
<legend>用户登录<legend> 标题
用户名: <input type="text"><br /><br />
密 码：<input type="password"><br /><br />
</fieldset>
（9）新增表单input验证属性：type="email"(验证邮箱是否正确)、type="tel"(验证手机号码是否正确)、type="url"(验证网址)、type="number"、type="date"...
表单布局可用：form dl dt dd
（10）新增表单属性：
placeholder：
autofocus：光标自动定位，autofocus="autofocus"
multiple:：上传文件时候实现多选
autocomplete：规定表单是否启用自动完成功能
required：不能为空
accesskey：激活元素的快捷键 accesskey="s",点击s键，激活光标
（11）插入视频：
一般上传到视频网站，再复制分享的代码放入代码中，但有广告。
但，H5有自己插入视频方式，<audio></audio>,支持Ogg、MP3、wav三种格式 (格式工厂转换视频格式)
（12）播放声音：
autoplay自动播放
controls播放控件
loop循环播放
（13）播放视频：
4、CSS3新增选择器：（结构伪类选择器和属性选择器）
（1）结构(位置)伪类选择器：
:first-child 选取属于其父元素的首个子元素的指定选择器
:last-child 选取属于其父元素的最后一个子元素的制定选择器
:nth-child(n) 匹配属于其父元素的地N个子元素，不论元素的类型，n是第几个的意思
:nth-last-child(n) 选择器匹配属于其元素的第N个子元素的每个元素，不论元素的类型，
:nth-child(2n) n从0开始，2n是偶数的意思
:nth-child(even) 偶数的
:nth-child(odd) 奇数的
--->li的第一个孩子：li :first-child
--->第一个孩子的名字是li：li:first-child
（2）属性选择器：
选取标签带有某些特殊属性的选择器，称为属性选择器
（正则表达式中：^是开头，$是结尾）
div[class^=font]{ clolr:pink;} 在div中有class以font开头的就匹配该属性
div[class$=font]{ clolr:pink;} 在div中有class以font结尾的就匹配该属性
div[class*=font]{ clolr:pink;} 在div中有class中只要有font的就匹配该属性
5、CSS3伪元素选择器：
(以四个点开头，两个点开头是css2，也可生效)
E::first-letter 文本的第一个单词或字（如中文、日文、韩文等）
E::first-line 文本第一行
E::selection 可改变选中文本的样式，鼠标选中的效果
div::before {content: "我" }，在div里面，即div内容的前面加上的内容
div::after{content: "我"}，在div里面，即div内容的后面加上的内容
清楚浮动的时候用到 .clearfix
6、CSS3盒模型：
div{ box-sizing: border-box;} 添加此句，变成内减模式，不论怎么添加margin、padding的大小，div盒子都会以width给定的宽来定。
