前端面试题-html（二）

（文中题目大多网上转载 只进行整理 若有侵权请联系我删除）

主要的语义化标签

title：主要用于页面的头部的信息介绍
header：定义文档的页眉
nav：主要用于页面导航
main：规定文档的主要内容。对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容，比如侧栏、导航栏、版权信息、站点标志或搜索表单。
article：独立的自包含内容
h1~h6：定义标题
ul: 用来定义无序列表
ol: 用来定义有序列表
address：定义文档或文章的作者/拥有者的联系信息。
canvas：用于绘制图像
dialog：定义一个对话框、确认框或窗口
aside：定义其所处内容之外的内容。<aside> 的内容可用作文章的侧栏。
section：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
figure：规定独立的流内容（图像、图表、照片、代码等等）。figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。
details：描述文档或者文档某一部分细节
mark：义带有记号的文本。

请描述一下 cookies，sessionStorage 和 localStorage 的区别？

网络请求
cookie 是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密），cookie 数据始终在同源的 http 请求中携带（即使不需要），即会在浏览器和服务器间来回传递。
sessionStorage 和 localStorage 不会自动把数据发给服务器，仅在本地保存。

存储大小
cookie 数据大小不能超过 4k。
sessionStorage 和 localStorage 虽然也有存储大小的限制，但比 cookie 大得多，可以达到 5M 或更大。

有效期（生命周期）
localStorage: 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
sessionStorage: 数据在当前浏览器窗口关闭后自动删除。
cookie: 设置的 cookie 过期时间之前一直有效，即使窗口或浏览器关闭

共享
sessionStorage 不能共享，localStorage 在同源文档之间共享，cookie 在同源且符合 path 规则的文档之间共享。

注意：cookies和storage都是无法跨浏览器存在的

HTML5 有哪些新特性、移除了那些元素？

HTML5 现在已经不是 SGML 的子集了，主要是关于图像，位置，存储，多任务等。
功能的增加：
新增了绘画元素 canvas
新增了用于媒介播放的 video 和 audio 元素
新增了 storage 存储技术，包括本地存储 localStorage（可进行长期存储数据，浏览器关闭后数据不丢失）和临时存储 sessionStorage （数据在浏览器关闭后自动删除）
新增了语意化更好的内容元素，比如 article、footer、header、nav、section
新增了表单元素类型：calendar、date、time、email、url、search
新的技术 webworker, websocket, Geolocation
移除了纯表现的元素：basefont，big，center，font, s，strike，tt，u
移除了对可用性产生负面影响的元素：frame，frameset，noframes

扩展：如何处理 HTML5 新标签的浏览器兼容问题：

• IE8/IE7/IE6 支持通过 document.createElement 方法产生的标签，
• 可以利用这一特性让这些浏览器支持 HTML5 新标签，
• 浏览器支持新标签后，还需要添加标签默认的样式。
• 当然也可以直接使用成熟的框架、比如 html5shim：

HTML5 的离线储存怎么使⽤，⼯作原理能不能解释⼀下？

你的网页性能优化的再好，如果网络不好那也会导致网页的体验差。 离线应用是指通过离线缓存技术，让资源在第一次被加载后缓存在本地，下次访问它时就直接返回本地的文件，就算没有网络连接。

离线应用有以下优点：

• 在没有网络的情况下也能打开网页。
• 由于部分被缓存的资源直接从本地加载，对用户来说可以加速网页加载速度，对网站运营者来说可以减少服务器压力以及传输流量费用。

离线应用的核心是离线缓存技术，历史上曾先后出现2种离线离线缓存技术，它们分别是：

• AppCache 又叫 Application Cache，目前已经从 Web 标准中删除，请尽量不要使用它。
• Service Workers 是目前最新的离线缓存技术，是 Web Worker 的一部分。 它通过拦截网络请求实现离线缓存，比 AppCache 更加灵活。它也是构建 PWA 应用的关键技术之一。

Service Workers 相比于 AppCache 来说更加灵活，因为它可以通过 JavaScript 代码去控制缓存的逻辑。
由于第1种技术已经废弃，本节只专注于讲解如何用 Webpack 构建使用了 Service Workers 的网页。

一、AppCache技术实现方式：
基于一个新建的.appcache 文件的缓存机制，通过这个文件上的解析清单离线存储资源，这些资源就会像 cookie 一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。

1. 页面头部像下面一样加入一个 manifest 的属性：
   

2. 在 cache.manifest 文件的编写离线存储的资源：
   

二、Service Workder技术实现方式：
https://www.imooc.com/article/details/id/31522

浏览器是怎么对 HTML5 的离线储存资源进⾏管理和加载的呢？

在线的情况下，浏览器发现 html 头部有 manifest 属性，它会请求 manifest 文件，如果是第一次访问 app，那么浏览器就会根据 manifest 文件的内容下载相应的资源并且进行离线存储。如果已经访问过 app 并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的 manifest 文件与旧的 manifest 文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。
离线的情况下，浏览器就直接使用离线存储的资源。在离线状态时，可操作 window.applicationCache 进行需求实现。参考链接： https://yanhaijing.com/html/2014/12/28/html5-manifest/

Canvas 和 SVG 有什么区别？

canvas 是 html5 提供的新元素<canvas >，而 svg 存在的历史要比 canvas 久远，已经有十几年了。svg 并不是 html5 专有的标签，最初 svg 是用 xml 技术（超文本扩展语言，可以自定义标签或属性）描述二维图形的语言。
在 H5 中看似 canvas 与 svg 很像，但是，他们有巨大的差别。

• 功能上:
• canvas 可以看做是一个画布。其绘制出来的图形为标量图，因此，可以在 canvas 中引入 jpg 或 png 这类格式的图片。在实际开发中，大型的网络游戏都是用 canvas 画布做出来的，并且 canvas 的技术现在已经相当的成熟。另外，我们喜欢用 canvas 来做一些统计用的图表，如柱状图曲线图或饼状图等。
• svg，所绘制的图形为矢量图，所以其用法上受到了限制。因为只能绘制矢量图，所以 svg 中不能引入普通的图片。因为矢量图的不会失真的效果，在项目中我们会用来做小图标。但是由于其本质为矢量图，可以被无限放大而不会失真，这很适合被用来做地图，而百度地图就是用 svg 技术做出来的。
• 技术上：
• canvas 里面绘制的图形结果是一整块画布，不能被引擎抓取，而 svg 里面的图形是由各个 dom 元素结合而成的，可以被引擎抓取，因此支持事件的绑定。
  此外，canvas 中我们绘制图形通常是通过 javascript 来实现，svg 更多的是通过标签来来实现，如果在 svg 中绘制正矩形就要用<rect> 标签。

扩展：矢量图与位图的区别：矢量图绘制的原理与位图有本质不同。通俗来说,矢量图存储的是一幅图的结构数据,例如各个关键点的相对位置和比例等数据，当图形放大或缩小的时候，矢量图图形是根据结构数据重新绘制的,因此几乎不失真。