HTML5、CSS3
2017-07-14 本文已影响27人
好好顽
题目1： HTML5是什么？有哪些新特性？有哪些新增标签？如何让低版本的 IE 支持 HTML5新标签
HTML5是超文本标记语言（HTML）的第五次重大修改。
新特性：
- 语义：一些标签语义化，能够更恰当地描述标签所要表达的内容。
- 离线 & 存储：能够让网页在客户端本地存储数据以及更高效地离线运行(localStorage Indexed DB)。
- 多媒体：新增 video、audio、Canvas 、SVG。
- 连通性：能够让你和服务器之间通过创新的新技术方法进行通信。
- 设备兼容特性（Geolocation功能）
- 连接特性（实时特性，webSockets）
- 性能与集成特性（XMLHttpRequest2等技术）
- CSS3特性
新增标签：header nav footer article section aside dialog audio vedio 等
让低版本IE支持HTML5：
<!--[if lt IE 9]>
<script type="text/javascript" src="scripts/html5shiv.js"></script>
<![endif]-->
//如果版本小于IE9就引入html5shiv.js，IE9以前的浏览器就能使用h5标签，并使用定义好的样式了。这个标签必须放在head标签内，因为浏览器要在解析之前知道这个元素。
//也可以直接声明
<!--[if lt IE 9]>
(function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,canvas,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while(i--){document.createElement(e[i])}})()
<![endif]-->
题目2： input 有哪些新增类型？
有email url number range datepicker
email：输入必须是邮箱
url：输入必须是url地址
number：输入必须是数字
range：有一个拖动条，通过拖动来决定输入
datepicker ：一个日历选择器，选择的日期变为输入
题目3： 浏览器本地存储中 cookie 和 localStorage 有什么区别？ localStorage 如何存储删除数据。
共同点：都是保存在浏览器端，且同源的，作用域相同，在所有同源窗口中都是共享的。
区别：
- cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。
cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。
存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。
cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。 - localStorage不会自动把数据发给服务器，仅在本地保存。localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。数据有效期不同，localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；
localStorage存储删除数据：
1.存储数据
window.localStorage.setItem(key,value);
window.localStorage.key = value;
window.localStorage[key]=value
2.删除数据
localStorage.removeItem(key)删除某一个数据
localStorage.clear()删除所有数据
3.读取数据
window.localStorage.getItem(key,value);
window.localStorage.key = value;
window.localStorage[key]=value
题目4： 写出如下 CSS3效果的简单事例
- 圆角， 圆形
- div 阴影
- 2D 转换：放大、缩小、偏移、旋转
- 3D 转换：移动、旋转
- 背景色渐变
- 过渡效果
- 动画
http://js.jirengu.com/furukedixa/1/edit
题目5： 实现如下全屏图加过渡色的效果具体效果随意
http://js.jirengu.com/zogisodine/1/edit
题目6： 写出如下 loading 动画效果
