HTML5_CSS3

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

HTML5 是什么

HTML5 是对 HTML 标准的第五次修订，不是一个新技术，而是一个标准。
现在国内普遍说的 H5 是包括了 CSS3，JavaScript 的说法，表示符合新标准的，足够 cool 的，有各种效果的页面( 一种错误但普遍的观点 )

有哪些新特性

语义特性
HTML5 赋予网页更好的意义和结构。更加丰富的标签将随着对 RDFa 的，微数据与微格式等方面的支持，构建对程序、对用户都更有价值的数据驱动的Web。
本地存储特性
基于HTML5开发的网页APP拥有更短的启动时间，更快的联网速度，这些全得益于HTML5 APP Cache，以及本地存储功能。Indexed DB（html5本地存储最重要的技术之一）和API说明文档。
- sessionStorage 会话级别的 WebStorage
- localStorage 永久的 WebStorage
- Web SQL 浏览器端的数据库
设备兼容特性
从Geolocation功能的API文档公开以来，HTML5为网页应用开发者们提供了更多功能上的优化选择，带来了更多体验功能的优势。HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连，例如视频影音可直接与 microphones 及摄像头相联。
连接特性
更有效的连接工作效率，使得基于页面的实时聊天，更快速的网页游戏体验，更优化的在线交流得到了实现。HTML5 拥有更有效的服务器推送技术，Server-Sent Event和WebSockets就是其中的两个特性，这两个特性能够帮助我们实现服务器将数据“推送”到客户端的功能。javascript:void(null)
- Server-Sent 事件指的是网页自动获取来自服务器的更新
网页多媒体特性
支持网页端的 Audio、Video 等多媒体功能，与网站自带的 APPS，摄像头，影音功能相得益彰。
三维、图形及特效特性（Class: 3D, Graphics & Effects）
基于 SVG、Canvas、WebGL 及 CSS3 的 3D 功能，用户会惊叹于在浏览器中，所呈现的惊人视觉效果。
性能与集成特性
没有用户会永远等待你的 Loading —— HTML5 会通过 XMLHttpRequest2
等技术，解决以前的跨域等问题，帮助您的Web应用和网站在多样化的环境中更快速的工作。
CSS3特性
在不牺牲性能和语义结构的前提下，CSS3中提供了更多的风格和更强的效果。此外，较之以前的Web排版，Web的开放字体格式（WOFF）也提供了更高的灵活性和控制性。

有哪些新增标签？

元素	描述
`canvas`	标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API
`audio`	定义音频内容
`video`	定义视频（video 或者 movie）
`source`	定义多媒体资源和
`embed`	定义嵌入的内容，比如插件
`track`	为诸如和元素之类的媒介规定外部文本轨道
`datalist`	定义选项列表。与 `input` 元素配合使用该元素，来定义 input 可能的值
`keygen`	规定用于表单的密钥对生成器字段
`output`	定义不同类型的输出，比如脚本的输出
`article`	定义页面正文内容
`aside`	定义页面内容之外的内容
`bdi`	设置一段文本，使其脱离其父元素的文本方向设置
`command`	定义命令按钮，比如单选按钮、复选框或按钮
`details`	用于描述文档或文档某个部分的细节
`dialog`	定义对话框，比如提示框
`summary`	标签包含 details 元素的标题
`figure`	规定独立的流内容（图像、图表、照片、代码等等）
`figcaption`	定义元素的标题
`footer`	定义 section 或 document 的页脚
`header`	定义了文档的头部区域
`mark`	定义带有记号的文本
`meter`	定义度量衡。仅用于已知最大和最小值的度量
`nav`	导航
`progress`	定义任何类型的任务的进度
`ruby`	定义 ruby 注释（中文注音或字符）
`rt`	定义字符（中文注音或字符）的解释或发音
`rp`	在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容
`section`	定义文档中的节（section、区段）
`time`	定义日期或时间
`wbr`	规定在文本中的何处适合添加换行符

如何让低版本的 IE 支持 HTML5新标签

方式一：Coding JavaScript

方式二：使用Google的html5shiv包（推荐）

但是不管使用以上哪种方法,都要初始化新标签的CSS.因为HTML5在默认情况下表现为内联元素，对这些元素进行布局我们需要利用CSS手工把它们转为块状元素方便布局

题目2： input 有哪些新增类型？

email
- email 类型用于应该包含 e-mail 地址的输入域
- 在提交表单时会自动验证email的格式

url
- url 类型用于应该包含 URL 地址的输入域
- 在提交表单时，会自动验证 url 域的值

number
- number 类型用于应该包含数值的输入域
- 可以设定对所接受的数字的限定
  - 属性描述
    max 规定允许的最大值
    min 规定允许的最小值
    step 规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）
    value 规定默认值

range
- range 类型用于应该包含一定范围内数字值的输入域
- range 类型显示为滑动条
- 可以设定对所接受的数字的限定

Date Picker
HTML5 拥有多个可供选取日期和时间的新输入类型
- date 选取日、月、年
- month 选取月、年
- week 选取周和年
- time 选取时间（小时和分钟）
- datatime 选取时间、日、月、年（UTC 时间）
- datetime-local 选取时间、日、月、年（本地时间）

search
- search 类型用于搜索域

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

浏览器本地存储中 cookie 和 localStorage 有什么区别？

共同点
都是保存在浏览器端，且同源的
区别
- cookie 数据始终在同源的 http 请求中携带（即使不需要），即:
  - cookie 在浏览器和服务器间来回传递
  - cookie 数据还有路径（path）的概念，可以限制 cookie 只属于某个路径下
  - 存储大小限制也不同，cookie 数据不能超过 4k，同时因为每次 http 请求都会携带 cookie，所以 cookie 只适合保存很小的数据，如会话标识
- 而 sessionStorage 和 localStorage 不会自动把数据发给服务器，仅在本地保存。sessionStorage 和 localStorage 虽然也有存储大小的限制，但比 cookie 大得多，可以达到 5M 或更大。
- 数据有效期不同
  - sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持
  - localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据
  - cookie 只在设置的 cookie 过期时间之前一直有效，即使窗口或浏览器关闭
- 作用域不同
  - sessionStorage 不在不同的浏览器窗口中共享，即使是同一个页面
  - localStorage 在所有同源窗口中都是共享的
  - cookie 也是在所有同源窗口中都是共享的
  - Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。

参考

题目4：写出如下 CSS3效果的简单事例

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

预览地址

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

DEMO

题目6：写出如下 loading 动画效果 DEMO1 & DEMO2

DEMO 1
DEMO 2