高级任务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
<head>
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js">
</script>
<![endif]-->
</head>
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 转换：移动、旋转
- 背景色渐变
- 过渡效果
- 动画
