HTML面试题（1）

最新推荐文章于 2024-08-09 18:20:18 发布

一只小白辕

最新推荐文章于 2024-08-09 18:20:18 发布

阅读量251

点赞数 1

分类专栏： HTML面试文章标签： html

本文链接：https://blog.csdn.net/qq_42679285/article/details/110822870

版权

HTML面试专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文详细探讨了HTML面试中常见的问题，包括DOCTYPE的作用、DTD的介绍、HTML与XML的关系、标准模式与兼容模式的区别，以及HTML5的DOCTYPE简化。此外，还深入讨论了行内元素与块级元素、HTML5元素的分类、空元素定义、link标签的用途，以及CSS与JavaScript在渲染过程中的影响。最后，文章提到了浏览器内核的理解和优化渲染路径的方法。

摘要由CSDN通过智能技术生成

1.DOCTYPE的作用

<!DOCTYPE>写在HTML文档的第一行，主要作用是为了让浏览器能够辨别文档的类型，从而让浏览器知道用什么方式去解析该文件，如果不写<!DOCTYPE>或者写错那么浏览器就会以兼容的模式去运行该文件，在HTML5中，就不需要指定DTD文件了，因为H5不再基于SMGL.

2.DTD介绍

DTD(Document Type Definition 文档类型定义)是一组机器可读的规则,它们定义HTML或XML的特定版本中所有允许元素及它们的属性和层次关系的定义。在解析网页时，浏览器将使用这些规则来检查页面的有效性并且采取相应的措施。并对HTML文档进行声明，并影响浏览器的渲染模式（开发模式）。

3.SGML XML HTML XHTML之间的关系

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

HTMl是一种超文本标记语言，主要适用于规定怎么显示页面。

XML是可扩展标记语言，和HTMl最大的区别在于XML的标签可以自己定义，而HTML标签是固定的。

XHTML和HTML没有什么区别，就是比HTML书写更加的严格，必须有结束的标签，标签名必须是小写。

4.标准模式与兼容模式的区别

标准模式的渲染方式和js引擎的解析方式都是根据浏览器的最高的标准去执行的。而兼容模式，是页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为防止站点不能运行。

5.HTML5为什么只需要写<!DOCTYPE HTML>，而不需要引入DTD？

因为HTML5是不基于SGML，因此不需要对DTD进行引用，但是需要DOCTYPE来规范浏览器的行为，让浏览器知道以什么样的模式来运行该文件，而HTML4.0是基于SGML开发的，因此需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。

6.行内元素的定义

HTML4中元素被分为两大类，分别为inline行内元素（内联元素）和block块级元素。

行内元素只占据其标签所对相应的边框大小

常见的行内元素有：a b img span strong sup sub button input label select textarea

7.块级元素的定义

块级元素占据的是父元素的整个宽度

常见的块级元素：div li ul ol dt dd dl h123456 p

8.行内元素和块级元素的区别

格式上，行内元素会在后面跟着添加不会重新起一行，块级元素会另起一行

内容上，行内元素只能包含文本和行内元素，块级元素能够包含行内元素和块级元素。

行内元素和块级元素的属性不同，行内元素的设置wigth和Height无效(可以设置line-height),设置margin和padding的上下不会对其他元素产生影响。

9.HTML5元素的分类

Metadata:位于head中，决定其内容的样式或行为。包括：<base> <link> <meta> <noscript>

Embedded：将其他资源导入到文档中。包括：<video> <audio> <canvas> <iframe> <img> <math> <object> <svg>

Interactive：专门用来与用户交互。包括：<a> <audio> <video> <button> <details> <embed> <iframe> <img> <input> <label> <object> <select> <textarea>

Heading：定义节的标题。包括：<hgrop> <h1/2/3/4/5/6>

Phrasing：包含很多HTML4中的inline层次的元素。包含：<img> <span> <strong> <label> <br> <small> <sub> <sup>

Flow

Sectioning

10.空元素的定义

标签内没有内容的HTML标签被称为空元素。空元素是在开始标签中关闭的。

常见的空元素有：img input link meta br hr

11.link标签的定义

link标签定义文档与外部资源的关系

link与是空元素，它仅包含属性。此元素只能存在与head部分，可以出现任意次数.

link标签中的rel的属性定义了当前文档与被链接的文档之间关系。常见的stylesheet指的是定义一个外部加载的样式表

12.页面导入样式时，link和@import有什么区别

从属关系的区别。@import是CSS提供的语法规则，只有导入样式表的作用，link是HTML的标签，可以引入CSS文件，还可以定义RSS、rel连接属性、引入网站图标。

加载顺序的区别。加载页面时，link标签引入的css被同时加载，@import加载的css将在页面被加载完之后被加载。

兼容性的区别。@import是css2.1才有的语法，故只在IE5+才能识别，link标签作为HTML元素，不存在兼容性的问题。

DOM可控性的区别。可以通过JS操作DOM，插入link标签来改变样式；由于DOM方法是基于文档的，无法使用@import的方式插入样式。

13.谈谈对浏览器内核的理解

浏览器的内核分为渲染引擎和js引擎

渲染引擎：职责就是渲染，就是在浏览器窗口上显示所请求的内容。渲染引擎可以显示HTML 、XML文档及图片，可也以使用插件去显示其他数据

js引擎就是为了解析和执行javascript来实现页面的动态效果。

14.浏览器的渲染原理

(1) 首先解析收到的文档，根据文档定义构建一颗DOM数，DOM树是由DOM元素及属性节点构成。

(2) 在解析CSS构建CSSOM规则树

(3) 根据DOM树和CSSOM规则树搭建渲染树。渲染树的节点就被称为渲染对象。

(4) 当渲染对象被创建并添加到树中，并没有位置和大小，所以浏览器生成渲染树，就会根据渲染树进行布局。

(5) 布局阶段完毕后就是绘制阶段，遍历渲染树并调用渲染对象的paint方法将它们的内容显示在屏幕上，绘制是使用UI基础组件。

15.浏览器渲染过程碰到JS文件怎么处理

JavaScript在加载、解析或执行的时候，会阻塞浏览器的渲染过程。也就是说，HTML解析器遇到JavaScript文件会暂时停止，使用JavaScript引擎去解析JavaScript文件，等解析完成后，再去执行HTML的渲染。如果想渲染得快的化，就要让JavaScript文件在HTML文件加载完成后再去执行，所以一般都会把JavaScript文件放在body标签的后面，或者给script标签添加defer或async属性。

16.async和defer的作用分别是什么，有什么区别？

defer属性表示延迟执行引入的JavaScript文件。及这段JavaScript加载时HTML并没有停止解析，这两个过程是并行的，当整个document解析完毕后再执行脚本文件，在DOMcontentLoaded事件触发之前，多个脚本按顺序执行。

async表示异步执行引入的JavaScript文件区别在于async属性如果JavaScript文件加载完成后，依旧会阻塞HTML解析器，使解析器停止。JavaScript的加载过程不会被阻塞。并且多个JavaScript的执行顺序不能把保证。

17.什么是文档的预解析

当加载JavaScript文件时，另外一个线程会解析剩下的文档，并且加载之后需要网络加载的资源。

18.CSS如何阻塞文件解析

理论上，样式表不改变DOM树，也就没有必要停下文档解析样式。但是存在一种问题。如果JavaScript文件加载CSS文件样式时，而CSS文件还没有加载和解析，那么JavaScript就会得到错误的值。如果浏览器还没有构建CSSOM规则树，而我们想要运行JavaScript文件，那么就会延迟JavaScript的解析和文档的执行。知道完成CSSOM的构建和下载。