文章目录
(文中题目大多网上转载 只进行整理 若有侵权请联系我删除)
主要的语义化标签
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 一样被存储了下来。之后当网络在处于离线状态下时,浏览器会通过被离线存储的数据进行页面展示。
-
页面头部像下面一样加入一个 manifest 的属性:
-
在 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>
标签。
扩展:矢量图与位图的区别:矢量图绘制的原理与位图有本质不同。通俗来说,矢量图存储的是一幅图的结构数据,例如各个关键点的相对位置和比例等数据,当图形放大或缩小的时候,矢量图图形是根据结构数据重新绘制的,因此几乎不失真。