一、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 已经不再符合实际需求。