HTML面试总结
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 引擎的解析方式都是以该浏览器支持的最高标准运行。
- 在兼容模式中，页面以宽松的向后兼容的方式显示 ，模拟老式浏览器的行为以防止站点无法工作。简单的说，就是尽可能的显示能显示的东西给用户看。
拓展：
- 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)
- 兼容模式下可设置百分比的高度和行内元素的高宽
在标准模式下，给span等行内元素设置wdith和height都不会生效，而在兼容模式下，则会生效。
在标准模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置高度，子元素设置一个百分比的高度是无效的。
- 用margin:0 auto设置水平居中在IE下会失效
使用margin:0 auto在standards模式下可以使元素水平居中，但在兼容模式下却会失效（用text-align属性解决）
body{text-align:center};#content{text-align:left}
- 兼容模式下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;转换为行内块状元素
区别：
一、显示方式不同
-
块级元素：是块元素都从新行开始，相邻的块级元素将会在不同行显示。
-
内联元素：一个挨着一个，都在同一行按从左至右的顺序显示，不单独占一行。
二、高度不同
-
块级元素：高度，行高以及外边距和内边距都可控制，以容纳内联元素和其他块元素。
-
内联元素：高度、行高和顶以及底边距都不可改变。
三、宽度设置不同
-
块级元素：宽度缺省是它的容器的100%，除非设定一个宽度。
-
内联元素：宽度就是它的文字或图片的宽度，不可改变。
9、空元素定义
没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
<br>就是没有关闭标签的空元素（<br>标签定义换行）。
在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。
在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。即使 <br> 在所有浏览器中都是有效的，但使用 <br />其实是更长远的保障。
常见的空元素有：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 的方式插入样式。