HTML5 and CSS3

[MorganXie]

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

1. 语义特性：HTML5增加了许多新标签，可以赋予网页更好的意义和价值。使文档语义化。
2. 本地存储特性：基于HTML5开发的网页APP拥有更短的启动时间，更快的联网速度，这些全得益于HTML5 APP Cache，以及本地存储功能。
   HTML5 提供了两种在客户端存储数据的新方法：
   • localStorage - 没有时间限制的数据存储
   • sessionStorage - 针对一个 session 的数据存储
3. 设备兼容特性：HTML5提供了更多的数据和应用接口，使外部应用可以直接与浏览器内部的数据直接相连。例如视频影音可直接与摄像头相联。
4. 连接特性： HTML5有更有效的连接工作效率，使得基于页面的实时聊天技术、更快速的网页游戏体验，更优化的在线交流得到实现。
5. 网页多媒体特性：HTML5支持了网页端的Audio、Video等多媒体功能。同时也提供了基于SVG,Cancas,WebGL及CSS3的3D功能。
   性能与集成特性：HTML5通过XMLHttpRequest2等技术，更好的解决了跨域等问题。
6. CSS3特性：CSS3提供了更多的风格和更强的效果。

新增标签

常用

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

其他

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

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

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

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

input 有哪些新增类型？

1. email 输入的邮箱要满足邮箱地址的规范 @
2. url 输入的连接要满足连接的规范 http://...
3. number 输入的是数字才有效，输入其他无效
   email、url、number相当于对输入的数值进行正则验证，不符合要求则出现提示框
4. range(拖动选择数值，变成一个百分比条)
5. date (直接生成了一个日历)
   • Date
   • month
   • week
   • time
   • datatime

浏览器本地存储中 cookie 和 localStorage 有什么区别？ localStorage 如何存储删除数据。

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

应用场景

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

写出如下 CSS3效果的简单事例

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

预览
3D预览

实现如下全屏图加过渡色的效果（具体效果随意）

Linear-Gradient 预览

代码

写出如下 loading 动画效果 DEMO1199 DEMO2184

Loading 预览

代码