前端面试总结——HTML

超、凢脫俗 2022-11-11 13:20 183阅读 0赞

### 文章目录 ###

*  1. doctype的作用是什么？
 *   *  HTML 4.01 和 HTML5 中 DOCTYPE的区别
     *  两种版本的声明方式
 *  2. HTML、XHTML、XML有什么区别
 *   *  HTML
     *  XML
     *  XHTML
 *  3. 什么是data-属性？
 *  4. 对HTML语义化的理解？
 *  5. 什么是HTML5？HTML5和HTML的区别是什么？
 *   *  什么是HTML5
     *  区别
 *  6. 有哪些常用的meta标签？
 *  7. src和href的区别？
 *   *  什么是src
     *  什么是href
     *  区别
 *  8. img的srcset的作用是什么？（追问）
 *   *  img的srcset的作用
     *  还有哪一个标签能起到跟srcset相似作用？（追问）
     *  还有什么能起到跟srcset相似作用？（追问）
 *  9. \`< script >\`标签中defer和async的区别？
 *   *  script
     *  async script
     *  defer script
 *  10. 介绍一下前端存储的方式
 *  11. 前端页面有哪三层构成，分别是什么，作用是什么？

# 1. doctype的作用是什么？ #

**DOCTYPE（`document type`）的简写，它是一种标记语言的文档类型声明，即告诉浏览器当前 HTML 是用什么版本编写的。**

## HTML 4.01 和 HTML5 中 DOCTYPE的区别 ##

*  HTML 4.01 中的 doctype 需要对 DTD（`文档类型定义Document Type Definition`） 进行引用，因为 HTML 4.01 基于 SGML（`标准通用标记语言 国际上定义电子文档和内容描述的标准`）。
 *  HTML 5 不基于 SGML，因此不需要对 DTD 进行引用，但是需要 doctype 来规范浏览器的行为（html 5简化了这种声明，意在告诉浏览器使用统一的标准即可）。

## 两种版本的声明方式 ##

**HTML 5：**

**HTML 4**

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

# 2. HTML、XHTML、XML有什么区别 #

*  **HTML**：HyperText Markup Language / 超文本标记语言
 *  **XML**: Extensible Markup Language / 可扩展标记语言
 *  **XHTML**: Extensible Hypertext Markup Language / 可扩展超文本标记语

XML 被设计用来传输和存储数据。

HTML 被设计用来显示数据。

## HTML ##

HTML 是用来描述和定义网页内容的标记语言，是构成网页的最基本的东西。

所谓超文本，就是说它除了能标记文本，还能标记其他的内容，比如：图片，链接，音频，视频等。

## XML ##

XML 可以自己“发明”标签————这也是“可扩展的”一个含义。

XML 没什么特别的。它仅仅是纯文本而已。有能力处理纯文本的软件都可以处理 XML。

## XHTML ##

**HTML 和 XML 一结合，就产生了 XHTML。是更严谨更纯净的 HTML 版本。**

从继承关系上讲，HTML是一种基于标准通用标记语言（SGML）的应用，是一种非常灵活的置标语言，而**XHTML则基于可扩展标记语言（XML），XML是SGML的一个子集。**

# 3. 什么是data-属性？ #

在HTML5中我们可以使用data-\*（`自定义数据属性`）为前缀来设置我们需要的自定义属性，来进行一些数据的存取。

**如何使用？**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div id="div1" class="div1" data-id="myId" data-id-and-class="Hello">test2</div>
        <div id="div2" myName="Hello">test</div>
        <script> var div1 = document.getElementById("div1"); //获取自定义的值 var myId = div1.getAttribute("data-id"); var my = div1.getAttribute("data-id-and-class"); console.log(myId); // myId console.log(my); // Hello //设置自定义的值 div1.setAttribute("data-name", "nicai") var div = document.getElementById("div2"); var myName = div.getAttribute("myName"); console.log(myName); //Hello </script>
    </body>
    </html>

`getAttribute`方法能在所有现代浏览器中正常工作，但它不是HTML5的自定义data-\*属性被使用的目的，这个方法也用到我们以前使用自定义属性。

# 4. 对HTML语义化的理解？ #

[深入浅出的web语义化理解\_前端圆圆-CSDN博客\_web语义化的理解 https://blog.csdn.net/weixin\_45844049/article/details/109508985][web_-CSDN_web_ https_blog.csdn.net_weixin_45844049_article_details_109508985]

# 5. 什么是HTML5？HTML5和HTML的区别是什么？ #

## 什么是HTML5 ##

`HTML5`是`HTML`的新标准，其主要目标是无需任何额外的插件如`Flash`、`Silverlight`等，就可以传输所有内容。它囊括了动画、视频、丰富的图形用户界面等。

## 区别 ##

**从文档声明类型上看：**

*  `HTML`是很长的一段代码，很难记住。如下代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

*  `HTML5`却只有简简单单的声明，方便记忆。如下：

<!DOCTYPE html>

**从语义结构上看：**

*  `HTML4.0`：没有体现结构语义化的标签，通常都是这样来命名的`<div id="header"></div>`，这样表示网站的头部。
 *  `HTML5`：在语义上却有很大的优势。提供了一些新的标签，比如：`<header>`、`<article>`、`<footer>`。

**从语法的处理上看：**

HTML无法处理不准确的语法；HTML5能够处理不准确的语法。

# 6. 有哪些常用的meta标签？ #

**`<meta>`：文档级元数据元素**

`meta` 元素定义的元数据的类型包括以下几种：

*  如果设置了 name 属性，meta 元素提供的是文档级别（document-level）的元数据，应用于整个页面。
 *  如果设置了 http-equiv 属性，meta 元素则是编译指令，提供的信息与类似命名的HTTP头部相同。
 *  如果设置了 charset 属性，meta 元素是一个字符集声明，告诉文档使用哪种字符编码。
 *  如果设置了 itemprop 属性，meta 元素提供用户定义的元数据。

# 7. src和href的区别？ #

## 什么是src ##

src是source的缩写，表示外部文件的引用，代表了指向外部资源的位置，把引用的文件加载到html页面的指定位置中去。

src属性是页面内容中不可缺少的一部分，常用到 js脚本，img图片和frame等元素。例如:

## 什么是href ##

href是Hypertext Reference的简写，表示超文本引用，代表了指向网络资源的所在位置，它与页面直接的关系为链接的关系。

## 区别 ##

*  src是指向外部资源的位置，指向的内容会嵌入到文档中当前标签所在的位置，在请求src资源时会将其指向的资源下载并应用到文档内，如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，知道将该资源加载、编译、执行完毕，所以一般js脚本会放在底部而不是头部。
 *  href是指向网络资源所在位置（的超链接），用来建立和当前元素或文档之间的连接，当浏览器识别到它他指向的文件时，就会并行下载资源，不会停止对当前文档的处理。

# 8. img的srcset的作用是什么？（追问） #

## img的srcset的作用 ##

img 元素的 srcset 属性用于浏览器根据宽、高和像素密度来加载相应的图片资源。

属性格式：图片地址 宽度描述w 像素密度描述x，多个资源之间用逗号分隔。例如：

上面的例子表示浏览器宽度达到 800px 则加载 middle.jpg ，达到 1400px 则加载 big.jpg。**注意：像素密度描述只对固定宽度图片有效。**

img 元素的 size 属性给浏览器提供一个预估的图片显示宽度。

属性格式：媒体查询 宽度描述（支持px），多条规则用逗号分隔。

上面的例子表示浏览器视口为 320px 时图片宽度为 300px，其他情况为 1200px。

## 还有哪一个标签能起到跟srcset相似作用？（追问） ##

**`<picture>`：picture 元素**  
HTML `<picture>` 元素通过包含零或多个 `<source>` 元素和一个 `<img>` 元素来为不同的显示/设备场景提供图像版本。浏览器会选择最匹配的子 `<source>` 元素，如果没有匹配的，就选择 `<img>` 元素的 src 属性中的URL。然后，所选图像呈现在`<img>`元素占据的空间中。

<picture>
        <source srcset="/media/cc0-images/surfer-240-200.jpg" media="(min-width: 800px)">
        <img src="/media/cc0-images/painted-hand-298-332.jpg" alt="" />
    </picture>

要决定加载哪个URL，用户代理检查每个 的 srcset、media 和 type 属性，来选择最匹配页面当前布局、显示设备特征等的兼容图像。

## 还有什么能起到跟srcset相似作用？（追问） ##

**css image-set()**

body { 
        background-image: -webkit-image-set( url(../images/pic-1.jpg) 1x, url(../images/pic-2.jpg) 2x, url(../images/pic-3.jpg) 600dpi);
        background-image:         image-set( url(../images/pic-1.jpg) 1x, url(../images/pic-2.jpg) 2x, url(../images/pic-3.jpg) 600dpi);
    }

上述代码将会为普通屏幕使用 pic-1.jpg，为高分屏使用 pic-2.jpg，如果更高的分辨率则使用 pic-3.jpg，比如印刷。

# 9. `< script >`标签中defer和async的区别？ #

在 HTML 中会遇到以下三类 script：

那么这三类 script 有什么区别呢？

## script ##

浏览器在解析 HTML 的时候，如果遇到一个没有任何属性的 script 标签，就会暂停解析，先发送网络请求获取该 JS 脚本的代码内容，然后让 JS 引擎执行该代码，当代码执行完毕后恢复解析。整个过程如下图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70]  
可以看到，script 阻塞了浏览器对 HTML 的解析，如果获取 JS 脚本的网络请求迟迟得不到响应，或者 JS 脚本执行时间过长，都会导致白屏，用户看不到页面内容。这也是我们平时都把`<script>`标签放到底部的原因。

## async script ##

async 表示异步，例如七牛的源码中就有大量的 async 出现：  
![在这里插入图片描述][20210324193346455.png]  
当浏览器遇到带有 async 属性的 script 时，请求该脚本的网络请求是异步的，不会阻塞浏览器解析 HTML，一旦网络请求回来之后，如果此时 HTML 还没有解析完，浏览器会暂停解析，先让 JS 引擎执行代码，执行完毕后再进行解析，图示如下：  
![在这里插入图片描述][20210324193357533.png]  
当然，如果在 JS 脚本请求回来之前，HTML 已经解析完毕了，那就啥事没有，立即执行 JS 代码，如下图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 1]  
所以 async 是不可控的，因为执行时间不确定，你如果在异步 JS 脚本中获取某个 DOM 元素，有可能获取到也有可能获取不到。而且如果存在多个 async 的时候，它们之间的执行顺序也不确定，完全依赖于网络传输结果，谁先到执行谁。这导致async属性下的脚本是乱序的，对于script有先后依赖关系的情况，并不适用。

## defer script ##

defer 表示延迟，例如掘金的源码中就有大量的 defer 出现：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 2]  
当浏览器遇到带有 defer 属性的 script 时，获取该脚本的网络请求也是异步的，不会阻塞浏览器解析 HTML，一旦网络请求回来之后，如果此时 HTML 还没有解析完，浏览器不会暂停解析并执行 JS 代码，而是等待 HTML 解析完毕再执行 JS 代码，图示如下：  
![在这里插入图片描述][20210324193538684.png]  
如果存在多个 defer script 标签，浏览器（IE9及以下除外）会保证它们按照在 HTML 中出现的顺序执行，不会破坏 JS 脚本之间的依赖关系。

最后，根据上面的分析，不同类型 script 的执行顺序及其是否阻塞解析 HTML 总结如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 3]  
**原文：[https://juejin.cn/post/6894629999215640583][https_juejin.cn_post_6894629999215640583]**

# 10. 介绍一下前端存储的方式 #

前端常用的本地存储方式有三种:`cookie`、`localStorage` 、`sessionStorage`

*  **cookie**：在HTML5标准前本地储存的主要方式，优点是兼容性好，缺点是大小只有4k，自动请求头加入cookie浪费流量，使用起来麻烦需要自行封装；

HTML5 提供了 sessionStorage （会话存储） 和 localStorage（本地存储）两个存储对象来对网页的数据进行添加、删除、修改、查询操作。

*  `sessionStorage` 用于**临时保存**同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据，**在浏览器打开期间存在，包括页面重新加载**
 *  `localStorage` 用于**长久保存**整个网站的数据，保存的数据**没有过期时间**，**直到手动去除**。

三者的具体对比如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 4]  
cookie使用起来麻烦需要自行封装。

localStorage和sessionStorage使用相同的API：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 5]

# 11. 前端页面有哪三层构成，分别是什么，作用是什么？ #

结构层HTML，表示层CSS，行为层JS

[web_-CSDN_web_ https_blog.csdn.net_weixin_45844049_article_details_109508985]: https://blog.csdn.net/weixin_45844049/article/details/109508985
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70]: /images/20221022/707206c278ff42908f98efda0b47363f.png
[20210324193346455.png]: /images/20221022/5a19aca32e734165b8a60b6b5544e190.png
[20210324193357533.png]: /images/20221022/affb6247e245488aab2d236c7dd0108b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 1]: /images/20221022/966d060039b741f5bba5e26cf34c3cb0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 2]: /images/20221022/5c6ad765e66c4b6d8eed076db2dedaa5.png
[20210324193538684.png]: /images/20221022/61a2994c27094f918829a1377ff27548.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 3]: /images/20221022/35f084dff12a49c686a90d14cc565681.png
[https_juejin.cn_post_6894629999215640583]: https://juejin.cn/post/6894629999215640583
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 4]: /images/20221022/30635e2644b94802894c312c4f023a35.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 5]: /images/20221022/e3b81004fc09434b9387d97b06917218.png