HTML5_CSS3

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

• 含义：HTML5是超文本标记语言的第五次重大修改，2014年10月29日标准规范制定完成
• 特性
  • 语义特性
    HTML5赋予网页更好的意义和结构。更加丰富的标签将随着对RDFa的，微数据与微格式等方面的支持，构建对程序、对用户都更有价值的数据驱动的Web。
  • 本地存储特性
    基于HTML5开发的网页APP拥有更短的启动时间，更快的联网速度，这些全得益于HTML5 APP Cache，以及本地存储功能。Indexed DB（html5本地存储最重要的技术之一）和API说明文档。
  • 设备兼容特性
    从Geolocation功能的API文档公开以来，HTML5为网页应用开发者们提供了更多功能上的优化选择，带来了更多体验功能的优势。HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连，例如视频影音可直接与microphones及摄像头相联。
  • 连接特性
    更有效的连接工作效率，使得基于页面的实时聊天，更快速的网页游戏体验，更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技术，Server-Sent Event和WebSockets就是其中的两个特性，这两个特性能够帮助我们实现服务器将数据“推送”到客户端的功能。
  • 网页多媒体特性
    支持网页端的Audio、Video等多媒体功能， 与网站自带的APPS，摄像头，影音功能相得益彰。
  • 三维、图形及特效特性（Class: 3D, Graphics & Effects）
    基于SVG、Canvas、WebGL及CSS3的3D功能，用户会惊叹于在浏览器中，所呈现的惊人视觉效果。
  • 性能与集成特性
    没有用户会永远等待你的Loading——HTML5会通过XMLHttpRequest2等技术，解决以前的跨域等问题，帮助您的Web应用和网站在多样化的环境中更快速的工作。
  • CSS3特性
    在不牺牲性能和语义结构的前提下，CSS3中提供了更多的风格和更强的效果。此外，较之以前的Web排版，Web的开放字体格式（WOFF）也提供了更高的灵活性和控制性。
• 新增标签
  <header>, <footer>,<dialog>, <aside>,< figure>等，这种标签将有利于搜索引擎的索引整理，同时更好的帮助小屏幕装置和视障人士使用.
• 如何让低版本的 IE 支持 HTML5新标签
  htnl5shiv主要解决HTML5提出的新的元素不被IE6-8识别，这些新元素不能作为父节点包裹子元素，并且不能应用CSS样式。让CSS 样式应用在未知元素上只需执行 document.createElement(elementName) 即可实现。html5shiv就是根据这个原理创建的。·
  html5shiv的使用非常的简单，考虑到IE9是支持html5的，所以只需要在页面head中添加如下代码即可：
  <!–[if lt IE 9]> <script src="http://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script> <![endif]–>

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

color
date
datetime-local
email
month
number
range
search
tel
time
url
week

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

• 区别

1.Cookie是存储在客户端的小型文本文件，可以包含若干键值对，每个键值对可以设置过期时间（默认过期时间为关闭浏览器时）。Cookie会在每次发送HTTP请求时附加到Cookie头字段(浪费带宽)，服务器以此得知用户所处的状态。
2.LocalStorage是本地存储（浏览器提供给js一个接口，可以让js把一些变量存到本地），不会被发送到服务器上。同时空间比Cookie大很多，一般支持5-10M。

cookie、 localStorage 、sessionStorage的区别

• localStorage 如何存储删除数据

var testObject = { 'one': 1, 'two': 2, 'three': 3 };

// 存储
localStorage.setItem('testObject', JSON.stringify(testObject));

// 获取
var retrievedObject = localStorage.getItem('testObject');

console.log('retrievedObject: ', JSON.parse(retrievedObject))；
//清除
localStorage.removeItem("testObject");

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

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

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

效果展示

题目6： 写出如下 loading 动画效果 DEMO1171 DEMO2161

loading1
loading2