当前位置：首页 > article >正文

前端面试题-HTML篇

article 2025/6/2 4:44:35

1. 请谈谈你对 Web 标准以及 W3C 的理解和认识。

我对 Web 标准 的理解是，它就像是互联网世界的“交通规则”，由 W3C（World Wide Web Consortium，万维网联盟） 这样一个国际性组织制定。这些规则规范了我们在编写 HTML、CSS 和 JavaScript 时应该遵循的语法和行为，比如要求标签要正确闭合、使用英文小写字母、避免嵌套混乱，并且强调 语义化标签 的使用。

而 W3C 的作用，就是确保这些规则能够被全球的开发者和浏览器厂商共同遵守。这样做的好处是多方面的：

实现互操作性： 无论用户使用哪种浏览器或设备，网页都能以一致的方式被访问和呈现。这避免了“这个网站只能用IE打开”的尴尬局面。
提升内容可访问性： 遵循标准，尤其是语义化，让屏幕阅读器等辅助技术能更好地理解网页内容，让残障人士也能平等地获取信息，这体现了技术的人文关怀。
优化搜索引擎（SEO）： 语义化的 HTML 结构能帮助搜索引擎爬虫更准确地理解网页内容，从而提高网站在搜索结果中的排名，对网站的推广非常有益。
提高开发效率与维护性： 通过外部引用 CSS 和 JS 脚本，实现 结构（HTML）、样式（CSS）、行为（JavaScript）分离。这就像盖房子，把建筑图纸、装修方案、水电管线图分开，各司其职。这样做的好处是：
- 代码精简、易读： HTML 只关注内容，CSS 只管美化，JS 只管交互。
- 开发组件化、可复用： 比如一个按钮的样式或交互逻辑可以独立抽离，在多个地方重复使用。
- 易于维护与改版升级： 想改版网站配色，只需要修改一个 CSS 文件，而不需要动到上百个 HTML 页面，大大节省了时间和精力。

总之，Web 标准和 W3C 的存在，让我们的 Web 世界更加有序、高效和普惠。

2. HTML 和 XHTML 有什么区别？

HTML 和 XHTML 都是用于创建网页的标记语言，但它们之间存在一些关键的区别，可以理解为 HTML 是一种更“宽松”的语言，而 XHTML 则是更“严格”的 HTML。

HTML (HyperText Markup Language)： 它是我们最常用的网页设计语言。HTML 在语法上相对灵活，例如，一些标签可以不闭合（比如 <br>），标签名可以是大写或小写，属性值可以不用引号。这种灵活性使得早期网页编写更加便捷，但也可能导致一些不规范的代码。
XHTML (eXtensible HTML)： 它是一种基于 XML 的 HTML。XML 的核心特点就是“严格”和“可扩展”。因此，XHTML 继承了 XML 的这些特点，要求开发者在编写时必须遵循更严格的语法规则：
1. 所有元素都必须关闭： 即使是空元素（如 <br>），也必须显式闭合，写作 <br />。
2. 标签名和属性名必须小写： 这与 XML 对大小写敏感的特性一致。
3. 必须有根元素： 整个文档必须包含在一个根元素中，通常是 <html>。
4. 所有属性都必须有值，并且必须用引号括起来。

简单来说，XHTML 的严格性让它更容易被机器解析和处理，因为它符合 XML 的良好格式要求。然而，在实际开发中，XHTML 的严格性也带来了一些不便。由于HTML5 出现后在语法方面重新展现出 HTML 那种较为灵活的特点，同时吸收了 XHTML 强调的语义化等优点，成为了目前主流的网页开发语言。所以，现在我们更多的是在遵循 HTML5 的标准。

3. 什么是静态网页？什么是动态网页？

这是一个很基础但也很重要的问题，它区分了网页内容的生成方式和交互能力。

静态网页：
- 核心特点： 内容是固定的，在服务器上预先生成并存储。当用户访问时，服务器直接把这些事先写好的 HTML、CSS 和 JavaScript 文件发送给浏览器，没有任何实时的数据处理或从数据库中提取数据的过程。
- 生成方式： 就像一本印刷好的书，内容在出版时就确定了。
- 技术组成： 主要是纯 HTML、CSS 和少量 JavaScript。即使页面中包含动画效果，那也是通过 JavaScript 在用户浏览器端实现的视觉效果，与服务器端数据的实时变化无关。
- 适用场景： 适用于内容不经常变动、信息展示为主的网站，比如公司简介、个人作品集、简单的产品介绍页面等。
- 优点： 访问速度快（因为内容无需实时生成）、安全性高、部署简单、对服务器压力小。
动态网页：
- 核心特点： 内容是实时生成的，它会根据用户请求、数据库数据或服务器端逻辑动态地生成 HTML。每次用户访问，页面的内容可能都是不同的，因为它需要后端程序与数据库进行交互，提取数据并构建页面。
- 生成方式： 就像一个点餐系统，你每次点菜，厨房会根据你的订单实时制作，而不是提前做好所有的菜品。
- 技术组成： 除了 HTML、CSS、JavaScript，还需要后端编程语言（如 Java 的 JSP、C# 的 ASP.NET、PHP、Python、Node.js 等）和数据库的支持。
- 适用场景： 适用于内容频繁更新、需要用户交互、个性化展示、涉及大量数据处理的网站，比如电商平台（商品价格、库存）、社交媒体（用户动态）、新闻门户（实时新闻）、论坛、后台管理系统等。
- 优点： 灵活性高、功能强大、用户体验丰富（可以登录、注册、评论、搜索等）。

这里有一个常见的误区需要澄清：
很多人认为有动画的网页就是动态网页，这是不准确的。动画效果完全可以通过前端的 CSS3 或 JavaScript 来实现，这些动画是发生在用户浏览器端的，与网页内容是否由服务器实时生成数据无关。动态网页的“动态”是指数据的动态性，而非视觉上的动态效果。

4. `<!DOCTYPE>` 有什么作用？区分严格模式与混杂模式有何意义？

<!DOCTYPE> 声明在 HTML 文档中扮演着非常重要的角色，它就像一份“契约”或者“使用说明”，告诉浏览器应该用什么规则来解析和渲染这个页面。

<!DOCTYPE> 的作用：
- 它必须位于文档的最前面，也就是 <html> 标签之前。
- 它的核心作用是告知浏览器使用的文档类型规范。浏览器会根据这个声明来选择正确的解析模式，是按照最新的 Web 标准来解析（严格模式），还是为了兼容旧网站而采用更宽松的方式（混杂模式）。
- 如果 <!DOCTYPE> 不存在或者格式不正确，浏览器通常都会进入混杂模式。
区分严格模式与混杂模式的意义：
- 保证渲染的一致性： 这是最重要的意义。
  - 在 严格模式 下，浏览器的排版和 JavaScript 运行会遵循其支持的最高标准。这意味着它会严格按照 W3C 规范来解释 CSS 盒模型（比如盒模型的宽度计算方式）、DOM 操作和 JavaScript 行为，从而确保网页在不同浏览器中都能有高度一致的显示效果。
  - 在 混杂模式 中，页面则会以一种宽松的、向后兼容的方式显示。这种模式主要是为了模拟旧版浏览器（特别是 IE 早期版本）的行为，以防止那些针对老旧浏览器编写的网站无法正常工作。
- 推动 Web 标准化进程： 严格模式的存在，强制开发者编写符合标准的 HTML 和 CSS 代码。这有助于提高整个 Web 的质量和可维护性，减少因浏览器差异带来的兼容性问题。它就像一个“规范器”，引导开发者遵循最佳实践。
- 方便调试与开发： 开发者在严格模式下编写代码，可以更容易地预判页面行为，减少因浏览器差异而产生的意外情况。虽然混杂模式解决了旧网站的兼容性问题，但也增加了新网站开发的复杂性，因为开发者需要考虑在不同模式下的行为差异。

所以，在现代前端开发中，我们始终推荐并且使用简洁的 <!DOCTYPE html> 声明，让页面运行在严格模式下，这样能保证页面的渲染效果更符合预期，减少跨浏览器兼容性的烦恼。

5. 如何调试网页代码？如何查看网页源代码？

调试网页代码和查看源代码是前端开发者日常工作中非常重要的技能。

调试网页代码：
- 最常用的方式是使用浏览器内置的开发者工具。
- 在 Windows 系统下，你可以直接按 F12 键，或者使用组合键 Ctrl + Shift + I。
- 在 macOS 系统下，对应的组合键是 Option + Command + C。
- 打开开发者工具后，你会看到多个面板：
  - Elements (元素)： 用于查看和实时修改 HTML 结构 (DOM) 和 CSS 样式，可以立即看到修改效果。这是我们最常用的面板之一。
  - Console (控制台)： 用于输出 JavaScript 调试信息、报错信息，也可以直接在这里执行 JavaScript 代码。
  - Sources (源代码/源文件)： 用于设置 JavaScript 断点，一步步调试代码，查看变量的值，找出逻辑错误。
  - Network (网络)： 监控页面加载的所有资源（HTML、CSS、JS、图片等），查看它们的加载时间、大小、请求头等，用于性能优化。
  - Performance (性能)： 分析页面运行时性能，如渲染帧率、CPU 使用情况。
  - Application (应用)： 查看和管理本地存储（LocalStorage、SessionStorage）、Cookie、Service Worker 等。
- 通过这些工具，我们可以深入了解网页在浏览器中的运行情况，高效定位和解决问题。
查看网页源代码：
- 这是最直接也最简单的查看方式，你只需要在网页的空白处点击 鼠标右键，然后选择“查看页面源代码”（或者类似“View Page Source”的选项）。
- 这种方式会打开一个新的标签页，显示浏览器从服务器接收到的原始 HTML 文档。
- 需要注意的是： “查看页面源代码”只能看到浏览器最原始的 HTML 文本。如果页面内容是通过 JavaScript 动态生成或修改的（比如单页面应用），你在这里是看不到这些动态内容的，这时就需要借助开发者工具的“Elements”面板来查看实时的 DOM 结构。

所以，查看源代码适用于快速了解页面的初始结构，而开发者工具则是进行深度调试和分析不可或缺的利器。

6. 语义化的主要目的是什么？

语义化是 HTML 编写的一个核心理念，它的主要目的可以概括为：用正确的标签来描述内容的含义和结构，而不是仅仅关注内容的视觉表现。

具体来说，语义化主要有以下几个目的：

提高可访问性（Accessibility）： 这是语义化最重要的目的之一。像屏幕阅读器、盲人阅读器等辅助设备，它们无法“看到”网页的样式，而是通过解析 HTML 结构来理解内容。使用语义化标签（如 <h1> 表示标题，<nav> 表示导航）能让这些设备更准确地理解页面内容的层级和作用，从而以有意义的方式呈现给残障人士，保证信息的无障碍传播。
优化搜索引擎（SEO）： 搜索引擎的爬虫在抓取和索引网页时，会解析 HTML 结构来理解页面内容。语义化标签为爬虫提供了丰富的上下文信息，帮助它们更准确地判断页面的主题、关键词和重要性。例如，搜索引擎会认为 <h1> 中的内容比 <span> 中的内容更重要，从而有助于提高网站在搜索结果中的排名。
提高代码的可读性、可维护性和可重用性： 当开发者看到 <header>、<section>、<footer> 等标签时，他们立刻就能明白这部分内容的用途和在页面中的位置，而不需要猜测一大堆无语义的 <div> 元素究竟代表什么。这使得代码结构更清晰，团队协作更高效，也降低了后期维护和改版的成本。
提供清晰的文档结构（即使没有样式）： 即使在 CSS 样式丢失或未加载的情况下，一个语义化的 HTML 页面也能呈现出清晰、有逻辑的内容结构。用户仍然可以理解标题、段落、列表等内容的层次关系。这保证了网页在不同环境下的基本可用性。
方便其他设备解析： 除了浏览器，还有更多智能设备（如智能音箱、车载系统）需要解析网页内容。语义化能确保这些设备也能以有意义、结构化的方式理解和渲染网页。

举个例子，与其大量使用 <div> 然后通过 CSS 类名来定义其用途（例如 <div class="header">），不如直接使用语义化标签 <header>。这样既简洁又直观，从 HTML 层面就表达了其含义。

7. 锚点的作用是什么？如何创建锚点？

锚点在 HTML 中就像是文档内部的“书签”，它的主要作用是允许用户在同一个网页文档内部进行快速跳转，或者从外部链接直接定位到文档中的特定位置。 当你的页面内容很长时，锚点能极大地提升用户体验，避免用户不断滚动来寻找所需信息。

创建锚点主要有两种方式：

使用 id 属性（推荐的现代方法）：
- 你可以给任何 HTML 元素添加一个唯一的 id 属性，这个 id 值就是你的锚点名称。
- 语法：
```
<h2 id="section-one">第一节内容</h2>
<p>这是第一节的详细内容...</p><section id="contact-us"><h3>联系我们</h3><p>我们的联系方式在这里。</p>
</section>
```
- 然后，你可以创建链接，通过 href 属性指向这个 id。
- 链接语法：
```
<a href="#section-one">跳转到第一节</a><a href="#contact-us">查看联系方式</a>
```
- 当用户点击这些链接时，浏览器会自动滚动到对应的 id 元素所在的位置。
使用 <a> 元素的 name 属性（HTML5 中已废弃，不推荐使用）：
- 在 HTML4 及更早的版本中，可以使用 <a> 标签的 name 属性来创建锚点。
- 语法：
```
<a name="introduction"></a><h3>介绍</h3>
```
- 然后，链接指向方式与 id 属性类似：
```
<a href="#introduction">跳转到介绍</a>
```
- 虽然现在浏览器仍然兼容 name 属性，但根据 W3C 规范，推荐使用 id 属性来创建锚点，因为它更通用，且符合语义。

总结来说，锚点的核心价值在于提供高效的页面内导航，尤其对于长文档非常实用。 此外，在现代前端开发中，锚点（URL 中的 hash 部分）也常常被单页面应用（SPA）用于实现前端路由，不过那里的跳转是由 JavaScript 控制的，不一定会触发页面滚动。

8. 请列举常用的结构标签，并描述其作用。

在 HTML5 中，为了更好地实现语义化和页面结构的清晰，引入了许多新的结构标签。它们取代了过去大量使用 <div> 来进行布局的做法。

以下是一些常用的语义化结构标签及其作用：

<header> 元素：
- 作用： 用于定义文档的页眉。它通常包含网站的标题、Logo、导航链接、搜索表单等。
- 特点： 一个文档可以有多个 <header>，比如整个页面的页眉，也可以是 <article> 或 <section> 内部的头部。
<nav> 元素：
- 作用： 用于定义页面的导航链接部分。它主要包含网站的主要导航菜单、面包屑导航、页面内快速跳转链接等。
- 特点： 其中的链接通常是网站的核心导航，引导用户访问不同的页面或内容。
<section> 元素：
- 作用： 用于定义文档中的一个通用独立节。它表示文档中一个具体的、主题相关的组成部分，通常会有一个标题（<h1> 到 <h6>）。
- 特点： 不仅仅用于样式目的，而是应该有明确的内容分组意义。比如，一个新闻网站的“体育新闻”模块，一个博客文章的“评论区”，都可以用 <section>。
<article> 元素：
- 作用： 常用于定义独立于文档其他部分的完整、独立的内容。这意味着其内容即使脱离上下文也能被理解。
- 特点： 比如一篇完整的博客文章、一个新闻报道、一个用户评论、一个产品卡片等，都非常适合用 <article>。一个页面可以包含多个 <article>，每个 <article> 内部可以有自己的 <header> 和 <footer>。
<footer> 元素：
- 作用： 常用于定义某区域的脚注信息。
- 特点： 通常包含版权信息、联系方式、备案信息、友情链接等。它可以是整个文档的页脚，也可以是 <article> 或 <section> 内部的脚注。
<aside> 元素：
- 作用： 常用于定义页面的一些额外组成部分，这些内容与主内容相关，但又可以独立存在，通常放在主内容的旁边。
- 特点： 比如广告栏、侧边栏、相关文章推荐、作者简介、引用信息等。

这些结构标签使得 HTML 代码更加语义化、可读性更强，并且对 SEO 和可访问性都有显著的提升。它们鼓励我们在设计页面时，先考虑内容的逻辑结构，再进行样式美化。

9. 超级链接有哪些常见的表现形式？

超级链接，也就是我们通过 <a> 元素创建的链接，是构建万维网互联互通性的核心。它有多种常见的表现形式，每种都服务于不同的目的：

普通超级链接：
- 作用： 最常见也最基础的形式，用于链接到另一个网页、网站，或者文档中的某个资源。
- 语法示例： <a href="https://www.google.com" target="_blank" >，target属性可以控制链接的打开方式，例如 _blank 会在新标签页或窗口中打开。
下载链接：
- 作用： 当链接的目标是一个可下载的文件（如压缩包、PDF、图片等）时，点击后浏览器会提示用户下载该文件。
- 语法示例： <a href="document.pdf" download>
空链接（或回到顶部链接）：
- 作用： href 属性为空字符串或 # 时，常用于一些特殊场景。
  - 回到顶部： <a href="#">回到顶部</a> 或 <a href="">回到顶部</a>。点击后页面会滚动到顶部，但不会刷新。
  - 占位符/触发 JS： 在一些前端框架或特定交互中，href="#" 有时会作为一个占位符，阻止链接的默认跳转行为，然后通过 JavaScript 来实现点击后的逻辑（如打开弹窗）。
- 语法示例： <a href="#">...</a>
锚点跳转（页面内跳转）：
- 作用： 用于在当前文档内部进行跳转，快速定位到页面的某个特定部分（前面已经详细讨论过）。
- 语法示例： <a href="#section-id">跳转到某节</a>
JavaScript 代码功能链接（伪协议）：
- 作用： 这种形式不用于跳转到实际的 URL，而是用于执行一段 JavaScript 代码。
- 语法示例： <a href="javascript:void(0);">点击这里</a>
- javascript:void(0); 表示执行一段 JavaScript 代码，void(0) 的作用是返回 undefined，从而防止浏览器进行任何默认的页面跳转。这种方式常用于在点击链接时触发 JavaScript 函数，而无需实际的页面跳转。
- 注意： 尽管这种方式很常用，但在现代 Web 开发中，更推荐的做法是使用 JavaScript 的 addEventListener 方法来为元素绑定事件，从而将 HTML 结构和 JavaScript 行为更好地分离。

这些表现形式共同构成了 Web 链接的丰富生态，让用户能够高效地在互联网上进行信息获取和交互。

10. 你测试过哪些浏览器的页面？它们的内核分别是什么？

在日常的前端开发中，我通常会测试主流的浏览器，因为它们占据了绝大部分的市场份额。它们的内核是决定页面渲染和 JavaScript 执行的关键：

Google Chrome：
- 早期： 使用 WebKit 内核。
- 现在（2013 年起）： 大部分版本使用 Blink 内核。Blink 是 Google 在 WebKit 基础上开发的一个分支。它是目前市场份额最大的渲染引擎。
- JavaScript 引擎： V8 引擎。
Mozilla Firefox：
- 内核： Gecko。这是 Mozilla 基金会自主研发的开源内核，以其较早拥抱 Web 标准而闻名。
- JavaScript 引擎： SpiderMonkey。
Apple Safari：
- 内核： WebKit。Safari 是 WebKit 的主要开发者和使用者。
- JavaScript 引擎： JavaScriptCore。
Microsoft Edge：
- 旧版 Edge (基于 EdgeHTML)： 微软自研的 EdgeHTML 内核。
- 新版 Edge (Chromium 内核，2019 年起)： 已经转向了和 Chrome 一样的 Blink 内核。这意味着新版 Edge 的渲染和性能表现与 Chrome 非常接近。
- JavaScript 引擎： Chakra（旧版 Edge），V8（新版 Edge）。
Opera：
- 早期： 使用 Presto 内核，以其小巧快速著称。
- 现在： 在 2013 年之后，Opera 也转向了 Blink 内核。
Internet Explorer (IE)：
- 内核： Trident。这是微软早期 IE 浏览器的专有内核，由于对 Web 标准的支持不力以及更新缓慢，给前端开发者带来了很多兼容性问题。现在 IE 已经逐渐被淘汰，很少会再进行大规模测试了。

所以，目前我们主要关注 Chrome (Blink)、Firefox (Gecko)、Safari (WebKit) 和新版 Edge (Blink) 的兼容性。了解这些内核对于调试跨浏览器兼容性问题非常有帮助。

11. `div` 是什么？在 `div` 出现之前用什么做网站布局？

div 是什么？
- div 是 HTML 中一个非常基础且常用的 块级通用容器标签（division 的缩写）。
- 它本身没有任何语义，就像一个“空白的盒子”，它的主要作用是把文档内容进行逻辑上的分组。
- 一旦内容被 div 分组后，我们就可以方便地通过 CSS 对这个 div 及其内部内容进行样式设置（比如设置宽度、高度、边距、背景颜色等），或者通过 JavaScript 对它进行操作（比如动态添加、删除内容，或修改样式）。
- 可以理解为，div 是 HTML 结构与 CSS 样式和 JavaScript 行为之间连接的桥梁。
在 div 出现之前用什么做网站布局？
- 在 div 和 CSS 布局（比如浮动、定位、Flexbox、Grid）普及之前，网站布局主要依靠 <table> (表格) 标签来实现。
- 开发者会用 <table>、<tr> (行)、<td> (单元格) 来构建整个页面的网格结构，把页面的各个部分（如头部、导航、内容区、侧边栏、底部）塞进表格的单元格里。
为什么 table 布局被淘汰了，而 div 布局流行起来？
- 语义滥用： <table> 标签的本意是用于呈现表格数据（如统计数据、日程表等）。用它来做整个网站的布局，是严重滥用了其语义，使得 HTML 结构不符合内容的真实含义。这对搜索引擎优化和可访问性都非常不利。
- 加载慢 (无法局部渲染)： 浏览器在渲染 <table> 布局时，通常需要等到整个表格的所有内容（包括所有行和列）都被下载和解析完毕后，才能开始整体渲染。这意味着即使页面的头部内容已经准备好，用户也可能无法立即看到，从而导致页面加载感知很慢。而 div 配合 CSS 布局可以实现 局部渲染，浏览器可以下载一部分内容就显示一部分，提升用户体验。
- 布局层级不清晰，维护困难： 复杂的 table 嵌套会导致 HTML 代码非常臃肿、可读性极差，像“表格嵌套地狱”。修改布局时，往往需要改动大量的表格结构，牵一发而动全身，维护成本极高。
- 可访问性差： 屏幕阅读器等辅助设备在处理表格布局时，可能会将其误认为是数据表格，导致阅读顺序混乱，给视障用户带来困扰。

所以，div 的出现配合 CSS 极大地推动了 结构与样式分离 的理念，让网页布局变得更加灵活、语义化、高效和易于维护。当然，随着 HTML5 新语义化标签的出现，我们现在也提倡在有更合适语义标签时，优先使用它们（如 <header>, <main>, <section> 等），而不是仅仅依赖 div。

12. `img` 标签上的 `title` 和 `alt` 属性的区别是什么？

<img> 标签的 title 和 alt 属性都用于为图片提供额外信息，但它们的侧重点和作用是完全不同的。

alt 属性 (替代文本)：
- 作用： 它的功能是提供图片的替换文案或替代文本（Alternative Text）。
- 显示时机： 当图片无法正常显示时（比如网络加载失败、图片路径错误、用户关闭了图片显示、或者用户使用的是屏幕阅读器等辅助设备时），alt 属性中定义的文本就会显示出来，用来代替图片。
- 重要性：
  - 可访问性 (Accessibility)： 这是 alt 最重要的作用。屏幕阅读器会朗读 alt 文本，让视障用户了解图片的内容和意义。
  - 搜索引擎优化 (SEO)： 搜索引擎爬虫无法“看到”图片，它们主要通过 alt 文本来理解图片的内容和上下文，这对于图片的索引和搜索排名非常重要。
  - 语义： alt 属性应该简洁、准确地描述图片的内容和功能，它就是图片的“文字等价物”。
- 规范： 在 HTML 规范中，alt 属性是 <img> 标签的强制属性（除非有特殊情况可以省略）。
title 属性 (提示信息)：
- 作用： 它的功能是为元素提供“标题信息”或“额外提示”。
- 显示时机： 当用户将光标悬浮在带有 title 属性的元素上时（例如，鼠标停留在图片上），浏览器会显示一个小的工具提示（tooltip），显示 title 属性中的文本。
- 重要性：
  - 用户体验： 它可以为用户提供额外的上下文信息、补充说明或者更详细的解释，但它不是图片内容的替代。
  - 非强制性： title 属性是可选的，根据需求添加。

简单总结它们的区别：

alt 是图片的“文字替身”： 当图片不在时，它出现。它的核心是提供内容描述，解决有无问题。
title 是图片的“文字说明”： 当图片在时，鼠标悬停才显示。它的核心是提供补充信息，解决更多信息问题。

最佳实践是： 始终为 <img> 标签添加有意义的 alt 属性，确保可访问性和 SEO。title 属性则可以根据需要添加，用于提供有用的补充信息。

13. 空元素有哪些？

“空元素”，或者我们常说的“单标签元素”或“自闭合标签”，指的是那些没有内容（即不能包含子元素或文本）的 HTML 元素。它们只需要一个起始标签，不需要结束标签。

它们的“空”是因为它们的意义完全由其属性（attributes）来定义，而不是通过包裹内容。

以下是一些知名的常用空元素：

<br> (Break)： 插入一个单一的换行符。
- 示例：<p>第一行文字<br>第二行文字</p>
<hr> (Horizontal Rule)：
- 作用： 表示一个主题性的分隔符，通常在视觉上表现为一条通常在视觉上表现为一条水平线。它用于将文档中的内容进行逻辑上的分割，区分不同的段落或主题
<img> (Image)：
- 作用： 用于在文档中嵌入一张图片。图片的内容由 src 属性指定，而 alt 属性提供替代文本。
- 示例： <img src="logo.png" alt="公司 Logo">
<input> (Input)：
- 作用： 用于创建交互式控件，以便用户输入数据。它的类型由 type 属性决定，可以是文本框、密码框、复选框、单选按钮、提交按钮等。
- 示例： <input type="text" name="username">
<link> (Link)：
- 作用： 用于在文档与外部资源之间建立链接关系，最常见的用途是链接外部 CSS 样式表，或者定义网站的图标（favicon）。
- 示例： <link rel="stylesheet" href="styles.css">
<meta> (Metadata)：
- 作用： 用于定义文档的元数据。这些元数据不会直接显示在页面上，但对浏览器（如字符集）、搜索引擎（如关键词、描述）和其他用户代理（如视口设置）非常重要。
- 示例： <meta charset="UTF-8"> (指定文档字符编码)

总结来说，空元素都有一个共同特点：它们自身不包含任何文本或子元素，其功能和意义都通过自身的属性来表达。 在 HTML5 中，这些空元素可以更简洁地书写，比如 <img> 而不是 <img />。但在 XHTML 或为了保持代码风格一致性，很多开发者仍然习惯使用自闭合的斜杠形式（如 <img />）。无论是哪种形式，它们的本质都是“空元素”——不包含内容的标签。理解这些空元素的用途，是构建有效和语义化 HTML 的基础。

14. 简述一下 `src` 与 `href` 的区别。

src 和 href 都是 HTML 中常用的属性，用于引用外部资源，但它们的核心区别在于“引入”和“引用”。

src (Source，来源)：
- 表示“引入”或“嵌入”。 当浏览器解析到 src 属性时，它会暂停当前文档的解析和渲染（尤其是同步加载的脚本），立即发起对 src 指定资源的请求。
- 一旦资源加载完成，它会将其内容“嵌入”或“替换”到当前元素所在的位置，成为页面内容不可或缺的一部分。
- 常见用途：
  - <img src="image.jpg">： 图片文件被加载并显示在 <img> 元素的位置。
  - <script src="script.js"></script>： 外部 JavaScript 文件被加载并立即执行，其代码逻辑成为页面行为的一部分。
  - <iframe src="other_page.html"></iframe>： 另一个 HTML 页面被加载并嵌入到 iframe 框架中。
  - <video src="movie.mp4"> / <audio src="song.mp3">： 媒体文件被加载并在元素中播放。
- 对页面加载的影响： src 引用的资源通常是页面渲染或功能所必需的，可能会阻塞后续的 HTML 解析和渲染。
href (Hypertext Reference，超文本引用)：
- 含义： href 表示“超文本引用”或“链接”。它用于在当前文档与外部资源之间建立一种关联关系，但该资源的内容并不会立即嵌入到当前文档中。它更多的是指一个指向外部资源的“超链接”。
- 加载行为： 浏览器通常不会立即加载 href 指向的资源，而只是将其作为一个引用。只有当用户点击链接（<a> 标签）或浏览器需要应用样式（<link> 标签）时，才会去请求并处理该资源。它通常不会阻塞当前文档的解析和渲染。

常见应用场景：

<a> 标签： <a href="page.html">跳转到页面</a> - 定义一个超链接，点击后会跳转到 page.html。

<link> 标签： <link rel="stylesheet" href="styles.css"> - 引用外部 CSS 样式表。浏览器会加载 CSS 文件并将其样式应用到当前页面，但 CSS 文件本身不会被“嵌入”到 HTML 内容中。

<base> 标签： 定义页面中所有相对 URL 的基准 URL。

总结： href 的内容与该页面有关联，是“引用”或“链接”。它指明了一个外部资源的位置，但不会将该资源的内容直接集成到当前文档流中。

简单来说，它们的区别就是：

src 是“引入”，即拿过来用，成为自身一部分。 就像买菜回来做饭，菜变成了饭的一部分。

href 是“引用”，即指明关系，但内容独立。 就像一张地图上的标记，告诉你目的地在哪里，但目的地本身没有移动到地图上。

在实际开发中，正确使用 src 和 href 对于页面的加载性能、用户体验和维护性都至关重要。

15. 简述一下<strong><em> 和<b><i> 标签的区别。

这四对标签都与文本的强调或视觉效果相关，但它们最本质的区别在于语义化与视觉表现的分离。

<strong> 和 <em> (语义化标签 / 表达元素)：
- <strong>：
  - 语义： 表示“强烈的重要性（strong importance）”。它告诉浏览器、搜索引擎和屏幕阅读器，被包裹的内容具有非常重要的意义。
  - 默认视觉： 大多数浏览器默认会以粗体显示 <strong> 标签包裹的文本。
  - 例子： “警告：请勿酒后驾车。”这里的“警告”是非常重要的信息，应该用 <strong>。
- <em> (emphasis)：
  - 语义： 表示“强调（emphasis）”。它用于突出显示一段文本，表示其语调或语气上的强调，或者是在句子中改变其意义。
  - 默认视觉： 大多数浏览器默认会以斜体显示 <em> 标签包裹的文本。
  - 例子： “我真的很喜欢你。”这里的“真的”是为了强调语气。
- 共同点： 它们的核心目的是传达文本的语义意图，而不是单纯的视觉效果。它们的视觉表现可以通过 CSS 随意改变，但其内在的语义是不会变的。这对于可访问性（屏幕阅读器会根据语义读出不同语调）和 SEO（搜索引擎会根据语义判断内容重要性）至关重要。
<b> 和 <i> (视觉化标签 / 非语义化元素)：
- <b> (bold)：
  - 语义： 无语义。它纯粹用于视觉上的“加粗”。它不传达任何语义上的重要性，仅仅是为了让文本看起来更粗。
  - 默认视觉： 浏览器默认以粗体显示。
- <i> (italic)：
  - 语义： 无语义。它纯粹用于视觉上的“斜体”。同样不传达语义，仅仅是为了让文本看起来是斜体。
  - 默认视觉： 浏览器默认以斜体显示。
- 共同点： 它们是“表现元素”，其存在是为了直接影响文本的视觉样式。它们没有内在的语义含义，只提供一种默认的视觉呈现。

选择建议：

优先使用 <strong> 和 <em>： 如果你想要强调一段文字，并且这种强调具有语义上的意义（即这段文字真的比其他部分更重要，或需要特别突出），那么就应该使用 <strong> 或 <em>。这是更符合 Web 标准和语义化理念的做法。
谨慎使用 <b> 和 <i>： 只有当你仅仅是为了在视觉上加粗或斜体一段文字，而这段文字本身没有额外的语义重要性时，才考虑使用 <b> 和 <i>。但即便在这种情况下，更好的实践通常是使用 CSS 来控制样式（例如 font-weight: bold; 或 font-style: italic;），这样能够更好地实现结构与样式的彻底分离。

简单来说，记住：<strong> 和 <em> 是“为什么重要”，<b> 和 <i> 只是“看起来像什么”。

16. 在新窗口打开链接的方法是什么？

在 HTML 中，在新窗口或新标签页打开链接的方法非常简单，就是使用 <a> 标签的 target 属性，并将其值设置为 _blank。

语法：

<a href="https://example.com" target="_blank">点击我，在新窗口打开</a>

简单解释：

href 属性：指定了链接的目标 URL。
target 属性：指定了在何处打开被链接的文档。
- _blank：这是关键值，它告诉浏览器在一个全新的、空白的窗口或标签页中加载链接。

需要注意的一点是安全性：
当你使用 target="_blank" 打开外部链接时，为了防止一种被称为“Tabnabbing”的安全漏洞（新打开的页面可以通过 JavaScript 访问并操纵原始页面），建议同时添加 rel="noopener noreferrer" 属性。

更安全的写法：

<a href="https://example.com" target="_blank" rel="noopener noreferrer">点击我，在新窗口打开（更安全）</a>

noopener：阻止新页面访问原始页面的 window.opener 对象。
noreferrer：阻止浏览器发送 Referer（来源）头信息到新页面，保护用户隐私。

虽然这只是一个小细节，但在实际项目中，考虑到用户体验和安全性，加上 rel 属性是一个非常好的习惯。

17. HTML、CSS、JavaScript 的关系是什么？

HTML、CSS 和 JavaScript 被称为 Web 前端开发的“三驾马车”或者“铁三角”，它们各自承担着不同的职责，但又紧密协作，共同构建出我们所见的丰富多彩的网页和 Web 应用。它们之间的关系可以这样理解：

HTML (HyperText Markup Language) - 网页内容的“骨架”或“结构”：
- 职责： HTML 是网页内容的载体，它定义了网页的结构和语义化内容。它就像一栋建筑的钢筋骨架和房间布局图，规定了页面上有什么元素，以及这些元素之间的层次关系和含义。
- 决定“页面上有什么？” (What is on the page?)： 它用于组织文本、图片、视频、表单、标题、段落、列表等各种元素，给它们赋予语义化的含义。例如，<p> 表示段落，<h1> 表示一级标题，<img> 表示图片。用户在浏览器中看到的文字、图片、视频等所有信息，都是通过 HTML 元素承载和组织的。
CSS (Cascading Style Sheets) - 网页的“表现”或“样式”：
- 职责： CSS 是网页内容的表现，它负责定义网页的视觉样式和布局。如果说 HTML 是建筑的骨架，那么 CSS 就是室内的装修和外观设计，它决定了骨架如何被装饰、如何呈现。
- 决定“页面看起来怎么样？” (How does the page look?)： 它用来改变内容的外观，让网页变得美观、有吸引力。比如，设置文字的颜色、字体大小、背景图片、元素的宽度和高度、边框样式、边距和填充，以及更复杂的布局（如浮动、定位、弹性盒模型、网格布局）以及各种视觉效果。
- 分离性： CSS 的引入实现了“结构与样式分离”，使得 HTML 可以专注于内容，而样式可以通过外部文件集中管理，大大提高了代码的复用性、可维护性和加载效率。
JavaScript - 网页的“行为”或“交互”：
- 职责： JavaScript 是一种高级的、解释型的编程语言，它为网页带来了动态性、交互性和功能性。它就像赋予建筑生命和智能，让它能够响应用户的操作，执行各种逻辑，实现复杂的行为。
- 决定“页面如何响应交互？” (How does the page behave?)： 它用于实现各种动态效果、用户交互、数据处理、与服务器进行异步通信（如 Ajax、Fetch API）、数据验证、内容动态生成或修改 DOM（文档对象模型）等。
- 示例：
  - 当用户点击某个按钮时，弹出一个对话框或者改变某个元素的可见性。
  - 表单提交前对用户输入进行实时验证，提供即时反馈。
  - 实现图片轮播、手风琴菜单、选项卡切换等复杂动画和动态效果。
  - 从服务器获取实时数据（例如股票价格、天气信息）并动态更新页面内容。
  - 响应鼠标悬停、键盘输入等事件，提供更丰富的用户体验。

总结它们的关系，就是“分工明确，紧密协作，共同构建 Web 体验”：

HTML 提供了内容和结构 (骨架)。 它是网页的基石，定义了页面的所有元素和它们的组织方式。
CSS 美化了这些内容和结构 (装修)。 它赋予网页美观的外观，控制着颜色、布局、排版等视觉元素，让用户看到一个吸引人的界面。
JavaScript 让这些内容和结构动起来，并响应用户的操作 (智能和行为)。 它是网页的灵魂，实现了动态功能和用户交互，让网页不再是静态图片，而是能与用户对话、提供服务的应用。

这三者相互依赖、缺一不可。一个没有 CSS 的 HTML 页面虽然可以显示内容，但会非常朴素；一个没有 JavaScript 的网页则无法实现任何动态交互。这种“结构、样式、行为分离”的模式是现代 Web 前端开发的核心理念。它不仅使得代码更易于维护、扩展和团队协作，也极大地提高了页面的加载性能和可访问性。三者共同构成了现代 Web 页面的完整、动态、交互式体验。

18. 在一个特定的框架中如何使用 HTML 中的超链接定位？

在 HTML 中，如果你想要在一个特定的 <iframe> 框架中打开超链接的文档，你需要使用 <a> 标签的 target 属性，并将其值设置为该 <iframe> 的 name 属性值。

具体步骤如下：

为 <iframe> 设置 name 属性：
首先，你需要在你的 HTML 页面中定义一个 <iframe> 元素，并给它一个唯一的 name 属性。这个 name 就是你将要用来定位的“框架名称”。
```
<iframe src="initial_content.html" name="myframe" width="600" height="400"></iframe>
```

在 <a> 标签中使用 target 属性：
然后，当你创建超链接时，将 <a> 标签的 target 属性设置为你在第一步中定义的 iframe 的 name 值。

<a href="newpage.html" target="myframe">在新框架中打开新页面</a><a href="external_site.html" target="_top">在顶级窗口打开外部网站</a>

作用与应用场景：

这种方法允许你在不刷新整个页面的情况下，更新 <iframe> 内部的内容。
在 Web 早期，这种技术常用于构建带有固定导航栏和可变内容区域的网站（即框架集，虽然 <frameset> 标签在 HTML5 中已废弃，但 <iframe> 依然在使用）。
现在，它也常用于嵌入第三方内容（如广告、地图、视频播放器），并通过 target 属性控制嵌入内容中的链接是在 iframe 内部跳转，还是在主页面中打开。

需要注意的是：
尽管这种方式可以实现局部内容的更新，但在现代前端开发中，出于 SEO、用户体验（比如浏览历史管理）和安全性（如点击劫持）等方面的考虑，直接使用 <iframe> 来做页面主体布局的情况已经越来越少。更多时候，我们倾向于使用 Ajax、前端路由、组件化等技术来实现更灵活和高性能的局部内容更新。然而，了解 target 属性在框架中的作用仍然是很重要的 HTML 知识。

19. 请你说说 `<iframe>` 有哪些优点。

<iframe>（Inline Frame）作为 HTML 中的一个内联框架元素，允许我们将一个独立的 HTML 文档嵌入到当前文档中。尽管它有一些缺点，但在特定场景下，它的优点是非常突出的。

<iframe> 的优点主要体现在以下几个方面：

解决加载缓慢的第三方内容问题 (隔离性)：
- 独立加载： <iframe> 内部的文档是独立于主页面进行加载和渲染的。这意味着即使 <iframe> 内的内容（比如第三方广告、复杂的社交媒体插件、地图或分析脚本）加载缓慢或出错，它也不会阻塞或影响主页面的正常显示和交互。
- 用户体验： 用户可以先看到并操作主页面，而 <iframe> 中的内容则在后台异步加载，这提升了用户对页面加载速度的感知。
- 资源分离： 它可以将主页面和嵌入内容的资源（CSS、JS、图片等）分开管理和加载。
实现安全沙箱 (Security Sandbox)：
- 同源策略： 浏览器对 <iframe> 中的内容执行严格的“同源策略（Same-Origin Policy）”。默认情况下，如果 <iframe> 中的内容与主页面不是同源（协议、域名、端口任一不同），那么 <iframe> 内的脚本就无法直接访问或操作主页面的 DOM、JavaScript 变量或 Cookie，反之亦然。这大大增强了安全性，防止恶意嵌入内容对主页面造成危害。
- sandbox 属性： HTML5 引入了 sandbox 属性，可以对 <iframe> 内的权限进行更细粒度的控制，例如禁用脚本执行、表单提交、弹出窗口等。这使得 <iframe> 成为一个理想的“沙箱环境”，用于运行或展示不受信任的第三方代码和内容，从而提高主页面的安全性。
实现并行加载脚本：
- 由于 <iframe> 内部的文档是完全独立的，其内部的 JavaScript 脚本加载和执行不会阻塞主页面的渲染和脚本执行（通常情况下）。这对于需要在后台加载大量脚本或执行复杂计算，但又不想影响主页面响应速度的场景非常有用。
- 例如，一些数据统计、性能监控脚本，可以通过 <iframe> 来加载，减少对主页面渲染流程的干扰。

总结来说，<iframe> 的核心优势在于其隔离性和独立性，这使得它在处理第三方内容、构建安全沙箱以及实现某些并行加载策略方面具有独特的价值。

20. 请你说说 `<iframe>` 有哪些缺点。

尽管 <iframe> 有其独特的优点，但它也存在一些明显的缺点，这些缺点在现代 Web 开发中，使得它在大多数情况下不再是首选的页面内容嵌入方式。

<iframe> 的缺点主要有以下几个方面：

会阻塞主页面的 onload 事件：
- 当浏览器加载一个页面时，它会触发一系列事件。window.onload 事件（或 jQuery 中的 $(window).load()）会在页面上的所有资源（包括图片、CSS、JavaScript 以及所有 <iframe> 内部的资源）都加载并渲染完成后才触发。
- 这意味着，即使主页面的内容已经加载完毕并可见，但只要 <iframe> 内部的内容（特别是那些体积大、加载慢的资源）还没有完全加载完成，主页面的 onload 事件就不会触发。这会给用户带来页面“加载缓慢”的感觉，影响用户体验。
iframe 的内容即使为空，加载它也需要时间：
- 即使你给 <iframe> 的 src 属性指向一个非常小或者甚至是一个空白的 HTML 文件，浏览器仍然需要执行一系列操作：发起 HTTP 请求获取这个文件、为 iframe 创建一个独立的文档上下文（包括独立的 DOM 树、CSSOM 树）、进行解析和渲染。
- 这些操作都会消耗网络资源、CPU 资源和内存。即使文件内容很小，这些必要的开销也无法避免，从而增加页面的整体加载负担。
iframe 元素没有语义：
- <iframe> 本身只是一个纯粹的容器，它告诉浏览器“这里有一个嵌入的文档”，但它并没有描述嵌入内容的“类型”或“意义”。这与 HTML5 中的语义化标签（如 <article>、<nav>）形成对比。
- 对 SEO 的影响： 搜索引擎爬虫在处理 <iframe> 内容时可能会遇到困难。有些搜索引擎可能不会抓取 <iframe> 内部的内容，或者即使抓取了，也可能认为 <iframe> 中的内容与主页面的相关性较低，从而可能影响页面的搜索引擎排名。
- 对可访问性的影响： 屏幕阅读器等辅助技术在处理 <iframe> 时可能需要特殊处理，有时会混淆用户，因为它无法直接从 <iframe> 标签本身获取到内容的语义信息。
可能影响用户体验和可用性：
- 历史记录： 使用 <iframe> 会破坏浏览器的前进/后退历史记录，用户在 iframe 中进行的导航不会反映在主浏览器的历史中，这会给用户带来困惑。
- URL 管理： iframe 的内容有自己的 URL，但主页面的 URL 不变，这使得分享特定 iframe 内容变得困难。
- 响应式设计： 使得响应式设计变得更加复杂，因为你需要同时管理主页面和 iframe 内部的响应式布局。

鉴于这些缺点，在现代 Web 开发中，除非确实需要 <iframe> 的隔离性、安全性或并行加载的特性（例如嵌入广告、地图、视频），否则我们通常会优先选择其他更先进的技术来替代 iframe，比如：使用 Ajax/Fetch API 动态加载内容、使用 前端路由 实现单页面应用的内容切换、或者利用 Web Components 和 Shadow DOM 实现组件的封装和隔离。

21. 说说你对语义化的理解。

我对语义化的理解是：编写 HTML 代码时，不仅仅要考虑内容的视觉呈现（比如它是粗体还是斜体），更要选择那些能够准确表达内容“含义”和“结构”的标签。 简单来说，就是“用正确的标签做正确的事情”。

语义化带来的价值是多方面的，它对整个 Web 生态系统都非常重要：

提升可访问性 (Accessibility)：
- 这是语义化最核心的目的之一。对于视觉障碍用户来说，他们依赖屏幕阅读器等辅助设备来“听取”网页内容。如果我们的 HTML 代码语义清晰（比如用 <h1> 表示标题，<nav> 表示导航），屏幕阅读器就能准确地理解内容的层级和作用，并以有意义的方式（如朗读标题、识别导航链接、跳过非主要内容）呈现给用户，从而帮助他们平等地获取信息。
- 想象一下，如果所有内容都是 <div>，辅助设备就很难判断哪些是重要信息，哪些是辅助信息。
优化搜索引擎（SEO）：
- 搜索引擎的爬虫在抓取和索引网页时，它们无法像人一样“看”到页面的视觉效果，而是通过解析 HTML 结构来理解页面内容。
- 语义化标签为爬虫提供了丰富的上下文线索，帮助它们更准确地识别页面的主题、关键词和内容的权重。比如，搜索引擎会认为 <h1> 中的内容比 <p> 中的内容更重要，从而有助于提高网站在搜索结果中的排名。这对于网站的曝光和流量至关重要。
提高代码的可读性、可维护性和团队协作效率：
- 当代码具备良好的语义时，开发者阅读和理解代码会变得非常容易。看到 <header>、<nav>、<article>、<footer> 等标签，即使不看 CSS，也能立刻明白这部分内容在页面中的功能和位置。
- 这对于团队开发和后期维护来说，能极大地降低沟通成本和学习曲线，让新成员能更快上手，老成员也能更高效地进行功能迭代和问题修复。它让代码变得像一本有目录、有章节的书。
提供清晰的文档结构（即使样式丢失）：
- 如果因为某种原因（比如 CSS 文件加载失败、用户禁用样式），网页失去了所有的样式，一个语义化的 HTML 页面仍然能够呈现出清晰、有逻辑的内容结构。标题依然是标题、段落依然是段落、列表依然是列表。
- 这确保了网页在极端情况下的基本可用性和信息可读性，而不是一堆混乱的文字。
适应未来发展和跨设备兼容性：
- 随着 Web 技术的不断发展，会有更多智能设备（如智能音箱、AI 助手、物联网设备）需要解析和理解 Web 内容。语义化能确保这些设备也能以有意义、结构化的方式处理网页信息。
- 它也是遵循 W3C 标准的重要组成部分，有助于减少浏览器间的差异，使得网页能够被更广泛的设备和用户代理以一致的方式访问。

总的来说，语义化不仅仅是一种编码习惯，它更是构建健壮、可访问、对机器友好、易于维护和扩展的 Web 内容的基石。它是从“看得见”的视觉表现，深入到“意义”和“结构”的本质，真正提升了 Web 作为信息载体的内在价值。

HTML 主要考察对 HTML 基本概念的认知深度，以及是否理解语义化、Web 标准这些更深层次的理念。这些问题虽然看起来基础，但往往能看出一个开发者是否真正理解 Web 的工作原理和最佳实践。尤其像<!DOCTYPE>这种我们每天都在写，但很容易忽视其背后意义的细节，更是考察的重点。