本章是HTML考点的非重难点,因此我们采用简略回答的方式进行撰写,所以不会有太多详细的解释。
我们约定,每个问题后我们标记『✨』的为高频面试题
DOCTYPE是html5标准网页声明,且必须声明在HTML文档的第一行。来告知浏览器的解析器用什么文档标准解析这个文档,不同的渲染模式会影响到浏览器对于 CSS 代码甚至 JavaScript 脚本的解析
文档解析类型有:
IE8还有一种介乎于上述两者之间的近乎标准的模式,但是基本淘汰了。
<!DOCTYPE html>
的做法因此而来,如果不加就是兼容混乱的HTML,加了就是标准模式。XHTML中的DTD是类似于
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
的形式,有严格版、过渡版、框架版等几个版本.
HTML的数据属性,用于将数据储存于标准的HTML元素中作为额外信息,我们可以通过js访问并操作它,来达到操作数据的目的。
<article
id="electriccars"
data-columns="3"
data-index-number="12314"
data-parent="cars">
...
</article>
前端框架出现之后,这种方法已经不流行了
语义化是指使用恰当语义的html标签,让页面具有良好的结构与含义,比如<p>
标签就代表段落,<article>
代表正文内容等等。
语义化的好处主要有两点:
这对于简书、知乎这种富文本类的应用很重要,语义化对于其网站的内容传播有很大的帮助,但是对于功能性的web软件重要性大打折扣,比如一个按钮、Skeleton这种组件根本没有对应的语义,也不需要什么SEO。
meta标签由name和content两个属性来定义,来描述一个HTML网页文档的元信息
,例如作者、日期和时间、网页描述、关键词、页面刷新等,除了一些http标准规定了一些name作为大家使用的共识,开发者也可以自定义name。
<meta charset="UTF-8" >
<meta http-equiv="expires" content="Wed, 20 Jun 2019 22:33:00 GMT">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
src是指向外部资源的位置,指向的内容会嵌入到文档中当前标签所在的位置,在请求src资源时会将其指向的资源下载并应用到文档内,如js脚本,img图片和frame等元素。当浏览器解析到该元素时,会暂停其他资源的下载和处理,知道将该资源加载、编译、执行完毕,所以一般js脚本会放在底部而不是头部。
href是指向网络资源所在位置(的超链接),用来建立和当前元素或文档之间的连接,当浏览器识别到它他指向的文件时,就会并行下载资源,不会停止对当前文档的处理。
可以设计响应式图片,我们可以使用两个新的属性srcset 和 sizes来提供更多额外的资源图像和提示,帮助浏览器选择正确的一个资源。
srcset 定义了我们允许浏览器选择的图像集,以及每个图像的大小。
sizes 定义了一组媒体条件(例如屏幕宽度)并且指明当某些媒体条件为真时,什么样的图片尺寸是最佳选择。
所以,有了这些属性,浏览器会:
srcset提供了根据屏幕条件选取图片的能力
<img src="clock-demo-thumb-200.png"
alt="Clock"
srcset="clock-demo-thumb-200.png 200w,
clock-demo-thumb-400.png 400w"
sizes="(min-width: 600px) 200px, 50vw">
<picture>
元素通过包含零或多个 <source>
元素和一个 <img>
元素来为不同的显示/设备场景提供图像版本。浏览器会选择最匹配的子 <source>
元素,如果没有匹配的,就选择 <img>
元素的 src 属性中的URL。然后,所选图像呈现在<img>
元素占据的空间中
picture同样可以通过不同设备来匹配不同的图像资源
<picture>
<source srcset="/media/examples/surfer-240-200.jpg"
media="(min-width: 800px)">
<img src="/media/examples/painted-hand-298-332.jpg" />
</picture>
蓝色线代表网络读取,红色线代表执行时间,这俩都是针对脚本的;绿色线代表 HTML 解析
cookies、localstorage、sessionstorage、Web SQL、IndexedDB
cookies: 在HTML5标准前本地储存的主要方式,优点是兼容性好,请求头自带cookie方便,缺点是大小只有4k,自动请求头加入cookie浪费流量,每个domain限制20个cookie,使用起来麻烦需要自行封装
localStorage:HTML5加入的以键值对(Key-Value)为标准的方式,优点是操作方便,永久性储存(除非手动删除),大小为5M,兼容IE8+
sessionStorage:与localStorage基本类似,区别是sessionStorage当页面关闭后会被清理,而且与cookie、localStorage不同,他不能在所有同源窗口中共享,是会话级别的储存方式
Web SQL:2010年被W3C废弃的本地数据库数据存储方案,但是主流浏览器(火狐除外)都已经有了相关的实现,web sql类似于SQLite,是真正意义上的关系型数据库,用sql进行操作,当我们用JavaScript时要进行转换,较为繁琐。
IndexedDB: 是被正式纳入HTML5标准的数据库储存方案,它是NoSQL数据库,用键值对进行储存,可以进行快速读取操作,非常适合web场景,同时用JavaScript进行操作会非常方便。
参考链接: