HTML5_CSS3

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

• HTML5是超⽂本标记语⾔的第五次重⼤修改，2014年10⽉29⽇标准规范制定完成。HTML5的设计目的是为了在移动设备上支持多媒体。
• 新特征
  ① 语义特性
  HTML5赋予网页更好的意义和结构。比如HTML5增加了新的内容标签，这些标签带有一定的语义，使搜索引擎爬取你的网站信息更高效。比如：article、footer、header、nav、section。
  ②网页多媒体特性
  支持网页端的Audio、Video等多媒体功能， 与网站自带的APPS，摄像头，影音功能相得益彰。
  三维、图形及特效特性。
  比如：新增 video、audio、Canvas 、SVG。
  ③离线 & 存储特性
  能够让网页在客户端本地存储数据以及更高效地离线运行(localStorage Indexed DB)
  ④连接特性
  更有效的连接工作效率，使得基于页面的实时聊天，更快速的网页游戏体验，更优化的在线交流得到了实现。
  比如：HTML5拥有更有效的服务器推送技术，Server-Sent Event和WebSockets就是其中的两个特性，这两个特性能够帮助我们实现服务器将数据“推送”到客户端的功能。
  ⑤设备兼容特性
  HTML5提供了更多的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连，例如视频影音可直接与microphones及摄像头相联。
  ⑥性能与集成特性
  HTML5会通过XMLHttpRequest2等技术，解决以前的跨域等问题，帮助Web应用和网站在多样化的环境中更快速的工作。
  ⑦CSS3特性
  在不牺牲性能和语义结构的前提下，CSS3中提供了更多的风格和更强的效果。
• 新增标签
  页面结构标签
  
  定义页面正文内容
  

  定义了文档的头部区域
  

  定义一个文档底部
  

  定义了文档的某个区域
  

  定义页面内容之外的内容，比如：侧边栏
  

  导航
  

  用于描述文档或文档某个部分的细节
  

  定义对话框，比如提示框
  

  定义一个可见的标题。 当用户点击标题时会显示出详细信息,包含 details 元素的标题
  多媒体
  定义图形标签，比如图表和其他图像。该标签基于JavaScript的绘图API
  

Paste_Image.png

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

这样就可以支持HTML5的新标签

2.input 有哪些新增类型？

input 新增type主要有：
email 类型用于应该包含 e-mail 地址的输入域。
url 类型用于应该包含 URL 地址的输入域。
number 类型用于应该包含数值的输入域。
range 类型显示为滑动条。
Date Pickers日期选择器

Paste_Image.png

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

①储存方式不同：loaclStorage不会自动把数据发送给服务器，数据仅在客户端（即浏览器）中保存；cookie数据始终在同源的http请求中携带，即cookie在浏览器和服务器间来回传递，但如果使用cookie保存过多数据会带来性能问题。
②数据大小限制不同：存储大小限制也不同，cookie数据不能超过4k，localStorage 虽然也有存储大小的限制；但比cookie大得多，可以达到5M或更大
③数据有效期不同：一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效。cookie只在设置的cookie过期时间之前一直有效；而loaclStorage则是始终生效，除非清除缓存。

Localstorage如何操作数据：

• 设置值：

localStorage.a=123;
localStorage["a"]=123;
localStorage.setItem("a",123)

• 获取值

localStorage.a;
localStorage["a"];
localStorage.getItem("a")

• 删除值

清空全部数据：localStorage.clear()
删除数据：localStorage.removeItem('a')

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

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

预览

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

预览

6.写出如下 loading 动画效果

预览

github代码

Paste_Image.png

---