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

---

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

• 方式一：Coding JavaScript

<!--[if lt IE9]> 
<script> 
  (function() {
   if (! 
   /*@cc_on!@*/
   0) return;
   var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(', ');
   var i= e.length;
   while (i--){
     document.createElement(e[i])
   } 
})() 
</script>
<![endif]-->

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

<!--[``if` `lt IE9]>`
<script src=``"[http://html5shiv.googlecode.com/svn/trunk/html5.js](http://html5shiv.googlecode.com/svn/trunk/html5.js)"``></script>`
<![endif]-->`

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

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

---

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

  <input type="email">

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

<input type="url" />

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

 <input type="number" name="points" min="1" max="10" />

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

<input type="range" name="points" min="1" max="10" />

• Date Picker
  HTML5 拥有多个可供选取日期和时间的新输入类型

  • date 选取日、月、年
  • month 选取月、年
  • week 选取周和年
  • time 选取时间（小时和分钟）
  • datatime 选取时间、日、月、年（UTC 时间）
  • datetime-local 选取时间、日、月、年（本地时间）

<input type="date" name="user_date" />

---

• search
  • search 类型用于搜索域

<input type="search" name="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