HTML篇

本文是本人根据MDN上的解答或者网上一些其他朋友的文章以及自己的理解，整理归纳出来的一篇HTML方面的面试题，其中不免有许多漏掉的问题或是答案，发现错误的或者是有什么问题需要补充的朋友们，可以在评论区留言，大家虚心交流，一起进步。

谈谈你对HTML语义化的理解

HTML指的就是我们合理利用HTML为我们提供的各种标签去描述文本的内容信息，比如一个段落我们就可以使用p标签，页面顶部区域我们就可以使用header标签等等，而不是全都使用div或者span标签来完成HTML结构的编写。它具体的好处在我看来主要由两点：

对于开发人员来说，在我们接受别人或者别人接手我们的项目时，彼此都能够通过标签来大概确定页面的结构划分以及每段标签里存放内容的意义。
对于机器来说，使用语义化的标签，能够更好的被搜索引擎检索，更有利于SEO。

谈谈你对HTML5的了解，以及一些你所了解的语义化标签

HTML5其实就是HTML的一个版本，主要新增了一些标签，比如<header>、<nav>、<section>、<article>、<aside>、<footer>、<audio>、<video>等标签；

同时也增加了一些表单属性，比如required、placeholder、multiple、autofocus；

还有一些input的type值，比如date、email、tel、color、search等等。

能列举出来几个块级元素和行内元素吗

块级元素：div、p、ul、ol、table、h(n)等

行内元素：span、img、button、input、textarea等

HTML中meta标签的作用都有什么，可以说说吗？

meta标签主要有两个属性，一个是http-equiv，一个是name，每个属性都可以设置content，比如name属性，我们可以这么设置<meta name="keywords" content="xxx">，keywords的值或者content的值都有什么大家可以自行去了解。

它的主要作用就是可以提供关于HTML文档的信息。而这些的数据不会显示在页面上，但是对于机器是可读的，这就有利于一些seo，同时在移动端开发时，我们通常会设置这么一行代码<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=8">。这段代码的含义就是告诉浏览器让当前viewport的宽度等于当前设备的宽度，缩放比例为1，不允许用户手动缩放。如果不设置这个，在不同机型上可能我们的页面宽度会超出，有滚动条，并且用户可以手动缩放，影响用户的使用体验。

`<iframe>`标签有使用过吗？它的优缺点是什么？

iframe优点：

模块化和复用性：使用iframe可以将一个网页分割成多个区域，每个区域可以独立加载不同的内容，实现页面的模块化和复用。
异步加载一些加载比较慢的内容：可以使用iframe异步加载嵌入的内容，不会阻塞主页面的加载。
独立性：每个iframe都是独立的窗口，互不影响，可以实现页面之间的相互通信和数据传递。

iframe缺点：

seo不够友好，因为浏览器对嵌入的页面识别能力较弱，所以不能很好的索引到iframe嵌入的页面。
兼容性较差，在移动设备中，嵌入iframe的页面通常展示效果会很差劲，严重影响用户的使用体验。
性能问题，iframe 会阻塞主页面的 Onload 事件，和主页面共享连接池，浏览器同一时间对同一域名下的连接数有限制，所以一旦iframe占用了过多的连接池，主页面就会受到影响。

说一下HTML文件顶部Doctype的作用

Doctype声明主要是告知浏览器要以哪种方式解析和渲染HTML文件，如果我们没有进行声明Doctype，浏览器就会以混杂模式(Quir Mode)来解析和渲染，如果我们使用了<!DocType html>这样的声明时，浏览器就会以严格模式（Strict Mode)来解析和渲染HTML文件。

混杂模式的要求比较宽松，它主要是为了兼容旧版本浏览器，它允许旧版本的一些HTML代码能够在新版浏览器上正常运行，但是在不同浏览器环境下可能会导致一些布局和渲染问题。

严格模式的要求比较严格，它只允许我们使用最新的浏览器支持的一些HTML语法，并且更严格的执行错误检查，确保不同的浏览器都可以正确的解析这些HTML文件，避免了最终效果的差异。

说一下 `<link>` 标签的作用

link标签用来引入外部的一些资源，通常使用它来加载一些外部的样式表。

它有一个rel属性，其中我们有几个值会经常用到，分别是dns-prefetch、preconnect、prefetch、preload、prerender。

dns-prefetch

dns-prefetch的作用是，对当前资源进行dns预解析，从而使我们在访问当前资源域名下的资源时，不需要再进行把域名通过dns解析成ip地址的操作。可以节约时间。

preconnect

preconnect的作用是，对当前资源进行预连接，它对当前资源的域名不只是进行dns解析，还会完成TLS 协商，TCP 三次握手等操作。

使用了这个参数后，浏览器就会提前做好连接工作，但是只保留10秒，之后就会被关闭；
不必要的预连接会延迟其他重要资源，因此要限制 preconnect 预连接的数量；

prefetch

prefetch的作用是，对当前资源进行预加载，它一般代表当前资源可能会在接下来某个时间会用到，告知浏览器可以在空闲时间对该资源进行预加载，以达到未来访问该资源时能够更快的目的。它属于低优先级的预加载。

preload

preload的作用也是对当前资源进行预加载，但是它和prefetch不同的是，它通常代表了这个资源可能要在当前页面或者下个页面要进行使用，浏览器应该立即对它进行加载。它属于高优先级的预加载。

prerender

prerender的作用和prefetch相似，只是它不只完成预加载，还会对资源文件进行解析、执行、渲染等操作。因此我们最好不要使用它，不然在特殊情况下，可能会造成网络的缓慢，或者页面的卡顿等问题。

说一下 `<script>` 标签的作用，以及它们的特殊用法。

我们可以通过script标签的scr属性，引入外部的js脚本，浏览器解析HTML文件时，如果碰到script标签，会阻塞HTML的解析。
同时我们可以在<script></script>标签中编写js代码，编写的代码会和我们引入的外部js脚本共享作用域。
通过script标签引入外部js脚本时，可以添加defer属性，它可以使我们的js脚本进行并行解析和延时加载，当使用该属性时，浏览器碰到script标签时，不会阻塞HTML的解析，而是会并行解析js脚本，解析完成后不会执行，会在整个文档解析完成后（包括其他资源的下载和处理），然后按照js脚本在文档中出现的顺序依次执行，这些脚本文件，会在DOMContentLoaded事件之前解析执行完毕；
通过script标签引入外部js脚本时，可以添加async属性，它可以使我们的js脚本进行并行解析和立即加载，当使用该属性时，浏览器碰到script标签时，不会阻塞HTML的解析，而是会并行解析js脚本，和defer不同的是，解析完成后会立即执行如果此时HTML文件没有解析完毕，那么会阻塞HTML文件的解析。而且如果我们引入多个外部js脚本时，谁先解析完毕，谁先执行，和他们的引入顺序无关，而且这些脚本文件可能会在DOMContentLoaded事件之前或之后执行完毕，但会在load事件之前执行完毕；
同时我们可以利用script标签来处理跨域问题，这也是jsonp处理跨域问题的原理。

2024年末前端备战面试题——HTML篇