html5

HTML5是最新的HTML标准，是万维网联盟（W3C）和网络超文文本应用工作组（WHATWG）合作输出的。目前高版本浏览器已经可用了，但是低版本浏览器未支持

HTML5 的文档类型是 <! doctype html>

1、新增的语义化标签

1. <header>：页眉，即为头部标签
2. <nac>：导航栏标签
3. <article>：内容标签
4. <section>：定义文档某个区域
5. <aside>：侧边栏标签
6. <footer>：页脚，即尾部标签

这些语义化标签是针对搜索引擎的，有利于SEO，可以多次使用，建议多使用这个，不要满屏都是div

2、多媒体标签

视频标签

<video src='文件地址' controls='controls'></video> 

音频标签

<audio src='文件地址' controls='controls'></audio> 

3、新增的input、表单控件

新增的input类型

重点记住：number、tel、search

新增type类型

autocomplete属性 默认是 autocomplete=on 即已经打开，表单需要加上name属性，同时成功提交

一般我们都会设置 autocomplete="off" ，因为我们不想让曾经搜索过的信息显示出来，保护隐私

4、两种存储

HTML5为浏览器提供了两种数据存储方案：sessionStorage 和 localStorage

sessionStorage

sessionStorage 用于在本地存储一个会话中的数据，这些数据只有在同一个会话中的页面才能访问，当会话结束后，数据也会随着销毁。因此 sessionStorage 不是一种持久化的本地存储，仅仅是会话级别的存储

localStorage

localStorage 是一种持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的

另外，localStorage是存储在Web服务器的

localStorage 属性允许在浏览器中存储 键值对（key-value）的数据，必须是以键值对的形式存储，而且必须是以字符串的形式存储

保存/写入数据：

window.localStorage.setItem('key', 'value')

读取数据：

let getItem = window.localStorage.getItem('key')

删除数据：

window.localStorage.removeItem('key')

清除所有内容：

window.localStorage.clear()

---

考点：

1、如何处理HTML5新标签的浏览器兼容问题？

IE8、IE7、IE6 支持用document.create Element 产生标签，可以利用这一特性让这些浏览器支持HTML5新标签

当然，最好的方式是直接使用程度的框架，使用最多的是html5shim框架，可以用 IE hack 引入框架

<！--[if 1t IE 9]>
<script>src="http://html5shim.googlecode.com/svn/trunk/htm15.js</script>
<！[end if]-->

2、为什么HTML5里面不需要DTD（文档类型定义）？如果不放入 <! doctype html> 标签，会怎样？

HTML5没有使用SGML或者XHTML，它是一个全新的类型，因此不需要参考DTD。对于HTML5，进需要放置文档类型代码<! doctype html>，让浏览器能够识别HTML5文档

所以不放入 <! doctype html> 标签，HTML5 不会工作，浏览器不能识别出它是HTML文档，同时HTML5的标签将不能正常工作

3、HTML5 中的应用缓存是什么？

HTML5 应用缓存的最终目的是帮助用户离线浏览页面。换句话说，如果网络连接不可用，打开的页面就是来自浏览器缓存的，离线应用缓存可以帮助用户达到这个目的

所以，应用缓存有3个优势：

1. 离线浏览，让用户可在离线时使用它们
2. 速度，让已缓存的页面加载更快
3. 减少服务器负载，让浏览器只下载服务器更新过的资源

4、如何实现浏览器内多个标签页之间的通信？

在标签页之间，调用 localStorage、cookies 等数据存储，可以实现标签页面之间的通信

5、localStorage 和 cookie 的区别

cookie 是不可以或缺的，因为 cookie 的作用是跟服务器进行交互，并且是HTTP规范的一部分

• cookie 的大小是受限的，大约只能4KB
• cookie 有生命周期
• 每次请求一个新页面时，cookie 都会被发送过去的，这样无形中浪费了带宽
• 另外，cookie 还需要指定作用域，而且要读写也要自己封装 setCookie、getCookie等

localStorage是为了更大容量的存储而设计的

• localStorage 存储空间是5M甚至更多
• localStorage永久性存储
• localStorage 拥有自己的读写方法，不用自己封装

不过两者还是由共同点的：

• 都存储在浏览器端
• 都是同源

---