Rumah >hujung hadapan web >html tutorial >18个必知必会的HTML面试题(附答案解析)

18个必知必会的HTML面试题(附答案解析)

青灯夜游
青灯夜游ke hadapan
2021-07-16 18:39:194860semak imbas

本篇文章给大家分享18个常见的HTML面试题,附答案解析,带你巩固一波地基。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

18个必知必会的HTML面试题(附答案解析)

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

Q1:什么是 HTML?

超文本标记语言(HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。HTML 使文本更具交互性和动态性,是构建网站及WEB应用的基石,HTML允许嵌入图像、表格、链接,并且可以用于创建交互式表单,它被用来结构化信息。

Q2:HTML元素和标签有什么区别?

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

标签就是93f0f5c25f18dab9d176bd4f6de5d30e6c04bd5ca3fcae76e30b72ad730ca86df5d188ed2c074f8b944552db028f98a1等被尖括号 aa7d73ef87dde8a172ca6aba4bdc81fa 包起来的对象,绝大部分的标签都是成对出现的,如dc6dce4a544fdca2df29d5ac0ea9906b16b28748ea4df4d9c2150843fecfba684a249f0d628e2318394fd9b75b4636b1473f0a7621bec819994bb5020d29372a

元素 标签
HTML 网页或文档的单个组件,它代表结构或语义。例如,title 元素表示文档的标题 HTML 文档的根,用来标记 HTML 元素的。例如,head 标签用于包含 HTML 文件中的所有 head 元素

Q3:块级元素和内联元素有什么区别?

块级元素:占据其父元素(容器)的整个空间,创建了一个“块”。通常浏览器会在块级元素前后另起一行,能容纳其他块元素或者内联元素。包括:e388a4556c0f65e1904146cc1a846beedc6dce4a544fdca2df29d5ac0ea9906bb8a712a75cab9a5aded02f74998372b4a1f02c36ba31691bcfe87b2722de723b2f8332c8dcfd5c7dec030a070bf652c3ff9c23ada1bcecdd1a0fb5d5a0f18437c787b9a589a3ece771e842a6176cf8e94a249f0d628e2318394fd9b75b4636b1-4e9ee319e0fa4abc21ff286eeb145eccff6d136ddc5fdfeffaf53ff6ee95f18525edfb22a4f469ecb59f1190150159c6

内联元素:只占据它对应标签的边框所包含的空间,只能容纳文本或者其他内联元素的元素。包括:45a2772a6b6107b401db3c9b82c049c2907fae80ddef53131f3292ee4f81644b1244aa79a84dea840d8e55c52dc978692e1cf0710519d5598b1f0f14c36ba6748e99a69fbe029cd4e2b854e244eab1433499910bf9dac5ae3c52d5ede7383485d5fd7aea971a85678ba271703566ebfd

块级元素 内联元素
块级元素被绘制为一个块,它可以伸展以填充它可用的整个宽度,即其容器的宽度,并且将始终从新行开始 内联元素被绘制在它们被定义的地方,并且只占用绝对需要的空间
每个块状元素都从新的一行开始,并且其后的元素也另起一行(独占一行);元素的高度、宽度、行高以及顶和底边距都可设置;元素宽度在不设置的情况下,占它本身父容器的100%(和父元素宽度一致) 和其他元素在同一行上,不独占一行;元素的高度、宽度及顶部底部边距不可设置

Q4:什么是语义 HTML?

语义 HTML 是一种编码风格,它是使用 HTML 标记来加强内容的语义或含义。在语义HTML中 a4b561c25d9afb9ac8dc4d70affff419 0d36329ec37a2cc24d42c7229b69747a 标签不用于粗体语句而是 8e99a69fbe029cd4e2b854e244eab143128dba7a3a77be0113eb0bea6ea0a5d0 ,斜体语句不是用 5a8028ccc7a7e27417bff9f05adf5932 72ac96585ae54b6ae11f849d2649d9e6,而是用 907fae80ddef53131f3292ee4f81644bd1c6776b927dc33c5d9114750b586338

Q5:列出常用的列表标签

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

  • 有序列表:有序列表以编号格式显示元素,由c34106e0b4e09414b63b2ea253ff83d6标签表示
  • 无序列表:无序列表以项目符号格式显示元素,它由ff6d136ddc5fdfeffaf53ff6ee95f185标签表示。
  • 定义列表:定义列表以定义形式显示元素,就像在字典中一样,如 5c69336ffbc20d23018e48b396cdd57a73de882deff7a050a357292d0a1fca9467bc4f89d416b0b8236eaa5f43dee742标签用于定义描述列表。

Q6:解释HTML标签语义

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

  • 1aa9e5d373740b65a0cc8f0a02150c53:用于定义文档的标题。
  • c787b9a589a3ece771e842a6176cf8e9:定义了导航链接
  • 2f8332c8dcfd5c7dec030a070bf652c3 : 用于定义文档中的一个单元
  • 23c3de37f2f9ebcb477c4a90aac6fffd:用于定义独立的、自包含的文章
  • 15221ee8cba27fc1d7a26c47a001eb9b:用于定义内容之外的内容
  • c37f8231a37e88427e62669260f0074d:用于定义文档的页脚

Q7:什么是跑马灯?

跑马灯效果在以前是很经典的效果,几乎每个网站都有。marquee 用于网页上的滚动文本,它可以自动向上、向下、向左或向右滚动图像或文本,只要将要滚动的文本放在 ed126914ed1419bab26abf7cf307b7b9……7204e33a7a23f6efcc788532e245c31b 标签内。

Q8:divspan 的区别?

spandiv的区别在于span元素是内联的,通常用于一行内的一小块,例如段落内。而 div 是块级,相当于在其前后有一个换行符,用于对较大的代码块进行分组。

Q9:8b05045a5be5764f313ed5b9168a17e6 标签是否为 HTML 标签?

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

HTML 有多种文档类型,例如 HTML 4.01 StrictHTML 4.01 TransitionalHTML 4.01 FramesetXHTML 1.0 StrictXHTML 1.0 TransitionalXHTML 1.0 FramesetXHTML 1.1 等。因此,8b05045a5be5764f313ed5b9168a17e6 用于定义 HTML 文档类型。

对于HTML5文档,没有 DTD ,也就没有严格模式与混杂模式的区别,HTML5 有相对宽松的语法,实现时,已经尽可能大的实现了向后兼容。

Q10:HTMLXMLXHTML 有什么区别?

  • HTML:超文本标记语言(HyperText Markup Language)
  • XML:可扩展标记语言(Extensible Markup Language)
  • XHTML:可扩展超文本标记语言(Extensible Hypertext Markup Language)

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

HTMLXHTML 之间的区别是:

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

Q11:什么是图像地图?

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

<img src="devpoint.jpg" border="0" usemap="#devmap" alt="devpoint" />

<map name="devmap" id="devmap">
    <area shape="circle" coords="180,139,14" href="about.html" alt="about" />
    <area
        shape="circle"
        coords="129,161,10"
        href="contact.html"
        alt="contact"
    />
    <area shape="rect" coords="0,0,110,260" href="home.html" alt="home" />
</map>

不过现在已经有很多替代方案。

Q12:超链接和锚点的区别?

HTML中的3499910bf9dac5ae3c52d5ede7383485anchor(锚)的缩写,现在把带有 href 属性的称作超链接,把没有 href 属性只有 name 属性的称作锚点连接或者命名锚点。超链接和锚点只是标签 3499910bf9dac5ae3c52d5ede7383485 的两种呈现方式。命名锚点同城用于页面定位,超链接用于页面间的跳转。

Q13:简述HTML5离线储存

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

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

在页面头部加入manifest属性,如下:

<html manifest="cache.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通讯的实现,微前端,广告嵌入等。

<iframe src="home.html"></iframe>

Q15:position有哪些值?

position 属性用于指定一个元素在文档中的定位方式。toprightbottomleft 属性决定了该元素的最终位置。

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

Q16:titleh1 的区别?

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

Q17:display:nonevisibility:hidden的区别

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

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

Q18:回流和重绘

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

更多编程相关知识,请访问:编程入门!!

Atas ialah kandungan terperinci 18个必知必会的HTML面试题(附答案解析). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Artikel ini dikembalikan pada:juejin.cn. Jika ada pelanggaran, sila hubungi admin@php.cn Padam