HTML5 & CSS3

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

a.HTML5是什么?

HTML的第五次重大修改，于14年10月发布

b.有哪些新特性？

参考文献
1.MDN-HTML5

• 语义
  更加丰富的标签赋予网页更好的意义和结构，如新增的

  ,

  ,

  ,

  ,等标签，允许网页嵌入和操作多媒体内容,如,标签。

• 通信
  HTML5拥有更有效的服务器推送技术，Server-Sent Event和WebSockets就是其中的两个特性，这两个特性能够帮助我们实现服务器将数据“推送”到客户端的功能。

• 离线&存储

Indexed DB（html5本地存储最重要的技术之一）和离线资源规范

• 多媒体

  • 和元素
  • WebRTC即时通信技术
  • Camera API允许操作摄像头

• 图像&视觉

  • Canvas
  • WebGL
  • SVG矢量图

• 性能&集成

  • XMLHttpRequest Level2
  • 全屏API

• ……

c.有哪些新增标签？

标签	描述
canvas	用于图形的绘制，通过脚本 (通常是JavaScript)来完成
audio	音频
video	视频
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	规定在文本中的何处适合添加换行符

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

使用html5shiv.js。html头部引入它，

再在css中设置下块状元素

/*html5*/
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}

2.input 有哪些新增类型？

• color
• email
• number
• range
• search
• url
• tel
• 日期(FF,IE不支持)
  • date 定义日期字段（带有 calendar 控件）
  • datetime-local 定义日期字段（带有 calendar 和 time 控件）
  • month 定义日期字段的月（带有 calendar 控件）
  • week 定义日期字段的周（带有 calendar 控件）
  • time 定义日期字段的时、分、秒（带有 time 控件）

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

参考文献
1.cookie、sessionStorage、localStorage 详解及应用场景
2.详说 Cookie, LocalStorage 与 SessionStorage
3.MDN-HTTP cookies

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

cookie: 是服务器发送到用户浏览器并保存在浏览器上的一块数据，它会在浏览器下一次发起请求时被携带并发送到服务器上。

• 生命周期：Session Cookie在浏览器关闭后失效，Permanent Cookie可设置失效时间；
• 数据大小：4k左右
• 与服务器通信：每次发送请求都会携带在http头部
• 应用场景：记录用户登录状态，自定义设置等

localStorage:用于持久化的本地存储

• 生命周期：一直存在，除非被清除
• 数据大小：5M左右
• 与服务器通信：仅在客户端中保存，不参与和服务器的通信
• 应用场景：存储一些很少变化的数据，提高用户体验

b.localStorage 如何存储删除数据。

参考文献
1.使用 Web Storage API

//存储数据
LocalStorage.setItem(keyName, keyValue);
//删除数据
LocalStorage.removeItem(keyName);

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

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

5.实现全屏图加过渡色的效果

链接

Paste_Image.png

6.loading动画

链接