HTML5是什么？有哪些新特性？有哪些新增标签？如何让低版本的 IE 支持 HTML5新标签
HTML5是超文本标记语言的第五次重大修改，2014年10月29日标准规范制定完成
新特性:
- 语义特性
- 本地存储特性
- 设备兼容特性
- 连接特性
- 网页多媒体特性
- 性能与集成特性
新增标签:
- header: 定义页面或章节的头部。它经常包含 logo、页面标题和导航性的目录。
- nav: 标签定义导航链接的部分。
- footer: 定义页面或章节的尾部。它经常包含版权信息、法律信息链接和反馈建议用的地址。
- section: 定义文档中的一个章节。
- article: 定义可以独立于内容其余部分的完整独立内容块。
- aside: 定义和页面内容关联度较低的内容——如果被删除，剩下的内容仍然很合理。
- figure: 代表一个和文档有关的图例。
- video: 定义视频。像电影片段或其他视频流。
- audio: 定义音频。如音乐或其他音频流。
- canvas: 代表位图区域 ，可以通过脚本在它上面实时呈现图形，如图表、游戏绘图等。
让低版本的 IE 支持 HTML5新标签
方式一：Coding JavaScript
如果是IE9以下的IE浏览器将创建HTML5标签， 而非IE浏览器就会忽视这段代码。
<!--[if lt IE 9]>
<script>
(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(', ');
var i= e.length;
while (i--){
document.createElement(e[i])
}
})()
</script>
<![endif]-->
第二种方法：使用Google的html5shiv包（推荐）
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
不管使用以上哪种方法,都要初始化新标签的CSS.因为HTML5在默认情况下表现为内联元素，对这些元素进行布局我们需要利用CSS手工把它们转为块状元素方便布局
/*html5*/
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}
input 有哪些新增类型？
<input type="email"> //用于编辑 e-mail 的字段。
<input type="url"> //用于编辑URL的字段。
<input type="number"> //用于输入浮点数的控件。
<input type="date"> //用于输入日期的控件（年，月，日，不包括时间）
<input type="datetime"> // 基于 UTC 时区的日期时间输入控件（时，分，秒及几分之一秒）。
<input type="datetime-local"> // 用于输入日期时间控件，不包含时区。
<input type="month"> //用于输入年月的控件，不带时区。
<input type="week"> //用于输入一个由星期-年组成的日期，日期不包括时区。
<input type="time"> //用于输入不含时区的时间控件。
<input type="tel"> //用于输入电话号码的控件；换行会被自动从输入的值中移除
<input type="color"> //用于指定颜色的控件。
<input type="range"> //用于输入不精确值控件。
<input type="search"> //用于输入搜索字符串的单行文本字段。换行会被从输入的值中自动移除。
浏览器本地存储中 cookie 和 localStorage 有什么区别？ localStorage 如何存储删除数据。
cookie 和 localStorage的区别
| 特性 | cookie | localStorage |
|---|---|---|
| 数据的生命周期 | 可设置失效时间，默认是关闭浏览器后失效 | 除非被清除,否则永久保存 |
| 存放数据大小 | 4k左右 | 一般为5M |
| 与服务器端通信 | 每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题 | 仅在客户端（即浏览器）中保存，不参与和服务器的通信 |
| 易用性 | 需要程序员自己封装，源生的Cookie接口不友好 | 源生接口可以接受，亦可再次封装来对Object和Array有更好的支持 |
localStorage 如何存储删除数据
| 属性方法 | 说明 |
|---|---|
| localStorage.length | 获得storage中的个数 |
| localStorage.key(n) | 获得storage中第n个元素对的键值（第一个元素是0） |
| localStorage.getItem(key) | 获取键值key对应的值 |
| localStorage.key | 获取键值key对应的值 |
| localStorage.setItem(key, value) | 添加数据，键值为key，值为value |
| localStorage.removeItem(key) | 移除键值为key的数据 |
| localStorage.clear() | 清除所有数据 |
写出如下 CSS3效果的简单事例
1. 圆角， 圆形 2. div 阴影 3. 2D 转换：放大、缩小、偏移、旋转 4. 3D 转换：移动、旋转 5. 背景色渐变 6. 过渡效果 7. 动画
demo
网友评论