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)
        打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
        html文字超出部分怎么隐藏
        上一篇 2025年12月21日 20:55:52
        html怎么引用css文件
        下一篇 2025年12月21日 20:56:06

        相关推荐

        • VSCode里怎么卸载TS_VSCode移除TypeScript及相关依赖包教程

          答案:彻底卸载TypeScript需禁用VSCode内置服务、卸载相关扩展并清理项目与全局的TypeScript包。首先在设置中调整typescript.tsdk路径或禁用自动类型获取,将.ts文件关联为纯文本;其次通过扩展面板卸载所有TypeScript相关插件;最后删除项目中的typescrip…

          2026年9月2日
          000
        • VSCode怎么写CSS文件_VSCode创建和编写CSS样式表的详细方法与技巧教程

          首先在VSCode中创建CSS文件并编写样式,利用IntelliSense和Emmet实现智能补全与高效编码;接着通过模块化文件结构和扩展如CSS Peek管理大型项目;最后结合Live Server实时预览和浏览器开发者工具联动调试,提升CSS开发效率。 VSCode中编写CSS文件远比你想象的要…

          2026年9月2日
          100
        • jQuery选取image类型input元素

          jQuery选取image类型input元素jQuery选取image类型input元素jQuery选取image类型input元素jQuery选取image类型input元素

          jquery的image选择器用于选取input元素中type属性值为image的元素。 1、 创建新的HTML文档 2、 创建表单并上传图片 3、 预览效果见下图 4、 引入 jQuery 库文件 5、 使用jQuery的image选择器选取input中类型为image的元素,并设置其图片的宽度属…

          2026年9月2日 用户投稿
          400
        • VSCode标签怎么自动补齐_VSCodeHTML/XML标签自动补全设置教程

          答案:VSCode中HTML/XML标签自动补齐失效通常由Emmet未启用、文件类型识别错误或设置冲突导致。需检查emmet.triggerCharacters和editor.quickSuggestions设置,确认文件语言模式正确,并确保emmet.includeLanguages配置合理。同时…

          2026年9月1日
          100
        • java学习应用篇|windows安装JDK及配置环境变量

          java学习应用篇|windows安装JDK及配置环境变量java学习应用篇|windows安装JDK及配置环境变量java学习应用篇|windows安装JDK及配置环境变量java学习应用篇|windows安装JDK及配置环境变量

          学习前言 实际上,本系统中最有价值的内容已经在前两篇文章中介绍完毕,接下来的内容主要是对前面知识的应用。新知识层出不穷,每隔几天就会有新的概念和框架出现。我们在本系列学习中,力求通过基本的学习方法来深入探究代码的本质,这样无论将来出现什么新的知识点,我们都能迅速学习并应用。小刀的水平有限,欢迎大家在…

          2026年9月1日 用户投稿
          200
        • 使用minio搭建私有化对象存储服务

          使用minio搭建私有化对象存储服务使用minio搭建私有化对象存储服务使用minio搭建私有化对象存储服务使用minio搭建私有化对象存储服务

          在工作中,我们常常会接触到对象存储服务,但这些服务大多是云服务。对于需要对外开放的项目而言,这类服务是可行的。然而,当我们需要私有化部署时,如何继续使用对象存储呢? 这里介绍一个开源项目MinIO,使用它,我们可以轻松搭建属于自己的私有云服务。 MinIO是一个非常轻量级的服务,可以简单地与其他应用…

          2026年8月31日 用户投稿
          200
        • 怎样实现一个基于 JavaScript 的简单搜索引擎?

          答案是基于JavaScript实现轻量级搜索引擎,通过预加载JSON数据、使用filter进行文本匹配,并支持多关键词与权重排序,结合输入事件实时展示结果。 实现一个基于 JavaScript 的简单搜索引擎,核心是文本匹配和快速检索。不需要复杂的后端或数据库,适合静态网站或小型应用。关键思路是:预…

          2026年8月31日
          100
        • WPF 使用 Composition API 做高性能渲染

          在 wpf 中,许多开发者会遇到渲染性能的问题。尽管 wpf 的渲染性能比浏览器渲染要高出不少,但仍然无法满足游戏级别的渲染需求。wpf 使用的 directx 版本仅优化到 9 级别,与 directx 9 的性能相当。鉴于开发者的需求,微软推出了现代渲染方法——composition api,这…

          2026年8月31日
          200
        • VSCode怎么贴小图_VSCode插入图片与Markdown图片预览教程

          VSCode怎么贴小图_VSCode插入图片与Markdown图片预览教程VSCode怎么贴小图_VSCode插入图片与Markdown图片预览教程VSCode怎么贴小图_VSCode插入图片与Markdown图片预览教程VSCode怎么贴小图_VSCode插入图片与Markdown图片预览教程

          答案:在VSCode中插入Markdown图片需使用语法,路径推荐用相对路径,预览依赖内置功能或扩展;可通过HTML 标签调整大小,常见问题为路径错误,建议使用Paste Image等扩展提升效率,高级效果如图文混排需结合HTML与CSS,但需注意平台兼容性。 VSCode中插入图片,特别是Mark…

          2026年8月31日 用户投稿
          100
        • VSCode用户代码片段管理_VSCode自定义模板快速创建入口

          VSCode通过用户代码片段和自定义模板显著提升开发效率。1. 可通过“文件 > 首选项 > 用户代码片段”为特定语言或全局创建代码片段,使用prefix触发、body定义代码结构、description标注用途。2. 合理管理需区分语言特定与全局片段,避免prefix冲突,善用desc…

          2026年8月31日
          700
        • VSCode怎么弄HTML_VSCode创建和编写HTML文件基础入门教程

          VSCode怎么弄HTML_VSCode创建和编写HTML文件基础入门教程VSCode怎么弄HTML_VSCode创建和编写HTML文件基础入门教程VSCode怎么弄HTML_VSCode创建和编写HTML文件基础入门教程VSCode怎么弄HTML_VSCode创建和编写HTML文件基础入门教程

          答案:VSCode通过Emmet、Live Server等扩展和智能提示功能,极大提升了HTML编写效率,其语义化标签支持与实时预览能力让开发更高效流畅。 在VSCode里处理HTML,其实比想象中要简单直观得多,它简直就是为前端开发量身定制的。对我来说,它不仅是一个编辑器,更像是一个高效的工作伙伴…

          2026年8月30日 用户投稿
          500
        • VSCode怎么打出基本代码_VSCode使用代码片段快速生成基础结构教程

          VSCode通过内置、自定义和扩展三种方式实现代码片段快速生成,提升开发效率。使用内置片段如html:5或log可一键生成常用结构;通过“Configure User Snippets”创建自定义片段,如用rfc生成React函数组件,并利用$1、$2等占位符实现光标跳转与同步编辑;安装高评分扩展如…

          2026年8月30日
          300
        • vivo浏览器怎么找到离线网页_vivo浏览器已保存离线网页的查看路径

          可通过“我的收藏”、下载记录或文件管理器查找vivo浏览器保存的离线网页。首先打开vivo浏览器,点击底部菜单进入“我的收藏”,查找带“已离线”标签的网页;若未找到,进入“下载记录”查看类型为网页或HTML的项目;若仍无法定位,可打开文件管理器,在内部存储的Android/data/com.bbk.…

          2026年8月30日
          200
        • VSCode怎么把Markdown保存_VSCode导出和转换Markdown文件格式教程

          答案是使用自动保存、Git版本控制和插件如Markdown PDF与Pandoc可高效保存并转换Markdown;通过相对路径管理图片、自定义CSS或Pandoc模板可避免导出格式错乱。 VSCode保存Markdown文件非常直接,它有自动保存功能,手动Ctrl+S也随时可用。至于导出和转换,这通…

          2026年8月30日
          100
        • mPDF 中单页内容输出的挑战与策略

          在使用 mPDF 将 HTML 导出为 PDF 时,用户常希望所有内容能保持在单个页面内。然而,mPDF 对自动分页的控制能力有限,且不提供“孤行”或“孤儿行”保护机制。这意味着,若内容自然超出页面边界,mPDF 将自动分页,难以强制所有内容在单页显示。理解其分页机制的局限性是实现预期输出的关键。 …

          2026年8月29日
          200
        • 天猫店铺首页装修步骤是什么?天猫店铺首页装修教程

          提升天猫店铺形象需从首页装修入手,首先进入商家后台选择PC端首页装修,接着选用匹配类目的模板快速美化页面,有设计能力者可自定义全屏海报并嵌入热区代码,随后添加轮播图、商品推荐、店招等核心模块优化信息布局,最后切换至手机端调整排版与组件确保移动端体验流畅。 如果您希望提升天猫店铺的专业形象和用户体验,…

          2026年8月29日
          100
        • VSCode怎么编写地图定位_VSCode集成地图API开发位置服务应用教程

          答案是集成地图API实现定位需选择服务商、引入SDK、初始化地图并调用定位功能。具体为:在VSCode中创建Web项目,引入百度等地图API的SDK,通过HTML页面加载地图容器,使用JavaScript初始化地图实例,并结合浏览器Geolocation API或地图SDK自带控件获取位置,最后添加…

          2026年8月29日
          100
        • Mac+IDEA+百度富文本UEditor

          Mac+IDEA+百度富文本UEditorMac+IDEA+百度富文本UEditorMac+IDEA+百度富文本UEditorMac+IDEA+百度富文本UEditor

          最近,我在项目中需要嵌入一个富文本编辑器,考虑到百度ueditor的强大功能,决定使用它。然而,从%ignore_a_1%+eclipse环境转到mac+idea后,遇到了几个问题。经过一番努力,终于解决了这些问题,现分享我的经验。 环境:Mac + IDEA + UEditor 基于 Maven+…

          2026年8月29日 用户投稿
          200
        • 入门爬虫,不讲道理,只摆问题

          入门爬虫,不讲道理,只摆问题入门爬虫,不讲道理,只摆问题入门爬虫,不讲道理,只摆问题入门爬虫,不讲道理,只摆问题

          其实我也算是入门爬虫,目前也还有很多东西没有吃透,比如很多人入门选择使用的正则式我就没记清楚,对于很多反扒也并不算特别深入。但这并不影响我学习爬虫的信心和兴趣。。。没办法,必须要学啊。很多数据我不能跪着求别人给,因为别人不会给。。。被逼着学习爬虫,希望我的学习能有好结果吧 import json i…

          2026年8月28日 用户投稿
          100
        • 避免 jQuery AJAX POST 请求重复提交的策略与实践

          本文探讨了在使用 jQuery AJAX 进行 POST 请求时,如何有效避免因事件监听器、快速点击或意外行为导致的重复提交问题。我们将介绍一种基于状态标志的解决方案,通过控制请求的执行时机,确保数据提交的准确性和一致性,并提供相应的代码示例和最佳实践建议,以优化用户体验和系统稳定性。 问题描述:A…

          2026年8月28日
          200

        发表回复

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