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
的方式插入样式。