前端必知！HTML标签常见面试题大汇总

在前端开发领域，HTML 作为构建网页的基石，其标签的运用是基础且关键的部分。无论是初入前端行业的小白，还是寻求职场晋升的开发者，对 HTML 标签的深入理解都是必不可少的。下面就为大家汇总一些常见的 HTML 面试题，希望能助力你在面试中脱颖而出。

一、HTML 标签基础概念

1. 行内元素和块级元素有哪些区别？

行内元素，像 <span>、<a> 等，它们不会独占一行，宽度高度等属性设置对它们部分无效，并且在一行内可以排列多个行内元素。而块级元素，比如 <div>、<p>，会独占一行，默认宽度是父元素的 100%，能设置宽高、内外边距等各种属性。这种区别决定了它们在页面布局中的不同用途。

2. 空元素有哪些？

常见的空元素有 <br>（换行）、<hr>（水平线）、<img>（图片）、<input>（输入框）、<meta>（元数据）等。这些元素没有闭合标签，因为它们本身不包含任何内容，却在网页构建中发挥着重要作用，比如 <img> 用于展示图片，<meta> 提供网页的基础信息。

二、常用 HTML 标签

1. <img> 标签的常用属性有哪些？

<img> 标签最常用的属性当属 src，用于指定图片的路径，比如 src="image.jpg"，让浏览器知道从哪里获取图片资源。alt 属性也至关重要，它是图片的替代文本，当图片无法显示时，就会显示 alt 的内容，方便用户理解此处应展示的信息，同时对搜索引擎优化也有帮助。还有 width 和 height 属性，可设置图片的宽度和高度，单位一般是像素，不过要注意保持图片的纵横比，不然可能会导致图片变形。

2. <a> 标签的 target 属性有哪些值，分别代表什么含义？

target 属性决定了链接在何处打开。_self 是默认值，表示在当前窗口打开链接；_blank 会在新的空白窗口打开链接，这在很多需要跳转外部链接的场景下常用，保证当前页面不受影响。_parent 会在父框架集中打开链接，如果没有父框架集，就等同于 _self。_top 则会在整个窗口中打开链接，会打破所有框架结构。

三、HTML5 新增标签

1. 列举几个 HTML5 新增的语义化标签，并说明其用途

<header> 标签用来定义页面或区域的头部，通常包含网站标志、导航栏等内容，使页面结构更清晰，比如网站顶部放置 logo 和菜单的部分就适合用 <header> 包裹。<nav> 专门用于定义导航链接的部分，搜索引擎可以更好地识别页面导航，方便用户和搜索引擎理解网站架构。<article> 标签用于定义独立的、完整的内容块，像一篇文章、一个博客帖子等，每个 <article> 都可以独立于页面其他部分存在并被复用。

2. <canvas> 和 <svg> 标签的区别是什么？

<canvas> 是基于像素的画布，通过 JavaScript 脚本来绘制图形，适合绘制动态、变化频繁的图形，比如游戏画面、实时图表等。它的绘制是“即时模式”，绘制后就成为了位图，放大可能会失真。而 <svg> 是矢量图形，基于 XML 语法来描述图形，无论如何缩放都不会失真，适合绘制静态、对画质要求高且无需频繁改变的图标、矢量插画等，像网站的 logo 用 <svg> 实现就非常合适。

以上就是前端 HTML 标签常见面试题的汇总啦，掌握这些内容，相信你在面试中面对 HTML 标签相关问题就能游刃有余。