跳到主要内容

src 和 href 区别​

在 HTML 中，src和href是两个常用的属性，用于指定资源的位置或链接。它们的主要区别在于用途和适用的标签。

  • src（源）属性通常用于设置引用外部资源，如图片、脚本或嵌入的内容。它适用于<script>、<img>、<iframe>、<audio>、<video>等标签。src指定的资源是页面的一部分，浏览器会下载并解析这些资源，并将其嵌入到页面中。如果src指定的资源无法加载，则会导致标签显示错误或不显示内容。

示例：

<img src="image.jpg" alt="My Image" />
<script src="script.js"></script>
<iframe src="https://www.example.com"></iframe>
  • href（超文本引用）属性通常用于指定链接到外部资源的 URL，如样式表文件、文档等。它适用于<a>、<link>、<base>等标签。href指定的资源是与当前页面关联的独立资源，浏览器会根据href属性加载并显示它们。当用户点击带有href属性的链接时，浏览器会导航到指定的 URL。

示例：

<a href="https://www.example.com">Visit Example</a>
<link rel="stylesheet" href="styles.css" />

总结：

  • src用于指定要嵌入到页面中的资源，常用于图片、脚本等标签。
  • href用于指定链接到的外部资源，常用于链接、样式表等标签。
  • src指定的资源是页面的一部分，而href指定的资源是与页面关联但独立的。
  • src会导致浏览器下载和解析资源，而href会导航到指定的 URL。
  • src代表的是网站的一部分，没有会对网站的使用造成影响。当浏览器解析到该元素时，会暂停其他资源的下载和处理，知道将该资源加载、编译、执⾏完毕，所以⼀般 js 脚本会放在底部而不是头部。
  • href代表网站的附属资源，没有不会对网站的核心逻辑和结构造成影响,当浏览器识别到它他指向的文件时，就会并行下载资源，不会停⽌对当前⽂档的处理。

什么是 DOCTYPE， 有何作用？​

DOCTYPE（Document Type）是位于 HTML 文档开头的一种声明，它指定了文档类型和版本。它的作用是告诉浏览器使用哪个 HTML 规范解析当前文档。

DOCTYPE 声明的格式通常为<!DOCTYPE>，后面紧跟着文档类型的名称。例如，HTML5 的 DOCTYPE 声明如下：

<!DOCTYPE html>

DOCTYPE 声明在 HTML 文档中的位置应该位于文档的最开始，位于<html>标签之前。它不是 HTML 标签，而是用来定义 HTML 文档类型的一种特殊语法。

DOCTYPE 的作用包括：

  1. 指定文档类型：DOCTYPE 声明告诉浏览器当前文档遵循的 HTML 规范和版本。不同的 HTML 规范可能有不同的元素、属性和语法要求，浏览器需要根据 DOCTYPE 来选择相应的解析模式。

  2. 影响浏览器渲染模式：DOCTYPE 声明还可以影响浏览器的渲染模式，即确定浏览器以何种方式解析和显示文档。不同的渲染模式可能会导致不同的布局和样式渲染行为。

    • 标准模式（Strict mode）：浏览器按照规范的严格要求解析文档，遵循最新的 HTML 规范和标准行为。
    • 怪异模式（Quirks mode）：浏览器会尝试向后兼容旧的 HTML 文档，但可能会导致一些不一致的解析行为。

    DOCTYPE 声明的存在与具体的渲染模式之间有关，不同的 DOCTYPE 声明会触发不同的渲染模式。

总结： DOCTYPE 是 HTML 文档开头的声明，用于指定文档类型和版本。它的作用是告诉浏览器使用哪个 HTML 规范解析文档，并影响浏览器的渲染模式。正确的 DOCTYPE 声明可以确保文档按照预期的方式解析和显示。

说说对 html 语义化的理解​

HTML 语义化是指在编写 HTML 代码时，使用恰当的标签来表达文档结构和内容的含义，使得页面结构更加清晰、易于理解，并且能够让搜索引擎和辅助技术更好地理解和处理页面。

以下是对 HTML 语义化的一些理解：

  1. 可读性和可维护性：语义化的 HTML 代码更加清晰和易读，使开发者能够更好地理解和维护代码。通过使用恰当的语义标签（如<header>、<nav>、<section>、<article>等），可以更直观地表达页面的结构和内容，并提供更好的代码组织和注释。

  2. 提升可访问性：语义化的 HTML 使得页面对于使用辅助技术的用户更加友好。屏幕阅读器等辅助技术可以根据语义标签更好地解读和呈现页面内容，帮助有视觉障碍的用户理解网页结构和内容。

  3. 搜索引擎优化：语义化的 HTML 有助于搜索引擎理解页面的结构和内容，提高网页在搜索结果中的排名。搜索引擎通过分析语义标签和内容来确定页面的相关性和质量。

  4. 设备兼容性：语义化的 HTML 能够更好地适应不同的设备和浏览器。使用语义标签可以让页面在不同设备上有更一致的呈现效果，并且有助于响应式设计和移动设备适配。

  5. 未来可扩展性：语义化的 HTML 能够为未来的 Web 技术和标准提供更好的支持。通过使用语义标签，可以为新的功能和语义提供更好的扩展性和兼容性。

总的来说，HTML 语义化是一种良好的编码实践，它强调使用恰当的语义标签来表达文档结构和内容的含义，从而提高代码的可读性、可维护性，增强网页的可访问性和搜索引擎优化，同时提供更好的设备兼容性和未来扩展性。

title 与 h1 的区别、b 与 strong 的区别、i 与 em 的区别？​

  • <title>与<h1>的区别：

    • <title>标签用于定义文档的标题，它位于<head>标签内，不直接影响页面的可见内容，而是显示在浏览器的标题栏或标签页上。
    • <h1>标签是 HTML 中的标题标签，用于定义页面中最高级别的标题。它在页面的结构中起到重要的作用，表示内容的主要标题，也会影响页面的可见内容。一个页面通常应该只有一个<h1>，用于表达页面的主题或主要内容。

  • <b>与<strong>的区别：

    • <b>标签是 HTML 中的文本样式标签，用于对文本进行粗体显示。它仅仅表示文本的视觉效果，没有强调的语义含义。
    • <strong>标签则是 HTML 中的强调标签，用于强调重要的文本内容。它不仅改变文本的视觉效果（通常为粗体），还具有强调内容的语义含义，表示内容的重要性或紧急性。

  • <i>与<em>的区别：

    • <i>标签是 HTML 中的文本样式标签，用于对文本进行斜体显示。它仅仅表示文本的视觉效果，没有强调的语义含义。
    • <em>标签则是 HTML 中的强调标签，用于强调文本的重要性或情感强度。它不仅改变文本的视觉效果（通常为斜体），还具有强调内容的语义含义，表示内容的重要性或强调的情感。

总结：

  • <title>用于定义文档的标题，显示在浏览器的标题栏或标签页上，而<h1>是页面中最高级别的标题，表示内容的主要标题。
  • <b>用于对文本进行粗体显示，仅改变文本的视觉效果，而<strong>用于强调重要的文本内容，具有强调的语义含义。
  • <i>用于对文本进行斜体显示，仅改变文本的视觉效果，而<em>用于强调文本的重要性或情感强度，具有强调的语义含义。

什么是严格模式与怪异模式？​

严格模式（Strict mode）和怪异模式（Quirks mode）是浏览器在解析和渲染 HTML 文档时所采用的不同模式。它们的区别在于浏览器的解析行为和渲染规则。

1. 怪异模式（Quirks mode）： 怪异模式是指浏览器根据旧的 HTML 解析算法解析文档，模拟旧版本浏览器的行为，以保持对旧网页的向后兼容性。在怪异模式下，浏览器会宽松地解析 HTML 代码，允许一些不严谨或不规范的 HTML 写法，并可能产生一些不一致的解析结果。

怪异模式可能会导致以下问题：

  • 盒模型的解析差异：在怪异模式下，浏览器可能会使用不同的盒模型（如 IE 盒模型）解析 CSS，导致元素的尺寸和布局出现差异。
  • 默认样式的不一致：不同浏览器在怪异模式下可能有不同的默认样式，导致页面在不同浏览器中显示不一致。
  • CSS 选择器的解析差异：怪异模式下，浏览器可能不严格遵守 CSS 选择器的规范，导致选择器的匹配结果不一致。

2. 严格模式（Strict mode）： 严格模式是指浏览器根据最新的 HTML 和 CSS 规范严格解析和渲染文档的模式。在严格模式下，浏览器会更加严格地遵守标准规范，提供更一致和可预测的解析结果。

严格模式的优点包括：

  • 更好的标准支持：严格模式下，浏览器会更好地支持最新的 HTML 和 CSS 标准，确保页面的正确渲染和行为。
  • 更严格的错误检查：严格模式下，浏览器会对 HTML 和 CSS 代码进行更严格的错误检查，提醒开发者修复潜在的问题。
  • 更一致的页面呈现：严格模式下，不同浏览器之间的页面渲染结果更加一致，减少了浏览器间的差异。

要启用严格模式，可以在 HTML 文档的开头添加<!DOCTYPE>声明，指定文档类型为 HTML5。例如：<!DOCTYPE html>。

总结： 怪异模式是模拟旧版本浏览器的解析和渲染行为，用于保持对旧网页的向后兼容性，解析结果可能不一致。严格模式是根据最新的 HTML 和 CSS 规范严格解析和渲染文档，提供更一致和可预测的解析结果。通过指定正确的<!DOCTYPE>声明，可以选择使用严格模式或怪异模式。推荐使用严格模式，以获得更好的标准支持和一致的页面呈现。

前端页面有哪三层构成，分别是什么？​

前端页面通常由以下三层构成：

  1. 结构层（HTML）： 结构层是前端页面的基础，使用 HTML（Hypertext Markup Language）定义页面的结构和内容。HTML 标记描述了页面的各个部分，如标题、段落、列表、表格等，以及它们之间的层次关系。结构层负责提供页面的基本框架和语义结构，为页面内容的组织和布局提供支持。

  2. 样式层（CSS）： 样式层使用 CSS（Cascading Style Sheets）来定义页面的外观和样式。CSS 通过选择器和属性来选择页面中的元素，并为其应用样式规则，如颜色、字体、大小、布局等。样式层负责控制页面的视觉效果，使页面具有吸引力、一致性和可读性，并提供用户界面的美观性和交互性。

  3. 行为层（JavaScript）： 行为层使用 JavaScript 为页面添加交互和动态功能。JavaScript 是一种脚本语言，通过操作 DOM（Document Object Model）和处理事件来实现与用户的交互、数据的获取和修改、页面的动态更新等功能。行为层负责处理用户的操作和响应，实现页面的交互性、动态性和逻辑控制，以提供更丰富和灵活的用户体验。

这三层相互协作，共同构成了一个完整的前端页面。结构层定义页面的基本结构和内容，样式层定义页面的外观和样式，而行为层为页面添加交互和动态功能。通过合理的组织和协调，三层之间实现了前端页面的分工与协作，使得页面具备良好的可维护性、可扩展性和用户体验。

iframe 的作用以及优缺点​

作用： <iframe>（内联框架）是 HTML 中的一个元素，用于在当前页面中嵌入其他 HTML 文档或外部网页。它提供了一种将其他文档或网页嵌入到当前页面中的方式，允许在一个页面中显示来自不同源的内容。

主要的作用包括：

  1. 嵌入其他网页或文档： <iframe>允许在当前页面中嵌入其他网页或文档，以展示外部内容，如嵌入地图、视频、广告等。
  2. 分割页面： <iframe>可以将页面分割为多个独立的区域，每个区域加载不同的文档或网页，实现复杂的布局或多窗口效果。
  3. 加载第三方内容： <iframe>可以用于加载来自不同域的内容，如社交媒体的插件、外部应用程序等。

优点：

  • 灵活性： <iframe>允许将其他网页或文档嵌入到当前页面中，增加了页面的灵活性和功能扩展性。
  • 分离内容： 使用<iframe>可以将不同的内容分离开来，实现模块化的开发和管理。
  • 跨域加载： <iframe>可以加载来自不同域的内容，允许在一个页面中集成第三方服务或应用。

缺点：

  • 性能开销： 每个<iframe>都需要加载独立的文档或网页，这可能增加页面的加载时间和网络请求的数量，对性能产生一定的影响。
  • 导航问题： 当嵌入的文档或网页具有自己的导航和链接时，用户可能在<iframe>中进行导航而不是整个页面的导航，导致用户体验的混乱。
  • 安全性问题： <iframe>可以加载来自不同域的内容，可能存在安全隐患，如跨站脚本攻击（XSS）和点击劫持等。

因此，在使用<iframe>时需要谨慎考虑其性能、用户体验和安全性问题，并确保合适地使用和管理<iframe>元素。

如何阻止网站使用 iframe 嵌入内容？​

要阻止网站使用<iframe>嵌入内容，可以采取以下方法：

1. HTTP 响应头中使用 X-Frame-Options： 通过在服务器的 HTTP 响应头中设置X-Frame-Options头，可以控制网站是否可以被嵌入到<iframe>中。这个头有三个可选值：

  • DENY：表示网站不允许被嵌入到任何<iframe>中。
  • SAMEORIGIN：表示网站只能被同源的页面嵌入到<iframe>中。
  • ALLOW-FROM uri：表示网站只能被指定的 URI 所指定的页面嵌入到<iframe>中。

例如，可以在服务器端设置以下响应头来阻止网站被嵌入到任何<iframe>中：

X-Frame-Options: DENY

2. Content-Security-Policy（CSP）： 使用 Content-Security-Policy 头，可以通过设置frame-ancestors指令来控制网站是否可以被嵌入到<iframe>中。该指令可以接受以下值：

  • 'none'：表示网站不允许被嵌入到任何<iframe>中。
  • 'self'：表示网站只能被同源的页面嵌入到<iframe>中。
  • uri：表示网站只能被指定的 URI 所指定的页面嵌入到<iframe>中。

例如，可以在服务器端设置以下响应头来阻止网站被嵌入到任何<iframe>中：

Content-Security-Policy: frame-ancestors 'none'

3. JavaScript： 通过 JavaScript 代码检测当前页面是否位于<iframe>中，并根据需要采取相应的操作。可以使用window.self === window.top来检测页面是否位于顶级窗口，如果不是，则说明页面被嵌入到了<iframe>中，可以选择进行跳转或其他操作。

例如，可以使用以下 JavaScript 代码来跳转或禁止嵌入：

if (window.self !== window.top) {
    // 页面被嵌入到了iframe中
    // 进行跳转或其他操作
    // window.top.location.href = 'https://example.com';
    // 或者使用以下代码禁止嵌入
    // window.top.location = window.self.location;
}

请注意，这些方法可以提供一定程度的保护，但并不能完全防止所有的嵌入攻击。为了确保网站的安全性，还应采取其他的安全措施，如输入验证、安全编码等。

img 上 title 与 alt 的区别​

title和alt是<img>元素上的两个属性，用于提供关于图像的额外信息和辅助文本。它们的主要区别如下：

1. title 属性：

  • 作用： title属性用于为图像提供附加的描述性文本，以提供有关图像的补充信息。当鼠标悬停在图像上时，通常会显示title属性的文本作为工具提示（tooltip）。
  • 展示方式： title属性的文本以浮动的工具提示的形式显示给用户，通常在鼠标悬停时显示。
  • 可选性： title属性是可选的，可以省略不设置。

示例：

<img src="image.jpg" alt="描述性文本" title="额外信息" />

2. alt 属性：

  • 作用： alt属性（替代文本）用于为图像提供替代的文本描述。它在以下情况下很重要：
    • 当图像无法加载时，替代文本将显示给用户，帮助他们理解图像的内容和目的。
    • 屏幕阅读器等辅助技术可以读取alt属性，向视觉障碍用户提供关于图像的信息。
  • 展示方式： alt属性的文本不会直接显示给用户，而是在图像无法加载时或通过辅助技术进行解读。
  • 必要性： alt属性是必需的，应该在每个<img>元素中提供有效的替代文本，以确保无障碍性和可访问性。

示例：

<img src="image.jpg" alt="描述性文本" />

总结：

  • title属性提供额外的描述性信息，通过工具提示显示给用户，是可选的。
  • alt属性提供替代文本描述，用于在图像无法加载或通过辅助技术解读时呈现，是必需的。它对于无障碍性和可访问性非常重要，应该始终提供有效的替代文本。

行内元素和块级元素分别有哪些？有何区别？怎样转换？​

行内元素（Inline Elements）： 行内元素是指在 HTML 中默认以行内方式显示的元素，它们不会独占一行，可以在同一行显示，并根据内容自动换行。常见的行内元素包括<span>、<a>、<strong>、<em>、<img>等。

块级元素（Block-level Elements）： 块级元素是指在 HTML 中默认以块级方式显示的元素，它们会独占一行，每个块级元素都会从新的一行开始，并在前后添加适当的空白。常见的块级元素包括<div>、<p>、<h1>-<h6>、<ul>、<li>等。

区别：

  1. 显示方式： 行内元素在同一行内显示，不会独占一行，而块级元素会独占一行，每个元素从新的一行开始。
  2. 尺寸控制： 行内元素的尺寸由内容决定，不接受宽度、高度等尺寸属性的设置，而块级元素可以通过设置尺寸属性（如宽度、高度）来控制大小。
  3. 盒模型： 行内元素不会影响其他元素的布局，它们不具有外边距（margin）和内边距（padding）的上下效果，而块级元素会影响其他元素的布局，并具有上下的外边距和内边距效果。
  4. 内容模型： 行内元素只能包含其他行内元素或文本，不可以包含块级元素，而块级元素可以包含其他块级元素和行内元素。

转换方法： 可以使用 CSS 的display属性来实现行内元素和块级元素之间的转换：

  • 将行内元素转换为块级元素：使用display: block;。例如：<span style="display: block;">文本</span>
  • 将块级元素转换为行内元素：使用display: inline;。例如：<div style="display: inline;">文本</div>

还可以使用display: inline-block;将元素设置为行内块级元素，它的显示方式类似于行内元素，但可以设置宽度、高度等尺寸属性，并保留块级元素的布局特性。例如：<div style="display: inline-block;">文本</div>

通过这些转换，可以灵活地控制元素的显示方式，实现更复杂的布局效果。

label 的作用是什么？是怎么用的？​

<label>元素在 HTML 中用于标识表单控件（如输入字段、复选框、单选按钮等）的标签。它的作用是提供对表单控件的描述或说明，并与相应的控件建立关联，从而改善表单的可用性和可访问性。

<label>元素通常与表单控件配对使用，通过以下两种方式进行关联：

1. 使用for属性： 通过将<label>的for属性设置为相应表单控件的id属性，可以将<label>与控件关联起来。当用户点击<label>时，相应的表单控件将获得焦点或选中。

示例：

<label for="username">用户名：</label>
<input type="text" id="username" name="username" />

2. 包含控件： 将表单控件直接包含在<label>元素内，这样它们就自动与<label>关联起来。这种方式不需要使用for属性。

示例：

<label
    >选择性别： <input type="radio" name="gender" value="male" />男
    <input type="radio" name="gender" value="female" />女
</label>

<label>元素的使用有以下好处：

  • 提升可用性：通过将标签与表单控件关联，用户可以更容易地理解表单的目的和功能。
  • 改善可访问性：对于使用辅助技术的用户（如屏幕阅读器用户），使用<label>元素可以提供更好的表单解释和操作体验。
  • 扩大点击区域：点击<label>时，关联的表单控件也会获得焦点或选中，扩大了用户与表单控件的交互范围。

在编写表单时，尽量使用<label>元素来为表单控件提供描述，以提高表单的可用性和可访问性。

对于 Web 标准以及 W3C 的理解​

Web 标准是一系列规范和指南，旨在确保在 Web 上创建和展示内容的一致性和互操作性。它们由 W3C（万维网联盟）和其他组织制定，并得到了广泛的行业支持和采纳。下面是对 Web 标准和 W3C 的简要解释：

Web 标准： Web 标准包括一系列技术规范和最佳实践，用于开发和实现 Web 页面和应用程序。它们涵盖了 HTML（超文本标记语言）、CSS（层叠样式表）、JavaScript 等核心技术以及其他相关技术。Web 标准的主要目标是：

  1. 互操作性： Web 标准确保不同浏览器和设备能够正确解析和呈现 Web 内容，使得开发者可以编写一次代码，适应多个平台和浏览器。
  2. 可访问性： Web 标准强调创建无障碍的 Web 内容，使得所有用户，包括身体上或认知上有障碍的用户，都能够访问和使用 Web。
  3. 可维护性： Web 标准推崇结构良好、语义明确、可维护的代码，提高代码的可读性、可扩展性和可维护性。

遵循 Web 标准的开发实践有助于确保网站在不同平台和浏览器上的一致性显示，并提供更好的用户体验、可访问性和可维护性。

W3C（万维网联盟）： W3C 是负责制定和推进 Web 标准的国际标准化组织。它由互联网的发明者蒂姆·伯纳斯-李（Tim Berners-Lee）于 1994 年创立，由全球各个领域的专家组成。W3C 的使命是推动 Web 的长期发展和互操作性，并确保 Web 的开放性、可用性和可持续性。

W3C 通过制定和发布技术规范、指南和工具，以及组织开发者社区和产业合作，推动 Web 技术的发展和标准化。W3C 的一些核心技术规范包括 HTML、CSS、XML（可扩展标记语言）、Web 安全、Web 可访问性等。

遵循 W3C 标准有助于确保 Web 内容的跨平台和跨浏览器兼容性，并推动 Web 生态系统的健康发展。开发者可以参考 W3C 的规范和指南来编写符合标准的 Web 代码，以提供更好的用户体验和可访问性。

知道什么是微格式吗？谈谈理解，在前端构建中应该考虑微格式吗？​

微格式（Microformats）是一种在 HTML 标记中嵌入语义信息的方法，旨在让计算机能够更好地理解和处理 Web 内容。它通过在 HTML 元素的 class、id、属性等位置添加特定的标记，将数据与特定的含义关联起来，以便机器可以更轻松地提取、解析和利用这些信息。

微格式的设计目标是简单、易于实现和使用。它遵循一些共同的模式和约定，如"hCard"（用于表示个人或组织信息）、"hCalendar"（用于表示事件信息）、"hReview"（用于表示评论信息）等。这些模式定义了特定的类名和属性，以标记和描述相应的数据。

在前端构建中，考虑微格式可以带来一些好处：

  1. 语义化： 微格式能够增加 HTML 标记的语义性，使得网页内容更具可读性和可理解性。它们使得网页不仅对人类用户友好，也对机器具有可读性，有助于搜索引擎理解页面内容。
  2. 数据提取： 微格式提供了一种结构化的方式来表示数据，使得数据提取和解析变得更加容易。搜索引擎、爬虫和其他机器可以更准确地提取和利用页面中的数据。
  3. 链接关联： 微格式还可以用于建立链接关联，将不同页面的相关数据相互关联起来。这有助于构建丰富的数据网络，使得不同页面之间的数据更加互通和连贯。

然而，在现代的前端开发中，微格式的使用已经相对较少，被更强大和灵活的语义化方法所取代，如使用 schema.org 提供的结构化数据标记（如 JSON-LD、RDFa 等）或使用其他语义化标准（如 RDF、OWL 等）。这些方法提供更广泛的语义表达能力，并与搜索引擎和其他机器进行更深入的集成。

因此，在前端构建中，微格式的重要性相对较低，更值得关注的是使用更现代的语义化标记方法和标准，以提供更丰富的数据描述和更好的与机器的交互能力。

HTML5 为什么只需要写 <!DOCTYPE html>，而 HTML4 却需要写很多？​

HTML5 引入了一种新的文档类型声明（Document Type Declaration，DTD），即<!DOCTYPE html>，取代了 HTML4 中需要指定特定 DTD 的繁琐声明方式。这种简化的声明方式是为了减少对开发者的复杂性和提高浏览器的容错性。以下是一些原因解释为什么 HTML5 只需要写<!DOCTYPE html>而 HTML4 需要写很多：

为什么 HTML5 只需要写一段：

<!DOCTYPE html>

而 HTML4 却需要写很长的一段

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

其实主要是因为 HTML5 不基于 SGML，所以不需要引用 DTD。在 HTML4 中，<!DOCTYPE>声明引用 DTD，因为 HTML4 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确的呈现内容。

HTML5 新增了哪些新特性？移除了哪些元素？​

HTML5 引入了许多新的特性，以提供更丰富和强大的 Web 开发功能。以下是 HTML5 新增的一些主要特性：

  1. 语义化标签： HTML5 引入了一些新的语义化标签，如<header>、<nav>、<section>、<article>、<aside>、<footer>等，以更清晰地定义页面结构和内容意义。

  2. 表单增强： HTML5 提供了一些新的表单元素和属性，如<input type="email">、<input type="url">、<input type="date">等，以及新的验证属性和 API，使得表单的构建和验证更加简单和强大。

  3. 多媒体支持： HTML5 引入了<video>和<audio>标签，以直接在网页上嵌入视频和音频内容，无需使用插件。此外，还提供了相应的 JavaScript API，以控制媒体的播放、暂停、音量等操作。

  4. Canvas 绘图： HTML5 的<canvas>元素允许开发者使用 JavaScript 在网页上进行动态绘图和图形渲染，从而创建交互性和可视化效果。

  5. 地理定位： HTML5 提供了地理定位 API，允许网页通过用户设备的 GPS 或其他定位技术获取其地理位置信息，以实现位置相关的功能。

  6. 本地存储： HTML5 引入了本地存储机制，如 localStorage 和 sessionStorage，允许网页在客户端存储数据，以便离线访问或持久保存用户数据。

此外，HTML5 还引入了一些其他的特性，如 Web Workers（在后台执行脚本）、WebSocket（实现实时通信）、新的选择器和 CSS 样式支持等。

移除的元素：

纯表现的元素：basefont、font、s、strike、tt、u、big、center

对可选用性产生负面影响的元素：frame、frameset、noframes

怎么处理 HTML5 新标签兼容问题？​

处理 HTML5 新标签兼容性问题的方法可以分为以下几种：

  1. 使用 CSS 样式重置： 一些旧版本的浏览器可能不识别 HTML5 的新标签，导致这些标签的默认样式失效或不符合预期。可以使用 CSS 样式重置技术，针对 HTML5 新标签重新定义默认样式，以确保它们在各种浏览器中具有一致的外观和布局。

  2. 引入 HTML5 Shiv/HTML5 Shim： HTML5 Shiv（也称为 HTML5 Shim）是一个 JavaScript 库，用于在旧版本的浏览器中使其支持 HTML5 新标签。它通过动态创建新标签的元素节点，使得旧版本的浏览器能够正确解析和渲染这些标签。将 HTML5 Shiv 引入到网页中，可以解决新标签在旧浏览器中的兼容性问题。

  3. 使用 Polyfill 库： Polyfill 库是一种 JavaScript 库，用于在不支持某些 HTML5 特性的浏览器中模拟这些特性的行为。通过引入适当的 Polyfill 库，可以为旧版本的浏览器提供对 HTML5 新特性的支持，使这些浏览器能够使用和处理新标签。

  4. 检测和回退方案： 使用 JavaScript 进行浏览器特性检测，判断是否支持 HTML5 新标签。如果不支持，可以提供一种回退方案，例如使用传统的块级元素或内联元素来代替新标签，以确保在不支持新标签的浏览器中仍能正常显示内容。

  5. 使用 HTML5shiv.js 和 Modernizr.js 组合： HTML5shiv.js 用于解决旧版本 IE 浏览器不识别 HTML5 新标签的问题，而 Modernizr.js 则用于检测浏览器对 HTML5 特性的支持情况。通过结合使用这两个库，可以在旧浏览器中提供对 HTML5 新标签和功能的支持，并根据浏览器的支持情况进行相应的处理。

需要注意的是，处理 HTML5 新标签兼容性问题时，应该综合考虑目标浏览器的使用情况和需求。如果主要面向现代浏览器，可以更自由地使用 HTML5 新标签和特性，而对于需要支持旧版本浏览器的情况，可以采取上述方法之一来解决兼容性问题。

如何实现在一张图片上的某个区域做到点击事件​

要在一张图片上实现点击事件，可以借助 HTML 的图像映射（image map）功能。图像映射允许你在图片上定义多个区域，并为每个区域分配点击事件。

下面是实现在一张图片上某个区域添加点击事件的步骤：

  1. 创建图片元素： 在 HTML 中使用<img>标签插入图片，并为其设置相应的src属性和alt属性。例如：

    <img src="image.jpg" alt="My Image" />

  2. 定义图像映射区域： 在<img>标签之后，使用<map>标签定义图像映射区域，并通过name属性给它一个名称。例如：

    <map name="image-map">
        <!-- 在这里定义图像映射的区域 -->
    </map>

  3. 定义区域和点击事件： 在<map>标签内，使用<area>标签定义具体的区域，并为其设置shape属性和coords属性来确定区域的形状和位置。然后，使用href属性指定点击区域后要跳转的链接，或使用onclick属性指定点击事件的 JavaScript 代码。例如，创建一个矩形区域：

    <area shape="rect" coords="x1,y1,x2,y2" href="link.html" />

    其中，coords属性的值表示矩形区域的左上角和右下角坐标。

  4. 关联图像和图像映射： 在<img>标签中，使用usemap属性将图像与图像映射关联。usemap属性的值应该是以#开头，后跟图像映射的名称。例如：

    <img src="image.jpg" alt="My Image" usemap="#image-map" />

完成上述步骤后，你就可以在指定的区域上实现点击事件了。你可以定义多个区域和对应的点击事件，以满足你的需求。

需要注意的是，图像映射是基于图像的像素坐标来定义区域的，所以在创建区域时要确保准确指定coords属性的值，以及正确设置区域的形状（如矩形、圆形、多边形等）。

a 元素除了用于导航外，还有什么作用？​

<a>元素在 HTML 中不仅仅用于导航，还有其他重要的作用。以下是一些常见的<a>元素的用途：

  1. 超链接： <a>元素最常见的用途是创建超链接，使用户能够点击链接跳转到其他网页、文件或特定位置。通过在href属性中指定目标链接，可以将文本、图像或其他元素转化为可点击的超链接。

  2. 锚点链接： <a>元素可以用于内部页面导航，通过在href属性中指定目标页面中的锚点名称（以#开头），实现页面内部的跳转。这对于长页面或希望直接跳转到特定部分的页面非常有用。

  3. 下载链接： 使用download属性，可以将<a>元素用作文件下载链接。通过在href属性中指定文件的 URL，并设置download属性，浏览器会将链接的目标文件下载到用户的设备上，而不是在浏览器中打开。

  4. 执行 JavaScript 代码： <a>元素可以使用onclick属性来执行 JavaScript 代码，从而实现与点击事件相关的自定义逻辑。这可以用于执行特定的操作、显示或隐藏内容，或与其他 JavaScript 代码进行交互。

  5. 打开邮件程序： 使用mailto协议作为href属性的值，<a>元素可以创建邮件链接，当用户点击链接时，会自动打开默认的邮件程序，并填写预设的收件人、主题等信息。

  6. 执行电话呼叫： 通过使用tel协议作为href属性的值，<a>元素可以创建电话链接，当用户点击链接时，会触发设备上的电话功能，并自动拨打预设的电话号码。

这些是<a>元素的一些常见用途，但并不限于此。<a>元素具有广泛的灵活性和功能，可以根据需要进行定制和扩展。

你知道 SEO 中的 TDK 吗？​

当涉及到 SEO（搜索引擎优化）时，TDK 是一个常见的术语，它代表了"Title"、"Description"和"Keywords"，即网页的标题、描述和关键词。

下面是对 TDK 的解释和它们在 SEO 中的作用：

  1. Title（标题）： 网页的标题是指<title>标签中的文本，它是在浏览器标签栏中显示的内容，也是搜索结果页面上的链接文本。标题对于搜索引擎优化非常重要，它应该准确地描述页面的内容，并包含与页面主题相关的关键词。具有有吸引力、描述准确、关键词优化的标题有助于增加页面在搜索引擎结果中的点击率。

  2. Description（描述）： 网页的描述是指<meta name="description">标签中的文本，它提供了对页面内容的简要描述。该描述通常在搜索结果页面中显示，影响用户是否点击您的链接。一个优秀的描述应该是吸引人的、准确描述页面内容，并包含相关关键词，以吸引用户点击。

  3. Keywords（关键词）： 关键词是指与页面主题相关的词汇或短语，它们在<meta name="keywords">标签中列出。然而，搜索引擎对关键词标签的权重已经降低，因为它容易被滥用。现在，搜索引擎更倾向于根据页面内容和其他信号来确定关键词。因此，关键词标签的作用相对较小，但仍然可以作为参考，帮助搜索引擎了解页面的主题和关键词相关性。

需要注意的是，现代的 SEO 更加注重提供有价值、高质量和原创的内容，以及用户体验和页面结构的优化。因此，在编写 TDK 时，应确保内容准确、吸引人，并符合搜索引擎的指南和最佳实践，同时也要关注用户体验和页面质量。

script 标签中 defer 和 async 的区别​

<script>标签中的defer和async属性是用于控制脚本加载和执行的方式的。它们之间的主要区别如下：

  1. defer 属性： 当浏览器解析到带有defer属性的<script>标签时，它会继续解析文档的同时异步加载脚本文件。脚本文件将在文档解析完毕后才执行，但在DOMContentLoaded事件触发之前执行。如果有多个带有defer属性的脚本，它们会按照它们在文档中出现的顺序依次执行。

    defer属性适用于那些不需要立即执行，但需要在文档解析完成后执行的脚本。它们不会阻止文档的解析和呈现，并且在执行时会按照它们在文档中的顺序执行，因此可以安全地放置在文档的任何位置。

  2. async 属性： 当浏览器解析到带有async属性的<script>标签时，它会异步加载脚本文件，并在加载完成后立即执行。异步加载的脚本不会阻止文档的解析和呈现，因此浏览器会继续解析和显示文档，而不会等待脚本的加载和执行。

    async属性适用于那些不依赖于其他脚本或文档内容的独立脚本。它们可以并行加载和执行，适用于提高页面加载性能。由于脚本的加载和执行顺序不确定，因此在使用async属性时要注意脚本之间的依赖关系。

需要注意的是，使用defer和async属性时，浏览器对于支持这些属性的版本才会生效。对于不支持这些属性的旧浏览器，脚本会按照普通的同步方式加载和执行。此外，如果<script>标签中同时使用了defer和async属性，那么async属性会被忽略，脚本将按照defer的方式加载和执行。

其中蓝色代表js脚本网络加载时间，红色代表js脚本执行时间，绿色代表html解析。

其中蓝色代表 js 脚本网络加载时间，红色代表 js 脚本执行时间，绿色代表 html 解析。

常⽤的 meta 标签有哪些​

以下是一些常用的<meta>标签及其用途：

  1. <meta charset="字符集">： 用于指定网页的字符集编码，常用的字符集包括 UTF-8、ISO-8859-1 等。

  2. <meta name="viewport" content="属性值">： 用于控制移动设备上网页的视口（可见区域），常用属性值包括width=device-width（宽度等于设备宽度）、initial-scale（初始缩放比例）、user-scalable（是否允许用户缩放）等。

  3. <meta name="keywords" content="关键词1, 关键词2, ...">： 用于指定网页的关键词，用于描述网页内容的主题或关键特征。

  4. <meta name="description" content="网页描述">： 用于提供网页的描述，通常在搜索引擎结果中显示，帮助用户了解网页的内容。

  5. <meta name="author" content="作者名称">： 用于指定网页的作者。

  6. <meta http-equiv="refresh" content="秒数;url=目标URL">： 用于设置网页自动刷新，可以指定刷新的时间间隔和目标 URL。

  7. <meta name="robots" content="指令">： 用于指定搜索引擎爬虫对网页的处理方式，包括index（允许索引）、noindex（禁止索引）、follow（允许跟踪链接）、nofollow（禁止跟踪链接）等。

  8. <meta name="format-detection" content="属性值">： 用于控制移动设备上的自动识别和格式化，常用属性值包括telephone=no（禁止识别电话号码）、email=no（禁止识别电子邮件地址）等。

这些是一些常见的<meta>标签，可用于提供关于网页的元数据信息，优化搜索引擎显示、设备兼容性和用户体验等方面。请根据需要选择适合的标签并使用正确的属性值。

img 的 srcset 属性的作⽤？​

srcset属性是用于<img>标签的属性，它用于指定一组备选图像源，并根据设备的屏幕大小和像素密度选择最合适的图像来加载和显示。srcset属性的作用是实现响应式图像，以提供更好的用户体验和性能优化。

具体来说，srcset属性允许您在<img>标签中指定多个图像源和对应的图像宽度描述符。浏览器会根据当前设备的屏幕宽度和像素密度，以及每个图像源的宽度描述符，选择最适合的图像进行加载和显示。

例如，下面是一个使用srcset属性的示例：

<img
    src="default.jpg"
    srcset="small.jpg 480w, medium.jpg 800w, large.jpg 1200w"
    alt="Alternate Text"
/>

在上述示例中，src属性指定了默认的图像源default.jpg，而srcset属性指定了三个备选图像源：small.jpg、medium.jpg和large.jpg，并分别附带了对应的图像宽度描述符。

当浏览器解析到这个<img>标签时，它会根据当前设备的屏幕宽度和像素密度，以及每个图像源的宽度描述符，选择最佳的图像进行加载和显示。如果设备的屏幕宽度匹配了某个图像源的宽度描述符，那么对应的图像将被加载和显示。

这样做的好处是，您可以为不同屏幕尺寸和像素密度提供不同大小和分辨率的图像，以适应不同设备上的显示需求。这可以减少不必要的图像下载，提高页面加载速度，并节省用户的数据流量。

需要注意的是，src属性仍然被用作srcset属性的备选图像源中的默认图像。对于不支持srcset属性的旧浏览器，将会使用src属性指定的默认图像。

总之，通过使用srcset属性，您可以提供适合不同设备和屏幕的图像选择，以提高响应性和用户体验。

说一下 web worker​

Web Worker 是 HTML5 提供的一项浏览器特性，它允许在 Web 应用程序中运行后台线程，以实现并行计算和异步处理，从而提高前端应用的性能和响应性。

传统的 JavaScript 在同一个线程中执行，当执行复杂计算或处理大量数据时，会阻塞用户界面的响应，导致应用程序变得迟钝或不可响应。Web Worker 通过在后台运行的独立线程中执行脚本，将这些计算密集型任务从主线程中分离出来，以避免对用户界面的阻塞。

以下是一些关键特点和用途：

  1. 独立线程运行： Web Worker 在独立的线程中执行，与主线程相互独立，不会阻塞用户界面的渲染和交互。

  2. 无法访问 DOM： Web Worker 在后台运行的线程中，无法直接访问 DOM 元素，因为 DOM 操作仍然是主线程的责任。

  3. 消息传递： 主线程与 Web Worker 之间通过消息传递进行通信。主线程可以向 Web Worker 发送消息，Web Worker 处理消息后返回结果给主线程。

  4. 处理复杂计算： Web Worker 适用于处理 CPU 密集型的计算任务，例如图像处理、数据分析、加密解密等。

  5. 异步操作： Web Worker 可以执行异步操作，例如处理 AJAX 请求、定时器操作等。

  6. 跨域限制： Web Worker 必须遵守同源策略，即脚本文件必须与主页面位于同一个域名下，或者通过 CORS 进行跨域访问。

使用 Web Worker 可以改善性能，提高应用程序的响应性，并充分利用多核处理器的计算能力。然而，需要注意的是，Web Worker 并不适合所有情况，对于简单的任务或需要频繁访问 DOM 的操作，仍然应该在主线程中执行。

HTML5 的离线储存怎么使用，它的工作原理是什么​

HTML5 的离线储存是通过使用应用程序缓存（Application Cache）来实现的。它允许网页在离线状态下继续访问和浏览，并提供了一种缓存网页资源的机制，使得网页能够在没有网络连接时仍然能够正常加载和显示。

使用离线储存需要以下几个步骤：

  1. 创建应用程序缓存清单文件： 需要在网站的根目录下创建一个描述网页资源的清单文件（通常命名为cache.manifest或其他自定义名称），该文件是一个简单的文本文件，以.appcache为扩展名，使用text/cache-manifest作为 MIME 类型。

  2. 在 HTML 文件中引用清单文件： 在网页的<html>标签中，使用manifest属性指定应用程序缓存的清单文件，例如：<html manifest="cache.manifest">。

  3. 定义清单文件内容： 在清单文件中，列出需要缓存的资源，包括 HTML 文件、CSS 样式表、JavaScript 脚本、图像等。每个资源使用相对或绝对路径指定。可以使用注释行（以#开头）和空白行来提高可读性。

  4. 更新清单文件： 当网页中的资源发生变化时，需要更新清单文件。可以通过修改清单文件本身或通过在 HTML 文件中添加一个查询参数（如?v=2）来触发缓存更新。

  5. 处理缓存事件： 在 JavaScript 中，可以通过监听应用程序缓存的相关事件来处理缓存的状态变化和更新，例如window.applicationCache对象的updateready事件、obsolete事件等。

工作原理如下：

  1. 应用程序缓存清单下载： 当浏览器第一次访问带有应用程序缓存的网页时，会下载清单文件。

  2. 资源缓存： 清单文件中列出的资源会被下载并缓存到本地，包括 HTML 文件、样式表、脚本、图像等。这些资源将被保存在浏览器的缓存中，即使在离线状态下也可以访问。

  3. 离线访问： 当用户离线访问网页时，浏览器会从本地缓存加载和显示已缓存的资源，而不是发起网络请求。

  4. 更新和更新就绪： 当用户再次访问网页时，浏览器会在后台检查清单文件是否有更新。如果有更新，浏览器会下载新的资源并更新缓存，但不会立即应用新的缓存。当用户关闭网页或再次打开网页时，更新会生效，应用程序会使用最新的缓存。

需要注意的是，应用程序缓存并不是完全替代网络请求，它仅适用于静态资源的缓存，动态内容仍然需要通过网络获取。此外，离线储存的缓存容量有限，对于大型文件或频繁更新的资源，需要谨慎使用和管理缓存。

浏览器是如何对 HTML5 的离线储存资源进行管理和加载？​

浏览器对 HTML5 的离线储存资源进行管理和加载的过程如下：

  1. 应用程序缓存清单下载： 当浏览器首次访问带有应用程序缓存的网页时，它会下载清单文件（以.appcache为扩展名）。浏览器通过检查 HTML 文件中的<html>标签的manifest属性来确定是否存在应用程序缓存，并获取清单文件的 URL。

  2. 清单解析和资源下载： 浏览器解析清单文件，识别出需要缓存的资源列表。然后，它开始下载清单文件中列出的资源，包括 HTML 文件、CSS 样式表、JavaScript 脚本、图像等。这些资源将被保存在浏览器的应用程序缓存中。

  3. 资源缓存和更新： 下载的资源会被缓存到浏览器的应用程序缓存中，即使在离线状态下也可以访问。如果用户再次访问网页时，浏览器会检查清单文件是否有更新。如果有更新，浏览器会下载新的资源并更新应用程序缓存。

  4. 离线访问： 当用户离线访问网页时，浏览器会从本地的应用程序缓存中加载和显示已缓存的资源，而不是发起网络请求。这使得网页在离线状态下仍然可用，并且加载速度更快。

  5. 缓存事件和更新就绪： 在 JavaScript 中，可以监听应用程序缓存的相关事件来处理缓存的状态变化和更新。例如，可以监听window.applicationCache对象的updateready事件，该事件表示清单文件已经更新，并且新的缓存已准备好在用户下一次访问时生效。

  6. 缓存更新生效： 当用户关闭网页或再次打开网页时，浏览器会应用最新的缓存，使得更新生效。这意味着用户会看到最新版本的网页内容。

需要注意的是，浏览器对离线储存资源的管理和加载是自动处理的，无需开发人员手动干预。浏览器会根据清单文件的指示进行资源的下载、缓存和更新，并在离线状态下从缓存中加载资源。开发人员可以通过监听相关事件来处理缓存的状态变化和更新，以便在用户访问时提供适当的反馈或更新操作。

Canvas 和 SVG 的区别​

Canvas 和 SVG 是两种在 Web 上进行图形绘制的技术，它们具有一些重要的区别：

  1. 绘图原理：

    • Canvas：Canvas 使用基于像素的绘图模型，它提供了一个类似于画布的区域，可以通过 JavaScript 绘制和操作像素。绘制的图形是即时生成的位图，不能直接操作图形对象。
    • SVG：SVG 使用基于矢量的绘图模型，它使用 XML 描述图形，图形是由一系列的矢量路径、形状和文本组成的。绘制的图形是可缩放的矢量图形，可以直接操作和修改图形对象。

  2. 图形质量：

    • Canvas：Canvas 绘制的图形是基于像素的位图，图形的质量取决于浏览器的分辨率和绘图的精度。缩放 Canvas 图形会导致图像的模糊和失真。
    • SVG：SVG 绘制的图形是矢量图形，图形可以无损地缩放和变换，无论是放大还是缩小，图形保持平滑和清晰，不会失真。

  3. 交互性和动画：

    • Canvas：Canvas 提供了丰富的 API，可以通过 JavaScript 实现复杂的交互和动画效果。由于图形是基于像素的，需要手动处理交互和动画的逻辑。
    • SVG：SVG 具有内置的交互性和动画能力，可以通过添加事件监听器和使用 CSS 或 SMIL 动画来实现交互和动画效果。图形对象是可访问和操作的，可以直接处理事件。

  4. 性能和复杂性：

    • Canvas：Canvas 在处理大量图形或复杂动画时具有较好的性能，因为绘制是直接在像素级别上进行的。但对于复杂的图形处理和交互逻辑，开发人员需要编写更多的 JavaScript 代码。
    • SVG：SVG 在处理简单图形和静态图像时具有良好的性能，但在处理大量复杂图形或动画时性能可能下降。SVG 的操作和动画可以通过 CSS 或 SMIL 实现，无需编写大量的 JavaScript 代码。

综上所述，Canvas 适合处理像素级别的绘制、复杂交互和动画效果，而 SVG 适合处理可缩放的矢量图形、静态图像和简单的交互和动画效果。选择使用 Canvas 还是 SVG 取决于具体的需求和场景。

head 标签有什么作用，其中什么标签必不可少？​

<head>标签是 HTML 文档的一个重要部分，它位于文档的起始位置，在<html>标签之后，<body>标签之前。它用于定义文档的元数据和引入外部资源，具有以下作用：

  1. 定义文档的元数据： <head>标签内可以包含一些元数据，如文档的标题、字符编码、作者、描述、关键词等。这些元数据提供了关于文档的信息，对搜索引擎优化（SEO）和浏览器显示起到重要作用。

  2. 引入外部资源： <head>标签内可以包含<link>、<style>和<script>等标签，用于引入外部资源。常见的外部资源包括 CSS 样式表、JavaScript 脚本、图标（favicon）、字体文件等。这些资源可以通过<head>标签提前加载和定义，以便在页面渲染前进行处理。

  3. 定义内部样式和脚本： <head>标签内可以使用<style>和<script>标签来定义内部的 CSS 样式和 JavaScript 脚本。内部样式和脚本的定义可以直接放置在<head>标签内，以便在页面加载时进行解析和执行。

  4. 指定文档的基本链接： <head>标签内可以使用<base>标签来指定文档中所有相对 URL 的基本链接。这对于指定统一的 URL 前缀或基本路径非常有用，可以影响到文档中其他元素（如图片、链接）的 URL 解析。

在<head>标签中，最重要且必不可少的标签是<title>标签。它用于定义网页的标题，显示在浏览器的标题栏或标签页上。<title>标签的内容对于搜索引擎优化和用户体验都非常重要。每个 HTML 文档中只能有一个<title>标签，并且它应该放置在<head>标签的开始位置。

示例：

<!DOCTYPE html>
<html>
    <head>
        <title>My Web Page</title>
        <meta charset="UTF-8" />
        <meta name="description" content="This is my web page." />
        <link rel="stylesheet" href="styles.css" />
        <script src="script.js"></script>
    </head>
    <body>
        <!-- 页面内容 -->
    </body>
</html>

在上述示例中，<head>标签包含了<title>、<meta>、<link>和<script>等标签，用于定义文档的元数据、引入样式表和脚本文件。其中，<title>标签定义了网页的标题，<meta>标签定义了字符编码和描述，<link>标签引入了外部的 CSS 样式表，<script>标签引入了外部的 JavaScript 脚本文件。

浏览器乱码的原因是什么？如何解决？​

浏览器乱码的原因可以有多种，下面列举一些常见的原因：

  1. 字符编码不匹配： 当网页使用的字符编码与浏览器解析时的字符编码不一致时，就会导致乱码。例如，网页使用 UTF-8 编码，但浏览器将其解析为其他编码（如 GBK）。

  2. 缺少字符编码声明： 如果网页没有正确声明所使用的字符编码，浏览器可能会使用默认的字符编码进行解析，导致乱码。

  3. 特殊字符编码问题： 当网页中包含特殊字符（如非 ASCII 字符、Unicode 字符等）时，如果字符编码设置不正确，就会导致乱码。

  4. 服务器响应头设置错误： 服务器返回的响应头中的字符编码设置有误，导致浏览器无法正确解析网页的字符编码。

为了解决浏览器乱码问题，可以采取以下措施：

  1. 正确声明字符编码： 在网页的<head>标签中使用<meta>标签来声明所使用的字符编码，例如：<meta charset="UTF-8">。确保网页的字符编码与声明的字符编码一致。

  2. 检查服务器设置： 检查网站的服务器配置，确保服务器正确设置了字符编码，并在响应头中正确指定字符编码。

  3. 使用合适的字符编码： 确保网页使用的字符编码与实际的文本内容相匹配。常见的字符编码如 UTF-8 适用于大多数情况，但对于某些特殊语言或场景，可能需要使用其他字符编码。

  4. 转换和处理特殊字符： 对于包含特殊字符的文本，使用合适的编码方式进行处理，确保字符被正确编码和解码。

  5. 使用 Web 字体： 对于需要显示特殊字体或字符的情况，可以使用 Web 字体（如 Google Fonts）来确保浏览器能够正确渲染这些字体和字符。

  6. 检查文本编辑器设置： 如果是在文本编辑器中编写网页，确保编辑器的字符编码设置与网页的字符编码一致。

如果以上方法无法解决乱码问题，可以考虑使用调试工具（如浏览器的开发者工具）来检查响应头中的字符编码设置、查看具体的乱码字符以及分析乱码的原因。根据具体情况进行调整和处理，以确保网页在浏览器中正确显示字符。

渐进增强和优雅降级之间的区别​

渐进增强（Progressive Enhancement）和优雅降级（Graceful Degradation）是两种在 Web 开发中常用的策略，它们都旨在处理不同浏览器或设备上的兼容性问题，但它们的方法和着重点有所不同：

  1. 渐进增强（Progressive Enhancement）：

    • 渐进增强的思想是从基本的功能和内容开始构建网页，然后逐步添加更高级和复杂的特性，以提升用户体验。
    • 开发者首先关注核心内容和基本功能，确保网页在所有浏览器和设备上都能正常使用。然后，通过使用现代的 Web 技术和功能来增强用户体验，但这些增强的特性并不是必需的，网页仍然可以在旧版本的浏览器上正常工作。
    • 渐进增强的目标是向后兼容，使得网页在旧版本的浏览器上能够基本可用，而在支持更多功能的现代浏览器中则提供更丰富的体验。

  2. 优雅降级（Graceful Degradation）：

    • 优雅降级的思想是先构建一个功能丰富的网页，并确保它在现代浏览器中正常工作。然后，针对旧版本或不支持某些功能的浏览器，通过适当的降级策略来保证其基本可用性。
    • 开发者首先构建网页的高级版本，利用现代浏览器所支持的功能和技术来实现丰富的用户体验。然后，通过检测浏览器的功能和版本，对不支持的功能进行降级处理，以确保在旧版本的浏览器中仍然能够正常显示和使用。
    • 优雅降级的目标是向前兼容，使得网页在现代浏览器中能够提供最佳体验，同时在旧版本或不支持某些功能的浏览器中仍然能够基本可用。

总结来说，渐进增强是从基本到高级逐步增强功能和体验，关注向后兼容性，确保网页在旧版本浏览器上的可用性。而优雅降级是先构建高级功能，再通过降级处理确保向前兼容性，以适应旧版本浏览器的限制。两者的核心思想都是为了在不同环境中提供最佳的用户体验，但它们的策略和顺序有所区别。选择采用哪种策略取决于具体的项目需求和目标用户群体。

说一下 HTML5 drag API​

HTML5 Drag API（拖放 API）是 HTML5 中引入的一组 API，用于实现网页中的拖放操作。它提供了一种标准的方式来处理拖动元素、拖放目标和相关事件。通过使用 Drag API，开发者可以轻松地实现自定义的拖放功能，例如拖动元素重新排序、拖放文件上传等。

HTML5 Drag API 主要包括以下几个关键组成部分：

  1. 拖动源（Drag Source）： 拖动源是指用户可以从其上拖动的元素。通常使用 HTML 的 draggable 属性将元素标记为可拖动，设置为draggable="true"。一旦元素被标记为可拖动，用户就可以开始拖动操作。

  2. 拖放目标（Drop Target）： 拖放目标是指用户可以将拖动元素释放到其上的元素。拖放目标需要监听相关事件以响应拖放操作，例如拖动元素进入、悬停、离开和释放时的事件。

  3. 拖动事件（Drag Events）： 拖动事件是指在拖动过程中触发的一系列事件，开发者可以通过监听这些事件来控制拖动操作的行为。常见的拖动事件包括 dragstart（拖动开始）、drag（拖动中）、dragend（拖动结束）等。

  4. 放置事件（Drop Events）： 放置事件是指在释放拖动元素时触发的事件，通常在拖放目标上监听这些事件。常见的放置事件包括 dragenter（拖动元素进入目标区域）、dragover（拖动元素在目标区域悬停）、dragleave（拖动元素离开目标区域）和 drop（拖动元素释放到目标区域）等。

使用 HTML5 Drag API 的基本步骤如下：

  1. 将元素标记为可拖动：通过设置元素的draggable属性为true，使其可被拖动。

  2. 监听拖动事件：在拖动源元素上添加事件监听器，例如dragstart、drag和dragend等事件，以便在拖动过程中执行相应的操作。

  3. 监听放置事件：在拖放目标元素上添加事件监听器，例如dragenter、dragover、dragleave和drop等事件，以便在拖动元素释放到目标区域时处理相关操作。

  4. 处理拖放数据：通过事件对象提供的数据传输方法（如setData()和getData()）在拖动和放置事件之间传递数据，以实现数据的交互。

需要注意的是，HTML5 Drag API 的使用可以相对复杂，因为它涉及到多个事件和数据传递的处理。此外，拖放操作在移动设备上的支持可能有所不同，因此在设计和实现拖放功能时需要考虑到跨浏览器和跨设备的兼容性。

请描述一下 cookies，sessionStorage 和 localStorage 的区别？​

Cookies、sessionStorage 和 localStorage 都是 Web 开发中用于在浏览器端存储数据的机制，但它们在存储方式、作用域和生命周期等方面有所不同：

Cookies（Cookie）：

  • Cookies 是由服务器发送到浏览器并存储在用户计算机上的小型文本文件。
  • Cookies 主要用于在客户端和服务器之间传递数据，可以存储有限的数据量（一般不超过 4KB）。
  • Cookies 可以设置过期时间，可以是会话级的（关闭浏览器后失效）或具体的日期时间。
  • Cookies 在每次 HTTP 请求时都会被发送到服务器，包括在同一域名下的所有请求。
  • Cookies 可以被浏览器禁用或限制，且存储的数据可以被用户查看和修改。

sessionStorage：

  • sessionStorage 是 HTML5 中引入的一种客户端存储机制，数据仅在当前会话期间（浏览器窗口关闭前）有效。
  • sessionStorage 可以存储较大量的数据（一般限制在 5MB 左右），以键值对的形式存储。
  • sessionStorage 的数据仅在同一窗口（或同一标签页）中共享，不同窗口（或标签页）之间的 sessionStorage 数据是隔离的。
  • sessionStorage 的数据存储在浏览器的内存中，关闭浏览器窗口后数据将被清除。
  • sessionStorage 的数据只能通过 JavaScript 访问，不会被发送到服务器。

localStorage：

  • localStorage 也是 HTML5 中的一种客户端存储机制，与 sessionStorage 类似，但不受会话期限制。
  • localStorage 可以长期存储大量的数据（一般限制在 5MB 左右），以键值对的形式存储。
  • localStorage 的数据在同一域名下的所有窗口和标签页中共享。
  • localStorage 的数据存储在浏览器的本地，即使关闭浏览器窗口或重启计算机，数据仍然保留。
  • localStorage 的数据只能通过 JavaScript 访问，不会被发送到服务器。

总结来说，Cookies 主要用于在客户端和服务器之间传递数据，具有较小的存储容量和设置过期时间的特点；sessionStorage 用于在同一窗口或标签页中存储会话期间的数据，关闭窗口后数据被清除；localStorage 用于长期存储大量数据，并在同一域名下的所有窗口和标签页中共享。

谈谈以前端角度出发做好 SEO 需要考虑什么？​

从前端角度出发，要在前端设计和开发过程中考虑好 SEO（搜索引擎优化），以下是一些关键因素：

  1. 网页结构和标签： 使用语义化的 HTML 标签来构建网页结构，合理使用标题（h1-h6）、段落（p）、列表（ul、ol）、链接（a）等标签，并确保标签的嵌套和层次结构正确。这有助于搜索引擎理解网页的内容和结构。

  2. 页面标题和描述： 为每个页面设置准确、描述性的标题（Title）和描述（Description）标签。标题应包含关键词，并在合理长度范围内，描述应概括页面内容，吸引用户点击。

  3. URL 结构： 设计友好的 URL 结构，使用关键词描述页面内容，避免使用随机字符或动态生成的 URL。短、简洁、易读的 URL 有助于搜索引擎和用户理解页面内容。

  4. 关键词优化： 在网页的标题、正文、标签、链接等位置合理使用关键词，但要避免过度堆砌关键词，保持自然流畅的语言风格。关键词的使用应符合内容的相关性和用户体验。

  5. 网页加载速度： 优化网页的加载速度对于 SEO 很重要。通过压缩 CSS 和 JavaScript、优化图片、使用浏览器缓存、减少 HTTP 请求等技术手段来提高网页加载速度，以提升用户体验和搜索引擎排名。

  6. 移动友好性： 确保网页在移动设备上有良好的用户体验，使用响应式设计或移动优化的技术，确保页面布局、字体大小、按钮等元素适配不同屏幕尺寸。

  7. 良好的用户体验： 创建良好的用户体验对于 SEO 至关重要。确保网页易于导航、内容易于阅读、页面布局合理等，提供高质量的内容和有价值的信息，吸引用户停留和互动。

  8. 链接优化： 使用内部链接和外部链接来提高页面的可访问性和导航结构。内部链接可以帮助搜索引擎了解网站的结构和内容关联，外部链接可以提高页面的权威性和可信度。

  9. 无障碍性： 为了让残障人士和搜索引擎能够更好地理解和访问网页内容，遵循无障碍性标准，使用无障碍性的 HTML 标签和属性，提供文本替代描述、正确的标题结构等。

  10. 社交媒体整合： 在适当的位置添加社交媒体分享按钮，方便用户分享和传播网页内容，增加页面的曝光度和流量。

综上所述，通过合理的网页结构、关键词优化、URL 优化、良好的用户体验、快速加载速度等前端优化措施，可以提升网站在搜索引擎中的可见性和排名，从而实现更好的 SEO 效果。

超链接访问过后 hover 样式就不出现的问题是什么？如何解决？​

超链接访问后 hover 样式不出现的问题可能是由于 CSS 的伪类选择器状态发生了改变，导致 hover 样式无法生效。这通常是由于在浏览器中已经访问过的链接会应用一种不同的样式，而不再触发:hover 伪类。

要解决这个问题，可以尝试以下方法：

  1. 修改样式顺序： 确保在 CSS 中将:hover 伪类的样式定义放在已访问链接的样式定义之后。例如：
a:link {
    /* 未访问链接样式 */
}
a:visited {
    /* 已访问链接样式 */
}
a:hover {
    /* 鼠标悬停链接样式 */
}
  1. 重设已访问链接样式： 可以通过重新设置已访问链接的样式，将其与未访问链接的样式保持一致，以确保:hover 伪类的样式能够生效。例如：
a:link,
a:visited {
    /* 未访问链接和已访问链接样式设置相同 */
}
a:hover {
    /* 鼠标悬停链接样式 */
}
  1. 使用!important 规则： 如果样式优先级的问题导致:hover 伪类无法生效，可以使用!important 规则来强制应用 hover 样式。例如：
a:hover {
    /* 鼠标悬停链接样式 */
    color: red !important;
}

请注意，在使用!important 规则时要谨慎，确保它是你确实需要的解决方案，避免滥用。

通过以上方法，你应该能够解决超链接访问后 hover 样式不出现的问题，并正确地应用:hover 伪类的样式。

被点击访问过的超链接样式不在具有 hover 和 active 了,解决方法是改变 CSS 属性的排列顺序: L-V-H-A（link,visited,hover,active）

HTML 与 XHTML——二者有什么区别？​

HTML（Hypertext Markup Language）和 XHTML（Extensible Hypertext Markup Language）是两种不同版本的标记语言，它们有以下区别：

  1. 语法规范： HTML 和 XHTML 有不同的语法规范。HTML 是一种相对宽松的语法，允许一些不规范的写法，如缺失闭合标签、属性使用大小写混合等。而 XHTML 则更加严格，要求标签必须闭合、属性要使用引号包裹，标签和属性名要使用小写等。

  2. XML 兼容性： XHTML 是基于 XML 的扩展，因此它具有更严格的 XML 兼容性。XHTML 文档必须遵循 XML 的规范，包括正确的嵌套、大小写敏感等。

  3. 文档类型声明： HTML 使用<!DOCTYPE>声明来指定文档类型，而 XHTML 使用更严格的 XML 文档类型声明，如<!DOCTYPE html>或<!DOCTYPE XHTML>。

  4. 标签和属性： XHTML 要求所有的标签和属性都必须小写，而 HTML 对大小写不敏感，允许使用大写字母。此外，XHTML 要求所有标签必须正确闭合，而 HTML 中某些标签可以省略闭合。

  5. 文档结构： XHTML 要求文档必须有正确的嵌套结构，所有元素必须按照正确的层次关系嵌套。HTML 对于嵌套结构的要求相对宽松。

  6. 应用场景： 由于 XHTML 的严格性和 XML 兼容性，它更适合用于与其他 XML 技术（如 XSLT、XML Schema 等）集成的场景，以及对文档结构和语法要求较高的环境。HTML 更适合用于一般的 Web 页面开发。

需要注意的是，XHTML 实际上是 HTML 的一个更严格的形式，因此可以说 XHTML 是 HTML 的一种扩展。XHTML 的目标是让 Web 开发人员更加规范和一致地编写代码，提高文档的可读性和可维护性。

html 常见兼容性问题？​

在 HTML 开发中，常见的兼容性问题包括以下几个方面：

  1. 浏览器兼容性： 不同浏览器对 HTML 标准的解释和支持程度可能会有差异，导致页面在不同浏览器上显示不一致。特别是旧版本的浏览器可能不支持最新的 HTML5 特性，因此在开发过程中需要注意测试和处理不同浏览器的兼容性问题。

  2. CSS 兼容性： HTML 和 CSS 是密切相关的，CSS 样式在不同浏览器中的解释和渲染也可能存在差异。例如，某些浏览器对盒模型的解释不一致，或者对某些 CSS 属性的支持程度不同。开发时需要注意测试和处理 CSS 在不同浏览器上的兼容性。

  3. JavaScript 兼容性： 如果网页中使用了 JavaScript 脚本，不同浏览器对 JavaScript 的解释和支持程度也可能不同。一些旧版本的浏览器可能不支持最新的 JavaScript 语法和 API，或者存在 JavaScript 解释错误。在开发过程中，需要注意测试和处理 JavaScript 在不同浏览器上的兼容性问题，并使用特定的兼容性解决方案或垫片库（polyfill）来解决兼容性问题。

  4. 响应式设计和移动设备兼容性： 随着移动设备的普及，网页需要适应不同屏幕尺寸和设备类型。响应式设计是一种常用的解决方案，但在实际开发中仍然需要注意移动设备上的兼容性问题，如布局错乱、字体大小、触摸事件等。

  5. 旧版 IE 兼容性： 特别是旧版本的 Internet Explorer（如 IE6、IE7、IE8），由于对标准的支持较差，可能导致 HTML、CSS 和 JavaScript 的兼容性问题。在开发过程中，需要特别关注这些旧版 IE 的兼容性，并为其提供特定的修复和兼容性解决方案。

为了解决这些兼容性问题，可以采取以下措施：

  • 使用标准合规的 HTML、CSS 和 JavaScript 代码，遵循最新的 Web 标准和规范。
  • 进行跨浏览器测试，确保页面在主流浏览器（如 Chrome、Firefox、Safari、Edge 等）上显示一致。
  • 提供适当的兼容性解决方案，如 CSS 前缀、垫片库、特定浏览器的 Hack 等。
  • 使用现代的开发工具和框架，它们通常会处理一些兼容性问题，并提供一致的开发环境。
  • 针对移动设备进行测试和优化，确保网页在不同屏幕尺寸和触摸操作下的良好体验。
  • 在需要支持旧版 IE 的情况下，针对其特定的兼容性问题提供修复和兼容性解决方案。

综上所述，通过遵循标准、进行测试和提供兼容性解决方案，可以最大程度地解决 HTML 开发中的兼容性问题。

HTML 全局属性(global attribute)有哪些?​

HTML 全局属性（Global Attributes）是可以应用于所有 HTML 元素的属性，它们提供了一些通用的功能和行为。以下是 HTML 全局属性的常见列表：

  1. class： 为元素定义一个或多个类名，用于指定元素的样式或用作 JavaScript 和 CSS 选择器的标识符。
  2. id： 为元素定义唯一的标识符。
  3. style： 为元素指定内联样式。
  4. title： 提供有关元素的额外信息，通常以工具提示（tooltip）的形式显示。
  5. lang： 指定元素内容的语言代码。
  6. dir： 指定元素内容的文本方向，如从左到右（ltr）或从右到左（rtl）。
  7. tabindex： 指定元素在可通过键盘导航时的顺序。
  8. accesskey： 定义激活元素的快捷键。
  9. hidden： 表示元素在初始渲染时是否隐藏。
  10. contenteditable： 指定元素内容是否可编辑。
  11. draggable： 指定元素是否可拖动。
  12. spellcheck： 控制元素是否进行拼写检查。
  13. data-*： 自定义属性，可以用于存储元素的自定义数据。
  14. aria-*： 用于定义元素的可访问性（Accessibility）相关属性。

这些全局属性可以应用于几乎所有 HTML 元素，以提供一些通用的功能和行为。它们可以通过在元素的开始标签中添加相应的属性来应用。注意，每个具体的 HTML 元素可能还有一些特定的属性，这些特定属性只适用于该元素。

了解过不同图片格式的区别吗​

是的，我可以为您解释一下常见的图片格式以及它们之间的区别。

  1. JPEG（Joint Photographic Experts Group）： JPEG 是一种广泛应用于照片和复杂图像的有损压缩格式。它通过减少图像细节和颜色信息来实现较小的文件大小。JPEG 适合用于存储彩色照片，但在高压缩比下可能会导致一些细节损失和压缩伪影。

  2. PNG（Portable Network Graphics）： PNG 是一种无损压缩格式，适合存储图形和图像，尤其是具有透明背景的图像。PNG 支持更高的颜色深度和透明度，并且不会引入压缩伪影。但相对于 JPEG，PNG 文件通常会更大。

  3. GIF（Graphics Interchange Format）： GIF 是一种支持动画和透明背景的格式。它使用无损压缩，并且适合用于存储简单的图形、图标和动画。然而，GIF 的颜色深度较低，最多只支持 256 种颜色，因此不适合存储复杂的照片。

  4. WEBP： WEBP 是一种由 Google 开发的图像格式，旨在提供更好的压缩效率和图像质量。它支持有损和无损压缩，透明度以及动画。WEBP 通常比 JPEG 和 PNG 具有更小的文件大小，同时保持较高的图像质量，但在某些情况下可能不受所有浏览器的支持。

  5. SVG（Scalable Vector Graphics）： SVG 是一种基于 XML 的矢量图形格式，用于描述可伸缩的图形和图像。与位图图像（如 JPEG 和 PNG）不同，SVG 使用数学公式来定义图像，因此可以无限放大而不失真。SVG 适合用于图标、图表和可缩放的图形，但不适合存储复杂的照片。

选择适当的图像格式取决于您的需求和具体的图像内容。如果您要存储照片或具有复杂图像细节的图像，JPEG 通常是一个不错的选择。如果需要透明背景或图像有较少的颜色，PNG 可能更适合。对于简单的图形和动画，GIF 可能是一个合适的选择。而 WEBP 和 SVG 则提供了更高级的功能和更好的压缩效率，但需要考虑到浏览器的兼容性。

精灵图的原理和优缺点？​

精灵图（Sprite Sheet）是将多个小图像组合到一个大图像中的技术。它被广泛应用于游戏开发和 Web 设计中，以提高性能和减少网络请求。以下是精灵图的原理和优缺点：

原理：

  1. 多个小图像被组合到一个大图像中，形成一个网格状的图像集合，通常是水平或垂直排列。
  2. 通过调整 CSS 的背景位置或使用 CSS 动画，将所需的小图像从大图像中定位并显示出来。
  3. 利用 CSS 的背景定位和尺寸属性，只显示需要的部分图像，从而实现图像的切换和动画效果。

优点：

  1. 减少 HTTP 请求： 精灵图将多个小图像合并为一个大图像，减少了浏览器发送的 HTTP 请求次数，提高了页面加载速度。
  2. 减少图像大小： 合并图像可以减少总体图像的文件大小，从而减少带宽消耗和加载时间。
  3. 提高渲染性能： 由于只需加载一个大图像，而不是多个小图像，渲染引擎可以更高效地处理图像的加载和显示，提高页面的渲染性能。
  4. 简化维护： 使用精灵图可以集中管理和维护多个小图像，减少文件数量和管理复杂性。

缺点：

  1. 图像编辑和更新： 当需要修改或更新精灵图中的某个小图像时，需要重新生成整个精灵图，并相应地调整 CSS 的背景位置和尺寸，这可能需要一些额外的工作量。
  2. 图像选择限制： 由于所有图像都在同一个大图像中，因此每次显示时只能选择其中的一部分图像。这意味着每个小图像的尺寸和位置都需要事先计划和调整，可能限制了图像的灵活性。
  3. 高分辨率显示： 在高分辨率（Retina）屏幕上，精灵图可能需要提供两倍大小的版本，以确保图像在高分辨率下显示清晰，这会增加图像的文件大小。

综上所述，精灵图通过合并多个小图像到一个大图像中，减少了 HTTP 请求次数、图像大小和提高了渲染性能。然而，它也带来了一些图像编辑和更新的限制，并需要事先计划和调整图像的尺寸和位置。在设计和使用精灵图时，需要权衡其优点和缺点，并根据具体情况进行决策。

“ data- *” 属性的作用是什么 ？​

"data-*" 属性是一种自定义数据属性，用于在 HTML 元素中存储自定义数据。它的作用是允许开发者在 HTML 元素上添加额外的数据，以便在 JavaScript 和 CSS 中使用。

以下是"data-*" 属性的作用和用途：

  1. 存储数据： "data-*" 属性允许将任意数据附加到 HTML 元素上。您可以使用这些属性存储与元素相关的自定义数据，例如标识符、配置选项、状态信息等。

  2. JavaScript 访问： 使用 JavaScript，您可以通过访问元素的 dataset 对象来读取和修改"data-*" 属性的值。例如，如果有一个"data-id"属性，您可以使用 element.dataset.id 来获取其值。

  3. 样式和选择器： 在 CSS 中，您可以使用属性选择器（attribute selector）来选择具有特定"data-*" 属性的元素，并根据这些属性的值应用样式。例如，您可以使用[data-id="example"]来选择具有"data-id"属性值为"example"的元素，并为其应用特定的样式。

  4. 交互和行为： "data-" 属性可以用于存储与元素交互和行为相关的数据。例如，在 JavaScript 中，您可以根据"data-" 属性的值执行特定的操作或逻辑。

  5. 语义化和扩展性： 使用"data-*" 属性可以为 HTML 元素添加语义化的自定义数据，以便在开发中使用。它提供了一种扩展 HTML 元素的方式，使其能够携带更多的信息和上下文。

总的来说，"data-*" 属性提供了一种灵活的方式来存储和操作自定义数据，使开发者能够将额外的信息附加到 HTML 元素上，并在 JavaScript 和 CSS 中进行访问和使用。这对于增强交互性、样式化和功能扩展等方面都非常有用。

HTML 中的 void 元素是什么 ？​

在 HTML 中，"void"元素是指没有闭合标签（closing tag）的特殊元素。这些元素在 HTML 中被称为"void"或"empty"元素，因为它们不包含任何内容或子元素。

"void"元素的特点包括：

  1. 没有闭合标签： 与其他元素不同，"void"元素没有对应的闭合标签。它们以自闭合（self-closing）的形式出现，使用单个标签表示。

  2. 没有内容或子元素： "void"元素没有内容或子元素。它们通常用于表示没有可包含内容的元素，而仅用于引入、嵌入或表示特定的标记。

常见的"void"元素包括：

  • <img>：用于插入图像。
  • <input>：用于创建输入字段。
  • <br>：用于插入换行符。
  • <hr>：用于插入水平分隔线。
  • <meta>：用于指定 HTML 文档的元数据。

示例：

<img src="image.jpg" alt="Image" />
<input type="text" name="username" />
<br />
<hr />
<meta charset="UTF-8" />

需要注意的是，尽管"void"元素没有闭合标签，但在 XHTML 或 XML 规范中，它们需要使用闭合的空标签形式（例如 <br />）来保持规范性。

"void"元素的存在简化了 HTML 的编写和解析，同时提供了一种简洁的方式来插入特定类型的内容或标记。

介绍下资源预加载 prefetch/preload​

资源预加载（prefetch/preload）是一种优化技术，用于在页面加载过程中提前请求和加载未来可能需要的资源，以改善用户体验和性能。

Prefetch（预获取）： Prefetch 是一种浏览器机制，用于在当前页面加载完成后，在空闲时间异步地获取未来页面所需的资源。它通过在页面头部添加<link>标签，指定要预获取的资源的 URL，告诉浏览器提前获取这些资源。

示例：

<link rel="prefetch" href="future-page.html" />
<link rel="prefetch" href="styles.css" />

Prefetch 指令可以用于预获取 HTML 页面、CSS 文件、JavaScript 脚本、字体、图像等资源。当用户导航到预加载的资源所在的页面时，浏览器会从缓存中提供已预加载的资源，以减少请求延迟并加快页面加载速度。

Preload（预加载）： Preload 与 Prefetch 类似，但它更强调资源的重要性和紧迫性。Preload 用于提前加载当前页面所需的关键资源，而不仅仅是未来页面所需的资源。它通过在页面头部添加<link>标签，指定要预加载的资源的 URL 和关键属性，告诉浏览器优先加载这些资源。

示例：

<link
    rel="preload"
    href="critical-style.css"
    as="style"
    onload="this.onload=null;this.rel='stylesheet'"
/>
<link rel="preload" href="important-script.js" as="script" />

Preload 指令可以用于预加载关键 CSS、JavaScript 文件和其他重要资源。使用as属性可以指定资源的类型，以帮助浏览器优化加载过程。通过设置onload属性，可以在资源加载完成后执行特定的操作。

Preload 的目标是在当前页面加载过程中尽早获取关键资源，以加快关键渲染路径并提高页面性能。

需要注意的是，资源预加载并不适用于所有情况，它应该谨慎使用。在确定使用资源预加载时，需要评估资源的重要性、大小和使用频率，以确保它们对性能的实际提升超过了额外的网络开销。

在 HTML 中如何做 SEO 优化？​

在 HTML 中进行 SEO 优化可以提高网页在搜索引擎结果中的排名，增加可见性和访问量。以下是一些关键的 SEO 优化技术和最佳实践：

1. 使用正确的标题标签（Title Tag）​

标题标签是搜索引擎和用户首先看到的内容之一。确保每个页面都有一个独特且描述性强的标题标签，长度在 50-60 个字符之间。

<title>你的网页标题 - 描述关键词</title>

2. 元描述（Meta Description）​

元描述提供了页面内容的简要概述，应该吸引用户点击搜索结果。长度应在 150-160 个字符之间。

<meta name="description" content="这是你网页的简要描述，包含相关关键词。" />

3. 使用合适的标题标签（Heading Tags）​

使用 <h1> 到 <h6> 标签来定义内容的层次结构。每个页面应有一个唯一的 <h1> 标签，其余的可以用来分层次划分内容。

<h1>主要标题</h1>
<h2>副标题</h2>
<h3>次级标题</h3>

4. 关键词优化​

在页面内容中自然地包含相关关键词，但避免关键词堆砌。关键词应出现在标题、段落、子标题和图片的 alt 属性中。

<p>这是包含关键词的段落。</p>
<img src="image.jpg" alt="关键词描述的图像" />

5. 优化 URL 结构​

使用简洁且描述性强的 URL，避免使用长的或无意义的参数。URL 中包含关键词有助于 SEO。

<a href="https://example.com/keyword-description">链接文字</a>

6. 内部链接​

通过内部链接将相关页面连接起来，有助于搜索引擎爬虫更好地索引你的站点，也有助于用户导航。

<a href="相关页面.html">相关页面</a>

7. 图片优化​

为图片添加描述性的文件名和 alt 属性，并尽量减小图片文件大小以提高页面加载速度。

<img src="描述性文件名.jpg" alt="图片描述" />

8. 提高页面加载速度​

页面加载速度是 SEO 的重要因素。使用压缩和缓存技术，优化图片和代码，减少重定向。

9. 移动友好性​

确保网站对移动设备友好，并通过响应式设计使其在各种屏幕尺寸上都能良好显示。使用移动优先的设计策略，并进行适当的测试。

10. 创建并提交站点地图​

站点地图有助于搜索引擎更好地索引你的站点内容。创建 XML 站点地图并提交到 Google Search Console。

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://example.com/page1</loc>
    <lastmod>2024-01-01</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.8</priority>
  </url>
</urlset>

11. 实施结构化数据​

使用结构化数据（如 schema.org）来帮助搜索引擎理解你的内容。这可以提高搜索结果中的展示效果，如富文本摘要。

<script type="application/ld+json">
    {
        "@context": "http://schema.org",
        "@type": "Article",
        "headline": "文章标题",
        "author": "作者名",
        "datePublished": "2024-05-31",
        "image": "https://example.com/image.jpg",
        "publisher": {
            "@type": "Organization",
            "name": "出版商名称",
            "logo": {
                "@type": "ImageObject",
                "url": "https://example.com/logo.jpg"
            }
        }
    }
</script>

12. 确保页面内容高质量且有价值​

内容是 SEO 的核心。确保页面内容原创、有价值、且与目标关键词相关。定期更新内容，保持信息的最新性和准确性。

建立高质量的外部链接，有助于提高网站的权威性和排名。可以通过内容营销、合作伙伴关系和社交媒体推广等方式获得外部链接。

14. 使用 HTTPS​

确保网站使用 HTTPS 协议，提供安全的浏览环境。Google 对使用 HTTPS 的网站给予排名上的优待。

<link rel="canonical" href="https://example.com/page-url" />

通过以上优化措施，可以显著提高网页的 SEO 性能，增加在搜索引擎中的可见性和流量。

首屏和白屏时间如何计算？​

首屏时间和白屏时间是网页性能优化中的两个重要指标，它们的计算方法如下：

  1. 白屏时间：白屏时间是指从浏览器开始请求文档到浏览器开始解析文档的时间。在 JavaScript 中，可以通过 performance.timing.responseStart - performance.timing.navigationStart 来计算。

  2. 首屏时间：首屏时间是指从浏览器开始请求文档到首屏内容渲染完成的时间。这个时间的计算比较复杂，因为需要考虑到图片、CSS、JavaScript 等资源的加载时间。一种常见的计算方法是使用 window.onload 事件，即 performance.timing.loadEventEnd - performance.timing.navigationStart。但这种方法并不准确，因为 window.onload 事件会等待所有资源加载完成，包括一些并不影响首屏渲染的资源。

更准确的首屏时间计算方法需要根据具体的页面结构和内容来确定，可能需要使用 Performance API 的 performance.getEntries() 方法来获取具体的资源加载时间，或者使用自定义的时间戳来标记首屏内容的渲染完成时间。

请注意，以上的计算方法都需要在浏览器支持 Performance API 的情况下才能使用。如果浏览器不支持 Performance API，可能需要使用其他方法来估计这些时间。希望这个答案对你有所帮助！

html 中 event 对象中的 target 和 currentTarget​

在处理 HTML 事件时，event 对象提供了许多有用的属性和方法，其中 target 和 currentTarget 是两个常用的属性。它们在事件处理过程中有不同的作用和意义。

event.target​

event.target 属性指向触发事件的元素，即事件的实际目标。无论事件是如何冒泡或捕获的，target 始终指向最初触发事件的元素。

示例​
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Event Target Example</title>
    </head>
    <body>
        <div id="parent">
            <button id="child">Click Me</button>
        </div>

        <script>
            document
                .getElementById("parent")
                .addEventListener("click", function (event) {
                    console.log("event.target:", event.target); // 输出触发事件的元素
                });
        </script>
    </body>
</html>

在这个例子中，无论你点击 #parent 还是 #child 按钮，event.target 都会指向你实际点击的那个元素。

event.currentTarget​

event.currentTarget 属性指向绑定事件处理程序的元素，即事件当前正在处理的元素。在事件冒泡或捕获过程中，currentTarget 会随着事件流动而变化。

示例​
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Event CurrentTarget Example</title>
    </head>
    <body>
        <div id="parent">
            <button id="child">Click Me</button>
        </div>

        <script>
            document
                .getElementById("parent")
                .addEventListener("click", function (event) {
                    console.log("event.currentTarget:", event.currentTarget); // 输出绑定事件处理程序的元素
                });
        </script>
    </body>
</html>

在这个例子中，无论你点击 #parent 还是 #child 按钮，event.currentTarget 都会指向绑定事件处理程序的 #parent 元素。

区别总结​

  • event.target：指向触发事件的元素，即事件的实际目标。
  • event.currentTarget：指向绑定事件处理程序的元素，即事件当前正在处理的元素。

具体场景​

假设你有一个嵌套的结构，并且在父元素上绑定了一个事件处理程序：

<div id="parent">
    <button id="child">Click Me</button>
</div>

如果你在 #parent 上绑定了一个点击事件处理程序：

document.getElementById("parent").addEventListener("click", function (event) {
    console.log("event.target:", event.target);
    console.log("event.currentTarget:", event.currentTarget);
});

当你点击 #child 按钮时：

  • event.target 会是 #child，因为这是实际触发事件的元素。
  • event.currentTarget 会是 #parent，因为这是绑定事件处理程序的元素。

总结​

理解 event.target 和 event.currentTarget 的区别对于处理复杂的事件流和事件委托非常重要。target 用于获取实际触发事件的元素，而 currentTarget 用于获取当前正在处理事件的元素。通过这两个属性，你可以更灵活地控制事件处理逻辑。

BOM 和 DOM 分别是什么​

BOM (Browser Object Model)​

BOM，全称为浏览器对象模型，是指浏览器提供的一组对象，用于与浏览器窗口进行交互。BOM 并不是标准的一部分，但它是所有现代浏览器都支持的一组 API。BOM 主要包括以下几个部分：

  • window 对象：代表浏览器窗口或框架。它是 BOM 的核心对象，所有其他对象都是它的属性或方法。
  • navigator 对象：提供关于浏览器的信息，如浏览器名称、版本、操作系统等。
  • screen 对象：提供关于用户屏幕的信息，如屏幕分辨率、颜色深度等。
  • location 对象：提供当前 URL 的信息，并允许你重定向浏览器到新的 URL。
  • history 对象：提供浏览器的历史记录，可以用来在用户的浏览历史中前进或后退。
示例代码​
// 获取浏览器窗口的宽度和高度
console.log(window.innerWidth);
console.log(window.innerHeight);

// 获取当前URL
console.log(window.location.href);

// 重定向到新的URL
window.location.href = "https://www.example.com";

DOM (Document Object Model)​

DOM，全称为文档对象模型，是 HTML 和 XML 文档的编程接口。它将文档表示为一个结构化的节点树，每个节点代表文档的一部分（如元素、属性、文本等）。通过 DOM，开发者可以动态地访问和更新文档的内容、结构和样式。

DOM 是 W3C 的标准，所有现代浏览器都支持它。DOM 主要包括以下几个部分：

  • document 对象：代表整个 HTML 或 XML 文档，是 DOM 的根节点。
  • 元素节点：代表 HTML 或 XML 文档中的元素，如<div>、<p>等。
  • 属性节点：代表元素的属性，如id、class等。
  • 文本节点：代表元素或属性中的文本内容。
示例代码​
// 获取文档中的一个元素
var element = document.getElementById("myElement");

// 修改元素的内容
element.innerHTML = "Hello, World!";

// 创建一个新的元素并添加到文档中
var newElement = document.createElement("div");
newElement.innerHTML = "This is a new element";
document.body.appendChild(newElement);

总结​

  • BOM：主要用于与浏览器窗口进行交互，提供关于浏览器和用户屏幕的信息。
  • DOM：主要用于操作 HTML 和 XML 文档的内容和结构。

希望这些信息对你有所帮助！如果有任何问题，欢迎继续提问。

什么是 H5 ?​

H5 是指 HTML5（HyperText Markup Language 5）的简称。HTML5 是一种用于创建和呈现网页内容的标准标记语言，它是 HTML 的第五个主要版本，并取代了之前的 HTML4。

HTML5 引入了许多新的特性和元素，为开发者提供了更多的功能和灵活性。以下是 HTML5 的一些主要特点和功能：

  1. 语义化标签：HTML5 引入了一些新的语义化标签，如 <header>、<nav>、<article>、<section>、<footer> 等，用于更清晰地描述网页结构和内容的含义。

  2. 多媒体支持：HTML5 提供了内置的多媒体支持，包括 <video> 和 <audio> 标签，可以方便地嵌入视频和音频内容，而无需依赖第三方插件（如 Flash）。

  3. Canvas 绘图：HTML5 中的 <canvas> 元素允许通过 JavaScript 在网页上进行动态的图形绘制和图像处理，实现各种交互效果、游戏和数据可视化等。

  4. 表单增强：HTML5 提供了一些新的表单元素和属性，如 <input type="email">、<input type="date">、<input type="range"> 等，以及表单验证和自动完成等功能的增强。

  5. Web 存储：HTML5 引入了本地存储机制，包括 localStorage 和 sessionStorage，使网页能够在客户端保存和读取数据，提供了更好的离线存储和数据管理能力。

  6. Web 标准化和兼容性：HTML5 旨在推进 Web 标准化进程，减少浏览器之间的差异，并提供更一致的开发体验和用户体验。

HTML5 的出现对 Web 开发和移动应用开发产生了广泛的影响。它提供了更多的功能和 API，使开发者能够创建更丰富和交互性强的网页应用，并且能够更好地适应不同的设备和平台。HTML5 技术的发展也推动了移动应用的发展，使得开发者可以使用 Web 技术构建跨平台的移动应用程序。

行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？​

  • 行内元素： a, b, span, img, input, select, strong;
  • 块级元素： div, ul, li, dl, dt, dd, h1-5, p等；
  • 空元素： <br>, <hr>, <img>, <link>, <meta>;

页面导入样式时，使用link和@import有什么区别​

  • link属于HTML标签，而@import是css提供的；
  • 页面被加载时，link会同时被加载，而@import引用的css会等到页面被加载完再加载；
  • @import只在IE5以上才能识别，而link是XHTML标签，无兼容问题；
  • link方式的样式的权重高于@import的权重。

property和attribute的区别是什么​

  • property是DOM中的属性，是JavaScript里的对象;
  • attribute是HTML标签上的特性，它的值只能够是字符串;

简单的理解就是：Attribute就是DOM节点自带的属性，例如html中常用的id、class、title、align等；而Property是这个DOM元素作为对象，其附加的内容，例如childNodes、firstChild等。

为什么利用多个域名来存储网站资源会更有效​

  • CDN缓存更加方便；
  • 突破浏览器并发限制；
  • 节约cookie宽带；
  • 节约主域名的连接数，优化页面下响应速度；
  • 防止不必要的安全问题；

HTML中几种图片格式的区别以及使用​

页面中常用的几种图片格式有: png, jpg(jpeg),gif, bmp等；

（1）、Png格式的特征

特征： 图片背景透明，可以支持的颜色有很多。

使用范围: 比较广，在目前使用频率最高。

（2）、jpg格式特征

特征： 图片不支持透明，静态图，支持的颜色也比较多，可压缩。

使用范围： 使用范围较广，可使用作为电脑做面壁纸，手机屏保等，可根据需求来确实使用图片的分辨率，

（3）、gif格式特征

特征： 动态图，支持的颜色较少。

使用范围： 在目前看到的在网站内使用频率较低。

说一下web Quality（无障碍）​

能够被残障人士使用的网站才能称得上一个易用的（易访问的）网站。 残障人士指的是那些带有残疾或者身体不健康的用户。 使用alt 属性： <img src="person.jpg" alt="this is a person"/> 有时候浏览器会无法显示图像。具体的原因有： 用户关闭了图像显示 浏览器是不支持图形显示的迷你浏览器 浏览器是语音浏览器（供盲人和弱视人群使用） 如果您使用了 alt 属性，那么浏览器至少可以显示或读出有关图像的描述。

说一下几个很实用的 BOM 属性对象方法?​

什么是Bom? Bom 是浏览器对象。有哪些常用的Bom 属性呢？

location 对象

location.href-- 返回或设置当前文档的URL
location.search -- 返回URL 中的查询字符串部分。例
// 如http://www.xxx.com/xxx.go?id=5&name=xxx 返回包括(?)后面的内容?id=5&name=xxx
location.hash -- 返回URL#后面的内容，如果没有#，返回空
location.host -- 返回URL 中的域名部分，例如www.dreamdu.com
location.hostname -- 返回URL 中的主域名部分，例如dreamdu.com
location.pathname -- 返回URL 的域名后的部分。例如http://www.dreamdu.com/xhtml/ 返回/xhtml/
location.port -- 返回URL 中的端口部分。例如http://www.dreamdu.com:8080/xhtml/ 返回 8080
location.protocol -- 返回URL 中的协议部分。例如http://www.dreamdu.com:8080/xhtml/ 返回(//)前面的内容http:
location.assign -- 设置当前文档的URL
location.replace() -- 设置当前文档的URL，并且在history 对象的地址列表中移除这个
URL location.replace(url);
location.reload() -- 重载当前页面

history 对象

history.go() -- 前进或后退指定的页面数history.go(num);
history.back() -- 后退一页
history.forward() -- 前进一页

Navigator 对象

navigator.userAgent -- 返回用户代理头的字符串表示(就是包括浏览器版本信息等的字符串)
navigator.cookieEnabled -- 返回浏览器是否支持(启用)cookie

说一下HTML5 drag api​

dragstart：事件主体是被拖放元素，在开始拖放被拖放元素时触发，。
darg：事件主体是被拖放元素，在正在拖放被拖放元素时触发。
dragenter：事件主体是目标元素，在被拖放元素进入某元素时触发。
dragover：事件主体是目标元素，在被拖放在某元素内移动时触发。
dragleave：事件主体是目标元素，在被拖放元素移出目标元素是触发。
drop：事件主体是目标元素，在目标元素完全接受被拖放元素时触发。
dragend：事件主体是被拖放元素，在整个拖放操作结束时触发

fetch 发送2 次请求的原因​

fetch 发送post 请求的时候，总是发送2 次，第一次状态码是204，第二次才成功？原因很简单，因为你用fetch 的post 请求的时候，导致fetch 第一次发送了一个Options请求，询问服务器是否支持修改的请求头，如果服务器支持，则在第二次中发送真正的请求。

Cookie、sessionStorage、localStorage共同点：都是保存在浏览器端，并且是同源的。

Cookie和session： Cookie 和session 都可用来存储用户信息，cookie 存放于客户端，session 存放于服务器端，因为cookie 存放于客户端有可能被窃取，所以cookie 一般用来存放不敏感的信息，比如用户设置的网站主题，敏感的信息用session 存储，比如用户的登陆信息，session 可以存放于文件，数据库，内存中都可以，cookie 可以服务器端响应的时候设置，也可以客户端通过JS 设置cookie 会在请求时在http 首部发送给客户端，cookie 一般在客户端有大小限制，一般为4K，很多浏览器都限制一个站点最多保存20 个cookie。

cookie 有哪些编码方式？encodeURI（）

cookie 的作用： 保存用户登录状态。例如将用户id 存储于一个cookie 内，这样当用户下次访问该页面时就不需要重新登录了，现在很多论坛和社区都提供这样的功能。cookie 还可以设置过期时间，当超过时间期限后，cookie 就会自动消失。因此，系统往往可以提示用户保持登录状态的时间：常见选项有一个月、三个月、一年等。跟踪用户行为。例如一个天气预报网站，能够根据用户选择的地区显示当地的天气情况。如果每次都需要选择所在地是烦琐的，当利用了cookie 后就会显得很人性化了，系统能够记住上一次访问的地区，当下次再打开该页面时，它就会自动显示上次用户所在地区的天气情况。因为一切都是在后台完成，所以这样的页面就像为某个用户所定制的一样，使用起来非常方便定制页面。如果网站提供了换肤或更换布局的功能，那么可以使用cookie 来记录用户的选项，例如：背景色、分辨率等。当用户下次访问时，仍然可以保存上一次访问的界面风格。

sessionStorage： 仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持，localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie 只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。（key：本身就是一个回话过程，关闭浏览器后消失，session 为一个回话，当页面不同即使是同一页面打开两次，也被视为同一次回话）。

localStorage： localStorage 在所有同源窗口中都是共享的；cookie 也是在所有同源窗口中都是共享的。（key：同源窗口都会共享，并且不会失效，不管窗口或者浏览器关闭与否都会始终生效）。

具体区分

下面从几个方向区分一下cookie，localstorage，sessionstorage 的区别

1、生命周期：

  • Cookie：可设置失效时间，否则默认为关闭浏览器后失效
  • Localstorage:除非被手动清除，否则永久保存
  • Sessionstorage：仅在当前网页会话下有效，关闭页面或浏览器后就会被清除 2、存放数据：
  • Cookie：4k 左右
  • Localstorage 和sessionstorage：可以保存5M 的信息 3、http 请求：
  • Cookie：每次都会携带在http 头中，如果使用cookie 保存过多数据会带来性能问题
  • 其他两个：仅在客户端即浏览器中保存，不参与和服务器的通信 4、易用性：
  • Cookie：需要程序员自己封装，原生的cookie 接口不友好
  • 其他两个：即可采用原生接口，亦可再次封装 5、应用场景：
  • 从安全性来说，因为每次http 请求都回携带cookie 信息，这样子浪费了带宽，所以cookie应该尽可能的少用，此外cookie 还需要指定作用域，不可以跨域调用，限制很多，但是用户识别用户登陆来说，cookie 还是比storage 好用，其他情况下可以用storage，localstorage可以用来在页面传递参数，sessionstorage 可以用来保存一些临时的数据，防止用户刷新页面后丢失了一些参数。

XSS（跨站脚本攻击）是指攻击者在返回的HTML 中嵌入javascript 脚本，为了减轻这些 攻击，需要在HTTP 头部配上，set-cookie： httponly-这个属性可以防止XSS,它会禁止javascript 脚本来访问cookie。 secure - 这个属性告诉浏览器仅在请求为https 的时候发送cookie。 结果应该是这样的：Set-Cookie=<cookie-value>.....

click 在ios 上有300ms 延迟，原因及如何解决？​

  1. 粗暴型，禁用缩放<meta name="viewport" content="width=device-width, user-scalable=no">

  2. 利用FastClick，其原理是：检测到touchend 事件后，立刻出发模拟click 事件，并且把浏览器300 毫秒之后真正出发的事件给阻断掉。

addEventListener 参数​

addEventListener(event, function, useCapture)
// 其中，event 指定事件名；function 指定要事件触发时执行的函数；
// useCapture 指定事件是否在捕获或冒泡阶段执行。

防止手机中页面放大和缩小​

<meta name="viewport" content="user-scalable=no">
<meta name="viewport" content="initial-scale=1,maximum-scale=1">

上下拉动滚动条时卡顿、慢​

body {
    -webkit-overflow-scrolling: touch;
    overflow-scrolling:touch;
}

重排与重绘​

当元素的样式发生变化时，浏览器需要触发更新，重新绘制元素。这个过程中，有两种类型的操作，即重绘与重排

重排（reflow）​

当元素的尺寸、结构或触发某些属性时，浏览器会重新渲染页面，称之为 重排，此时，浏览器需要重新经过计算，计算后还需要重新布局页面，所以是比较重的操作

会触发重排的操作：

  • 页面首次渲染
  • 浏览器窗口大小改变
  • 元素尺寸、位置、内容发生改变
  • 元素字体大小变化
  • 添加或删除可见的 dom 元素
  • 激活 CSS 伪类（例如：hover）
  • 查询某些属性或调用某些方法
    • clientWidth、clientHeight、clientTop、clientLeft
    • offsetWidth、offsetHeight、offsetTop、offsetLeft
    • scrollWidth、scrollHeight、scrollTop、scrollLeft
    • getComputedStyle()
    • getBoundingClientRect()
    • scrollTo
重绘（repaint）​

当元素样式的改变不影响布局时，浏览器会使用重绘对元素进行升级，由于此时只需要 UI 层面的重新像素绘制，因此损耗较小

如何避免触发重排和重绘​

重排必会触发重绘，重绘不一定触发重排。重排代价较高，重绘开销较小

  • CSS

    • 避免使用 table 布局
    • 尽可能在 DOM 树的最末端改变 class
    • 避免使用多层内联样式
    • 避免使用 CSS 表达式（如：calc()）
    • 将动画效果应用到 position 属性为 absolute 或 fixed 的元素上
    • CSS3 硬件加速（GPU 加速）

  • javascript

    • 避免频繁操作样式，可以汇总后统一 一次修改
    • 尽量使用 class 进行样式修改
    • 减少 dom 的增删次数，可以使用字符串或者 documentFragment 一次性插入
    • 极限优化时，可以将其样式修改为 display: none 后修改
    • 避免多次触发上面提到的那些会触发重排的方法，尽量用 变量存储
    • 对具有复杂动画的元素使用绝对定位，使其脱离文档流，否则会引起父元素及后续元素频繁回流

HTML5 有哪些新特性？​

  1. 拖拽释放(Drag and drop) API；
  2. 语义化更好的内容标签（header,nav,footer,aside,article,section）；
  3. 音频、视频 API (audio,video)；
  4. 画布 (Canvas) API、矢量图SVG；
  5. 地理 (Geolocation) API；
  6. 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失； sessionStorage 的数据在浏览器关闭后自动删除；
  7. 表单控件，calendar、date、time、email、url、search...；
  8. 新的技术 Web Worker, WebSocket...；
  9. SVG。

对 HTML5 语义化的理解？列举一些废弃及新增的标签？​

  • 语义化
    1. 页面的 内容结构化，结构更清晰，便于对浏览器、搜索引擎解析；即使在没有样式 CSS 情况下也以一种文档格式显示，并且是容易阅读的;
    2. 搜索引擎的爬虫也依赖于 HTML 标记来确定上下文和各个关键字的权重，利于 SEO;
    3. 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
  • 新增标签
    1. header、footer、section、nav、article、hgroup、aside、video、audio...
  • 移除标签
    1. 纯表现的元素：basefont、big、center、font、s、strike、tt、u；
    2. 对可用性产生负面影响的元素：frame、frameset、noframes。

meta 标签有什么作用？介绍一下？​

行内元素和块级元素的区别？​

  1. 行内元素会在一条直线上排列，都是同一行的，水平方向排列。块级元素各占据一行，垂直方向排列。块级元素从新行开始结束接着一个断行。
  2. 块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。
  3. 行内元素设置 width 无效，height 无效(可以设置 line-height)，margin、padding 上下无效。

什么是渐进增强和优雅降级？​

  • 渐进增强（progressive enhancement）：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
  • 优雅降级（graceful degradation）：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

iframe 如何和父窗口通信？​

iframe 内部打开一个链接会发生什么？​

areaObject.target=_blank|_parent|_self|_top
  • 当设置 iframe 内部的 a 标签 target 属性为 _black 时，无论嵌套多少层 iframe 都会在最外层的网页中新开一个页面；
  • 当设置 iframe 内部的 a 标签 target 属性为 _parent 时，会把当前 iframe 的父级页面替换；
  • 当设置 iframe 内部的 a 标签 target 属性为 _self 时，会把 iframe 自身替换；
  • 当设置 iframe 内部的 a 标签 target 属性为 _top 时，无论嵌套多少层 iframe 都会替换最外层的网页。
问题参考链接

2022 高频前端面试题——HTML（上篇）

「2021」高频前端面试题汇总之 HTML 篇

2022 最新前端面试题(HTML/CSS 篇 近万字含解答)

前端基础面试题（HTML,CSS,JS)

在阿里我是如何当面试官的

金三银四，我为面试所准备的 100 道面试题以及答案，不看要遭老罪喽

前端万字面经——基础篇

前端万字面经——进阶篇

金九前端面试总结！