2021 HTML面试题（最新）不定时更新

DOCTYPE有什么作用？

DOCTYPE声明一般位于文档的第一行，它的作用主要是告诉浏览器以什么样的模式来解析文档。一般指定了之后会以标准模式来进行文档解析，否则就以兼容模式进行解析。

在标准模式下，浏览器的解析规则都是按照最新的标准进行解析的。而在兼容模式下，浏览器会以向后兼容的方式来模拟老式浏览器的行为，以保证一些老的网站的正确访问。

标准模式（又称严格模式）与兼容模式（又称混杂模式）各有什么区别？

在标准模式下，浏览器的解析规则都是按照最新的标准进行解析的。而在兼容模式下，浏览器会以向后兼容的方式来模拟老式浏览器的行为，以保证一些老的网站的正确访问。

HTML5 为什么只需要写 ，而不需要引入 DTD？

HTML5 不基于 SGML，因此不需要对 DTD 进行引用，但是需要 DOCTYPE 来告诉浏览器以什么样的模式来解析文档。而 html5 以前的 html 文档都是基于 SGML 的 ，所以需要对 DTD 进行引用，才能告知浏览器文档所使用的文档类型。

SGML 、XML 、 HTML 和 XHTML 的关系？

SGML 是标准通用标记语言，是一种定义电子文档结构和描述其内容的国际标准语言，是所有电子文档标记语言的起源。

XML 是可扩展标记语言。

HTML 是超文本标记语言，是一种基于web网页的语言。XML 和 HTML 的最大区别就在于 XML 的标签是可以自己创建的，数量无限多， 而 HTML 的标签都是固定的而且数量有限。

XHTML 是现在基本上所有网页都在用的标记语言，是一种基于XML、语法严格、标准的设计语言。他其实和 HTML 没什么本质的区别，标签都一样，用法也都一样，就是比 HTML更严格，比如标签必须都用小写，标签都必须有闭合标签等。

什么是闭合标签

所谓闭合标签，就是标签有开始，有结束。但是有一些标签是没有结束标签的，比如，他有两种写法，第一种：，第二种：，现在html5中，做了统一规范，要求所有的标签必须闭合。

说一下DTD

DTD（ Document Type Definition 文档类型定义）是一组机器可读的规则，是html文档的验证机制。DTD定义 XML 或 HTML 的特定版本中所有允许元素以及它们的属性和层次关系等。在解析网页时，浏览器将使用这些规则检查页面的有效性并且采取相应的措施。

行内元素有哪些？块级元素有哪些？空(void)元素有那些？行内元素和块级元素有什么区别？

• 行内元素：a b span img input label select
• 块级元素：div ul ol li h1 p
• 空元素：br hr link meta img input
• 两者的区别：
  1. 行内元素不可以设置高宽，不独占一行
  2. 块级元素可以设置高宽，并且独占一行

谈谈你对web标准和W3C的理解和认识。

web标准主要强调的是一个网站的结构,样式,行为相分离，**（优点）**从而达到结构清晰，易于阅读，易于维护的目的。

W3C对web标准提出了规范化的要求，也就是在实际编程中的一些代码规范：包含如下几点：

1.对于结构的要求有：标签字母要小写、标签要闭合、标签不允许随意嵌套。用标签语义化来提高搜索引擎对页面的抓取效率。

2.对于样式和行为的要求有：

• 尽量使用外链css样式表和js脚本。这样做符合结构,样式,行为分离规范。同时提高页面渲染速度，提高用户的体验。
• 样式尽量少用行间样式表，使代码易维护、可复用。

什么是语义化的HTML？

语义化的HTML，简单来说就是用正确的标签做正确的事。例如：段落用 p 标签，标题用 h 系列标签，边栏用 aside 标签，主要内容用 main 标签。正确使用语义标签可以给我们带来很多好处。

对我们开发者来说，语义化的HTML能够增强代码可读性，在没有 CSS 的情况下也能较好地呈现网页的结构，便于团队的开发和维护。另一方面也有利于 SEO优化，提高搜索引擎对页面的抓取效率。比如说我们常用的 b 标签和 strong 标签，它们在样式上都是文字的加粗，但是 strong 标签拥有强调的语义。网络爬虫对我们网页进行分析时，那么它会依赖于 html 标签来确定上下文和各个关键字的权重，一个语义化的文档是有利于爬虫对文档内容解读的，从而有利于我们网站的 SEO 优化。

谈一谈SEO

SEO(Search Engine Optimization)，即搜索引擎优化。我们进行SEO优化的目的就是为了提升网站在搜索引擎中的权重，使得用户在搜索网站时我们的网站能排在前面。

要进行优化，我们得先了解搜索引擎是怎么工作的：

网络爬虫每天在互联网上爬行，从一个链接到另一个链接，下载其中的内容，进行分析提炼，找到其中的关键词，如果网络爬虫认为关键词在数据库中没有而对用户是有用的便存入后台的数据库中。反之，如果网络爬虫认为是垃圾信息或重复信息，就舍弃不要，继续爬行，寻找最新的、有用的信息保存起来提供用户搜索。当用户搜索时，就能检索出与关键字相关的网址显示给用户。一个关键词对用多个网址，因此就出现了排序的问题，与关键词最吻合的网址就会排在前面了。

那么了解了他的工作原理，我们就有了优化的方向，让爬虫能爬取到网站更多有用的关键字，提高我们的权重。

1.网站结构布局优化。控制首页链接数量，提倡使用扁平化结构，尽量让网络爬虫只要跳转3次，就能到达网站内的任何一个内部页面。

2.网页代码优化。使用语义化标签书写HTML代码，符合W3C标准，实现SEO优化。

具体的SEO操作主要有:

前端需要注意哪些 SEO

（1）合理的 title、description、keywords：搜索对这三项的权依次减小，title 值强调重点即可；description 把页面内容高度概括，长度合适；keywords 列举出重要关键词即可。
（2）语义化的 HTML 代码，符合 W3C 规范：语义化代码让搜索引擎容易理解网页。
（3）重要内容 HTML 代码放在最前：搜索引擎抓取 HTML 顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容肯定被抓取。
（4）重要内容不要用 js 输出：爬虫不会执行 js 获取内容
（5）少用 iframe：搜索引擎不会抓取 iframe 中的内容

（6）提高网站速度：网站速度是搜索引擎排序的一个重要指标

• javascript按需加载
• 图片懒加载
• 使用CDN上的文件等等。

请写出table标签下面会包含哪些标签元素

tr th td thead tbody tfoot 等

常用浏览器有哪些，内核都是什么？

常用的浏览器有IE、Chrome、Firefox、Safari、Opera。在说其内核之前， 我先谈谈我对浏览器内核的理解。所谓的浏览器内核指的是一个浏览器最核心的部分——渲染引擎，浏览器内核，其实除了渲染引擎，有时候也包含了javascript引擎，如WebKit，它由渲染引擎WebCore和javascript引擎JSCore组成。

渲染引擎的主要作用是帮助浏览器来渲染网页的内容，将页面内容和排版代码转换为用户所见的视图。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。

JS引擎的主要作用是解析和执行JavaScript来实现网页的动态效果。最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，浏览器内核就倾向与只指渲染引擎。

IE内核：Trident
Chrome内核：以前是Webkit，现在是Blink
Firefox内核：Gecko
Safari内核：Webkit
Opera内核：最初是Presto，后来是Webkit，现在是Blink（Webkit的分支）

介绍一下你对浏览器内核的理解？

常见的浏览器内核比较

什么是静态页面？什么是动态页面？

静态页面是指没有数据交互的网页，就是没有数据库参与，没有服务器端数据的加载。比如静态网页就是只有HTML+CSS+Javasript作出的网站； 动态页面就是指有后台数据参与的网页，网页中的数据是从数据库中提取的，需要后台逻辑的支持，比如动态网页就是JSP页面（后台语言是JAVA）、ASP页面（后台语言是ASP.NET）等。

如何创建锚点？锚点的作用是什么？

锚点是文档中某一行的一个记号，类似于书签，用于链接到文档中的某个位置。 创建锚点的方法是，使用元素创建锚点时，使用name属性为其命名，对其他元素，还可以使用id属性为其命名。当定义锚点后，可以创建直接跳至该锚点的链接，这样使用者就无须不停的滚动页面来寻找他们需要的信息了， 设置锚点链接的时候就是href ="#xxx"。

列举常用的结构标签，并描述其作用

结构标签是专门用于标识页面的不同结构，相对于使用

常用的结构标签有以下几种：

• header标签，用于定义文档的页眉。
• nav标签，用于定义页面的导航链接部分。
• section标签，用于定义文档中的节，表示文档中的一个具体的组成部分。
• article标签，常用于定义独立于文档其他部分的内容。
• aside标签，常用于定义页面的一些额外组成部分，如广告栏，侧边栏和相关引用信息。
• footer标签，定义某区域的脚注信息。

div是什么？在div出现之前用什么做网站布局？

div是网站布局的盒子标签。div出现之前使用table布局，因为table布局嵌套很多，导致网站加载慢（table无法局部渲染），布局层级不清晰。

img标签上的title和alt属性的区别是什么？

title属性是为元素提供标题信息，即当光标悬浮在标签上后显示的信息；

alt属性是图片的替换文本，即当图片不能正常显示时（如加载失败），用文字代替。 除了纯装饰图片外都必须设置有意义的alt值，有利于SEO

简述src和href的区别

src表示来源地址，用在img、script等元素上。 href表示超文本引用（hypertext reference），用在link和a等元素上。总的来说， src表示资源的一个引入。href的内容与该页面有关联，即引用。它们的区别就是一个引入和引用。

简述< strong > < em >和< b>< i>标签的区别

标签和标签一样，用于强调文本，但强调的程度更强一些；是粗体强调标签， 是斜体强调标签。和是即语义化元素。 是视觉元素，即非语义化元素，分别表示无意义的加粗和无意义的斜体。

页面导入样式时，使用 link 和 @import 有什么区别？

说一说浏览器的渲染原理

浏览器渲染总体来说分为以下几步

1. 浏览器将获取的HTML文档解析成DOM树。在DOM树中，的元素、注释、标签都会在DOM树中，并且在DOM树构建的过程中，CSS和JS的加载和执行可能会阻塞文档的解析。
2. 然后对 CSS 进行解析，构建 CSSOM 规则树。
3. 根据 DOM 树和 CSSOM 规则树构建渲染树。渲染树的节点被称为渲染对象，渲染对象是一个包含有颜色和大小等样式信息的矩形，渲染对象和 DOM 元素相对应，但这种对应关系不是一对一的，不可见的 DOM 元素不会入渲染树，但是visibility等于hidden的元素在渲染树中。
4. 根据渲染树来布局，以计算每个节点的几何信息。布局阶段会从渲染树的根节点开始遍历，由于渲染树的每个节点都是一个渲染对象，包含颜色，大小，位置等样式信息，浏览器就可以通过这些样式信息来确定每个节点对象在页面上的具体大小和位置，布局阶段的输出就是我们常说的盒子模型，它会精确地捕获每个元素在屏幕内的确切位置与大小。
5. 将各个节点绘制到屏幕上。在绘制阶段，浏览器会遍历渲染树，调用渲染器的方法在屏幕上显示其内容。渲染树的绘制工作是由浏览器的UI后端组件完成的。