【前端面试题】：HTML篇

1.对 WEB 标准以及 W3C 的理解？

web 标准简单来说可以分为结构、表现和行为。其中结构主要是由 HTML 标签组成。通俗点说，在页面 body 里面我们写入的标签都是页面的结构。表现即指 css 样式表，通过 css 可以使页面的结构标签更具美感。行为是指页面和用户具有一定的交互，同时页面结构或者表现发生变化，主要是有 js 组成。web 标准一般是将该三部分独立分开，使其更具有模块化。但一般产生行为时，就会有结构或者表现的变化，也使这三者的界限并不那么清晰。

W3C 对 web 标准提出了规范化的要求，也就是在实际编程中的一些代码规范:包含如下几点:

对于结构要求:

• 标签字母要小写;
• 标签要闭合;
• 标签不允许随意嵌套。

对于 css 和 js 来说:

• 尽量使用外链 css 样式表和 js 脚本。结构、表现和行为分为三块，符合规范。同时提高页面渲染速度，提高用户的体验;
• 样式尽量少用行间样式表，使结构与表现分离，标签的 id 和 class 等属性命名要做到见文知义，标签越少，加载越快，用户体验提高，代码维护简单,便于改版;
• 不需要变动页面内容，便可提供打印版本而不需要复制内容，提高网站易用性；

2.HTML5 新特性和新增了那些标签?

新特性：

• 语义化标签：HTML5 增加了一系列语义化标签，如<header>、<footer>、<article>、<section>等，这些标签不仅有助于更好地组织和描述网页内容，提高网页的可读性，还有助于搜索引擎更准确地理解网页结构，提升网站的 SEO 效果。
• 多媒体支持：HTML5 内置了对音频和视频的支持，通过<audio>和<video>标签，开发者可以直接在网页中嵌入音频和视频内容，无需依赖第三方插件。这不仅简化了开发流程，还提高了用户体验。
• 图形和动画：HTML5 引入了<canvas>标签，使得在网页上绘制图形、制作动画和创建游戏成为可能。开发者可以利用 Canvas API 绘制各种复杂的图形和动画，为用户带来丰富的视觉体验。
• 地理定位：HTML5 的地理定位功能使得开发者能够获取用户的地理位置信息，并基于位置信息为用户提供个性化的服务和内容。这在许多应用中都非常有用，如地图导航、附近商家推荐等。
• 离线存储：HTML5 提供了本地存储功能，如 Web Storage API 和 Application Cache，使得网页可以在用户设备上存储数据，实现离线浏览和快速加载。这大大提高了 Web 应用的可用性和性能。
• 表单增强：HTML5 对表单进行了增强，引入了新的输入类型（如color、email、date、time、url、search、number等）和表单控件，以及表单验证功能。这使得表单更加易用，用户输入更加便捷，同时也提高了数据的准确性和安全性。
• 硬件加速：HTML5 通过利用 GPU 加速，可以大幅提升网页渲染速度，特别是在处理复杂的图形和动画时。

新增标签：

• 结构标签：包括<header>、<footer>、<main>、<article>、<aside>、<section>、<nav>和<hgroup>等，用于描述页面的不同部分，增强页面的语义化。
• 多媒体标签：如<video>和<audio>，用于在网页上直接嵌入视频和音频内容。
• 表单标签：新增了如<calendar>、<date>、<time>、<email>、<url>和
• 其他标签：如<mark>用于高亮显示文本，<canvas>用于绘制图形和动画，<datalist>用于提供预定义的选项列表等。

3.HTML5 为什么只需要写 !DOCTYPE HTML，而不需要引入 DTD?

HTML5 只需要写 !DOCTYPE HTML 而不需要引入文档类型定义（DTD）是因为它告诉浏览器使用最新的 HTML 标准来解析页面，确保在所有现代浏览器中呈现一致性。HTML5 简化了文档类型声明，避免了之前版本中因不同 DOCTYPE 导致的渲染差异，使得开发更加便捷。

4.XHTML 和 HTML 的区别？

基础语言：

• XHTML：基于 XML（可扩展标记语言），因此它继承了 XML 的许多特性和规则。
• HTML：基于 SGML（标准通用标记语言），尽管 HTML5 已经大大简化了 SGML 的复杂性，但它仍然遵循一些 SGML 的基本原则。

标签大小写敏感：

• XHTML：对大小写敏感，所有的标签和属性都必须使用小写。
• HTML：通常对大小写不敏感，标签和属性可以使用大写、小写或混合大小写。

标签闭合：

• XHTML：要求所有标签必须正确闭合，即使是空标签（如<br />）也必须有闭合标记。
• HTML：在某些情况下，标签可以不闭合，尤其是在 HTML4 和更早的版本中。

属性写法：

• XHTML：属性值必须被引号包围，可以是单引号或双引号，但必须一致。
• HTML：虽然通常也推荐属性值使用引号包围，但在 HTML 中这不是强制性的。

元素嵌套：

• XHTML：要求元素必须正确嵌套，不能交叉嵌套。
• HTML：在某些情况下，HTML 的解析器可以容忍不规范的嵌套，但这不是推荐的做法。

注释书写：

• XHTML 和 HTML 的注释写法是相同的，都是使用<!-- 开始和 --> 结束。

命名空间：

• XHTML：由于它基于 XML，因此支持使用命名空间来区分不同的标记集合，这在混合使用 XHTML 和其他 XML 应用时非常有用。
• HTML：不直接支持命名空间的概念。

总结：XHTML 相对于 HTML 更加严格和规范，它遵循 XML 的规则，使得文档结构更加清晰和一致。这种严格性有助于提高网页的兼容性和可读性，特别是在跨浏览器和跨平台的环境中。然而，由于 HTML 的语法较为宽松，它更适合于快速原型设计和开发。在实际应用中，开发者应根据项目的需求和目标来选择使用 XHTML 还是 HTML。

5.a 标签与 link 标签的区别？

a 标签（Anchor 标签） 用于创建超链接，可以将文本、图片或其他元素转换为可点击的链接。a 标签的 href 属性指定了链接的目标地址，可以是一个 URL、一个文件路径或一个锚点。当用户点击 a 标签时，浏览器会跳转到指定的目标地址。

link 标签 用于在 HTML 文档中引入外部资源，如 CSS 样式表、图标文件等。link 标签的 rel 属性指定了被引入资源的关系类型，常见的有 stylesheet（引入 CSS 样式表）、icon（引入网站图标）等。link 标签的 href 属性指定了被引入资源的路径。

两者的区别：

• a 标签用于创建超链接，link 标签用于引入外部资源。
• a 标签可以在当前页面跳转到其他页面，link 标签只是引入外部资源而不会跳转页面。
• a 标签可以包含文本或其他元素，link 标签只能放在 head 标签内。

6.标签上 title 与 alt 属性的区别是什么？

• alt 是给搜索引擎识别，在图像无法显示时的替代文本

• title 是关于元素的注释信息，主要是给用户解读。

• 当鼠标放到文字或是图片上时有 title 文字显示。（因为 IE 不标准）在 IE 浏览器中 alt 起到了 title 的作用，变成文字提示。

• 在定义 img 对象时，将 alt 和 title 属性写全，可以保证在各种浏览器中都能正常使用。

7.简述 src 与 href？

从用途上看:

• src主要用于嵌入到文档中的资源，如图片、音频、视频和脚本等。这意味着当 src 属性指向的资源被加载时，它会被直接嵌入到当前的文档结构中。
• href主要用于链接到文档之外的资源，如 CSS 样式表、字体文件或其他网页。它用于建立当前元素和文档之间的链接关系，而不会直接改变当前文档的内容。

从请求资源类型上看:

• src在请求资源时会将其指向的资源下载并应用到文档中，比如 JavaScript 脚本和图片等。
• href 指向的资源，浏览器在识别到时会并行下载，不会停止对当前文档的处理。

从浏览器解析方式上看

• 当浏览器解析到 src属性时，它会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕。这意味着 src 属性引用的资源对于文档的加载和显示有直接影响。
• href属性的资源则不会影响到文档的加载和显示，仅用于指定链接到文档之外的资源。

综上所述，src 和 href 的主要区别在于它们的用途、请求资源类型以及浏览器解析方式。src 主要用于嵌入资源到文档中，并直接影响文档的加载和显示；而 href 主要用于链接到文档之外的资源，对文档的加载和显示没有直接影响。

8.列举常见的块元素和行内元素以及行内块元素，它们有何不同？

块元素：

• 特点：块元素以块的形式显示，会独占一行或一块空间，每个块元素都从新的一行开始，相邻的块元素会自动换行。块元素的宽度默认为其父元素的宽度，除非设置了特定的宽度值。块元素可以设置宽度、高度、边距和内边距等样式属性，其盒模型包括内容区、内边距、边框和外边距。此外，块元素可以包含其他块元素和行内元素，可以嵌套任意元素。
• 常见例子：<div>、<p>、<h1>-<h6>、<form>、<ul>、<ol>、<li>、<hr>等。

行内元素

• 特点：行内元素不会独占一行，它们在一行内按照从左到右的顺序显示，相邻的行内元素会紧密排列。行内元素的宽度和高度由其内容决定，不能设置固定的宽高属性。行内元素只能设置部分样式属性，其盒模型包括内容区和内边距，但不能设置边框和外边距。此外，行内元素只能包含其他行内元素和部分块元素，不能嵌套块元素。
• 常见例子：<a>、<span>、<i>、<br>等。

行内块元素：

• 特点：行内块元素同时具有行内元素和块元素的特征。它们不会独占一行，但可以设置宽度和高度属性。行内块元素默认排列方式是从左至右。
• 常见例子：<img>、<textarea>、<input>、<td>等。

综上所述，块元素、行内元素和行内块元素的主要区别在于它们的显示方式、宽度和高度设置、盒模型以及元素嵌套能力。正确理解和使用这些元素类型，有助于更好地进行 HTML 页面布局和样式设计。

9.iframe 的优缺点？

iframe 是 HTML 中的一个标签，用于在当前页面中嵌入另一个页面。它具有以下优点和缺点：

优点：

• 简单易用：使用 iframe 可以轻松地将其他网页嵌入到当前页面中，无需复杂的 JavaScript 代码。

• 分离内容：通过使用 iframe，可以将不同的内容分离到不同的页面中，使代码更加模块化和可维护。

• 并行加载：页面中的 iframe 可以并行加载，提高了页面加载的效率。

• 跨域通信：通过 iframe 的跨域通信机制，可以实现不同域名之间的数据传递。
  缺点：

• 安全性问题：由于 iframe 可以嵌入其他网页，存在安全风险，例如可能被用于点击劫持攻击。

• SEO 问题：搜索引擎可能无法正确解析 iframe 中的内容，影响网页的搜索排名。

• 页面性能：过多的 iframe 会增加页面的加载时间和资源消耗。

• 难以控制样式：由于 iframe 中的内容是独立的页面，样式和布局可能难以控制和调整。

10.简述 Virtual Dom 真的比操作原生 DOM 快吗，两者之间的区别？

虚拟 DOM 并不总是比原生 DOM 操作快，但它提供了一种更抽象、更声明式的方式来描述和操作 DOM，提高了开发效率和代码可维护性。虚拟 DOM 先将真实 DOM 转换为 JavaScript 对象，再找出与旧虚拟 DOM 的差异，最后将这些差异应用到真实 DOM 上，减少了直接操作，降低了性能损耗。然而，虚拟 DOM 本身也有性能开销，特别是在处理简单或大量 DOM 元素时，原生 DOM 操作可能更快。所以，是否使用虚拟 DOM 取决于具体的应用场景和需求。

区别

抽象层次：虚拟 DOM 是 HTML DOM 的抽象表示，它用 JavaScript 对象来描述 DOM 节点及其属性和内容的层次结构，而不是真正的 DOM 节点。而原生 DOM 是浏览器中实际的文档对象模型，直接对应页面上的元素和节点。

性能差异：虚拟 DOM 通过比较新旧 DOM 节点的差异，并只更新需要变更的部分，来减少不必要的 DOM 操作，从而提高性能。然而，这并不意味着虚拟 DOM 总是比原生 DOM 操作更快。在处理大量或简单的 DOM 元素时，原生 DOM 操作可能更为高效。虚拟 DOM 的性能优势主要来源于其减少了对浏览器的布局计算和渲染的依赖，以及通过特定的渲染方法优化 DOM 更新过程。

开发效率：虚拟 DOM 通过 JavaScript 对象对 DOM 进行操作，使得操作更加灵活和方便。此外，结合诸如 React 等框架的组件化机制，虚拟 DOM 可以进一步提高开发效率。相比之下，原生 DOM 操作可能更为繁琐和低效。

跨平台性：虚拟 DOM 是跨平台的，这意味着它可以在不同的环境或平台上使用，而不仅仅是浏览器。而原生 DOM 是与浏览器紧密绑定的，主要适用于 Web 开发环境。

11.如何实现浏览器内多个标签页之间的通信？

使用 WebSocket 协议：WebSocket 协议可以实现服务器推送，因此可以将服务器用作中介者。多个标签页通过向服务器发送数据，然后服务器将这些数据转发给其他标签页。这样，各个标签页就可以通过服务器进行通信。

使用 SharedWorker：SharedWorker 会在页面存在的生命周期内创建一个唯一的线程，即使开启多个页面也只会使用同一个线程。这个共享的线程就可以充当中介者的角色，标签页间通过这个共享的线程实现数据的交换。

利用 localStorage：localStorage 在同域下是共享的，可以在一个标签页中对 localStorage 的变化事件进行监听。当另一个标签页修改数据时，第一个标签页就可以通过这个监听事件获取到数据。这样，localStorage 对象就充当了中介者的角色。需要注意的是，如果标签页跨域了，那么数据将无法共享。

使用 BroadcastChannel API：BroadcastChannel API 提供了一种在相同源的不同浏览上下文（例如窗口、标签页、iframe 或 web worker）之间简单地进行通信的方法。通过创建一个新的 BroadcastChannel 对象并指定一个名称，就可以建立一个通信频道。然后，可以使用 postMessage 方法发送消息，使用 onmessage 事件处理器接收消息。

使用 localStorage + postMessage + MessageChannel：这种方法结合了 localStorage 的持久化存储特性和 postMessage 的跨文档通信能力。首先，利用 localStorage 存储数据并触发事件，然后在事件处理程序中使用 postMessage 和 MessageChannel 进行跨标签页的通信。

12.请简述一下 HTML 中的锚点是什么？

HTML 中的锚点是一种超链接，也被称为命名锚点。它允许用户精确地控制访问者在单击超链接后到达的页面位置。锚点通过在文档中设置标记，并创建这些标记的链接，实现快速导航到指定位置的功能。

锚点的创建通常涉及两个步骤：首先，给目标位置的标签添加一个 id 属性；然后，给 a 标签绑定这个 id。这样，当用户点击带有特定 id 的 a 标签时，页面会自动滚动到与该 id 匹配的元素位置。

锚点不仅可以在同一页面内实现快速跳转，还可以用于不同页面之间的特定位置跳转。在不同页面之间跳转时，需要在链接的 href 属性中指定目标页面的 URL，并在其后添加“#”符号和目标位置的 id。

13.Doctype 的作用？严格模式与混杂模式，如何触发这两种模式？

DOCTYPE 是 HTML 文档中的声明，用于告知浏览器使用哪种文档类型来解析和渲染页面。它位于<html>标签之前。

严格模式（或标准模式） 下，浏览器严格按照 W3C 标准解析和渲染代码。

混杂模式（或怪异模式） 下，浏览器则会使用一种向后兼容的方式呈现页面，可能导致不同的浏览器间出现不一致的渲染效果。

触发这两种模式的方式主要依赖于 DOCTYPE 的声明：

• 如果文档中包含严格的 DOCTYPE 声明，浏览器会触发严格模式。例如，使用<!DOCTYPE html>会触发 HTML5 的严格模式。
• 如果文档中没有 DOCTYPE 声明，或者 DOCTYPE 声明不正确，浏览器则会触发混杂模式。

为了确保网页在不同浏览器中的一致性和正确性，建议开发者始终在 HTML 文档中包含正确的 DOCTYPE 声明，并尽量遵循 W3C 标准编写代码，以触发严格模式。

14.请解释一下 HTML5 的本地存储机制。

LocalStorage：LocalStorage 是 HTML5 提供的一种持久化的本地存储方式。它允许网页在浏览器中存储键值对数据，并且该数据在页面关闭后仍然存在。LocalStorage 的数据大小限制通常为 5MB 左右。

SessionStorage：SessionStorage 也是 HTML5 提供的一种本地存储方式，与 LocalStorage 类似，但是 SessionStorage 的数据在页面关闭后会被清除。SessionStorage 适合存储会话期间需要保持的临时数据。

IndexedDB：IndexedDB 是一种高级的客户端数据库，它允许网页在浏览器中存储结构化数据。IndexedDB 提供了更强大的查询和事务支持，适合存储大量数据或需要复杂查询的场景。

15.请解释一下 HTML 中的元数据是什么？

HTML 中的元数据是关于数据的数据，它提供了关于 HTML 文档的附加信息，但不会在客户端的页面上直接显示。元数据主要被用于描述数据的特性、质量和结构，对于机器是可读的。

在 HTML 中，元数据通过<meta>标签进行定义，这些标签通常位于<head>元素中。元数据有多种类型，包括描述文档的标题、编码、作者、关键词、描述等属性。这些属性对于浏览器、搜索引擎或其他 Web 服务来说是非常重要的。例如，浏览器可以使用元数据来决定如何显示内容或重新加载页面；搜索引擎则可以利用元数据的 name 和 content 属性来索引页面，从而帮助提高网页在搜索结果中的排名。

16.HTML5 应用缓存和常规的 HTML 浏览器缓存有什么差别?

HTML5 应用缓存和常规的 HTML 浏览器缓存主要有以下几个方面的差别：

1. 控制程度：传统的浏览器缓存主要由浏览器自动管理，网站开发者对其控制能力有限。而 HTML5 的应用缓存可以由开发者精细控制，开发者可以通过创建一个缓存清单（manifest 文件），来明确指定哪些文件应该被缓存，哪些文件需要从网络加载，哪些文件在无网络连接时有备用资源等 。

2. 离线应用支持：HTML5 的应用缓存支持离线应用，可以获取少数或者全部网站内容，包括 HTML、CSS、图像和 JavaScript 脚本并存放在本地。这意味着即使在没有网络连接的情况下，用户也可以访问这些内容。相比之下，传统的浏览器缓存并没有这样的特性 。

3. 更新机制：HTML5 应用缓存是会预加载的，保证齐全地供应和保存。浏览器缓存没有这些控制，不能作为程序缓存使用。不幸的是，应用程序缓存过于简单，导致效率不彰，预期将会被 Service Worker 取代 。

总的来说，HTML5 应用缓存提供了更多的灵活性和控制权给开发者，同时也提供了更好的用户体验，如离线访问的能力。然而，这也带来了一些挑战，例如需要开发者更多地参与到缓存的管理中来，以及需要处理应用程序缓存的复杂性。