HTML面试常问知识点总结（持续更新~）

我不是女神ヾ 2022-11-01 15:56 272阅读 0赞

### HTML面试总结 ###

*  1、DOCTYPE 的作用是什么？
 *  2、 DTD 介绍
 *  3、HTML5 为什么只需要写 ，而不需要引入 DTD？
 *  4、标准模式(严格模式)与兼容模式（怪异/混杂模式）各有什么区别？
 *  5、行内元素定义
 *  6、块级元素定义
 *  7、行内块状元素定义
 *  8、行内元素与块级元素的联系与区别？
 *  9、空元素定义
 *  10、link 标签定义
 *  11、页面导入样式时，使用 link 和 @import 有什么区别？
 *   *  持续更新中.....

# 1、DOCTYPE 的作用是什么？ #

`DOCTYPE(文档类型)`：

* `<!DOCTYPE>`声明位于 HTML 文档中的第一行，处于`<html>`标签之前。
 * `<!DOCTYPE>`声明不是一个 HTML 标签；它是用来告知 Web 浏览器页面使用了哪种 HTML 版本。
 * `DOCTYPE`不存在或格式不正确会导致文档以兼容模式呈现。

作用：

`<!DOCTYPE>` 声明一般位于文档的第一行，它的作用主要是告诉浏览器以什么样的模式来解析文档。一般指定了之后会以标准模式来进行文档解析，否则就以兼容模式进行解析。在标准模式下，浏览器的解析规则都是按照最新的标准进行解析的。而在兼容模式下，浏览器会以向后兼容的方式来模拟老式浏览器的行为，以保证一些老的网站的正确访问。

> 在 html5 之后不再需要指定 DTD 文档，因为html5 以前的 html 文档都是基于 SGML 的，所以需要通过指定 DTD来定义文档中允许的属性以及一些规则。而 html5 不再基于 SGML 了，所以不再需要使用 DTD。

--------------------

# 2、 DTD 介绍 #

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

DTD 是对 HTML 文档的声明，还会影响浏览器的渲染模式（工作模式）。

--------------------

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

HTML5 不基于 SGML，因此不需要对 DTD 进行引用，但是需要 DOCTYPE 来规范浏览器的行为（让浏览器按照它们应该的方式来运行）。

而 HTML4.01 基于 SGML ，所以需要对 DTD 进行引用，才能告知浏览器文档所使用的文档类型。

--------------------

# 4、标准模式(严格模式)与兼容模式（怪异/混杂模式）各有什么区别？ #

*  标准模式的渲染方式和 JS 引擎的解析方式都是以该浏览器支持的最高标准运行。
 *  在兼容模式中，页面以宽松的向后兼容的方式显示 ，模拟老式浏览器的行为以防止站点无法工作。简单的说，就是尽可能的显示能显示的东西给用户看。

拓展：

1.  width不同

> 在严格模式中 ：width是内容宽度 ，元素真正的宽度 = margin-left + border-left-width + padding-left + width + padding-right + border-right- width + margin-right;  
> 在兼容模式中 ：width则是元素的实际宽度 ，内容宽度 = width - ( padding-left + padding-right + border-left-width + border-right-width)

1.  兼容模式下可设置百分比的高度和行内元素的高宽

> 在标准模式下，给span等行内元素设置wdith和height都不会生效，而在兼容模式下，则会生效。  
> 在标准模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置高度，子元素设置一个百分比的高度是无效的。

1.  用margin:0 auto设置水平居中在IE下会失效

> 使用margin:0 auto在standards模式下可以使元素水平居中，但在兼容模式下却会失效（用text-align属性解决）  
> `body{text-align:center};#content{text-align:left}`

1.  兼容模式下Table中的字体属性不能继承上层的设置，white-space:pre会失效，设置图片的padding会失效

--------------------

# 5、行内元素定义 #

HTML可以将元素分类方式分为行内元素(inline)、块状元素(block)和行内块状元素(inline-block)三种。

**一个行内元素只占据它对应标签的边框所包含的空间。**

行内元素特征：(1)设置宽高无效;(2)对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间(3)不会自动进行换行

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

--------------------

# 6、块级元素定义 #

**块级元素占据其父元素（容器）的整个宽度，因此创建了一个“块”。**

块状元素特征：(1)能够识别宽高；(2)margin和padding的上下左右均对其有效；(3)可以自动换行；(4)多个块状元素标签写在一起，默认排列方式为从上至下

--------------------

# 7、行内块状元素定义 #

行内块状元素综合了行内元素和块状元素的特性，但是各有取舍。因此行内块状元素在日常的使用中，由于其特性，使用的次数也比较多。

行内块状元素特征：(1)不自动换行；(2)能够识别宽高；(3)默认排列方式为从左到右

--------------------

# 8、行内元素与块级元素的联系与区别？ #

**联系：**  
    行内元素、块状元素和行内块状元素，这三者是可以互相转换的，使用`display属性`能够将三者任意转换：

(1)`display:inline`;转换为行内元素

(2)`display:block`;转换为块状元素

(3)`display:inline-block`;转换为行内块状元素

**区别：**

一、显示方式不同

1.  块级元素：是块元素都从新行开始，相邻的块级元素将会在不同行显示。
2.  内联元素：一个挨着一个，都在同一行按从左至右的顺序显示，不单独占一行。

二、高度不同

1.  块级元素：高度，行高以及外边距和内边距都可控制，以容纳内联元素和其他块元素。
2.  内联元素：高度、行高和顶以及底边距都不可改变。

三、宽度设置不同

1.  块级元素：宽度缺省是它的容器的100%，除非设定一个宽度。
2.  内联元素：宽度就是它的文字或图片的宽度，不可改变。

--------------------

# 9、空元素定义 #

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

> ` ` 就是没有关闭标签的空元素（` ` 标签定义换行）。

在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。

在开始标签中添加斜杠，比如 ` `，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。即使 ` ` 在所有浏览器中都是有效的，但使用 ` `其实是更长远的保障。

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

--------------------

# 10、link 标签定义 #

*  link 标签定义文档与外部资源的关系。
 *  link 元素是空元素，它仅包含属性。此元素只能存在于 head 部分，不过它可出现任何次数。
 *  link 标签中的 rel 属性定义了当前文档与被链接文档之间的关系。常见的 stylesheet 指的是定义一个外部加载的样式表。

--------------------

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

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

（2）**加载顺序区别。** 加载页面时，`link`标签引入的 CSS 被同时加载；`@import` 引入的 CSS 将在页面加载完毕后被加载。

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

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

## 持续更新中… ##

HTML面试常问知识点总结（持续更新~）

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关算法-知识点总结（持续更新中）

相关总结Java开发面试常问的问题，持续更新中~

相关 Spring知识点总结（持续更新中---）

相关 dubbo知识点总结持续更新

相关 HTML与HTML5相关知识点(持续更新)

相关 Java最常用面试知识总结-持续更新中

相关 CSS面试知识点总结(持续更新...)

相关 HTML面试常问知识点总结（持续更新~）

相关总结Java开发面试常问的问题，持续更新中~

相关 java面试常问知识点