干货精讲｜初级 HTML 面试高频考题

适合前端入门 / 巩固基础，涵盖 11 道高频面试题

[DOCTYPE 的作用是什么？DOCTYPE 写错或漏写会有什么后果？](#DOCTYPE 的作用是什么？DOCTYPE 写错或漏写会有什么后果？)
[<script> 标签的 async 和 defer 属性有什么区别？应该优先使用哪个？](#<script> 标签的 async 和 defer 属性有什么区别？应该优先使用哪个？)
什么是语义化标签？使用语义化标签有什么好处？
[<meta> 标签有哪些常见用法？](#<meta> 标签有哪些常见用法？)
[href 和 src 的区别是什么？](#href 和 src 的区别是什么？)
行内元素和块级元素有什么区别？有哪些行内元素和块级元素？
[title 和 h1 的区别是什么？可以只用 title 不用 h1 吗？](#title 和 h1 的区别是什么？可以只用 title 不用 h1 吗？)
[HTML5 新增了哪些标签？](#HTML5 新增了哪些标签？)
[对比 <img> 和 background-image 的使用场景，什么时候该用哪个？](#对比和 background-image 的使用场景，什么时候该用哪个？)
[什么是 HTML 实体？什么场景下必须使用 HTML 实体？](#什么是 HTML 实体？什么场景下必须使用 HTML 实体？)

1. DOCTYPE 的作用是什么？DOCTYPE 写错或漏写会有什么后果？

考点

HTML 文档标准模式与混杂模式（Quirks Mode）的区别
浏览器渲染引擎的工作原理

知识点详解

DOCTYPE 的作用

DOCTYPE（Document Type Declaration，文档类型声明）位于 HTML 文档的第一行，用于告诉浏览器当前文档应该使用哪种 HTML 规范来解析和渲染。

复制代码

<!-- HTML5 标准写法 -->
<!DOCTYPE html>

<!-- HTML4.01 过渡型 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!-- HTML4.01 严格型 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

在现代项目中，我们几乎只使用 HTML5 的 <!DOCTYPE html>。

写错或漏写的后果------混杂模式（Quirks Mode）

当 DOCTYPE 缺失或书写错误时，浏览器会进入 混杂模式（Quirks Mode），也叫"怪异模式"。在混杂模式下：

方面	标准模式（Standards Mode）	混杂模式（Quirks Mode）
盒模型	`width` = 内容区宽度（CSS3 `box-sizing` 默认为 `content-box`）	`width` = 内容 + padding + border（IE 盒模型）
`font-size`	按 CSS 规范计算	沿用旧版 IE 的较小字体
宽高解析	按 CSS 规范	部分浏览器行为不可预测
兼容老站点	无需处理	模拟 IE5.5 等老浏览器行为

实际影响举例

复制代码

<!-- 正确写法：标准模式 -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>标准模式</title>
  <style>
    .box {
      width: 200px;
      padding: 20px;
      border: 5px solid red;
      /* 标准模式下元素实际宽度 = 200 + 20*2 + 5*2 = 250px */
    }
  </style>
</head>
<body>
  <div class="box">内容</div>
</body>
</html>

如果省略 DOCTYPE，浏览器按混杂模式解析，可能导致：

布局与预期不符（尤其是使用百分比宽度时）
JavaScript 获取的元素尺寸与 CSS 设置不一致
表单元素样式差异
不同浏览器表现差异极大

最佳实践

始终写 DOCTYPE ，推荐直接使用 <!DOCTYPE html>
DOCTYPE 不区分大小写，但推荐大写以提高可读性
DOCTYPE 之前不能有任何字符（包括空格），否则某些浏览器仍会触发混杂模式

❌ <!doctype html>
❌ <!DOCTYPE html>
❌ <!DOCTYPE html >
✅ <!DOCTYPE html>

答案

DOCTYPE 位于 HTML 文档第一行，用于声明文档类型，告诉浏览器使用哪种 HTML 规范渲染页面。如果 DOCTYPE 缺失或写错，浏览器会进入混杂模式（Quirks Mode） ，导致盒模型解析错误、布局不可预测、不同浏览器表现差异大等问题。因此必须始终写正确的 DOCTYPE ，现代项目统一使用 <!DOCTYPE html>。

2. `<script>` 标签的 async 和 defer 属性有什么区别？应该优先使用哪个？

考点

浏览器渲染引擎的工作流程
JavaScript 加载与执行时机
页面性能优化

知识点详解

浏览器的渲染过程（关键前置知识）

浏览器的渲染过程大致如下：

复制代码

HTML 解析 → DOM 构建 → CSS 解析 → Render Tree → 布局 → 绘制

当浏览器在解析 HTML 的过程中遇到 <script> 标签时：

默认行为 ：立即下载并执行 JavaScript，阻塞 HTML 解析
这就是为什么把 <script> 放在 <head> 中会导致页面"白屏"

三种 script 执行模式对比

特性	`<script>`（默认）	`<script defer>`	`<script async>`
下载方式	阻塞下载	异步下载，不阻塞 HTML	异步下载，不阻塞 HTML
执行时机	立即执行，阻塞 HTML 解析	等 HTML 解析完成（DOMContentLoaded 之前）	下载完成后立即执行，不等待 HTML
执行顺序	按出现顺序执行	按出现顺序执行	不保证顺序（谁先下载完谁先执行）
适合场景	必须尽早执行的脚本（如 Modernizr）	大部分第三方脚本、依赖脚本	独立的不依赖其他脚本的统计脚本

实际代码示例

复制代码

<head>
  <!-- 默认：阻塞解析，阻塞执行 -->
  <script src="analytics.js"></script>

  <!-- defer：异步下载，DOM 解析完后按顺序执行 -->
  <script src="vendor.js" defer></script>
  <script src="app.js" defer></script>

  <!-- async：下载完立即执行，不保证顺序 -->
  <script src="stats.js" async></script>
</head>

常见使用场景

复制代码

<!-- 第三方库/框架：使用 defer -->
<!-- 这两个按顺序执行，在 DOMContentLoaded 触发前执行 -->
<script src="vue.js" defer></script>
<script src="app.js" defer></script>

<!-- 独立的统计脚本：使用 async -->
<!-- 不阻塞页面加载，下载完立即执行 -->
<script src="ga.js" async></script>

<!-- 入口脚本（需要操作 DOM）：放在 body 底部 或 使用 defer -->
<script src="main.js" defer></script>

应该优先使用哪个？

答案：优先使用 defer

原因：

async 不保证执行顺序，如果多个脚本有依赖关系会导致错误
defer 保证脚本按 HTML 中的顺序执行，接近于把脚本放在 body 底部的效果
defer 在 DOM 完全解析后再执行，不会出现"找不到 DOM 元素"的问题

现代前端工程化项目（Vue/React CLI）打包后，通常会把 <script> 自动加上 defer，所以你可能感知不到，但在手动引入第三方脚本时需要特别注意。

答案

async 和 defer 都是让脚本异步加载、不阻塞 HTML 解析的属性。区别在于：

defer：异步下载，HTML 解析完成后按出现顺序执行
async：异步下载，下载完成后立即执行，不保证顺序

优先使用 defer 。因为它既不阻塞页面渲染，又能保证脚本执行顺序，避免依赖问题。async 只适合独立、不依赖其他脚本的第三方代码（如统计脚本）。

3. 什么是语义化标签？使用语义化标签有什么好处？

考点

HTML 语义化的概念
语义化对 SEO、可访问性（Accessibility）、代码可维护性的影响

知识点详解

什么是语义化标签

语义化标签（Semantic HTML）是指使用具有明确含义的 HTML 标签来构建页面结构，让标签本身就能表达它所包含内容的意义。

复制代码

<!-- 非语义化写法 -->
<div class="header">
  <div class="nav">
    <div class="main-content">
      <div class="article">...</div>
      <div class="sidebar">...</div>
    </div>
    <div class="footer">...</div>
  </div>
</div>

<!-- 语义化写法 -->
<header>
  <nav>...</nav>
</header>
<main>
  <article>...</article>
  <aside>...</aside>
</main>
<footer>...</footer>

两段代码在浏览器中的视觉效果可能完全相同，但语义化写法传达了结构信息。

常见语义化标签

标签	含义	常见用途
`<header>`	页面或区块的头部	顶部导航、logo、标题区
`<nav>`	导航链接区域	主导航、面包屑导航
`<main>`	页面主要内容（唯一）	正文内容区
`<article>`	独立完整的内容	博客文章、新闻、帖子
`<section>`	主题分组的内容区块	章节、功能模块
`<aside>`	侧边栏/相关引用	侧边导航、广告区
`<footer>`	页面或区块的底部	版权信息、联系方式
`<figure>`	独立的引用单元	图片+图注
`<time>`	时间或日期	博客发布时间

使用语义化标签的七大好处

1. SEO 优化（搜索引擎友好）

搜索引擎爬虫通过分析 HTML 结构来理解页面内容。语义化标签为爬虫提供了结构化的线索：

复制代码

<article>
  <h1>如何学习 JavaScript</h1>  <!-- 爬虫知道这是文章标题 -->
  <time datetime="2026-05-22">2026年5月22日</time>  <!-- 爬虫知道这是日期 -->
  <p>正文内容...</p>
</article>

搜索引擎会给予 <h1> 更高的权重，<article> 标签帮助爬虫识别主要内容区域，从而提升搜索排名。

2. 可访问性（Accessibility，无障碍访问）

屏幕阅读器（如给视障人士使用的工具）依赖 HTML 结构来理解页面：

复制代码

<!-- 屏幕阅读器用户可以通过快捷键快速跳转到 nav/main/footer -->
<nav aria-label="主导航">
  <a href="/">首页</a>
  <a href="/about">关于我们</a>
</nav>

<main>
  <h1>欢迎访问我们的网站</h1>
</main>

<footer>
  <p>© 2026 公司名称</p>
</footer>

配合 ARIA 属性（如 aria-label、role），语义化标签能让视障用户顺畅浏览页面。

3. 代码可维护性

复制代码

<!-- 找起来清晰 -->
<nav>...</nav>          <!-- 一眼就知道这是导航 -->

<!-- vs -->
<div class="nav">...</div>        <!-- 需要看 class 名才知道是什么 -->
<div class="navigation">...</div>
<div class="menu">...</div>
<div class="header-nav">...</div>  <!-- 命名混乱 -->

4. 跨设备兼容性

语义化结构让移动端、桌面端的各种客户端都能正确解析页面结构。例如智能手表、TV 浏览器等设备可以根据语义标签提取关键信息。

5. 浏览器更好的默认样式

浏览器为语义化标签内置了合理的默认样式（margin、font-size 等），开发者不需要从头写大量 reset 样式。

6. 未来的可扩展性

语义化 HTML 是 Web Components、AMP 等新技术的基础。

7. 团队协作效率

统一的语义化结构是前端团队的"共识语言"，新成员更容易理解代码结构。

语义化标签的常见误区

复制代码

<!-- 误区1：滥用 section -->
<!-- section 不是用来"包住所有内容"的，它是表示主题区块 -->
❌ <section><p>段落内容</p></section>           <!-- 不语义 -->
✅ <p>段落内容</p>                               <!-- 段落就用 p -->

<!-- 误区2：h1 随便用 -->
<!-- h1-h6 是标题层级，要按重要性使用，不是按大小 -->
❌ <div><h3>小标题</h3></div>                    <!-- 结构不对 -->
✅ <section><h2>大章节</h2><h3>小节</h3></h3></section>

<!-- 误区3：nav 滥用 -->
<!-- nav 是导航链接区域，不要把所有链接都包在 nav 里 -->
❌ <nav><a href="https://baidu.com">百度</a></nav> <!-- 不语义 -->
✅ <nav><a href="/products">产品</a><a href="/about">关于</a></nav>

答案

语义化标签是指使用具有明确含义的 HTML 标签（如 <header>、<nav>、<main>、<article>、<footer> 等）来描述页面结构，让代码本身就能表达内容的意义。

好处包括：

SEO 优化：帮助搜索引擎理解页面结构，提升搜索排名
可访问性：让屏幕阅读器正确解析页面，帮助视障用户浏览
可维护性：代码结构清晰，团队协作更高效
跨设备兼容：各种客户端能正确解析页面结构
语义一致：减少 class 命名混乱，统一团队开发规范

4. `<meta>` 标签有哪些常见用法？

考点

<meta> 标签的各种属性和值
移动端适配、SEO、浏览器兼容性配置

知识点详解

<meta> 标签提供关于 HTML 文档的元数据（metadata），它不会直接显示在页面上，但会被浏览器、搜索引擎和其他 Web 服务使用。

语法结构

复制代码

<meta name="属性名" content="属性值">
<meta charset="属性值">
<meta http-equiv="属性名" content="属性值">

常见用法分类

1. 字符编码（最常用）

复制代码

<meta charset="UTF-8">
<!-- 必须放在 <head> 的前几行，确保浏览器正确解析页面 -->

2. 视口配置（移动端必备）

复制代码

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width：视口宽度等于设备宽度
initial-scale=1.0：初始缩放比例为 1（即不缩放）
maximum-scale=1.0：禁止用户缩放（不推荐，会影响可访问性）

完整示例：

复制代码

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=0.1">

3. SEO 相关 meta 标签

复制代码

<!-- 页面标题（显示在搜索引擎结果中，建议 60 字符以内） -->
<meta name="title" content="网页标题">

<!-- 页面描述（显示在搜索引擎结果摘要中，建议 150-200 字符） -->
<meta name="description" content="这是一段网页描述，用于展示在搜索结果中。">

<!-- 页面关键词（曾经常用，现在搜索引擎权重很低） -->
<meta name="keywords" content="HTML, CSS, JavaScript, 前端">

<!-- 页面作者 -->
<meta name="author" content="张三">

<!-- 搜索引擎抓取规则 -->
<!-- robots: all/none/index/noindex/follow/nofollow -->
<meta name="robots" content="index, follow">

<!-- 百度专用：百度搜索-siteapp 声明 -->
<meta name="baidu-site-verification" content="验证码字符串">

<!-- Google 搜索验证 -->
<meta name="google-site-verification" content="验证码字符串">

4. Open Graph 标签（社交分享）

当链接被分享到微信、微博、Twitter、Facebook 等平台时，这些标签决定显示的标题、描述和图片：

复制代码

<meta property="og:title" content="分享标题">
<meta property="og:description" content="分享描述">
<meta property="og:image" content="https://example.com/share.jpg">
<meta property="og:url" content="https://example.com/page">
<meta property="og:type" content="website">  <!-- website/article/product 等 -->
<meta property="og:site_name" content="网站名称">

微信分享效果对比：

复制代码

无 OG 标签：显示默认截图 / 无图片 / 无描述
有 OG 标签：显示自定义标题 + 描述 + 缩略图

5. Twitter Card 标签

复制代码

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="分享标题">
<meta name="twitter:description" content="分享描述">
<meta name="twitter:image" content="https://example.com/share.jpg">

6. 浏览器兼容性

复制代码

<!-- 强制 IE 使用最新渲染引擎 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!-- 优先使用 Webkit 内核（360 浏览器等双核浏览器使用 Blink/Trident） -->
<meta name="render" content="webkit">

<!-- 页面缓存过期时间（GMT 格式） -->
<meta http-equiv="expires" content="Wed, 22 May 2026 00:00:00 GMT">

<!-- 禁止浏览器从本地缓存中访问页面（每次都从服务器拉取） -->
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">

<!-- 跳转到其他页面（不推荐使用，SEO 不友好） -->
<meta http-equiv="refresh" content="5; url=https://example.com">

7. 移动端相关

复制代码

<!-- 苹果 Safari 浏览器：添加到主屏幕后全屏显示 -->
<meta name="apple-mobile-web-app-capable" content="yes">

<!-- 苹果 Safari 浏览器：顶部状态栏样式 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- 可选值: default（白色）/ black（黑色）/ black-translucent（半透明黑色） -->

<!-- 苹果 Safari 浏览器：主屏幕应用名称 -->
<meta name="apple-mobile-web-app-title" content="应用名称">

<!-- 安卓微信：启用 QQ/微信浏览器 X5 内核的同层播放器 -->
<meta name="x5-orientation" content="portrait">

<!-- UC 浏览器：竖屏/横屏模式 -->
<meta name="screen-orientation" content="portrait">

8. 主题色（浏览器地址栏颜色）

复制代码

<!-- Chrome、Safari、Edge 支持 -->
<meta name="theme-color" content="#4CAF50">

9. 浏览器内核控制

复制代码

<!-- 360、搜狗、猎豹等双核浏览器强制使用 Blink/Webkit -->
<meta name="renderer" content="webkit">

<!-- 强制 IE 使用 Edge 模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

最佳实践：一个完整的 `<head>` 示例

复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <!-- SEO -->
  <title>页面标题 - 网站名称</title>
  <meta name="description" content="页面描述（150-200字符）">
  <meta name="keywords" content="关键词1, 关键词2">
  <meta name="author" content="作者名">

  <!-- 社交分享 -->
  <meta property="og:title" content="分享标题">
  <meta property="og:description" content="分享描述">
  <meta property="og:image" content="https://example.com/og.jpg">
  <meta property="og:url" content="https://example.com">
  <meta property="og:type" content="website">

  <!-- 移动端 -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="theme-color" content="#4CAF50">

  <!-- 图标 -->
  <link rel="icon" href="/favicon.ico">
  <link rel="apple-touch-icon" href="/icon.png">

  <!-- 样式 -->
  <link rel="stylesheet" href="/style.css">
</head>

答案

<meta> 标签提供页面元数据，常见用法分为以下几类：

字符编码 ：charset="UTF-8"（必须放第一位）
视口配置 ：name="viewport"（移动端必备）
SEO：description、keywords、robots 等
社交分享：Open Graph（og:title、og:image 等）
浏览器兼容性：X-UA-Compatible、renderer 等
移动端适配：apple-mobile-web-app-*、theme-color 等

在实际项目中，charset、viewport、SEO meta 和社交分享 meta 是最常用且最重要的。

5. href 和 src 的区别是什么？

考点

HTML 属性的语义和使用场景
资源加载机制的区别
浏览器的处理行为

知识点详解

href 与 src 的基本定义

属性	全称	含义	使用标签
`href`	Hypertext Reference	超文本引用，建立当前文档与目标资源的链接	`<a>`、`<link>`、`<area>`
`src`	Source	来源/源，指向要嵌入到当前文档中的资源	`<img>`、`<script>`、`<iframe>`、`<video>`、`<audio>`

核心区别

1. href ------ 链接关系，不替代当前内容

href 声明的是一种引用关系 ，告诉浏览器"这个资源可能与你有关"，但不会把资源内容嵌进来。点击链接会触发导航，浏览器会并行下载 href 指向的资源。

复制代码

<!-- 点击 <a> 会跳转到新页面 -->
<a href="https://example.com">访问链接</a>

<!-- 引入 CSS，浏览器会并行下载样式表并应用 -->
<link rel="stylesheet" href="style.css">

<!-- prefetch: 提前预取下一个导航可能需要的资源 -->
<link rel="prefetch" href="next-page.html">

<!-- DNS 预解析 -->
<link rel="dns-prefetch" href="https://fonts.googleapis.com">

2. src ------ 嵌入替换，当前的内容被替换

src 会完全替换当前元素的内容 。浏览器在解析到 src 时会立即下载该资源，并用其内容替换当前元素的位置。

复制代码

<!-- <img> 的 src 会替换掉 <img> 标签本身的位置，显示图片 -->
<img src="photo.jpg" alt="照片">

<!-- <script> 的 src 会替换当前脚本位置，执行脚本内容 -->
<script src="app.js"></script>

<!-- <iframe> 会用 src 指向的页面替换整个 iframe 区域 -->
<iframe src="https://example.com"></iframe>

图解对比

复制代码

href: 建立关系，不替换
<a href="page.html">链接</a>
    → 点击 → 导航到 page.html（当前页面内容被替换为新页面）
    → 不点击 → page.html 不加载

src: 嵌入内容，替换显示
<img src="photo.jpg">
    → 浏览器立即下载 photo.jpg
    → 下载完成后，替换 <img> 标签位置，显示图片
    → 如果不下载图片，<img> 区域就是空的

加载时机区别

复制代码

<!-- href：浏览器并行下载，不阻塞页面渲染 -->
<link rel="stylesheet" href="style.css">
<!-- 浏览器可以并行处理 HTML 解析和 CSS 下载 -->

<!-- src：浏览器会暂停 HTML 解析，先下载资源 -->
<script src="app.js"></script>
<!-- 浏览器暂停 HTML 解析 → 下载 JS → 执行 JS → 继续解析 HTML -->

实际开发中的注意事项

CSS 的 link vs img 的 src

复制代码

<!-- link href：引用关系，不阻塞 img 加载 -->
<link rel="stylesheet" href="theme.css">

<!-- img src：嵌入关系，图片加载后才能显示占位 -->
<img src="banner.jpg" alt="横幅">

搜索引擎对 href 和 src 的处理

搜索引擎爬虫会跟踪 <a href> 链接来抓取其他页面
搜索引擎会抓取 <img src> 中的图片 URL，用于图片搜索索引
搜索引擎会执行 <script src> 中的 JS 来理解动态内容

答案

href（Hypertext Reference）和 src（Source）的核心区别在于：

区别	`href`	`src`
语义	建立引用/关联关系	指向来源/嵌入内容
替换行为	不替换当前内容	替换当前元素内容
加载时机	浏览器并行下载，不阻塞解析	浏览器暂停解析，下载后替换
使用场景	`<a>`、`<link>`	`<img>`、`<script>`、`<iframe>`、`<video>`

简单记忆：href = 关联关系（引用） ，src = 嵌入内容（替换）。

6. 行内元素和块级元素有什么区别？有哪些行内元素和块级元素？

考点

HTML 元素的默认显示类型
CSS 盒模型与布局基础
HTML5 中的元素分类变化

知识点详解

行内元素 vs 块级元素

特性	块级元素（Block-level）	行内元素（Inline）
是否单独占一行	是，前后都会换行	否，和其他内容在一行内排列
默认宽度	100% 父元素宽度	由内容决定（收缩包裹）
默认高度	由内容决定	由内容决定
宽高设置	可以设置 width、height	不能设置 width、height（会被忽略）
内外边距	上下左右都可以设置，布局生效	上下 margin 不生效，padding 生效但不影响布局
包含规则	可以包含块级和行内元素	只能包含行内元素，不能包含块级元素
默认 `display`	`display: block`	`display: inline`

典型块级元素

元素	语义
`<div>`	分区/区块（无语义）
`<p>`	段落
`<h1>` ~ `<h6>`	一级~六级标题
`<ul>`、`<ol>`、`<li>`	无序列表、有序列表、列表项
`<dl>`、`<dt>`、`<dd>`	定义列表、术语、描述
`<table>`	表格
`<form>`	表单
`<header>`、`<nav>`、`<main>`、`<article>`、`<section>`、`<aside>`、`<footer>`	HTML5 结构语义标签
`<blockquote>`	块级引用
`<pre>`	预格式化文本

典型行内元素（HTML5 中称为"文本级语义元素"）

元素	语义
`<a>`	链接
`<span>`	文本容器（无语义）
`<strong>`、`<em>`	强调、加粗/斜体（语义）
`<b>`、`<i>`、`<u>`	加粗、斜体、下划线（纯表现）
`<code>`、`<kbd>`、`<samp>`	代码、键盘输入、样本文本
`<img>`	图片（替换元素）
`<br>`	换行
`<input>`、`<textarea>`、`<select>`	表单输入控件（替换元素）
`<button>`	按钮（替换元素）
`<label>`	表单标签
`<abbr>`	缩写词
`<cite>`	引用来源
`<time>`	时间

盒模型对比图

复制代码

块级元素:
┌─────────────────────────┐ ← width: 100% 父容器宽度
│                         │
│    我是块级元素         │
│                         │
│    width/height 可设    │
│                         │
└─────────────────────────┘ ← 独占一行，下一个元素另起一行

行内元素:
┌─────────┐ ┌──────────┐ ┌─────────┐
│ 行内元素│ │行内元素2 │ │行内元素3│ ← 在一行内排
└─────────┘ └──────────┘ └─────────┘
   ↑ 不能设宽高，宽度由内容撑开

设置 padding 的区别:
┌─块级元素───────────┐
│ padding 上下左右都 │ ← padding: 10px 影响上下左右
│ 生效，影响布局     │
└────────────────────┘

行内元素:
[ 左边距   文字内容   右边距  ] ← padding 左右生效
[        上边距        ]     ← padding 上会溢出（不占布局空间）
[        下边距        ]     ← padding 下可能溢出

HTML5 中的变化：替换元素与显示类型

HTML5 不再将元素简单划分为"块级"和"行内"，而是采用了更灵活的分类方式：

替换元素（Replaced Elements） ：外观由外部资源决定，如 <img>、<input>、<video>、<iframe>、<canvas> 等。这些元素在 CSS 中表现为行内块元素的特性------可以设置宽高，但又不独占一行。
CSS display 属性：
- display: block → 块级
- display: inline → 行内
- display: inline-block → 行内块（不独占一行，但可以设置宽高）
- display: flex / display: grid → 弹性/网格布局
行内块元素

常见笔试题陷阱

复制代码

<!-- 陷阱1：行内元素包裹块级元素（不合法） -->
❌ <a href="#">
     <div>这是错误写法</div>
   </a>

<!-- 陷阱2：在 p 里放 div（不合法，p 只能包含行内元素） -->
❌ <p>段落文字<div>区块</div>继续文字</p>

<!-- 陷阱3：行内元素设置宽高不生效 -->
❌ <span style="width: 200px; height: 100px;">无效</span>

<!-- 正确做法：需要转 display -->
✅ <span style="display: inline-block; width: 200px; height: 100px;">有效</span>

答案

区别：

特性	块级元素	行内元素
换行	独占一行	不换行，与其他内容同行
宽高	可设置	宽高由内容决定，CSS 设置无效
margin/padding	上下左右都生效	左右生效，上下不占布局空间
包含	可包含块级和行内元素	只能包含行内元素

常见块级元素 ：div、p、h1~h6、ul/ol/li、table、form、header/nav/main/article/section/aside/footer

常见行内元素 ：a、span、strong/em、b/i/u、img（替换元素）、input、button、label

补充：HTML5 引入了"替换元素"的概念（img、input、video 等），它们在表现上类似行内块。实际开发中，建议通过 CSS display 属性来控制元素行为，而非依赖 HTML 元素的默认类型。

7. title 和 h1 的区别是什么？可以只用 title 不用 h1 吗？

考点

title 与 h1 的语义区别
SEO 优化中两者的作用
HTML 文档结构规范

知识点详解

`title` vs `h1`：两个完全不同的东西

维度	`<title>`	`<h1>`
位置	放在 `<head>` 里面	放在 `<body>` 里面
作用	给浏览器/搜索引擎看，定义文档标题	给用户看，是页面正文内容的标题
显示位置	浏览器标签页、搜索引擎结果、书签	页面正文区域
数量	每个页面只能有一个	每个 `<section>`/`<article>` 可以有一个
CSS 控制	无法用 CSS 控制样式	可以用 CSS 任意样式
用途	SEO 标题、收藏夹标题	页面内容标题

代码示例

复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <!-- <title>：浏览器标签页、搜索引擎结果 -->
  <title>如何学习前端 - 前端工程师成长指南</title>

  <!-- SEO meta 标签 -->
  <meta name="description" content="本文介绍前端学习路线...">
</head>
<body>
  <!-- 页面正文 -->

  <!-- <h1>：页面正文中最重要的标题 -->
  <header>
    <h1>前端工程师成长指南</h1>   <!-- 用户在页面上看到的标题 -->
  </header>

  <main>
    <article>
      <h1>如何学习前端</h1>        <!-- 另一篇文章的标题 -->
      <p>正文...</p>
    </article>

    <article>
      <h1>前端面试题汇总</h1>
      <p>正文...</p>
      <section>
        <h2>HTML 部分</h2>
        <p>内容...</p>
      </section>
    </article>
  </main>
</body>
</html>

可以只用 title 不用 h1 吗？

根据实际场景进行选择 两者服务对象不同：

title 服务于浏览器和搜索引擎（SEO、收藏夹、标签页）
h1 服务于页面阅读者（用户需要看到正文中的标题来理解内容）

SEO 最佳实践：`title` 与 `h1` 的关系

复制代码

<head>
  <!-- title：简洁明了，包含核心关键词，60 字符以内 -->
  <title>HTML面试题精选11道（附答案）| 前端大学</title>
</head>
<body>
  <!-- h1：页面的主标题，用户一眼能看到 -->
  <h1>HTML 面试题精选 11 道（附详细答案）</h1>
  <!-- h1 通常与 title 关键词一致或相近 -->
</body>

常见错误写法

复制代码

❌ 同时没有 title 和 h1
❌ title 和 h1 完全不同（如 title 写"首页"，h1 写"产品列表"）
❌ 多个 h1（虽然 HTML5 允许，但 SEO 角度建议一个页面一个 h1）
❌ 用 div + CSS 模拟 title 而不使用 <title> 标签

总结

问题	答案
`title` 和 `h1` 有什么区别？	服务对象不同，title 给浏览器/搜索引擎看，h1 给用户看
可以只用 `title` 或者可以只用h1吗？	根据实际场景进行选择标签，正常情况考虑seo,两种标签都需要，缺少 h1 用户看不到页面标题，SEO 和可访问性都会受损;itle 是 HTML 规范要求的，缺失会影响 SEO 和浏览器标签显示
两者有什么关系？	最好保持关键词一致，title 是 SEO 包装，h1 是内容核心

答案

title 和 h1 是两个完全不同的东西：

<title> ：放在 <head> 中，供浏览器和搜索引擎使用（标签页标题、SEO 标题、收藏夹标题），每个页面只能有一个，不能用 CSS 控制样式。
<h1> ：放在 <body> 中，供页面访问者阅读，是正文内容的最顶层标题，可以设置 CSS 样式，一个页面建议只有一个。

不能只用一个而省略另一个 ，要根据实际场景进行选择 。两者服务对象不同，在实际项目中应该保持关键词一致：title 负责 SEO，h1 负责用户体验。

8. HTML5 新增了哪些标签？

考点

HTML5 新增的语义化标签
HTML5 新增的媒体标签
HTML5 新增的表单标签和属性

知识点详解

一、语义结构标签（最常考）

HTML5 新增了 8 个语义结构标签，用于更清晰地描述页面布局：

标签	含义	注意点
`<header>`	页面或区块的头部	可出现多个
`<nav>`	导航区域	只放重要导航，不要滥用
`<main>`	页面主要内容	每个页面只能有一个
`<article>`	独立完整的内容单元	如博客文章、新闻、论坛帖子
`<section>`	主题相关的内容分组	倾向于章节/模块
`<aside>`	与主内容相关的侧边信息	如侧边栏、相关引用
`<footer>`	页面或区块的底部	可出现多个
`<figure>` + `<figcaption>`	独立的引用单元（如图文组合）	图注配套使用

图示：

复制代码

┌────────────────────────────────────────────────┐
│ <header> 导航区域                               │
├──────────┬─────────────────────────┬──────────┤
│          │ <nav> 主导航              │          │
│          ├─────────────────────────┤          │
│ <aside>  │ <main>                   │ <aside>  │
│ 侧边栏   │   <article>              │ 相关推荐 │
│          │     <h1>标题</h1>       │          │
│          │     <section>章节1</section>         │
│          │     <section>章节2</section>         │
│          │   </article>                     │          │
├──────────┴─────────────────────────┴──────────┤
│ <footer> 版权信息  联系方式                      │
└────────────────────────────────────────────────┘

二、媒体标签

复制代码

<!-- <video>：视频播放 -->
<video src="movie.mp4" controls width="800" height="600" poster="cover.jpg">
  您的浏览器不支持 video 标签
</video>

<!-- controls: 显示播放控件；poster: 封面图；autoplay/muted/loop: 控制行为 -->
<video controls autoplay muted loop>
  <source src="movie.webm" type="video/webm">
  <source src="movie.mp4" type="video/mp4">
</video>

<!-- <audio>：音频播放 -->
<audio src="music.mp3" controls autoplay>
  您的浏览器不支持 audio 标签
</audio>

<!-- <source>：为 video/audio 提供多个格式源 -->
<video controls>
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>

<!-- <track>：字幕/字幕轨道 -->
<video src="movie.mp4">
  <track kind="subtitles" src="zh-CN.vtt" srclang="zh-CN" label="中文" default>
  <track kind="subtitles" src="en.vtt" srclang="en" label="English">
</video>

<!-- <embed>：嵌入外部内容（插件、PDF 等） -->
<embed src="file.pdf" type="application/pdf" width="800" height="600">

<!-- <canvas>：画布（配合 JS 绘图） -->
<canvas id="myCanvas" width="400" height="300"></canvas>

三、表单增强标签和属性

新增 input 类型：

复制代码

<input type="email">      <!-- 邮箱输入，触发移动端 email 键盘 -->
<input type="url">        <!-- URL 输入 -->
<input type="tel">        <!-- 电话输入，触发手机数字键盘 -->
<input type="search">     <!-- 搜索框，带清除按钮 -->
<input type="number">     <!-- 数字输入，可设 min/max/step -->
<input type="range">      <!-- 范围滑块 -->
<input type="color">      <!-- 颜色选择器 -->
<input type="date">       <!-- 日期选择 -->
<input type="time">       <!-- 时间选择 -->
<input type="datetime-local"> <!-- 本地日期时间 -->
<input type="month">      <!-- 月份选择 -->
<input type="week">       <!-- 周选择 -->

新增表单元素：

复制代码

<!-- <datalist>：为 input 提供建议选项 -->
<input list="browsers" placeholder="请选择浏览器">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
</datalist>

<!-- <meter>：显示已知范围内的标量值（如磁盘使用量） -->
<meter value="60" min="0" max="100" low="30" high="80" optimum="50">
  60%
</meter>

<!-- <progress>：显示任务进度 -->
<progress value="70" max="100">70%</progress>
<progress max="100"></progress>  <!-- 不确定进度的动画 -->

新增表单属性：

复制代码

<input type="text" placeholder="请输入用户名" required autofocus autocomplete="on">
<input type="email" multiple>          <!-- 允许多个邮箱，逗号分隔 -->
<input type="file" accept="image/*" capture="user">  <!-- 限制文件类型和摄像头 -->
<input type="number" min="0" max="100" step="5">

<!-- <form> 新属性 -->
<form id="myForm" novalidate autocomplete="on">
  <!-- formaction、formenctype、formmethod、formtarget: 覆盖 form 的属性 -->
  <button type="submit" formaction="/save">保存</button>
  <button type="submit" formaction="/publish">发布</button>
</form>

四、其他新增标签

复制代码

<!-- <details> + <summary>：可折叠展开区域 -->
<details open>
  <summary>点击展开更多内容</summary>
  <p>这里是隐藏的详细内容...</p>
</details>

<!-- <mark>：高亮标记 -->
<p>这是 <mark>高亮</mark> 的文字。</p>

<!-- <time>：明确标注时间/日期 -->
<time datetime="2026-05-22">2026年5月22日</time>
<time datetime="2026-05-22T14:30:00">今天下午两点半</time>

<!-- <ruby> + <rt> + <rp>：拼音/注音支持（东亚语言） -->
<ruby>
  中<rp>(</rp><rt>zhōng</rt><rp>)</rp>
  国<rp>(</rp><rt>guó</rt><rp>)</rp>
</ruby>

<!-- <wbr>：单词内可选换行位置 -->
<p>antidisestablishmentarianism<wbr>is<wbr>a<wbr>long<wbr>word</p>

<!-- <picture>：响应式图片（不同屏幕加载不同图片） -->
<picture>
  <source media="(min-width: 800px)" srcset="large.jpg">
  <source media="(min-width: 400px)" srcset="medium.jpg">
  <img src="small.jpg" alt="响应式图片">
</picture>

五、已废弃的标签（面试常问）

以下标签在 HTML5 中已被移除，不应再使用：

废弃标签	替代方案
`<center>`、`<font>`、`<u>`	CSS
`<big>`、`<small>`	CSS `font-size`
`<frame>`、`<frameset>`、`<noframes>`	`<iframe>` 或服务端
`<strike>`、`<s>`	CSS 或 `<del>`
`<acronym>`	`<abbr>`
`<dir>`	`<ul>`
`<marquee>`	CSS animation / JavaScript
`<applet>`	`<embed>` 或 `<object>`

答案

HTML5 新增标签可分为四大类：

语义结构标签 ：header、nav、main、article、section、aside、footer、figure + figcaption
媒体标签 ：video、audio、source、track、canvas
表单增强 ：新增 email、url、tel、date、color 等 input 类型；新增 datalist、meter、progress 等元素；新增 placeholder、required、autocomplete、multiple 等属性
其他实用标签 ：details + summary（折叠）、mark（高亮）、time（时间语义）、ruby（拼音）、picture（响应式图片）、<wbr>（软换行）

9. 对比 `<img>` 和 background-image 的使用场景，什么时候该用哪个

考点

<img> 与 CSS background-image 的语义区别
实际项目中的图片使用决策
SEO 和可访问性考量

知识点详解

基本区别

维度	`<img>`	`background-image`
HTML/CSS	HTML 标签	CSS 属性
语义	图片内容	装饰背景
浏览器解析	渲染到 DOM 树	仅视觉呈现，不进入 DOM
加载时机	懒加载可控（`loading="lazy"`）	随 CSS 加载
SEO	可被抓取，可加 alt	不可被抓取
可访问性	有 alt 属性	无 alt
位置控制	由 HTML 结构决定	随父容器定位
多背景	单个图片	可叠加多个 `background-image`
控制	HTML 属性（width/height/alt）	CSS 属性（position/size/repeat）

什么时候用 `<img>`？

场景 1：图片是页面内容的一部分

复制代码

<!-- 产品图片：用户需要看到这张图片来理解内容 -->
<article class="product">
  <img src="laptop.jpg" alt="15寸超薄笔记本电脑，银色机身">
  <h2>超薄笔记本电脑</h2>
  <p>产品描述...</p>
</article>

<!-- 博客文章配图 -->
<img src="diagram.png" alt="HTTP 请求流程图">

<!-- 头像 -->
<img src="avatar.jpg" alt="用户头像">

场景 2：需要 SEO 索引

复制代码

<!-- 电商网站的商品图 -->
<img src="product-001.jpg" alt="2026年新款运动鞋 黑白配色">

场景 3：需要 alt 描述（可访问性）

复制代码

<!-- 屏幕阅读器会读取 alt 文字 -->
<img src="warning-icon.svg" alt="警告：您的账户已过期">

场景 4：需要懒加载

复制代码

<img src="photo.jpg" loading="lazy" alt="照片">

场景 5：需要响应式图片

复制代码

<img
  srcset="small.jpg 480w, medium.jpg 800w, large.jpg 1200w"
  sizes="(max-width: 600px) 480px, (max-width: 1200px) 800px, 1200px"
  src="medium.jpg"
  alt="响应式图片"
>

什么时候用 `background-image`？

场景 1：纯装饰性图片

复制代码

.hero-section {
  /* 用户不需要"看到"这张图片来理解内容，它是背景装饰 */
  background-image: url('hero-bg.jpg');
}

场景 2：需要叠加多层背景

复制代码

.card {
  /* 背景图 + 渐变叠加，<img> 无法实现 */
  background-image:
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
    url('texture.jpg');
}

场景 3：配合 CSS 雪碧图（CSS Sprites）减少请求

复制代码

.icon {
  /* 雪碧图：一张大图包含多个小图标，减少 HTTP 请求 */
  background-image: url('icons.png');
  background-position: -20px -40px;
  width: 20px;
  height: 20px;
}

场景 4：背景图需要随父容器缩放/平铺

复制代码

.pattern-bg {
  background-image: url('pattern.png');
  background-repeat: repeat;     /* 平铺 */
  background-size: 100px 100px;  /* 控制大小 */
  background-attachment: fixed;  /* 固定背景（滚动视差效果） */
}

场景 5：背景图不需要被打印/导出

复制代码

.banner {
  /* 这类装饰性背景通常不需要在打印时出现 */
  background-image: url('banner.jpg');
}

实际决策流程

复制代码

这张图片是"内容"还是"装饰"？
        ↓
  ┌─────────────────────┐
  │ 图片传达重要信息吗？  │
  │ 需要 SEO 索引吗？    │
  │ 需要 alt 描述吗？    │
  └────────┬────────────┘
           │
      Yes ↓          No ↓
   用 <img>      纯 CSS 装饰？
           │          ↓
           │    ┌──────────────┐
           │    │ 需要多图层？ │
           │    │ 需要平铺？   │
           │    │ 需要视差？   │
           │    └───────┬──────┘
           │            ↓
           │       Yes → background-image
           │       No → 都可以，但语义上优先 background-image
           ↓
        用 <img>

性能对比

方面	`<img>`	`background-image`
请求数	独立 HTTP 请求	独立 HTTP 请求（随 CSS 下载）
懒加载	原生 `loading="lazy"`	需要 JS 实现
预加载	`<link rel="preload">`	CSS 无法预加载
渲染优先级	较低（可被 JS 控制）	较高（CSS 解析即加载）

复制代码

<!-- 预加载重要图片 -->
<link rel="preload" as="image" href="hero.jpg">

<!-- 响应式图片最佳实践 -->
<picture>
  <source media="(min-width: 800px)" srcset="hero-large.webp" type="image/webp">
  <source media="(min-width: 800px)" srcset="hero-large.jpg">
  <source srcset="hero-small.webp" type="image/webp">
  <img src="hero-small.jpg" alt="Hero 图片描述">
</picture>

答案

核心判断标准：图片是"内容"还是"装饰"？

用 <img> ：当图片是页面内容的一部分，需要 SEO、需要 alt 描述、需要语义化时使用。例如产品图、文章配图、头像等。

用 background-image：当图片是纯视觉装饰，不需要被索引、不需要 alt 描述、需要叠加多层背景或平铺效果时使用。例如背景纹理、雪碧图、banner 背景等。

简单记忆：用户要看的用 <img>，用户不需要专门看的用 background-image。

10. 什么是 HTML 实体？什么场景下必须使用 HTML 实体？

考点

HTML 实体的概念和语法
需要转义的特殊字符
防止 XSS 攻击

知识点详解

什么是 HTML 实体?

一般来说，日常口语化转移符号

HTML 实体（HTML Entities）是一段以 & 开头、; 结尾的字符串，用于表示 HTML 中的特殊字符。由于 <、>、& 等字符在 HTML 中有特殊含义（标记语言语法），如果直接写在 HTML 中会被浏览器解析为 HTML 代码，而不是普通文本。

HTML 实体的语法

复制代码

<!-- 命名实体 -->
&entity_name;

<!-- 数字实体（Unicode 码点） -->
&#code_point;

<!-- 十进制 -->
&#60;

<!-- 十六进制 -->
&#x3C;

必须使用 HTML 实体的场景

场景 1：显示 HTML 特殊字符

复制代码

<!-- 如果直接写 <div>，浏览器会把它解析为标签而不是文本 -->
❌ <p>小于符号是 < ，大于符号是 > </p>
    <!-- 浏览器解析为: <p>小于符号是 </p> div 被当作标签 -->

✅ <p>小于符号是 &lt;，大于符号是 &gt;</p>
    <!-- 显示为: 小于符号是 <，大于符号是 > -->

场景 2：在 HTML 属性中包含特殊字符

复制代码

<!-- title 属性中有双引号 -->
<a href="#" title="点击这里&quot;查看更多&quot;">链接</a>

<!-- data-* 属性 -->
<div data-info="value&quot;with&quot;quotes">内容</div>

场景 3：显示空格（多个连续空格）

复制代码

<!-- HTML 中多个连续空格会被浏览器合并为一个 -->
❌ <p>这    是    很多    空格</p>
    <!-- 显示为: 这 是 很多 空格（所有空格被合并）

✅ <p>这&nbsp;&nbsp;&nbsp;&nbsp;是&nbsp;&nbsp;很多&nbsp;&nbsp;空格</p>
    <!-- 显示为: 这    是    很多    空格 -->

<!-- 或者使用 CSS white-space -->
<p style="white-space: pre-wrap;">这    是    很多    空格</p>

复制代码

<!-- 不使用实体：© 符号在不同编码下可能显示乱码 -->
✅ &copy; 2026 公司名称        <!-- 显示: © 2026 公司名称 -->
✅ &reg; 2026 公司名称         <!-- 显示: ® 2026 公司名称 -->
✅ &trade; 2026 公司名称       <!-- 显示: ™ 2026 公司名称 -->

场景 5：防止 XSS 攻击（最重要）

当用户输入的内容会作为 HTML 输出时，必须转义特殊字符：

复制代码

<!-- 恶意用户可能在输入框中输入： -->
<script>alert('XSS')</script>

<!-- 如果直接输出用户输入： -->
❌ <div>用户输入: <script>alert('XSS')</script></div>
    <!-- 浏览器会执行 JS！

<!-- 正确做法：转义所有 HTML 特殊字符： -->
✅ <div>用户输入: &lt;script&gt;alert(&#39;XSS&#39;)&lt;/script&gt;</div>

常用 HTML 实体速查表

显示效果	命名实体	数字实体（十进制）	数字实体（十六进制）
`<`	`<`	`<`	`<`
`>`	`>`	`>`	`>`
`&`	`&`	`&`	`&`
`"`	`"`	`"`	`"`
`'`	`'`（非标准）	`'`	`'`
空格	` `	` `	` `
`©`	`©`	`©`	`©`
`®`	`®`	`®`	`®`
`™`	`™`	`™`	`™`
`¥`	`¥`	`¥`	`¥`
`€`	`€`	`€`	`€`
`£`	`£`	`£`	`£`
`×`	`×`	`×`	`×`
`÷`	`÷`	`÷`	`÷`

编程中的实体会话话

在 JavaScript 中，通常使用 DOM API 来避免手动转义：

复制代码

// 错误做法：手动拼接（容易出错）
element.innerHTML = '<p>' + userInput + '</p>';
// 如果 userInput = '<script>alert(1)</script>'，就会触发 XSS

// 正确做法：使用 textContent 自动转义
element.textContent = '<script>alert(1)</script>';
// 显示为纯文本，不会被执行

// React/Vue 等框架默认会转义，防止 XSS
// 但使用 v-html / dangerouslySetInnerHTML 时需要特别注意

// Node.js 后端渲染时，使用专门的转义库
const escapeHtml = require('escape-html');
const safeOutput = escapeHtml(userInput);

答案

HTML 实体是以 & 开头、; 结尾的字符串，用于表示 HTML 中的特殊字符，避免被浏览器解析为 HTML 代码。

必须使用 HTML 实体的场景：

显示 HTML 特殊字符 ：如 <、>、&、"、'
HTML 属性中包含引号 ：属性值中的双引号需用 "
保留多个连续空格 ：用   或 CSS white-space: pre-wrap
防止 XSS 攻击：用户输入的内容在输出到 HTML 页面时必须转义，这是最关键的安全场景

附录：常见面试追问

问题	考察点
DOCTYPE 写在 HTML 之前还是之后？	规范要求 DOCTYPE 是文档第一行
`<script>` 放在 `<head>` 和 `<body>` 底部有什么区别？	渲染阻塞、DOM 访问时机
语义化标签中 `<section>` 和 `<article>` 有什么区别？	语义嵌套规则
`<a>` 标签的 `target="_blank"` 有什么安全隐患？	`rel="noopener noreferrer"`
`<meta http-equiv="X-UA-Compatible">` 为什么 IE=edge 已不推荐？	IE 已淘汰
`<img>` 的 `loading="lazy"` 兼容性和原理？	浏览器原生懒加载
`display: none` 和 `visibility: hidden` 区别？	对布局和可访问性的影响
`<pre>` 标签和普通段落有什么区别？	保留空白字符和等宽字体

显示效果	命名实体	数字实体（十进制）	数字实体（十六进制）
`<`	`<`	`<`	`<`
`>`	`>`	`>`	`>`
`&`	`&`	`&`	`&`
`"`	`"`	`"`	`"`
`'`	`'`（非标准）	`'`	`'`
空格	` `	` `	` `
`©`	`©`	`©`	`©`
`®`	`®`	`®`	`®`
`™`	`™`	`™`	`™`
`¥`	`¥`	`¥`	`¥`
`€`	`€`	`€`	`€`
`£`	`£`	`£`	`£`
`×`	`×`	`×`	`×`
`÷`	`÷`	`÷`	`÷`

显示效果	命名实体	数字实体（十进制）	数字实体（十六进制）
`<`	`<`	`<`	`<`
`>`	`>`	`>`	`>`
`&`	`&`	`&`	`&`
`"`	`"`	`"`	`"`
`'`	`'`（非标准）	`'`	`'`
空格	` `	` `	` `
`©`	`©`	`©`	`©`
`®`	`®`	`®`	`®`
`™`	`™`	`™`	`™`
`¥`	`¥`	`¥`	`¥`
`€`	`€`	`€`	`€`
`£`	`£`	`£`	`£`
`×`	`×`	`×`	`×`
`÷`	`÷`	`÷`	`÷`

干货精讲｜初级 HTML 面试高频考题

目录

1. DOCTYPE 的作用是什么？DOCTYPE 写错或漏写会有什么后果？

考点

知识点详解

DOCTYPE 的作用

写错或漏写的后果------混杂模式（Quirks Mode）

实际影响举例

最佳实践

答案

2. <script> 标签的 async 和 defer 属性有什么区别？应该优先使用哪个？

考点

知识点详解

浏览器的渲染过程（关键前置知识）

三种 script 执行模式对比

实际代码示例

常见使用场景

应该优先使用哪个？

答案

3. 什么是语义化标签？使用语义化标签有什么好处？

考点

知识点详解

什么是语义化标签

常见语义化标签

使用语义化标签的七大好处

语义化标签的常见误区

答案

4. <meta> 标签有哪些常见用法？

考点

知识点详解

语法结构

常见用法分类

最佳实践：一个完整的 <head> 示例

答案

5. href 和 src 的区别是什么？

考点

知识点详解

href 与 src 的基本定义

核心区别

图解对比

加载时机区别

实际开发中的注意事项

答案

6. 行内元素和块级元素有什么区别？有哪些行内元素和块级元素？

考点

知识点详解

行内元素 vs 块级元素

典型块级元素

典型行内元素（HTML5 中称为"文本级语义元素"）

盒模型对比图

HTML5 中的变化：替换元素与显示类型

常见笔试题陷阱

答案

7. title 和 h1 的区别是什么？可以只用 title 不用 h1 吗？

考点

知识点详解

title vs h1：两个完全不同的东西

代码示例

可以只用 title 不用 h1 吗？

SEO 最佳实践：title 与 h1 的关系

常见错误写法

总结

答案

8. HTML5 新增了哪些标签？

考点

知识点详解

一、语义结构标签（最常考）

二、媒体标签

三、表单增强标签和属性

四、其他新增标签

五、已废弃的标签（面试常问）

答案

9. 对比 <img> 和 background-image 的使用场景，什么时候该用哪个

考点

知识点详解

基本区别

什么时候用 <img>？

什么时候用 background-image？

实际决策流程

性能对比

2. `<script>` 标签的 async 和 defer 属性有什么区别？应该优先使用哪个？

4. `<meta>` 标签有哪些常见用法？

最佳实践：一个完整的 `<head>` 示例

`title` vs `h1`：两个完全不同的东西

SEO 最佳实践：`title` 与 `h1` 的关系

9. 对比 `<img>` 和 background-image 的使用场景，什么时候该用哪个

什么时候用 `<img>`？

什么时候用 `background-image`？

显示效果	命名实体	数字实体（十进制）	数字实体（十六进制）
`<`	`<`	`<`	`<`
`>`	`>`	`>`	`>`
`&`	`&`	`&`	`&`
`"`	`"`	`"`	`"`
`'`	`'`（非标准）	`'`	`'`
空格	` `	` `	` `
`©`	`©`	`©`	`©`
`®`	`®`	`®`	`®`
`™`	`™`	`™`	`™`
`¥`	`¥`	`¥`	`¥`
`€`	`€`	`€`	`€`
`£`	`£`	`£`	`£`
`×`	`×`	`×`	`×`
`÷`	`÷`	`÷`	`÷`