前端开发技能之HTML5

一.新添加元素和移除元素

新增的结构元素：

1. section元素：定义文档中的节
2. article元素：定义文档内的文章
3. aside元素：定义页面内容之外的内容
4. header元素
5. footer元素
6. nav元素：定义文档内导航链接
7. main元素：定义文档的主内容

新增的其他元素：

1. video元素，audio元素，canvas元素

新增的input类型：

1. email：必须输入email地址的文本输入框
2. tel：专用于电话
3. url：必须输入url地址的文本输入框
4. numbr：必须输入数字的文本输入框
5. range：必须输入一定范围数字值的输入框
6. readonly：只读，<input type="text" name="firstname" value ="John" readonly>
7. disabled：禁用，不可修改，<input type="text" name="firstname" value ="John" disabled>
8. maxlength：规定输入字段允许的最大长度，<input type="text" name="firstname" maxlength="10">
9. placeholder：可输入字段的预期的提示信息，<input type="search" name="user_search" placeholder="Search W3School" />
10. autofocus：文本输入字段自动获取焦点，<input type="text" name="fname" autofocus>
11. date：date-选取日、月、年，<input type="date" />
12. search：用于搜索

废除的元素：

1. frame废除，可以使用jQuery的ajax的load()方法；在html5中已不再支持frame框架，只支持iframe框架

二.html5改变：

字符编码：

1. html5使用meta标签直接指定charset编码，<meta charset="UFT-8">；
2. html4使用content元素属性指定字符编码，<meta content="text/html;chartset=UFT-8">；

具有boolean值的属性：

1. 只写属性不写属性值代表属性值为true；<input type="checkbox" checked/>
2. 属性值=属性名，代表属性为true；<input type="checkbox" checked="checked">
3. 属性值等于空字符串；<input type="checkbox" checked=" "/>
4. 不写属性代表属性为false；<input type="checkbox"/>

省略引号：

1. <input type="text"/>
2. <input type='text'/>
3. <input type=text/>

客户端数据存储：

1. html5添加localStorage和sessionStorage（常用方法有setItem，getItem，removeItem，clear），区别于html4的cookie（jquery.cookie-min.js,$.cookie("","")），三者的区别是：

• 存放数据大小不同，cookie存放4kb，localStorage和sessionStorage一般存放5M；
• 数据生命周期不同，cookie的生命周期可以设定(maxAge)，默认关闭浏览器失效；sessionStorage当前会话有效，关闭页面或者浏览器失效,localStorage除非被清除，否则永久有效；
• 与服务器通信，cookie由对服务器的请求来传递，携带在HTTP头中，如果使用cookie保存过多数据会产生性能问题；localStorage和sessionStorage数据仅在浏览器中保存，不参与服务器的通信；