乐趣区

关于html5: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 类型

重点记住:numbertelsearch

新增 type 类型

autocomplete属性 默认是 autocomplete=on 即曾经关上,表单须要加上 name 属性,同时胜利提交

个别咱们都会设置 autocomplete="off",因为咱们不想让已经搜寻过的信息显示进去,爱护隐衷

4、两种存储

HTML5 为浏览器提供了两种数据存储计划:sessionStoragelocalStorage

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、如何实现浏览器内多个标签页之间的通信?

在标签页之间,调用 localStoragecookies 等数据存储,能够实现标签页面之间的通信

5、localStoragecookie 的区别

cookie 是不能够或缺的,因为 cookie 的作用是跟服务器进行交互,并且是 HTTP 标准的一部分

  • cookie 的大小是受限的,大概只能 4KB
  • cookie 有生命周期
  • 每次申请一个新页面时,cookie 都会被发送过来的,这样无形中节约了带宽
  • 另外,cookie 还须要指定作用域,而且要读写也要本人封装 setCookiegetCookie

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

  • localStorage 存储空间是 5M 甚至更多
  • localStorage永久性存储
  • localStorage 领有本人的读写办法,不必本人封装

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

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

退出移动版