HTML⾯试常问知识点总结（持续更新~）
HTML⾯试总结
1、DOCTYPE 的作⽤是什么？
margin属性值可以为百分比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)
2. 兼容模式下可设置百分⽐的⾼度和⾏内元素的⾼宽
在标准模式下，给span等⾏内元素设置wdith和height都不会⽣效，⽽在兼容模式下，则会⽣效。
在标准模式下，⼀个元素的⾼度是由其包含的内容来决定的，如果⽗元素没有设置⾼度，⼦元素设置⼀个百分⽐的⾼度是⽆效的。
3. ⽤margin:0 auto设置⽔平居中在IE下会失效
使⽤margin:0 auto在standards模式下可以使元素⽔平居中，但在兼容模式下却会失效（⽤text-align属性解决）
body{text-align:center};#content{text-align:left}
4. 兼容模式下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 元素被称为空元素。空元素是在开始标签中关闭的。
<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 的⽅式插⼊样式。
持续更新中…

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。