站长新闻

HTML面试题

文章来源：老铁seo 作者：老铁seo 人气：10 2021-07-17 09:10:35

HTML 是互联网上应用开发最广泛的语言之一，它可以带我们深入 Web 开发的世界，提高技能。如果你想从事 WEB 开发（前端开发）相关的职业，HTML 的基础就必须熟练掌握，下面就以问答的形式开启我们的回顾之路，为即将踏入这个行业的新人们铺铺路。【推荐教程：html视频教程】
Q1：什么是 HTML？

超文本标记语言（HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。HTML 使文本更具交互性和动态性，是构建网站及WEB应用的基石，HTML允许嵌入图像、表格、链接，并且可以用于创建交互式表单，它被用来结构化信息。
Q2：HTML元素和标签有什么区别？

元素代表某种结构或语义，通常由开始标签、内容和结束标签组成。

标签就是、、等被尖括号 < 和 > 包起来的对象，绝大部分的标签都是成对出现的，如、。
元素标签
HTML 网页或文档的单个组件，它代表结构或语义。例如，title 元素表示文档的标题 HTML 文档的根，用来标记 HTML 元素的。例如，head 标签用于包含 HTML 文件中的所有 head 元素
Q3：块级元素和内联元素有什么区别？

块级元素：占据其父元素（容器）的整个空间，创建了一个“块”。通常浏览器会在块级元素前后另起一行，能容纳其他块元素或者内联元素。包括：

、

、、
、

、
、
-

、

和

内联元素：只占据它对应标签的边框所包含的空间，只能容纳文本或者其他内联元素的元素。包括：、、、、、、
块级元素内联元素
块级元素被绘制为一个块，它可以伸展以填充它可用的整个宽度，即其容器的宽度，并且将始终从新行开始内联元素被绘制在它们被定义的地方，并且只占用绝对需要的空间
每个块状元素都从新的一行开始，并且其后的元素也另起一行（独占一行）；元素的高度、宽度、行高以及顶和底边距都可设置；元素宽度在不设置的情况下，占它本身父容器的100%（和父元素宽度一致）和其他元素在同一行上，不独占一行；元素的高度、宽度及顶部底部边距不可设置
Q4：什么是语义 HTML？

语义 HTML 是一种编码风格，它是使用 HTML 标记来加强内容的语义或含义。在语义HTML中标签不用于粗体语句而是，斜体语句不是用，而是用。
Q5：列出常用的列表标签

在页面制作中涉及列表，在 HTML 中有专门用于表示列表数据的标签，如下：

有序列表：有序列表以编号格式显示元素，由

标签表示。
定义列表：定义列表以定义形式显示元素，就像在字典中一样，如、

和

标签用于定义描述列表。

Q6：解释HTML标签语义

HTML 是标记语义，文档内容是有其语义的，常见的如下：

：用于定义文档的标题。

：定义了导航链接

: 用于定义文档中的一个单元

：用于定义独立的、自包含的文章

：用于定义内容之外的内容

：用于定义文档的页脚

Q7：什么是跑马灯？

跑马灯效果在以前是很经典的效果，几乎每个网站都有。marquee 用于网页上的滚动文本，它可以自动向上、向下、向左或向右滚动图像或文本，只要将要滚动的文本放在 …… 标签内。
Q8：div 和 span 的区别？

span和div的区别在于span元素是内联的，通常用于一行内的一小块，例如段落内。而 div 是块级，相当于在其前后有一个换行符，用于对较大的代码块进行分组。
Q9：标签是否为 HTML 标签？

不是，声明不是 HTML 标签。声明叫做文件类型定义（DTD），声明的作用为了告诉浏览器该文件的类型。让浏览器解析器知道应该用哪个规范来解析文档。声明必须在 HTML 文档的第一行。

HTML 有多种文档类型，例如 HTML 4.01 Strict、HTML 4.01 Transitional、HTML 4.01 Frameset、XHTML 1.0 Strict、XHTML 1.0 Transitional、XHTML 1.0 Frameset、XHTML 1.1 等。因此，用于定义 HTML 文档类型。

对于HTML5文档，没有 DTD ，也就没有严格模式与混杂模式的区别，HTML5 有相对宽松的语法，实现时，已经尽可能大的实现了向后兼容。
Q10：HTML、XML 和 XHTML 有什么区别？

HTML：超文本标记语言（HyperText Markup Language）
XML：可扩展标记语言（Extensible Markup Language）
XHTML：可扩展超文本标记语言（Extensible Hypertext Markup Language）

XHTML是当前HTML版的继承者，是XML文档中的HTML。

HTML 和 XHTML 之间的区别是：

HTML是一种标准通用标记语言的应用，XML是一种可扩展标记语言的应用程序。
HTML标签不区分大小写XHTML所有标签都必须小写。
XHTML所有属性都必须使用双引号
HTML 是关于显示信息，而 XHTML 是关于描述信息。

Q11：什么是图像地图？

有时需要为一张图片不同区域增加不同的链接，通常的做法是使用图像地图也成图像热点。具体的代码如下：

shape="circle"

coords="129,161,10"

href="contact.html"

alt="contact"

/>

不过现在已经有很多替代方案。
Q12：超链接和锚点的区别？

HTML中的是 anchor（锚）的缩写，现在把带有 href 属性的称作超链接，把没有 href 属性只有 name 属性的称作锚点连接或者命名锚点。超链接和锚点只是标签的两种呈现方式。命名锚点同城用于页面定位，超链接用于页面间的跳转。
Q13：简述HTML5离线储存

现在日常使用的APP，有部分内容是使用内嵌webview的方式，浏览页面内容，这种方案的优势是WEB和APP共用一个网站，像掘金的APP就是使用这种方式。为了避免重复加载页面或者在无网络的情况下正常展现内容，可以采用离线存储，其中一种方案就是使用 manifest 。

在线情况下，浏览器发现HTML头部有manifest属性，它会请求manifest文件，第一次访问，那么浏览器就会根据manifest文件的内容下载相应的资源，进行离线存储。

在页面头部加入manifest属性，如下：

然后在cache.manifest文件中编写离线存储的资源规则，代码如下：

CACHE MANIFEST

# 2021-06-26 14:01 V0.1.2.42634241855282310056 hash 以便做版本控制

# 默认部分，显式缓存这些文件

CACHE:

#需要缓存的列表，如字体、图片、脚本、css

./assets/images/favicons/32x32.png

./assets/fonts/VideoJS.eot

./assets/fonts/VideoJS.svg

./assets/fonts/VideoJS.ttf

./assets/fonts/VideoJS.woff

# 启动页资源

./index.html

NETWORK:

#不需要缓存的

*

FALLBACK:

#访问缓存失败后，备用访问的资源，第一个是访问源，第二个是替换文件 *.html /offline.html
Q14：什么是iframe

iframe是嵌入式框架, 是html标签, 是一个内联元素, iframe 元素会创建包含另外一个文档的内联框架（即行内框架) 。通常可以使用iframe内嵌网页，跨域ajax通讯的实现，微前端，广告嵌入等。

Q15：position有哪些值？

position 属性用于指定一个元素在文档中的定位方式。top、right、bottom 和 left 属性决定了该元素的最终位置。

static：默认值，没有定位，指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置，此属性下 top、right、bottom、left 和 z-index 属性无效。
relative 相对定位：元素先放置在未添加定位时的位置，在不改变页面布局的前提下调整元素位置（此时会在此元素未添加定位时所在位置留下空白）。position:relative 对 table-row、table-column、table-cell、table-caption 元素无效。
absolute 绝对定位：生成绝对定位的元素，元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。
fixed 固定定位：生成绝对定位的元素，元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置，元素的位置在屏幕滚动时不会改变
sticky 元素根据正常文档流进行定位，相对它的最近滚动祖先和最近块级祖先。

Q16：title 和 h1 的区别？

h1 不等于 title。h1 为大标题，一般用作文章的标题，作用如同一张报纸的大标题，使用读者在没看内容之前就大概了解本文的旨意，它是直接给用户看的。title 为页面标题，可以包含 h1 的标题，一般面对的是搜索引擎和浏览器标签。
Q17：display:none和visibility:hidden的区别

都能把页面上的元素隐藏起来，两者的区别如下：

display:none：被隐藏的对象不会占用任何物理空间，不会影响其他元素的布局
visible:hidden：使对象在网页上不可见，但是会在网页上占用物理空间，通俗来说就是看不见但摸得到。
属性值改变后是否重新渲染：visibility:hidden不渲染；display:none 会重新渲染。

Q18：回流和重绘

回流，当渲染树中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程。重绘，当页面中元素样式的改变并不影响它在文档流中的位置时（例如：color、background-color、visibility等），浏览器会将新样式赋值给元素并重新绘制它的过程。两者会对页面的性能产生不同的影响，这里不展开介绍。
HTML 是互联网上应用开发最广泛的语言之一，它可以带我们深入 Web 开发的世界，提高技能。如果你想从事 WEB 开发（前端开发）相关的职业，HTML 的基础就必须熟练掌握，下面就以问答的形式开启我们的回顾之路，为即将踏入这个行业的新人们铺铺路。【推荐教程：html视频教程】
Q1：什么是 HTML？

超文本标记语言（HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。HTML 使文本更具交互性和动态性，是构建网站及WEB应用的基石，HTML允许嵌入图像、表格、链接，并且可以用于创建交互式表单，它被用来结构化信息。
Q2：HTML元素和标签有什么区别？

元素代表某种结构或语义，通常由开始标签、内容和结束标签组成。

标签就是、、等被尖括号 < 和 > 包起来的对象，绝大部分的标签都是成对出现的，如、。
元素标签
HTML 网页或文档的单个组件，它代表结构或语义。例如，title 元素表示文档的标题 HTML 文档的根，用来标记 HTML 元素的。例如，head 标签用于包含 HTML 文件中的所有 head 元素
Q3：块级元素和内联元素有什么区别？

块级元素：占据其父元素（容器）的整个空间，创建了一个“块”。通常浏览器会在块级元素前后另起一行，能容纳其他块元素或者内联元素。包括：
和

内联元素：只占据它对应标签的边框所包含的空间，只能容纳文本或者其他内联元素的元素。包括：、、、、、、
块级元素内联元素
块级元素被绘制为一个块，它可以伸展以填充它可用的整个宽度，即其容器的宽度，并且将始终从新行开始内联元素被绘制在它们被定义的地方，并且只占用绝对需要的空间
每个块状元素都从新的一行开始，并且其后的元素也另起一行（独占一行）；元素的高度、宽度、行高以及顶和底边距都可设置；元素宽度在不设置的情况下，占它本身父容器的100%（和父元素宽度一致）和其他元素在同一行上，不独占一行；元素的高度、宽度及顶部底部边距不可设置
Q4：什么是语义 HTML？

语义 HTML 是一种编码风格，它是使用 HTML 标记来加强内容的语义或含义。在语义HTML中标签不用于粗体语句而是，斜体语句不是用，而是用。
Q5：列出常用的列表标签

在页面制作中涉及列表，在 HTML 中有专门用于表示列表数据的标签，如下：

有序列表：有序列表以编号格式显示元素，由

标签表示。
定义列表：定义列表以定义形式显示元素，就像在字典中一样，如、

和

标签用于定义描述列表。

Q6：解释HTML标签语义

HTML 是标记语义，文档内容是有其语义的，常见的如下：

：用于定义文档的标题。

：定义了导航链接

: 用于定义文档中的一个单元

：用于定义独立的、自包含的文章

：用于定义内容之外的内容

：用于定义文档的页脚

Q7：什么是跑马灯？

跑马灯效果在以前是很经典的效果，几乎每个网站都有。marquee 用于网页上的滚动文本，它可以自动向上、向下、向左或向右滚动图像或文本，只要将要滚动的文本放在 …… 标签内。
Q8：div 和 span 的区别？

span和div的区别在于span元素是内联的，通常用于一行内的一小块，例如段落内。而 div 是块级，相当于在其前后有一个换行符，用于对较大的代码块进行分组。
Q9：标签是否为 HTML 标签？

不是，声明不是 HTML 标签。声明叫做文件类型定义（DTD），声明的作用为了告诉浏览器该文件的类型。让浏览器解析器知道应该用哪个规范来解析文档。声明必须在 HTML 文档的第一行。

HTML 有多种文档类型，例如 HTML 4.01 Strict、HTML 4.01 Transitional、HTML 4.01 Frameset、XHTML 1.0 Strict、XHTML 1.0 Transitional、XHTML 1.0 Frameset、XHTML 1.1 等。因此，用于定义 HTML 文档类型。

对于HTML5文档，没有 DTD ，也就没有严格模式与混杂模式的区别，HTML5 有相对宽松的语法，实现时，已经尽可能大的实现了向后兼容。
Q10：HTML、XML 和 XHTML 有什么区别？

HTML：超文本标记语言（HyperText Markup Language）
XML：可扩展标记语言（Extensible Markup Language）
XHTML：可扩展超文本标记语言（Extensible Hypertext Markup Language）

XHTML是当前HTML版的继承者，是XML文档中的HTML。

HTML 和 XHTML 之间的区别是：

HTML是一种标准通用标记语言的应用，XML是一种可扩展标记语言的应用程序。
HTML标签不区分大小写XHTML所有标签都必须小写。
XHTML所有属性都必须使用双引号
HTML 是关于显示信息，而 XHTML 是关于描述信息。

Q11：什么是图像地图？

有时需要为一张图片不同区域增加不同的链接，通常的做法是使用图像地图也成图像热点。具体的代码如下：

shape="circle"

coords="129,161,10"

href="contact.html"

alt="contact"

/>

不过现在已经有很多替代方案。
Q12：超链接和锚点的区别？

HTML中的是 anchor（锚）的缩写，现在把带有 href 属性的称作超链接，把没有 href 属性只有 name 属性的称作锚点连接或者命名锚点。超链接和锚点只是标签的两种呈现方式。命名锚点同城用于页面定位，超链接用于页面间的跳转。
Q13：简述HTML5离线储存

现在日常使用的APP，有部分内容是使用内嵌webview的方式，浏览页面内容，这种方案的优势是WEB和APP共用一个网站，像掘金的APP就是使用这种方式。为了避免重复加载页面或者在无网络的情况下正常展现内容，可以采用离线存储，其中一种方案就是使用 manifest 。

在线情况下，浏览器发现HTML头部有manifest属性，它会请求manifest文件，第一次访问，那么浏览器就会根据manifest文件的内容下载相应的资源，进行离线存储。

在页面头部加入manifest属性，如下：

然后在cache.manifest文件中编写离线存储的资源规则，代码如下：

CACHE MANIFEST

# 2021-06-26 14:01 V0.1.2.42634241855282310056 hash 以便做版本控制

# 默认部分，显式缓存这些文件

CACHE:

#需要缓存的列表，如字体、图片、脚本、css

./assets/images/favicons/32x32.png

./assets/fonts/VideoJS.eot

./assets/fonts/VideoJS.svg

./assets/fonts/VideoJS.ttf

./assets/fonts/VideoJS.woff

# 启动页资源

./index.html

NETWORK:

#不需要缓存的

*

FALLBACK:

#访问缓存失败后，备用访问的资源，第一个是访问源，第二个是替换文件 *.html /offline.html
Q14：什么是iframe

iframe是嵌入式框架, 是html标签, 是一个内联元素, iframe 元素会创建包含另外一个文档的内联框架（即行内框架) 。通常可以使用iframe内嵌网页，跨域ajax通讯的实现，微前端，广告嵌入等。

Q15：position有哪些值？

position 属性用于指定一个元素在文档中的定位方式。top、right、bottom 和 left 属性决定了该元素的最终位置。

static：默认值，没有定位，指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置，此属性下 top、right、bottom、left 和 z-index 属性无效。
relative 相对定位：元素先放置在未添加定位时的位置，在不改变页面布局的前提下调整元素位置（此时会在此元素未添加定位时所在位置留下空白）。position:relative 对 table-row、table-column、table-cell、table-caption 元素无效。
absolute 绝对定位：生成绝对定位的元素，元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。
fixed 固定定位：生成绝对定位的元素，元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置，元素的位置在屏幕滚动时不会改变
sticky 元素根据正常文档流进行定位，相对它的最近滚动祖先和最近块级祖先。

Q16：title 和 h1 的区别？

h1 不等于 title。h1 为大标题，一般用作文章的标题，作用如同一张报纸的大标题，使用读者在没看内容之前就大概了解本文的旨意，它是直接给用户看的。title 为页面标题，可以包含 h1 的标题，一般面对的是搜索引擎和浏览器标签。
Q17：display:none和visibility:hidden的区别

都能把页面上的元素隐藏起来，两者的区别如下：

display:none：被隐藏的对象不会占用任何物理空间，不会影响其他元素的布局
visible:hidden：使对象在网页上不可见，但是会在网页上占用物理空间，通俗来说就是看不见但摸得到。
属性值改变后是否重新渲染：visibility:hidden不渲染；display:none 会重新渲染。

Q18：回流和重绘

回流，当渲染树中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程。重绘，当页面中元素样式的改变并不影响它在文档流中的位置时（例如：color、background-color、visibility等），浏览器会将新样式赋值给元素并重新绘制它的过程。两者会对页面的性能产生不同的影响，这里不展开介绍。