HTML

什么是DOCTYPE，为什么需要它？

DOCTYPE 是一个文档类型声明，它告诉浏览器页面使用的是哪种 HTML 或 XHTML 规范。
它的存在确保了浏览器能够以标准模式渲染网页，从而避免兼容性问题

对于 HTML5，DOCTYPE 简单地声明为 <!DOCTYPE html>。不同的渲染模式会影响浏览器对CSS代码甚至JavaScript脚本的解析。
它必须声明在HTML文档的第一行。浏览器渲染页面有两种模式，可通过document.compatMode获取：
CSS1Compat：标准模式，默认模式，浏览器使用W3C的标准解析渲染页面。在标准模式中，浏览器以其支持的最高标准呈现页面。
BackCompat：怪异模式（混杂模式），浏览器使用自己的怪异模式解析渲染页面。在怪异模式中，页面以一种比较宽松的向后兼容的方式显示。

如果不写<!DOCTYPE html>声明，浏览器会进入“怪异模式”（Quirks Mode）。
在怪异模式下，浏览器会尝试兼容旧版本HTML和CSS的渲染方式，这可能会导致页面布局和样式出现不一致的问题。
盒子模型差异：在怪异模式下，IE浏览器的盒子模型与标准模式不同，可能会导致页面布局错乱。
CSS样式差异：一些CSS属性在怪异模式下可能无法正常工作

HTML 和 XHTML 有什么区别？

XHTML是 HTML 的一个严格版本，它遵循 XML 规则。XHTML旨在将 HTML 的灵活性与 XML 的结构化和严格性结合起来。

严格性：XHTML 更加严格，要求所有标签必须闭合，属性值必须用引号括起来，并且标签名和属性名必须小写。
语法结构：HTML 对大小写不敏感，允许某些标签自动闭合；而 XHTML 是 XML 的一种应用，遵循 XML 的规则。
错误处理：HTML 浏览器更宽容对待错误，而 XHTML 在遇到错误时可能会停止解析。
命名空间支持：XHTML 支持命名空间，(这对于包含来自不同DTD的元素是有用的。)

DTD 是文档类型定义（Document Type Definition）的缩写，它是用于定义 SGML（、HTML 和 XML 文档结构的一种机制。
DTD 描述了合法的标记结构，规定了哪些元素可以出现在文档中，以及这些元素如何相互嵌套。
通过引用特定的 DTD，浏览器或其他应用程序能够验证文档是否符合预期的格式。

解释一下 HTML 中的语义化是什么意思？

语义化HTML是指使用具有明确语义的HTML标签来标记页面内容，使页面结构更加清晰、合理，便于人和机器理解。
使用语义化标签的原因包括：
提高代码可读性：让其他开发者更容易读懂代码，理解页面结构和内容的逻辑关系。
有利于SEO：搜索引擎爬虫能够更好地抓取和解析页面内容，从而提高网页在搜索结果中的排名。
增强页面可访问性：屏幕阅读器等辅助设备可以更准确地读取页面内容，为有视觉障碍的用户带来更好的浏览体验。
便于维护和扩展：当需要对页面进行修改或添加新内容时，语义化的结构使得操作更加方便快捷。

例如，<article>、<section>、<header>、<footer> 等标签可以更好地表达页面结构，有助于搜索引擎优化和提高无障碍访问能力。

如何让网页更加无障碍友好？

答：
使用语义化的 HTML 标签。
提供替代文本 (alt) 给图片和其他非文本内容。
确保所有交互式元素都可通过键盘导航。
使用ARIA属性增强动态内容和复杂组件的无障碍性。
确保足够的对比度，使文本易于阅读。

ARIA（Accessible Rich Internet Applications，可访问的富互联网应用程序）属性是一组特殊属性,它们被添加到 HTML 元素中，以增强 Web 内容和应用程序的无障碍性。这些属性提供了额外的信息给辅助技术（如屏幕阅读器），使得动态内容和复杂用户界面控件（如树形菜单、滑块、选项卡面板等）对于残障人士来说更加易于理解和使用。

解释一下 HTML 中的块级元素与行内元素的区别。

答：
块级元素display:block：默认情况下独占一行，宽高边距都能控制，是一个容器（盒子），里面可以放行内或块级元素。常见的有 <div>, <p>, <h1> 到 <h6> 等。
应用：块元素水平居中：设置宽度同时盒子左右外边距设为auto

行内元素display:inline：只占据其内容所需的宽度，不会强制换行，width 和 height 属性将不起作用宽高无法修改由自身撑开，只能容纳文本或其他行内元素。它们只能包含文本或其他行内元素。常见的有 <span>, <a>, <img> 等。
行内块元素：一行可以显示多个，之间有空白缝隙；宽度无法修改由自身撑开，高度和边距可以修改
应用：行内元素水平居中：给父元素添加text-align:center

什么是 Meta 标签？它们的作用是什么？

Meta标签位于HTML文档的 部分，提供关于文档本身的元数据。
这些信息通常不会直接显示给用户，会被浏览器使用，如设置字符编码 (<meta charset="UTF-8">)、指定页面描述 (<meta name="description" content="...">) 和控制视口行为 (<meta name="viewport" content="width=device-width, initial-scale=1">)。
关键词：<meta name="keywords" content="关键词1,关键词2">，向搜索引擎提供与网页内容相关的关键词，但现代搜索引擎已较少依赖此标签。

解释一下 HTML 中的表单元素及它们的工作原理。

答：
表单元素包括 <form>、<input>、<textarea>、<select>等。
表单用于和用户交互，收集用户信息。
每个表单元素都有自己的类型（如文本框、密码框、复选框等）和名称属性，用于标识数据。
还可以使用 JavaScript 来验证用户输入并响应用户的操作。

input type=”button|submit|reset|checkbox|radio|file|hidden|image|password|text”
input和label结合使用
表单增强(html5新特性)
新增输入类型：input type=”email|url|date|time|number|range|color|search|tel|week|datetime-local|datetime|month|time|week|col”
新的表单验证:required|min|max|minlength|maxlength

工程化项目

HTML一般不会直接手写最终版，而是通过构建工具处理。
比如Webpack里，用 html-webpack-plugin 来生成HTML，它会把我们写的模板文件和打包好的JS、CSS自动合并进去。
像用Vue CLI创建项目时， public/index.html 是模板，打包后会自动把 app.js 这些资源注入到 <body> 里。
Vite的话更简单，HTML直接作为入口文件，开发时会自动解析里面的JS模块，不用额外配置，

什么是 iframe 如何使用它？

iframe（内联框架）是 HTML 中的一个元素，可以在当前页面中嵌入另一个 HTML页面
可以通过设置 src 属性来指定要加载的 URL。
iframe用来展示第三方内容或者将大型页面分割成较小的部分,以便管理。

iframe标签用于在当前页面中嵌入另一个HTML页面，创建一个内嵌的框架。常见的应用场景包括：
在网页中嵌入第三方内容，如广告、地图、视频等，而不影响主页面的结构和样式。
实现多页面布局，将不同的内容模块分别放在不同的iframe中，便于管理和更新。

创建弹出式窗口或对话框的效果，通过调整iframe的样式和属性，使其以悬浮窗口的形式展示特定内容。
实现跨域通信，不同域名下的页面可以通过iframe进行数据交互和通信。

HTML5 中新增了哪些重要特性？

答：
新增语义化标签，如 <article>, <section>, <header>, <footer>, <nav>, <aside> 等。
媒体元素<audio>和 <video>，用于播放音频和视频文件。
表单增强，表单控件的新类型，验证，元素，属性（见html文档）
新标签：
<section>：定义文档中的独立章节。
<article>：定义独立的内容块。
<nav>：定义导航链接。
<header>：定义文档头部。
<footer>：定义文档的页脚。
<aside>：定义与页面内容稍有关系的部分（如侧边栏）。
<mark>：标记文本，通常用于高亮显示搜索结果。
<progress>：表示任务进度条。
<meter>：表示度量值。

新增功能：
本地存储：localStorage和sessionStorage，分别用于长期存储数据（浏览器关闭后数据不丢失）和会话存储数据（浏览器关闭后数据自动删除）。
（存储部分的细节在下面有）

新的API：Canvas、Geolocation API、Web Workers等，为网页开发提供了更多的交互性和动态效果
Canvas API，用于绘制图形。
Web Storage API，提供本地存储功能。
Geolocation API，获取用户地理位置。

解释alt属性的作用，为什么对图片使用alt属性非常重要？

alt属性用于为图片提供替代文本，当图片无法显示时，浏览器会显示alt属性中的文本内容

对图片使用alt属性非常重要，原因如下：
提供图片加载失败时的备用信息：当图片因网络问题、路径错误等原因无法正常显示时，alt文本可以作为替代内容展示给用户，让用户了解图片的大致内容。

提升网页可访问性：屏幕阅读器可以读取alt文本，为视觉障碍用户描述图片内容，帮助他们更好地理解页面信息。
优化SEO：搜索引擎爬虫无法直接识别图片内容，但可以读取alt文本，合理的alt描述有助于提高图片在搜索引擎图片搜索结果中的排名，进而提升整个网页的搜索引擎优化效果。

SEO（Search Engine Optimization，搜索引擎优化）是指通过一系列技术和策略来提高网站在搜索引擎自然搜索结果中的排名，从而增加网站的可见性和流量。良好的 SEO 实践可以帮助你的网站更容易被搜索引擎索引，并且在用户搜索相关关键词时更有可能出现在前列位置。

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

data-属性是HTML5新增的自定义属性，允许开发者在元素上存储额外的自定义数据，这些数据可以被JavaScript访问和操作，而无需依赖其他存储方式，如localStorage或cookie。
使用data-属性可以方便地为元素添加额外的信息，用于页面的交互和动态效果实现，

例如<div data-user-id="123" data-role="admin"></div>.
在JavaScript中可以通过element.dataset.userId和element.dataset.role来获取这些自定义数据

HTML5 <canvas> 标签的作用

<canvas>元素提供了一种通过 JavaScript 来绘制图形的方式，它本质上是一个可以通过脚本（通常是JavaScript）实时渲染图像的容器。
<canvas> 最初被设计用于制作图形、动画、游戏等需要动态图像生成的应用

HTML 性能优化

如何优化 HTML 页面的加载性能？
减少 DOM 元素数量。
使用 rel=”preload” 预加载关键资源。
使用 标签优化图片加载。
使用 async 和 defer 优化脚本加载。
压缩 HTML、CSS、JavaScript 文件。
使用 CDN 加速静态资源加载。
资源压缩：使用 Gzip/Brotli 压缩 HTML/CSS/JS 文件。
懒加载：用 loading=”lazy” 延迟加载图片和非首屏资源。
减少重排/重绘：避免频繁操作 DOM，批量修改样式。
预加载关键资源：用 <link rel="preload"> 提前加载关键` CSS/JS。

减少 DOM 元素数量

DOM 元素过多会导致页面渲染变慢，尤其是在低性能设备上。
优化方法：
避免不必要的嵌套标签;
使用 CSS 替代复杂的 HTML 结构（如用伪元素代替额外的<div>）
动态加载内容，避免一次性渲染大量 DOM 元素

1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- 不推荐 -->
<div class="container">
  <div class="header">
    <div class="logo"></div>
    <div class="nav"></div>
  </div>
</div>

<!-- 推荐 -->
<header class="header">
  <div class="logo"></div>
  <nav class="nav"></nav>
</header>

使用 <link> 标签的 rel=”preload” 预加载资源

前加载关键资源（如字体、图片、脚本），减少页面加载时间
预加载关键资源：将重要的CSS和JavaScript文件设置为预加载，确保它们在页面加载时优先加载。
减少首屏加载时间：通过预加载关键资源，可以减少页面的首屏加载时间，提升用户体验。
说明：
href：指定要预加载的资源的URL。
as：指定资源的类型（如style、script、font等）

1
2
3
4
5
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="image.jpg" as="image">
<link rel="preload" href="script.js" as="script">
<link rel="preload" href="styles.css" as="style">
<link rel="preload" href="script.js" as="script">

使用 <picture> 标签优化图片加载

<picture> 标签允许开发者根据不同的屏幕尺寸或设备特性选择合适的图片资源，支持响应式图片，减少不必要的带宽消耗

使用 <source> 标签指定不同尺寸的图片，结合 media 属性设置媒体查询

1
2
3
4
5
<picture>
  <source srcset="large.jpg" media="(min-width: 1024px)">
  <source srcset="medium.jpg" media="(min-width: 768px)">
  <img src="small.jpg" alt="示例图片">
</picture>

使用 <script> 标签的 async 和 defer 属性优化脚本加载

  • async：
    异步加载脚本，加载完成后立即执行。
    适用于不依赖其他脚本的独立脚本。
    示例：
    <script src="script.js" async></script>

  • defer：
    延迟加载脚本，在文档解析完成后执行
    适用于需要依赖 DOM 或其他脚本的脚本
    示例：
    <script src="script.js" defer></script>

  • 区别：
    async 脚本的执行顺序不确定，defer 脚本按顺序执行
    async 适用于独立脚本，defer 适用于依赖脚本

async 和 defer

默认情况下，浏览器会按照HTML文档中 <script> 标签出现的顺序执行脚本，并且在遇到一个外部脚本时会暂停HTML解析，直到该脚本下载并执行完毕。这对于页面性能不是最佳选择，特别是当脚本文件较大或者网络状况不佳时。
为了解决这个问题，HTML5引入了两个属性：async 和 defer
async 和 defer 是 <script> 标签的两个属性，用于控制 JavaScript 脚本的加载和执行时机

async 属性

async：表示脚本在下载时不会阻塞页面的解析和渲染。脚本下载完成后，会立即执行
<script src="analytics.js" async></script>

  • 特点：
    脚本的加载是异步的，不会阻塞页面的其他资源加载。
    脚本下载完成后立即执行，不等待页面解析完成。
    执行顺序：async 脚本的执行顺序取决于它们的下载完成时间，而不是它们在 HTML 文档中的顺序。
  • 适用场景：适用于那些不依赖于其他脚本和DOM完全加载就能运行的独立脚本。例如，统计分析、广告追踪等脚本

defer

defer表示脚本在下载时不会阻塞页面的解析和渲染。脚本会在页面解析完成后、DOMContentLoaded 事件触发前执行

  • 特点：
    脚本的加载是异步的，不会阻塞页面的其他资源加载。
    脚本会在页面解析完成后执行，确保脚本可以访问完整的 DOM。
  • 执行顺序：defer 脚本的执行顺序与它们在 HTML 文档中的顺序一致，所有设置了 defer 的脚本会按它们在文档中出现的顺序依次执行，即使某个脚本先下载完成，也会等到所有设置 defer 的脚本都下载完后，再按序执行
  • 适用场景：适用于需要访问或修改DOM的脚本，确保这些脚本在文档完全构建好之后执行，但又不想等待所有资源（如图片）加载完毕。

辨析

async 脚本是无序执行，即哪个脚本先下载完就先执行；而 defer 脚本是有序执行，根据其在文档中的顺序执行。
使用 async 或 defer 可以提高页面的加载速度，因为它们允许HTML解析器继续工作而不必等待脚本加载和执行。

  • 实际应用场景
    对于一些不需要立即执行的脚本（比如统计脚本、社交媒体分享按钮等），可以使用 async 来加速页面加载。
    如果脚本依赖于DOM结构（如初始化某些UI组件），则应使用 defer，以确保在执行脚本前HTML文档已经被完整解析。
    在现代Web开发实践中，通常推荐将关键脚本直接放在HTML底部接近结束标签处，而非头部，来避免阻塞渲染。如果必须在头部引用脚本，则应考虑使用 async 或 defer。

HTML 无障碍访问（Accessibility）

  1. 使用 aria-* 属性增强无障碍访问
    作用：
    aria-* 属性用于增强 HTML 元素的可访问性，帮助屏幕阅读器理解页面内容。
    常见属性：
    aria-label：为元素提供描述性文本。
    aria-labelledby：引用其他元素的 ID 作为描述。
    aria-hidden：隐藏元素，使其对屏幕阅读器不可见
    1
    2
    3
    4
    5
    <button aria-label="关闭弹窗">X</button>
    <div aria-labelledby="title">
      <h1 id="title">标题</h1>
      <p>内容</p>
    </div>
  2. 为图片添加 alt 属性
  3. 使用语义化标签提高可访问性

比较陌生的题

上述内容再出题

如何使用localStorage存储用户偏好设置？请给出一个示例代码。
如何使用<picture>标签实现响应式图片？请给出一个示例代码。
请解释<script>标签的async和defer属性的区别，并给出使用场景。
如何优化HTML页面的加载性能？请列举至少三种方法。
请解释aria-*属性的作用，并列举至少两个常用的aria-*属性及其用途。
如何使用HTML5的表单验证功能？请给出一个示例代码。
请解释HTML5中<audio>和<video>标签的用途，并列举它们的主要属性。
如何减少DOM元素数量以优化页面性能？请列举至少两种方法。
请解释rel=”preload”的作用，并给出一个使用场景。
如何为图片添加alt属性以提高无障碍访问性？请给出一个示例代码

如何处理HTML5新标签的浏览器兼容问题？

可以使用HTML5 Shiv来解决。HTML5 Shiv是一个JavaScript库，它允许IE8及以下版本的浏览器识别并正确渲染HTML5新标签。只需在页面中引入该库即可，例如<script src="html5shiv.js"></script>。此外，还可以通过添加CSS样式来为新标签设置默认的显示类型，如header, footer, section, article, nav, aside { display: block; }，以确保在不支持这些标签的浏览器中也能正常显示。

什么是 ARIA 标签？它们的作用是什么？

答：
ARIA（Accessible Rich Internet Applications，可访问的富互联网应用程序）属性是一组特殊属性，它们被添加到 HTML 元素中，以增强 Web 内容和应用程序的无障碍性。
这些属性提供了额外的信息给辅助技术（如屏幕阅读器），使得动态内容和复杂用户界面控件（如树形菜单、滑块、选项卡面板等）对于残障人士来说更加易于理解和使用。

ARIA是一组属性，用于向辅助技术传达有关网页上动态内容的信息。
例如，aria-label 可以为没有文本内容的元素添加描述，aria-live 可以标记出实时更新的内容区域，使得屏幕阅读器能够及时通知用户变化。