HTML5_CSS3
2017-07-16 本文已影响24人
任少鹏
1： HTML5是什么？有哪些新特性？有哪些新增标签？如何让低版本的 IE 支持 HTML5新标签
- 是什么
HTML5 是对 HTML 标准的第五次修订。其主要的目标是将互联网语义化，以便更好地被人类和机器阅读，并同时提供更好地支持各种媒体的嵌入。 - 新特性
1.语义特性：HTML5增加了许多新标签，可以赋予网页更好的意义和价值。使文档语义化。
2.本地存储特性：基于HTML5开发的网页APP拥有更短的启动时间，更快的联网速度，这些全得益于HTML5 APP Cache，以及本地存储功能。
3.设备兼容特性：HTML5提供了更多的数据和应用接口，使外部应用可以直接与浏览器内部的数据直接相连。例如视频影音可直接与摄像头相联。
4.连接特性： HTML5有更有效的连接工作效率，使得基于页面的实时聊天技术、更快速的网页游戏体验，更优化的在线交流得到实现。
5.网页多媒体特性：HTML5支持了网页端的Audio、Video等多媒体功能。同时也提供了基于SVG,Cancas,WebGL及CSS3的3D功能。
6.性能与集成特性：HTML5通过XMLHttpRequest2等技术，更好的解决了跨域等问题。
7.CSS3特性：CSS3提供了更多的风格和更强的效果。 - 新增标签
header, hgroup, nav, section, article, details, figure, figcaption, aside, time, mark, audio, video, source, track, bdi, canvas, command, datalist, summary, embed, keygen, meter, output, progress, rp, rt, ruby - 如何让低版本的 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 有哪些新增类型？
1.email类型（不是一个有效的email地址，不允许提交该表单）
<input type=”email”/>
2.url类型（输入正确的url）
<inputy type=”url”/>
3.date输入类型（弹出一个日历小挂件）
<input type=”date”/>
4.time输入类型（允许输入一个24小时格式的时间并验证）
<input type=”time”/>
5.datetime类型
<input type=”datetime”/>
6.month输入类型（允许输入和验证一个月份）
<input type=”month”/>
7.week输入类型（允许输入和验证一个周数）
<input type=”week”/>
8.number输入类型
<input type=”number”/>
9.range输入类型（显示一个滑块条）
<input type=”range”/>
10.search输入类型
<input type=”search”/>
11.tel输入类型（定义输入电话号码字段）
<input type=”tel”/>
12.color输入类型(允许用户通过选取器输入一个颜色值）
<input type=”color”/>
3： 浏览器本地存储中 cookie 和 localStorage 有什么区别？ localStorage 如何存储删除数据。
- Cookie
Cookie 是小甜饼的意思。顾名思义，cookie 确实非常小，它的大小限制为4KB左右，是网景公司的前雇员 Lou Montulli 在1993年3月的发明。它的主要用途有保存登录信息，比如你登录某个网站市场可以看到“记住密码”，这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。 - localStorage
localStorage 是 HTML5 标准中新加入的技术，它并不是什么划时代的新东西。早在 IE 6 时代，就有一个叫 userData 的东西用于本地存储。localStorage是windows的一个对象。 - 异同
共同点：都是保存在浏览器端，且同源的
不同点：
1.cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递；cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。
localStorage不会自动把数据发给服务器，仅在本地保存。虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
2.localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据，除非主动删除数据，否则数据是永远不会过期的。；
cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
3.Cookie有个数限制（各浏览器不同）；LocalStorage总体数量无限制 - 清除数据分为一次性清除和个别清除。
一次性清除：使用localStorage.clear()，使用clear()方法会所有保存数据都清除掉，因此此操作是危险性的，除非你真想这么做。
个别清除 ：使用storage.removeItem(keyName),如何个别清除？这个要看你如何去遍历数据、设定条件，然后执行此操作。
