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

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

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

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

Q1:什么是 HTML?

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

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

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

立即学习“前端免费学习笔记(深入)”;

标签就是

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

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

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

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

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

-

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

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

    Q4:什么是语义 HTML?

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

    Q5:列出常用的列表标签

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

  • 有序列表:有序列表以编号格式显示元素,由

      标签表示

    1. 无序列表:无序列表以项目符号格式显示元素,它由

        标签表示。

      • 定义列表:定义列表以定义形式显示元素,就像在字典中一样,如

        标签用于定义描述列表。

        Q6:解释HTML标签语义

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


      • :用于定义文档的标题。


      • :定义了导航链接


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


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


      • :用于定义内容之外的内容


      • :用于定义文档的页脚

        Q7:什么是跑马灯?

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

        Q8:divspan 的区别?

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

        Q9: 标签是否为 HTML 标签?

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

        HTML 有多种文档类型,例如 HTML 4.01 StrictHTML 4.01 TransitionalHTML 4.01 FramesetXHTML 1.0 StrictXHTML 1.0 TransitionalXHTML 1.0 FramesetXHTML 1.1 等。因此, 用于定义 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:什么是图像地图?

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

        @@##@@    about    contact    home

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

        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.htmlNETWORK:#不需要缓存的*FALLBACK:#访问缓存失败后,备用访问的资源,第一个是访问源,第二个是替换文件 *.html /offline.html

        Q14:什么是iframe

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

        
        

        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等),浏览器会将新样式赋值给元素并重新绘制它的过程。两者会对页面的性能产生不同的影响,这里不展开介绍。

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

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

        以上就是18个必知必会的HTML面试题(附答案解析)的详细内容,更多请关注创想鸟其它相关文章!

        版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
        如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
        发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1550411.html

        (0)
        打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
        上一篇 2025年12月21日 20:55:52
        下一篇 2025年12月21日 20:56:06

        相关推荐

        • 学会从头开始学习CSS,掌握制作基本网页框架的技巧

          从零开始学习CSS,掌握网页基本框架制作技巧 前言: 在现今互联网时代,网页设计和开发是一个非常重要的技能。而学习CSS(层叠样式表)是掌握网页设计的关键之一。CSS不仅可以为网页添加样式和布局,还可以为用户呈现独特且具有吸引力的页面效果。在本文中,我将为您介绍一些基本的CSS知识,以及一些常用的代…

          2025年12月24日
          200
        • 揭秘Web标准涵盖的语言:了解网页开发必备的语言范围

          在当今数字时代,互联网成为了人们生活中不可或缺的一部分。作为互联网的基本构成单位,网页承载着我们获取和分享信息的重要任务。而网页开发作为一门独特的技术,离不开一些必备的语言。本文将揭秘Web标准涵盖的语言,让我们一起了解网页开发所需的语言范围。 首先,HTML(HyperText Markup La…

          2025年12月24日
          000
        • 揭开Web开发的语言之谜:了解构建网页所需的语言有哪些?

          Web标准中的语言大揭秘:掌握网页开发所需的语言有哪些? 随着互联网的快速发展,网页开发已经成为人们重要的职业之一。而要成为一名优秀的网页开发者,掌握网页开发所需的语言是必不可少的。本文将为大家揭示Web标准中的语言大揭秘,介绍网页开发所需的主要语言。 HTML(超文本标记语言)HTML是网页开发的…

          2025年12月24日
          400
        • 常用的网页开发语言:了解Web标准的要点

          了解Web标准的语言要点:常见的哪些语言应用在网页开发中? 随着互联网的不断发展,网页已经成为人们获取信息和交流的重要途径。而要实现一个高质量、易用的网页,离不开一种被广泛接受的Web标准。Web标准的制定和应用,涉及到多种语言和技术,本文将介绍常见的几种语言在网页开发中的应用。 首先,HTML(H…

          2025年12月24日
          000
        • 网页开发中常见的Web标准语言有哪些?

          探索Web标准语言的世界:网页开发中常用的语言有哪些? 在现代社会中,互联网的普及程度越来越高,网页已成为人们获取资讯、娱乐、交流的重要途径。而网页的开发离不开各种编程语言的应用和支持。在这个虚拟世界的网络,有许多被广泛应用的标准化语言,用于为用户提供优质的网页体验。本文将探索网页开发中常用的语言,…

          2025年12月24日
          000
        • 深入探究Web标准语言的范围,涵盖了哪些语言?

          Web标准是指互联网上的各个网页所需遵循的一系列规范,确保网页在不同的浏览器和设备上能够正确地显示和运行。这些标准包括HTML、CSS和JavaScript等语言。本文将深入解析Web标准涵盖的语言范围。 首先,HTML(HyperText Markup Language)是构建网页的基础语言。它使…

          2025年12月24日
          000
        • CSS 超链接属性解析:text-decoration 和 color

          CSS 超链接属性解析:text-decoration 和 color 超链接是网页中常用的元素之一,它能够在不同页面之间建立连接。为了使超链接在页面中有明显的标识和吸引力,CSS 提供了一些属性来调整超链接的样式。本文将重点介绍 text-decoration 和 color 这两个与超链接相关的…

          2025年12月24日
          000
        • 看看这些前端面试题,带你搞定高频知识点(一)

          每天10道题,100天后,搞定所有前端面试的高频知识点,加油!!!,在看文章的同时,希望不要直接看答案,先思考一下自己会不会,如果会,自己的答案是什么?想过之后再与答案比对,是不是会更好一点,当然如果你有比我更好的答案,欢迎评论区留言,一起探讨技术之美。 面试官:给定一个元素,如何实现水平垂直居中?…

          2025年12月24日 好文分享
          300
        • 看看这些前端面试题,带你搞定高频知识点(二)

          每天10道题,100天后,搞定所有前端面试的高频知识点,加油!!!,在看文章的同时,希望不要直接看答案,先思考一下自己会不会,如果会,自己的答案是什么?想过之后再与答案比对,是不是会更好一点,当然如果你有比我更好的答案,欢迎评论区留言,一起探讨技术之美。 面试官:页面导入样式时,使用 link 和 …

          2025年12月24日 好文分享
          200
        • 看看这些前端面试题,带你搞定高频知识点(三)

          每天10道题,100天后,搞定所有前端面试的高频知识点,加油!!!,在看文章的同时,希望不要直接看答案,先思考一下自己会不会,如果会,自己的答案是什么?想过之后再与答案比对,是不是会更好一点,当然如果你有比我更好的答案,欢迎评论区留言,一起探讨技术之美。 面试官:清除浮动有哪些方式? 我:呃~,浮动…

          2025年12月24日 好文分享
          000
        • 看看这些前端面试题,带你搞定高频知识点(四)

          每天10道题,100天后,搞定所有前端面试的高频知识点,加油!!!,在看文章的同时,希望不要直接看答案,先思考一下自己会不会,如果会,自己的答案是什么?想过之后再与答案比对,是不是会更好一点,当然如果你有比我更好的答案,欢迎评论区留言,一起探讨技术之美。 面试官:请你谈一下自适应(适配)的方案 我:…

          2025年12月24日 好文分享
          000
        • 看看这些前端面试题,带你搞定高频知识点(五)

          每天10道题,100天后,搞定所有前端面试的高频知识点,加油!!!,在看文章的同时,希望不要直接看答案,先思考一下自己会不会,如果会,自己的答案是什么?想过之后再与答案比对,是不是会更好一点,当然如果你有比我更好的答案,欢迎评论区留言,一起探讨技术之美。 面试官:css 如何实现左侧固定 300px…

          2025年12月24日 好文分享
          000
        • HTML+CSS+JS实现雪花飘扬(代码分享)

          使用html+css+js如何实现下雪特效?下面本篇文章给大家分享一个html+css+js实现雪花飘扬的示例,希望对大家有所帮助。 很多南方的小伙伴可能没怎么见过或者从来没见过下雪,今天我给大家带来一个小Demo,模拟了下雪场景,首先让我们看一下运行效果 可以点击看看在线运行:http://hai…

          2025年12月24日 好文分享
          500
        • 分享20个首页流行布局样式,总有一款适合你!

          本篇文章给大家分享20个首页流行布局样式,总有一款适合你,快来收藏试试吧,希望对大家有所帮助! 有时我们会在网站上遇到一些内容布局问题,如文字对齐、图片设计与内容和谐、为文章选择合适的字体……在今天的文章中,介绍一些设计精美的创意布局,let‘s  开始。 代号 001 源码…

          2025年12月24日 好文分享
          000
        • css如何让div悬浮于另一个div上

          让div悬浮于另一个div上的方法:1、给两个div元素添加“position:absolute”绝对定位样式;2、给其中一个div元素添加“{top:距离页面顶部距离;left:距离页面左侧距离;}”样式使其浮动在另一个div元素上即可。 本教程操作环境:windows7系统、CSS3&&…

          2025年12月24日 好文分享
          000
        • css怎样实现字母不到一行就换行

          css字母不到一行就换行的方法:1、给元素添加“word-break:break-word;”样式,使其以单词为单位换行;2、给元素添加“word-break:break-all;”样式,使其以字母为单位换行。 本教程操作环境:windows7系统、CSS3&&HTML5版、Dell…

          2025年12月24日
          000
        • css里怎样设置字体大小和字体颜色

          在css中,可以使用“font-size”和color属性设置字体大小和字体颜色,只需要给字体元素添加“{font-size: 字体大小值;color: 颜色值;}”样式即可。 本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。 css里设置字体大小…

          2025年12月24日
          000
        • css边框变圆角边框怎么写

          写法:1、给边框添加“border-radius:圆角值;”样式统一设置圆角大小;2、添加“border-top-left-radius:圆角值;”、“border-top-right-radius:圆角值;”等样式分别设置四角圆角大小。 本教程操作环境:windows7系统、CSS3&&a…

          2025年12月24日
          000
        • css如何使鼠标悬停变色

          在css中,可以通过hover选择器和color属性实现鼠标悬停变色的效果,hover选择器用于选择鼠标指针浮动在上面的元素,color属性用于设置悬停时的颜色;语法“:hover{color:悬停颜色;}”。 本教程操作环境:windows7系统、CSS3&&HTML5版、Dell…

          2025年12月24日 好文分享
          000
        • 手把手教你使用css制作表格边框设置效果(附代码)

          之前的文章《一招教你使用css3制作按钮添加动态效果(代码分享)》中,给大家介绍了怎么使用css3制作按钮添加动态效果。下面本篇文章给大家介绍怎么使用css制作表格边框设置效果,我们一起看看怎么做。 网页中常常有这样的表格布局边框,给大家分享一下看效果图看完效果,我们来研究一下是怎么实现呢,给大家用…

          2025年12月24日 好文分享
          000

        发表回复

        登录后才能评论
        关注微信
      • 元素 标签
        块级元素 内联元素