HTML5_CSS3

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

HTML5简介

HTML的英文全称为Hyper Text Markup Language，即超文本标记语言。HTML5是HTML的一个新版本。
HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。目标是取代1999年所制定的HTML 4.01和XHTML 1.0标准，以期能在互联网应用迅速发展的时候，使网络标准达到匹配当代的网络需求。广义论及HTML5时，实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。

HTML5新特性

• 用于绘画的 canvas 元素
• 用于媒介回放的 video 和 audio 元素
• 对本地离线存储的更好的支持
• 新的特殊内容元素，比如 article、footer、header、nav、section
• 新的表单控件，比如 calendar、date、time、email、url、search

HTML5 的改进

• 新元素
• 新属性
• 完全支持 CSS3
• Video 和 Audio
• 2D/3D 制图
• 本地存储
• 本地 SQL 数据
• Web 应用

HTML5 多媒体

• 使用 HTML5 你可以简单的在网页中播放 视频(video)与音频 (audio) 。
• HTML5
• HTML5

HTML5 应用

• 使用 HTML5 你可以简单地开发应用-本地数据存储
• 访问本地文件
• 本地 SQL 数据
• 缓存引用
• Javascript 工作者
• XHTMLHttpRequest 2

HTML5 图形

• 使用 HTML5 你可以简单的绘制图形:
• 使用 元素。
• 使用内联 SVG。
• 使用 CSS3 2D 转换、CSS3 3D 转换。

HTML5 使用 CSS3

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

HTML5 添加了很多语义元素如下所示：

标签	描述
	定义页面独立的内容区域。
	定义页面的侧边栏内容。
	允许您设置一段文本，使其脱离其父元素的文本方向设置。
	定义命令按钮，比如单选按钮、复选框或按钮
	用于描述文档或文档某个部分的细节
	定义对话框，比如提示框
	标签包含 details 元素的标题
	规定独立的流内容（图像、图表、照片、代码等等）。
	定义 元素的标题
	定义 section 或 document 的页脚。
	定义了文档的头部区域
	定义带有记号的文本。
	定义度量衡。仅用于已知最大和最小值的度量。
	定义导航链接的部分。
	定义任何类型的任务的进度。
	定义 ruby 注释（中文注音或字符）。
	定义字符（中文注音或字符）的解释或发音。
	在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。
	定义文档中的节（section、区段）。
	定义日期或时间。
	规定在文本中的何处适合添加换行符。

HTML5 浏览器支持

最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。

IE9 以下版本浏览器兼容HTML5的方法，使用本站的静态资源的html5shiv包：

载入后，初始化新标签的CSS：

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

---

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

1. email类型（不是一个有效的email地址，不允许提交该表单）

2. url类型（输入正确的url）

3. date输入类型（Opera上弹出一个日历小挂件）

4. time输入类型（允许输入一个24小时格式的时间并验证）

5. datetime类型

6. month输入类型（允许输入和验证一个月份，Opera弹出小挂件）

7. week输入类型（允许输入和验证一个周数，Opera弹出小挂件）

8. number输入类型

9. range输入类型（显示一个滑块条）

10. search输入类型

11. tel输入类型（没有特殊的验证）

12. color输入类型(允许用户通过选取器输入一个颜色值。目前，它只有BlackBerry上实现了。)

---

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

Cookie

Cookie 是小甜饼的意思。顾名思义，cookie 确实非常小，它的大小限制为4KB左右，是网景公司的前雇员 Lou Montulli 在1993年3月的发明。它的主要用途有保存登录信息，比如你登录某个网站市场可以看到“记住密码”，这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。

localStorage

localStorage 是 HTML5 标准中新加入的技术，它并不是什么划时代的新东西。早在 IE 6 时代，就有一个叫 userData 的东西用于本地存储，而当时考虑到浏览器兼容性，更通用的方案是使用 Flash。而如今，localStorage 被大多数浏览器所支持，如果你的网站需要支持 IE6+，那以 userData 作为你的 polyfill 的方案是种不错的选择。

特性 |Chrome |Firefox (Gecko) |Internet Explorer |Opera |Safari (WebKit)
---|---|
localStorage |4 |3.5 |8 |10.50 |4
sessionStorage |5 |2 |8 |10.50 |4

sessionStorage

sessionStorage 与 localStorage 的接口类似，但保存数据的生命周期与 localStorage 不同。做过后端开发的同学应该知道 Session 这个词的意思，直译过来是“会话”。而 sessionStorage 是一个前端的概念，它只是可以将一部分数据在当前会话中保存下来，刷新页面数据依旧存在。但当页面关闭后，sessionStorage 中的数据就会被清空。

三者的异同

image.png

localStorage和sessionStorage的方法

localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等

setItem存储value

用途：将value存储到key字段
用法：.setItem( key, value)
代码示例：

sessionStorage.setItem("key", "value");     localStorage.setItem("site", "js8.in");

getItem获取value

用途：获取指定key本地存储的值
用法：.getItem(key)
代码示例：

var value = sessionStorage.getItem("key");  var site = localStorage.getItem("site");

removeItem删除key

用途：删除指定key本地存储的值
用法：.removeItem(key)
代码示例：

sessionStorage.removeItem("key");   localStorage.removeItem("site");

clear清除所有的key/value

用途：清除所有的key/value
用法：.clear()
代码示例：

sessionStorage.clear();     localStorage.clear();

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

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

git代码

demo效果

---

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

git代码

demo效果

---

题目6： 写出如下 loading 动画效果 DEMO196 DEMO291

git代码

demo效果