高级任务7-HTML5 CSS3

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

• HTML5是超文本标记语言的第五次重大修改

• 新特性

  • 语义特性
  • 本地存储特性
  • 设备兼容特性
  • 连接特性
  • 网页多媒体特性
  • 性能与集成特性
  • CSS3特性

• 新增标签：section, video, progress, nav, meter, time, aside, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, output, rp, rt, ruby, source, summary, wbr

• HTML5标签兼容
  使用HTML5 shiv

input 有哪些新增类型？

• email类型：email类型的input元素是一种专门用于输入E-mail地址的文本输入框，在提交表单的时候，会自动验证email输入框的值
• url类型：url类型的input元素提供用于输入url地址这类特殊文本的文本框
• number类型：number类型的input元素提供用于输入数值的文本框
• range类型：range类型的input元素提供用于输入包含一定范围内数字值得文本框，在网页中显示为滚动条
• Date Picker类型：日期检出类型的应用
• search类型：search类型的input元素提供用于输入搜索关键词的文本框
• tel类型：tel类型的input元素提供专门用于输入电话号码的文本框
• color类型：color类型的input元素提供专门用于设置颜色的文本框

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

• cookie
  cookie的内容主要包括：名字，值，过期时间，路径和域。路径与域一起构成cookie的作用范围。若不设置过期时间，则表示这个cookie的生命期为浏览器会话期间，关闭浏览器窗口，cookie就消失。这种生命期为浏览器会话期的cookie被称为会话cookie。会话cookie一般不存储在硬盘上而是保存在内存里，当然这种行为并不是规范规定的。若设置了过期时间，浏览器就会把cookie保存到硬盘上，关闭后再次打开浏览器，这些cookie仍然有效直到超过设定的过期时间。存储在硬盘上的cookie可以在不同的浏览器进程间共享，比如两个IE窗口。而对于保存在内存里的cookie，不同的浏览器有不同的处理方式。

• cookie的特点：

  • cookie的大小受限制，cookie大小被限制在4KB，不能接受像大文件或邮件那样的大数据。
  • 只要有请求涉及cookie，cookie就要在服务器和浏览器之间来回传送（这解释为什么本地文件不能测试cookie）。而且cookie数据始终在同源的http请求中携带（即使不需要），这也是Cookie不能太大的重要原因。正统的cookie分发是通过扩展HTTP协议来实现的，服务器通过在HTTP的响应头中加上一行特殊的指示以提示浏览器按照指示生成相应的cookie。

• 用户每请求一次服务器数据，cookie则会随着这些请求发送到服务器，服务器脚本语言如PHP等能够处理cookie发送的数据，可以说是非常方便的。当然前端也是可以生成Cookie的，用js对cookie的操作相当的繁琐，浏览器只提供document.cookie这样一个对象，对cookie的赋值，获取都比较麻烦。而在PHP中，我们可以通过setcookie()来设置cookie，通过$_COOKIE这个超全局数组来获取cookie。

• localStorage
  这是一种持久化的存储方式，也就是说如果不手动清除，数据就永远不会过期。
  它也是采用Key - Value的方式存储数据，底层数据接口是sqlite，按域名将数据分别保存到对应数据库文件里。它能保存更大的数据（IE8上是10MB，Chrome是5MB），同时保存的数据不会再发送给服务器，避免带宽浪费。

• localStorage的缺点

  • localStorage大小限制在500万字符左右，各个浏览器不一致
  • localStorage在隐私模式下不可读取
  • localStorage本质是在读写文件，数据多的话会比较卡
  • localStorage不能被爬虫爬取，不要用它完全取代URL传参

• localStorage.removeItem(key)：清除键值为key的数据
• localStorage.clear()：清除所有数据

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

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

预览地址
代码地址

实现如下全屏图加过渡色的效果

预览地址
代码地址

写出如下 loading 动画效果

预览地址
代码地址