HTML5_CSS3
`
为什么设计HTML5规范?
1.HTML5的设计目的是为了在移动设备上支持多媒体
`
1. HTML5是什么？有哪些新特性？有哪些新增标签？如何让低版本的 IE 支持 HTML5新标签?CSS3新特性有哪些?
- HTML5是超文本标记语言的第五次重大修改，2014年10月29日标准规范制定完成.
新特性: - 语义：能够让你更恰当地描述你的内容是什么.
- 连通性：能够让你和服务器之间通过创新的新技术方法进行通信。
- 离线 & 存储：能够让网页在客户端本地存储数据以及更高效地离线运行。
- 多媒体：使 video 和 audio 成为了在所有 Web 中的一等公民。
- 2D/3D 绘图 & 效果：提供了一个更加分化范围的呈现选择。
- 性能 & 集成：提供了非常显著的性能优化和更有效的计算机硬件使用。
- 设备访问 Device Access：能够处理各种输入和输出设备。
- 样式设计: 让作者们来创作更加复杂的主题.
- Html5取代Flash在移动设备的地位
- websocket:是一种协议，可以让我们建立客户端到服务器端的全双工通信，这就意味着服务器端可以主动推送数据到客户端
新增标签
canvas 标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API
audio 定义音频内容
video 定义视频（video 或者 movie）
output 定义不同类型的输出，比如脚本的输出
article 定义页面正文内容
aside 定义页面内容之外的内容
footer 定义 section 或 document 的页脚
header 定义了文档的头部区域
nav 导航
progress 定义任何类型的任务的进度
section 定义文档中的节（section、区段）
如何让低版本的 IE 支持 HTML5新标签?
- 针对于IE6-9，Safari 4.x和FF 3.x的HTML5元素的基本样式.
使用html5shiv
//安装:bower install html5shiv --save-dev
<！ - [if lt IE 9]>
<script src =“bower_components / html5shiv / dist / html5shiv.js”> </ script>
<！[endif] - >
2.input 有哪些新增类型？
button 定义可点击的按钮（通常与 JavaScript 一起使用来启动脚本）。
checkbox 定义复选框。
email 定义用于 e-mail 地址的字段。
file 定义文件选择字段和 "浏览..." 按钮，供文件上传。
hidden 定义隐藏输入字段。
image 定义图像作为提交按钮。
number 定义用于输入数字的字段。
password 定义密码字段（字段中的字符会被遮蔽）。
radio 定义单选按钮。
range 定义用于精确值不重要的输入数字的控件（比如 slider 控件）。
reset 定义重置按钮（重置所有的表单值为默认值）。
search 定义用于输入搜索字符串的文本字段。
submit 定义提交按钮。
tel 定义用于输入电话号码的字段。
text 默认。定义一个单行的文本字段（默认宽度为 20 个字符）。
time 定义用于输入时间的控件（不带时区）。
url 定义用于输入 URL 的字段。
//search
<input type="number" name="quantity" min="1" max="5">
//search
<input type="search" name="googlesearch">
//E-mail
<input type="email" name="usremail">
3.浏览器本地存储中 cookie 和 localStorage和sessionStorage 有什么区别？localStorage 如何存储删除数据?
Cookie
- Cookie 是小甜饼的意思。顾名思义，cookie 确实非常小，它的大小限制为4KB左右，是网景公司的前雇员 Lou Montulli 在1993年3月的发明。它的主要用途有保存登录信息，比如你登录某个网站市场可以看到“记住密码”，这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。
localStorage
- localStorage 是 HTML5 标准中新加入的技术，它并不是什么划时代的新东西。早在 IE 6 时代，就有一个叫 userData 的东西用于本地存储，而当时考虑到浏览器兼容性，更通用的方案是使用 Flash。而如今，localStorage 被大多数浏览器所支持，如果你的网站需要支持 IE6+，那以 userData 作为你的 polyfill 的方案是种不错的选择。
**sessionStorage 与 localStorage **的接口类似，但保存数据的生命周期与 localStorage 不同。做过后端开发的同学应该知道 Session 这个词的意思，直译过来是“会话”。而 sessionStorage 是一个前端的概念，它只是可以将一部分数据在当前会话中保存下来，刷新页面数据依旧存在。但当页面关闭后，sessionStorage 中的数据就会被清空。
三者的异同
image.png
localStorage和sessionStorage都具有相同的操作方法
- 存储key: setItem("key","value").接收2个参数
sessionStorage.setItem("key", "value");
localStorage.setItem("name", "tom");
- 获取指定key本地存储的值: getItem(key)
var value1 = sessionStorage.getItem("key");
var site = localStorage.getItem("name");//'tom'
- removeItem删除key: 删除指定key本地存储的值
sessionStorage.removeItem("key");
localStorage.removeItem("site");
- clear清除所有的key/value
sessionStorage.clear();
localStorage.clear();
4.写出如下 CSS3效果的简单事例
- 圆角， 圆形
- div 阴影
- 2D 转换：放大、缩小、偏移、旋转
- 3D 转换：移动、旋转
- 背景色渐变
- 过渡效果
- loading圆环动画
--->代码预览
