HTML5_CSS3
2017-03-26 本文已影响21人
鸿鹄飞天
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中提供了更多的风格和更强的效果。 -
新增标签
页面结构标签
<article>定义页面正文内容
<header>定义了文档的头部区域
<footer>定义一个文档底部
<section>定义了文档的某个区域
<aside>定义页面内容之外的内容，比如：侧边栏
<nav>导航
<details>用于描述文档或文档某个部分的细节
<dialog>定义对话框，比如提示框
<summary>定义一个可见的标题。 当用户点击标题时会显示出详细信息,包含 details 元素的标题
多媒体
<canvas>定义图形标签，比如图表和其他图像。该标签基于JavaScript的绘图API
<audio>定义音频
<video>定义视频
<source>定义多媒体资源<video> 和 <audio>
<embed>定义嵌入的内容，比如插件
<track>为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。
表单控件标签
<calendar>、<date>、<time>、<email>、<url>、<search>,<range>,<DatePickers>
新增的其它标签
<mark>,<progress>,<datalist>,<keygen>，<output>,<wbr>,<menu>等
Paste_Image.png
如何让低版本的 IE 支持 HTML5新标签
<head>
<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
</head>
这样就可以支持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 动画效果
Paste_Image.png
