HTML5 and CSS3

2017-10-09

HTML5是什么？有哪些新特性？有哪些新增标签？如何让低版本的 IE 支持 HTML5新标签

语义特性：HTML5增加了许多新标签，可以赋予网页更好的意义和价值。使文档语义化。
本地存储特性：基于HTML5开发的网页APP拥有更短的启动时间，更快的联网速度，这些全得益于HTML5 APP Cache，以及本地存储功能。
HTML5 提供了两种在客户端存储数据的新方法：
- localStorage - 没有时间限制的数据存储
- sessionStorage - 针对一个 session 的数据存储

设备兼容特性：HTML5提供了更多的数据和应用接口，使外部应用可以直接与浏览器内部的数据直接相连。例如视频影音可直接与摄像头相联。
连接特性： HTML5有更有效的连接工作效率，使得基于页面的实时聊天技术、更快速的网页游戏体验，更优化的在线交流得到实现。
网页多媒体特性：HTML5支持了网页端的Audio、Video等多媒体功能。同时也提供了基于SVG,Cancas,WebGL及CSS3的3D功能。
性能与集成特性：HTML5通过XMLHttpRequest2等技术，更好的解决了跨域等问题。
CSS3特性：CSS3提供了更多的风格和更强的效果。

新增标签

常用

1	<article>、<aside>、<details>、<dialog>、<summary>、<footer>、<header>、<nav>、<section>

其他

1 2	<canvas>、<audio>、<video>、<source>等解决办法是添加js脚本，让浏览器先创建这些标签，这样CSS就能识别了，进而css也就可以顺利渲染了。

低版本IE浏览器支持HTML5新标签的方法：

在JS中创建HTML5新标签
js脚本如下：

1 2	document.createElement("aside"); document.createElement("article");

特性	Cookie	localStorage	sessionStorage
数据的生命期	一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效	除非被清除，否则永久保存	仅在当前会话下有效，关闭页面或浏览器后被清除
存放数据大小	4K左右	5MB	5MB
与服务器端通信	每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题	仅在客户端（即浏览器）中保存，不参与和服务器的通信	仅在客户端（即浏览器）中保存，不参与和服务器的通信
易用性	需要程序员自己封装，源生的Cookie接口不友好	源生接口可以接受，亦可再次封装来对Object和Array有更好的支持	源生接口可以接受，亦可再次封装来对Object和Array有更好的支持

应用场景

Cookie 应用场景: 判断用户是否登录。针对登录过的用户，服务器端会在他登录时往 Cookie 中插入一段加密过的唯一辨识单一用户的辨识码，下次只要读取这个值就可以判断当前用户是否登录。
localStorage 接替了 Cookie 保存用户在电商网站的购物车信息，同时也用于保存HTML5游戏产生的一些本地数据。
如果遇到一些内容特别多的表单，为了优化用户体验，将把表单页面拆分成多个子页面，然后按步骤引导用户填写。这时候 sessionStorage 的作用就发挥出来了。

1. 圆角， 圆形
2. div 阴影
3. 2D 转换：放大、缩小、偏移、旋转
4. 3D 转换：移动、旋转
5. 背景色渐变
6. 过渡效果
7. 动画