前端面试题（基础篇十一）

一、DOCTYPE 的作用是什么？

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

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

二、标准模式与兼容模式各有什么区别？

标准模式的渲染方式和 JS 引擎的解析方式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作。

三、SGML 、 HTML 、XML 和 XHTML 的区别？

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

HTML（HyperText Markup Language）是超文本标记语言，主要是用于规定怎么显示网页。

XML（Extensible Markup Language）是可扩展标记语言，是未来网页语言的发展方向，XML 和 HTML 的最大区别就在于 XML 的标签是可以自己创建的，数量可以无限多，而 HTML 的标签都是固定的而且数量有限。

XHTML（Extensible Hypertext Markup Language）也是现在基本上所有网页都在用的标记语言，他其实和 HTML 没什么本质的区别，标签都一样，用法也都一样，就是比 HTML 
更严格，比如标签必须都用小写，标签都必须有闭合标签等。

四、DTD 介绍

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

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

五、行内、块级元素的定义及其区别

行内元素（Inline Elements）

• 定义：行内元素不会创建新的块级上下文，它们在页面中从左到右流动，像文本一样排布在同一行内，直到该行排满后才会换行。
• 特点：
  • 不会自动换行，可以与其他行内元素共享一行。
  • 宽度和高度默认由内容决定，不能直接设置宽度和高度。
  • 水平方向的边距（margin）和内边距（padding）可以正常工作，但垂直方向的边距和内边距在某些情况下可能表现不一致，因为它们不会影响行高。
  • 通常用于文本格式化和链接等，如<span>, <a>, <strong>, <em>等。

块级元素（Block-Level Elements）

• 定义：块级元素会创建一个新的块级上下文，每个块级元素都从新的一行开始，并且尽可能地占据父元素的全部宽度。
• 特点：
  • 总是从新的一行开始，并且独占一行。
  • 可以设置明确的宽度、高度、内边距和外边距。
  • 默认情况下，宽度为100%，如果没有设置宽度，它将填充其父元素的整个宽度。
  • 可以包含行内元素和其他块级元素，提供了更强大的布局能力。
  • 例如<div>, <p>, <h1>至<h6>, <ul>, <li>等。

区别总结

• 布局方式：块级元素独占一行，而行内元素则可以在一行内连续排列。
• 尺寸控制：块级元素可以设置宽度和高度，而行内元素的尺寸主要由内容决定。
• 内容包含：块级元素可以包含行内元素和块级元素，而行内元素通常只包含文本或其他行内元素。
• 边距与内边距：虽然两者都能应用内外边距，但块级元素在四个方向上的调整更为自由，而行内元素在垂直方向上的调整受限

但在实际的开发过程中，因为页面表现的需要，我们经常把 inline 元素的 display 值设定为 block （比如 a 标签），也经常把 block 元素的 display 值设定为 inline 之后更是出现了 inline-block 这一对外呈现 inline 对内呈现 block 的属性（比如img标签）。因此，简单地把 HTML 元素划分为inline 与 block 已经不再符合实际需求。