H5新特性2. Input 新增了type 5. Canvas

1.语义化标签: header footer section nav aside article

2. Input 新增了type

color------点击时弹出颜色选择器

Number ------数字

Email ------- 电子邮件的格式

Url ------- 网址

Range ------滑块

Data ----- 日期

Month，week，time，datetime、datime-local（获取本地时间）

Search ------- 普通的搜索域

新增表单元素：

Datalist ：

<input name="" id="myCar" list="cars"/>	
<datalist id="cars">			
    <option value ="RMW"></option>			
    <option value ="ford"></option>		
    <option value ="volo"></option>		
</datalist>

keygen

用于表单的密钥对生成器字段

当提交表单时，私钥存储在本地，公钥发送到服务器

<form action="demo_keyken.asp" method="get">
	Username: <input type="text" name="user_name"/><br />			
        Encryption: <keygen name="security" /><br />			
        <input type="submit" value="提交"/>
</form>

Output

定义不用类型的输出，如脚本输出

<form oninput="x.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="x" for="a b"></output>
</form>

随着滑块的改变，改变最后的数值

3.新增表单属性

placehoder required min max

4.音视频

audio video

5. Canvas

6.地理定位

getCurrentPosition() 来获取用户的位置

7.H5新事件：

Onresize 调整窗口大小时运行的脚本

Ondrag 拖动元素

Onscroll 滚动滚动条

Onmousewheel 转动鼠标滚轮

Onerror 错误

Onplay 媒介数据开始播放时

Onpause 媒介数据暂停时候

Css3新特性

选择器：

:last-child /* 选择元素最后一个孩子 */

:first-child /* 选择元素第一个孩子 */

:nth-child(1) /* 按照第几个孩子给它设置样式 */

:nth-child(even) /* 按照偶数 */

:nth-child(odd) /* 按照奇数 */

:disabled /* 选择每个禁用的E元素 */

:checked /* 选择每个被选中的E元素 */

:not(selector) /* 选择非 selector 元素的每个元素 */

::selection /* 选择被用户选取的元素部分 */

伪类

:last-child /* 选择元素最后一个孩子 */

:first-child /* 选择元素第一个孩子 */

:nth-child(1) /* 按照第几个孩子给它设置样式 */

a:link {color: #FF0000} /* 未访问的链接 */

a:visited {color: #00FF00} /* 已访问的链接 */

a:hover {color: #FF00FF} /* 鼠标移动到链接上 */

a:active {color: #0000FF} /* 选定的链接 */

背景，边框

border-radius：圆角
box-shadow / text-shadow：阴影
border-image：边框图片

background-size：规定背景图片的尺寸（cover：填充；100% 100%：拉伸）
background-origin：规定背景图片的定位区域

对于

background-origin 属性，有如下属性

背景图片可以放置于

content-box、padding-box 或 border-box 区域

超出展示省略号：

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

overflow: hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp:3;

-webkit-box-orient: vertical;