前端面试题 HTML 篇（一）

1. HTML 的 src 和 href 属性有什么区别？

在 HTML 中，src 和 href 是两个常用的属性，但它们用于不同的目的和元素。以下是它们的主要区别

• src 属性

  • 全称：Source（来源）

  • 用途：用于指定嵌入到 HTML 文档中的资源的 URL。

  • 常用元素：<img>、<script>、<audio>、<video> 等。

  • 特性：

    • src 属性会将资源嵌入到文档中，并在浏览器加载时立即加载和执行该资源。
    • 当 src 用于 <img> 元素时，src 属性指定了图像的 URL。用于 <script> 元素时，src 属性指定了脚本的 URL。
    • 浏览器通常会暂停对后续内容的处理，直到 src 资源被成功加载。

• href 属性

  • 全称：Hypertext Reference（超链接引用）

  • 用途：用于指定超链接的目标 URL。

  • 常用元素：<a>、<link> 、<area> 等。

  • 特性：

    • href 属性指定了超链接的目标 URL。
    • 浏览器会自动将超链接添加到文档中，并在用户点击时自动导航到目标 URL。

• 总结

  • src 用于嵌入和加载资源，例如图像、脚本和多媒体内容。

  • href 用于创建超链接，指向外部或内部资源，通常用于导航目的。

2. 什么是 HTML 语义化？

HTML 语义化是指使用具有明确意义的 HTML 标签来结构化和描述网页内容。这种做法提供了对内容结构的更清晰理解，有助于提高网页的可访问性、可维护性和搜索引擎的优化。语义化的 HTML 使得开发者和浏览器都能更好地理解网页的结构和内容。

• HTML 语义化的好处

  • 可读性：语义化标签可以让开发者更直观地了解网页地结构和各个部分地作用。例如，使用 <header> 标签来表示页头，<nav> 标签来表示导航栏，<main> 标签来表示主内容区等。<article>、<footer> 等标签，可以快速识别页面的不同部分。

  • 可访问性：语义化标签可以帮助辅助技术（如屏幕阅读器）更好地解释网页内容，从而提高网站的可访问性。

  • SEO 友好：搜索引擎通过语义化标签更容易理解网页内容的结构和重要性，从而有助于搜索引擎优化（SEO）。

  • 代码维护和重用：更清晰的结构和标签含义使得代码更容易维护和重用。

• 常用的语义化标签

  • <header>：定义文档或部分的头部。

  • <nav>：定义导航链接的部分。

  • <main>：定义文档的主要内容。

  • <article>：定义独立的内容块。

  • <section>：定义文档中的一个区域。

  • <aside>：定义侧边栏内容，与主内容相关但不重要的部分。

  • <footer>：定义文档或部分的底部。

  • <figure> 和 <figcaption>：用于定义图像或图表，以及其标题。

3. Doctype 作用？严格模式与混杂模式如何区分？它们有何意义？

• 怪异模式

• 严格模式：又称标准模式，是指浏览器按照 W3C 标准解析代码。

• 混杂模式：又称怪异模式或兼容模式，是指浏览器用自己的方式解析代码。

• 区分：

  • 严格模式的声明：
  • 混杂模式的声明：
  • 严格模式的文档类型定义（DTD）是 W3C 组织制定的，而混杂模式的 DTD 则是微软、Mozilla 等浏览器自己制定的。
  • 严格模式下，浏览器会遵守 W3C 组织制定的标准，以保证代码的正确性和可靠性。
  • 混杂模式下，浏览器会使用自己的方式解析代码，以达到向后兼容的目的。

• Doctype 作用：

  • 告诉浏览器使用哪种规范解析代码。
  • 严格模式的文档类型定义（DTD）是 W3C 组织制定的，它是 HTML、XHTML、XML 等的官方标准。
  • 混杂模式的 DTD 则是微软、Mozilla 等浏览器自己制定的，它是为了向后兼容而制定的。
  • 混杂模式下，浏览器会使用自己的方式解析代码，以达到向后兼容的目的。

4. HTML 的 script 标签中 defer 和 async 有什么区别？

在 HTML 中，<script> 标签的 defer 和 async 属性用于控制外部 JavaScript 文件的加载和执行方式。这两个属性主要用于优化页面加载性能，尤其是在需要并行加载多个脚本或与其他资源并行时。它们的区别主要表现在脚本的加载时机和执行顺序上。

• async 属性

  • 加载行为：带有async属性的脚本会在后台异步加载，不会阻塞浏览器解析 HTML 文档。

  • 执行时机：脚本在加载完成后立即执行，无论此时 HTML 文档是否已经完全解析。如果有多个async脚本，它们的执行顺序不一定按照它们在页面中出现的顺序，而是取决于加载完成的顺序。

• 适用场景：适合独立的脚本，例如广告、统计等，这些脚本不依赖于其他脚本或不需要保证执行顺序。

• defer 属性

  • 加载行为：带有 defer 属性的脚本也会异步加载，不会阻塞 HTML 文档的解析

  • 执行时机：脚本会在 HTML 文档完全解析后执行，即在 DOMContentLoaded 事件之前执行。如果有多个defer脚本，它们的执行顺序按照它们在页面中出现的顺序。

  • 适用场景：适合需要按顺序执行的脚本，尤其是哪些需要在完整的 DOM 上操作的脚本，例如初始化脚本。

• 主要区别总结

  • 加载方式：

    • async 和 defer 都允许脚本在后台加载，不阻塞 HTML 的解析。

  • 执行顺序和时机：

    • async 脚本会在加载完成后立即执行，顺序不确定。
    • defer 脚本会在 HTML 解析完成后执行，按照文档中出现的顺序执行。

• 使用建议

  • 如果脚本之间互不依赖，且不依赖于 HTML 结构，使用 async 可以最大化页面加载速度。

  • 如果脚本需要依赖 DOM 或者需要按特定顺序执行，使用 defer 是更好的选择。

5. 常用的 HTML meta 标签有哪些？

• 常用的 <meta> 标签

  • <meta charset="utf-8">：指定文档的字符编码。

  • <meta name="viewport" content="width=device-width, initial-scale=1.0">：设置视口，用于响应式设计。

  • <meta name="description" content="...">：定义文档的描述。

  • <meta name="keywords" content="...">：定义文档的关键词。

  • <meta name="author" content="...">：定义文档的作者。

  • <meta name="robots" content="...">：定义搜索引擎 robots 指令。

  • <meta http-equiv="..." content="...">：定义 HTTP equiv 指令。

  • <meta property="..." content="...">：定义 Facebook 分享等属性。

  • <meta name="..." content="...">：定义其他属性。

  • <meta name="referrer" content="...">：定义 HTTP 请求的 referrer 策略。

  • <meta name="referrer" content="no-referrer">：禁止发送 referrer 头。

  • <meta name="referrer" content="no-referrer-when-downgrade">：在降级时禁止发送 referrer 头。

• 使用建议

  • 在开发网页时，合理设置和使用 标签可以显著改善网页的 SEO 和用户体验。

  • 根据页面的具体需求，选择合适的 <meta> 标签进行设置，并确保字符集和视口是必须的，以保证页面的基本兼容性和显示效果

6. HTML5 相比于 HTML 有哪些更新？

• 新的语义化元素

• 新的表单控件

• HTML 增强了表单功能，增加了新的输入类型和属性，以简化数据输入和验证：

  • 新的输入类型：email、url、date 、time、number、range、color等。

  • 新的属性：placeholder、required、autofocus、pattern、min、max、step 等。

• HTML5 提供了原生的多媒体支持，无需插件：

  • <audio>: 用于嵌入音频内容

  • <video>: 用于嵌入视频内容

• HTML5 引入了新的 API 来实现图形和绘图功能：

  • canvas: 通过 JavaScript 绘制 2D 图形和图像。

  • SVG（可缩放矢量图形）：虽然不是 HTML5 专有，但其使用在 HTML5 中得到推广，用于制矢量图。

• HTML5 提供了更丰富的链接关系：

  • <link rel="stylesheet"> 等传统用法之外，还包括用于预加载资源等新功能。

• 本地存储和离线支持

  • localStorage 和 sessionStorage：用于在客户端存储数据

  • indexDB: 用于存储大量结构化数据

  • Application Cache: 用于缓存网页以支持离线访问（已被 Service Worker 逐渐取代）。

• 新的 API 和功能

  • Geolocation API: 获取用户的地理位置

  • Web Workers: 在后台线程中运行 JavaScript，以提高性能。

  • WebSockets: 用于实时通信的持久性链接。

  • History API: 管理浏览器会话历史记录。

  • Drag and Drop API：实现拖放功能。

  • File API：处理用户文件上传。

• 移除了过时的元素

  • HTML5 移除了许多过时和不推荐使用的元素和属性：

  • <applet>、<basefont>、<center>、<dir>、<font>、<isindex>、<menu>、<s>、<strike>、<u>

7. HTML 中，img 标签 srcset 属性的作用是什么？

• HTML 中的 <img> 标签的 srcset 属性用于响应式图像，它允许开发者为不同的屏幕分辨率和设备尺寸提供适合的图像。这需要为视网膜屏幕、高分辨率显示器和不同设备优化图像时非常游泳。

• srcset 的作用

  • 为不同分辨率提供合适的图像：通过使用 srcset，可以指定多个图像文件及其使用条件，浏览器将根据设备的显示特性选择最合适的图像进行加载。

  • 提高页面性能：通过为不同的设备提供不同大小的图像，避免加载不必要的高分辨率图像，从而减少带宽消耗和提高页面加载速度。

  • 提升用户体验：在高分辨率设备上提供清晰的图像，并在低带宽条件下提供压缩版本，优化用户体验。

• srcset 的使用

  • srcset 属性接受一个或多个图像 URL，每个 URL 可以指定一个描述符，描述符有以下两种类型：
    • 宽度描述符（w）:用于根据视口宽度选择图像
    • 像素密度描述符（x）: 用于根据设备像素密度选择图像。

• 使用宽度描述符

<img src="image-400.jpg" 
     srcset="image-400.jpg 400w, 
             image-800.jpg 800w, 
             image-1600.jpg 1600w"
     sizes="(max-width: 600px) 480px, 
            (max-width: 1200px) 800px, 
            1600px"
     alt="示例图片">

• srcset 提供了三个图像文件：image-400.jpg

• sizes 属性用于告诉浏览器在不同的视口宽度条件下，图像的显示宽度。

• 浏览器将根据设备的实际显示宽度和视口大小选择合适的图像。

• 使用像素密度描述符

<img src="image-1x.jpg" 
     srcset="image-1x.jpg 1x, 
             image-2x.jpg 2x, 
             image-3x.jpg 3x"
     alt="示例图片">

8. HTML 行内元素有哪些？块级元素有哪些？空（void）元素有哪些？

• 行内元素

  • <a>: 锚点、超链接

  • <span>：通用行内容器，无特定语义。

  • <img>：图像

  • <strong>：语气加重，通常呈现为粗体

  • <em>：强调，通常呈现为斜体。

  • <br>：换行符。

  • <i>：斜体

  • <b>：粗体

  • <u>：下划线

  • <code>：代码文本

  • <mark>：标记/高亮文本

  • <sub>：下标

  • <sup>：上标

  • <small>：小号文本

  • <label>：表单控件的标注

  • <q>：引用

• 块级元素

  • 块级元素通常会在其前后产生换行，占据其父容器的全部宽度。它们可以包含其他块级元素或行内元素。

  • <div>: 通用块级容器，无特定语义

  • <p>: 段落

  • <h1> 到 <h6>：标题元素

  • <ul>：无序列表

  • <ol>: 有序列表

  • <li>：列表项

  • <table>: 表格

  • <thead>: 表格头部

  • <tbody>: 表格主体

  • <tr>: 表格行

  • <td>: 表格单元格

  • <th>: 表格表头

  • <caption>: 表格标题

  • <dl>: 定义列表

  • <dt>: 定义列表项

  • <dd>: 定义描述

• 空元素

  • 空元素不包含任何内容，也没有闭合标签。它们通常用于嵌入内容或单一的行为。

  • 常见的空元素包括：

    • <img>：图像。
    • <br>：换行。
    • <hr>：水平线。
    • <input>：输入控件。
    • <meta>：文档元数据。
    • <link>：链接到外部资源。
    • <area>：图像映射中的区域。
    • <base>：基本 URL。
    • <col>：表格列。
    • <embed>：嵌入外部内容。
    • <source>：媒体源。
    • <track>：用于字幕。

9. iframe 有哪些优点和缺点？

• <iframe> 标签用于在网页中嵌入另一个 HTML 页面。虽然它在某些情况下非常有用，但也有一些显著的优点和缺点。以下是<iframe>的主要优点和缺点：

• 优点

  • 内容隔离

  • 重用现有内容

  • 异步加载

  • 跨源内容显示

• 缺点

  • SEO 问题：

    • 搜索引擎可能不会索引 <iframe> 中的内容，因为这些内容是外部的，对于主页面来说可能看作不可见的。

  • 性能

    • <iframe> 的使用可能会影响页面性能，尤其是在嵌入大量内容或资源密集的网页时，这会增加页面的加载时间。

• 用户体验

  • 不同浏览器对 <iframe> 的处理可能会有所不同，可能导致不一致的用户体验。某些旧版浏览器或具有严格安全设置的浏览器可能会阻止<iframe>的加载。

• 安全风险

  • 嵌入第三方内容可能引入安全风险，尤其是当来源不可信时，跨站点脚本攻击（XSS）可能通过嵌入的内容实现。

• 除非进行适当的沙箱处理，否则<iframe> 中的内容可以访问父页面的内容。

• 复杂嵌套问题：

  • 嵌套的 <iframe> 可能导致复杂的布局和样式问题，难以调试和维护。

• 浏览器历史记录：

  • 页面内的历史导航在使用 <iframe> 时可能变得复杂，用户返回上一页时可能会导致嵌入内容而不是主页面返回。

• 总结

  • <iframe> 是一个强大的工具，可以在网页中嵌入外部资源，但它有一些需要注意的缺点，尤其是在性能和安全方面。开发者在使用 <iframe> 时应权衡其优缺点，并采取适当的措施以确保安全和用户体验。例如，可以使用 sandbox 属性限制 iframe 的行为，或使用现代方法如 API 来动态加载和处理外部内容。

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

• 离线资源的管理

  • 配置清单文件

    • HTML5 离线存储使用一个 manifest 文件来列出需要离线存储的资源列表。该文件是一个文本文件，通常以 .appcache 为扩展名，其内容包含了版本号、需要缓存的资源列表以及不缓存的资源列表等信息。

  • 资源缓存

    • 当浏览器首次访问一个使用了离线存储的网页时，它会根据 manifest 文件的内容，将指定的资源下载并存储到本地缓存中。在后续访问中，如果 manifest 文件没有发生变化，浏览器会直接使用本地缓存的资源，而不会再次从网络下载。

  • 缓存更新

    • 当 manifest 文件发生变化时，浏览器会检测到更新，并重新下载清单中列出的资源，更新本地缓存。浏览器会在后台自动进行更新操作，不会影响当前页面的正常显示。用户下次访问页面时，浏览器会使用更新后的缓存资源。

  • 缓存清除

    • 用户可以通过浏览器设置手动清除离线缓存。此外，浏览器也可能会根据自身的策略（如磁盘空间不足等）自动清除一些不常用的离线缓存资源。

• 离线资源的加载

  • 离线访问检测

    • 当用户在离线状态下访问网页时，浏览器会首先检查本地缓存中是否存在该网页及其相关资源。如果存在，浏览器会直接从本地缓存中加载资源，使网页能够正常显示。

  • 资源加载顺序

    • 浏览器在加载离线资源时，会按照 manifest 文件中指定的顺序进行加载。首先加载的时网页的基本 HTML 文件，然后依次加载 CSS、JavaScript 文件以及图片等其他资源。

  • 错误处理:

    • 如果在加载离线资源的过程中出现错误，比如某个资源在本地缓存中不存在或者损坏，浏览器会根据不同的情况进行处理。通常情况下，浏览器会尝试使用默认的备用资源或者显示一个错误提示信息。

11. HTML 中，title 与 h1 标签的区别是什么？

• 定义与用途

  • title标签：用于定义网页的标题，它是<head>标签内的一个元数据元素，不会在网页的正文内容中显示。其主要作用是在浏览器的标题栏、书签、搜索结果等地方展示网页的名称，帮助用户识别和区分不同的网页。

  • h1标签：是 HTML 中的标题标签，用于表示网页中的一级标题，通常在网页的正文内容中使用，用来突出显示页面的主要内容或主题，对网页的结构和内容层次起到重要的标识作用。

• 显示效果

  • title标签：设置的标题不会在网页的可见区域内直接显示，而是在浏览器的特定位置（如标题栏、任务栏等）展示。

  • h1标签：作为网页正文的一部分，会在页面中以较大的字体和较强的视觉效果显示，通常比其他文本内容更加突出，以吸引用户的注意力。

• 搜索引擎优化（SEO）作用

  • title标签：是搜索引擎判断网页内容和相关性的重要因素之一，合理设置title标签对于提高网页在搜索结果中的排名至关重要。搜索引擎会将title标签的内容作为搜索结果的标题展示给用户，因此需要准确、简洁地描述网页的核心内容。

  • h1标签：虽然对 SEO 也有一定的作用，但相对title标签来说，其重要性主要体现在帮助搜索引擎理解网页的结构和内容层次，强调页面的主要主题，有助于提高网页在相关关键词搜索结果中的相关性和排名。

• 使用个数限制

  • title标签：在一个 HTML 文档中只能有一个title标签，它是网页的全局属性，用于统一标识网页的标题。

  • h1标签：在一个网页中可以根据需要使用多个h1标签，但一般建议每个页面尽量只使用一个h1标签来表示页面的主要标题，以保持页面结构的清晰和语义的明确。如果需要使用多个标题级别，可以使用h2、h3等标签来表示不同层次的副标题。

12. HTML 中，b 与 strong 标签的区别是什么？

• 语义

  • <b>标签：它的语义是单纯地将文本加粗显示，不带有特别的强调意味，只是一种视觉上的改变，用于突出文本以吸引用户的注意力。

  • <strong>标签：它强调文本的重要性，表达了内容的重要程度或强调语气，具有明确的语义含义，不仅仅是视觉上的加粗。

• 搜索引擎优化（SEO）

  • <b>标签：对 SEO 的影响相对较小，搜索引擎通常不会将其作为判断内容重要性的主要依据。

  • <strong>标签：搜索引擎会认为<strong>标签内的文本具有较高的重要性，在分析网页内容和关键词相关性时可能会给予一定的权重，有助于提高网页在搜索结果中的排名。

• 屏幕阅读器

  • <b>标签：屏幕阅读器在读取文本时，通常不会特别强调<b>标签内的文本，只是按照正常的语音语调读取。

  • <strong>标签：屏幕阅读器会以一种强调的语气来读取<strong>标签内的文本，以便让视力障碍用户能够感知到文本的重要性。

• 使用场景

  • <b>标签：常用于需要在视觉上突出显示文本的情况，如标题、关键词、导航栏中的重要链接等，但不涉及对内容重要性的强调。

  • <strong>标签：适用于强调重要的信息、警告信息、关键内容等，如文章中的重要观点、产品的关键特点、警告提示等。

13. HTML 中，i 与 em 标签的区别是什么？

• 语义

  • <i>标签：最初的语义是表示斜体文本，通常用于呈现与正常文本风格不同的内容，如用于表示书籍、电影等的名称，外来词汇，或者用于表示一些特殊的语气，如讽刺、幽默等，它没有明确的强调意味。

  • <em>标签：语义是强调文本，突出文本的重要性或表达一种强调的语气，让读者能够明显感知到该部分文本的重要性与其他文本不同

• 视觉效果

  • <i>标签：默认情况下会将文本显示为斜体样式。

  • <em>标签：默认情况下也会将文本显示为斜体，但它的强调意味可能会通过一些浏览器的默认样式表现得更加突出，如加粗的斜体等。

• 搜索引擎优化（SEO）

  • <i>标签：对 SEO 的影响较小，搜索引擎通常不会将其作为判断内容重要性的重要依据。

  • <em>标签：搜索引擎会认为<em>标签内的文本相对更重要，在分析网页内容和关键词相关性时可能会给予一定的权重。

• 屏幕阅读器

  • <i>标签：屏幕阅读器在读取文本时，一般不会特别强调<i>标签内的文本，只是按照正常的语音语调读取。

  • <em>标签：屏幕阅读器会以一种强调的语气来读取<em>标签内的文本，以便让视力障碍用户能够感知到文本的强调性。

• 使用场景

  • <i>标签：常用于表示书籍、电影、音乐作品等的名称，外来词汇，或者用于呈现一些需要与正文风格区分开来的文本，如旁白、注释等。

  • <em>标签：适用于强调重要的信息、关键内容、需要突出的观点等，如文章中的重要结论、产品的关键特点、操作提示等。

14. HTML 中，label 标签的作用是什么？如何使用？

在 HTML 中，<label> 标签用于为用户界面中的表单控件定义一个标注（label）。它的主要作用是提升可用性和用户体验，通过为表单控件提供关联的文本说明，使用户更容易理解输入框的用途。

• 作用

  • 提高可访问性：<label> 标签与输入控件相关联，屏幕阅读器等辅助技术能够更好地识别这些控件。

  • 扩大点击区域：当 label 标签与输入控件关联时，点击 label 标签的文本也会出发输入控件的聚焦或激活状态，这在小型设备上尤其有用。

• 使用方法

  • 有两种基本方法可以将 <label> 标签与表单控件关联：

    • 使用 for 属性：

      • for 属性的值应与目标表单控件的 id 属性值相同。

      <label for="username">Username:</label>
      <input type="text" id="username" name="username">
      

• 嵌套方式：

  • 将表单控件直接放在 <label> 标签内，不使用 for 属性。

  <label>Username: <input type="text" name="username"></label>
  

• 注意事项

  • 确保每个表单控件都有一个对应的 <label> 标签，特别是对于可访问性要求较高的应用。

  • for 属性和控件的 id 应一致，以确保关联的准确性。

  • 嵌套方式简单且不需要考虑 id 匹配，但在复杂表单中可能不太便于管理。

15. Canvas 和 SVG 有什么区别？

• 绘图方式

  • Canvas

    • 基于像素的绘图方法

    • 使用 JavaScript 通过绘图 API 绘制图形

    • 一旦绘制完成，图像就成为位图的一部分，无法对其进行单独操作

  • SVG

    • 基于矢量的绘图方法

    • 使用 XML 格式定义图形

    • 每个元素都是独立的 DOM 节点，可以单独操作和样式化。

• 动态性和交互性

  • Canvas

    • 适合逐帧渲染的复杂动画，如游戏开发

    • 需要更多的代码来实现交互，通常结合事件监听器和额外的处理逻辑。

  • SVG

    • 由于每个图形元素是独立的 DOM 元素，内建良好的事件支持，可以轻松地添加交互。

    • 更适合静态图形或简单动画（通过 CSS 或 SMIL）。

• 性能

  • Canvas

    • 对于大量对象或复杂场景，Canvas 可能比 SVG 更高效，因为它直接操作像素。

    • 适合需要频繁更新帧的应用程序，如实时数据可视化。

  • SVG

    • SVG 在处理许多简单对象时可能会变得低效，因为每个对象都是一个 DOM 元素。

    • 更适合需要高质量缩放的场景，因为它是基于矢量的。

• 可缩放性

  • Canvas

    • 缩放时，图像可能会失真，因为它是像素网格的表示。

  • SVG

    • 天然具备良好的缩放能力，因为它是基于路径的矢量图形。

• 使用场景

  • Canvas

    • 游戏开发。

    • 实时数据可视化。

    • 高频率动画更新。

  • SVG

    • 图标、图表和简单图形。

    • 需要交互的用户界面元素。

    • 高质量打印输出。

16. HTML 的 head 标签有什么作用？其中哪些标签必不可少？

HTML 的 <head> 标签用于包含网页的一些元数据和配置信息，这些信息通常不会直接显示给用户。它是一个重要的部分，因为它可以影响网页的表现、搜索引擎优化（SEO）、以及如何在浏览器中显示或处理网页。

• <head> 标签的作用

  • 指定文档的标题：使用 <title> 标签定义网页的标题，这个标题会显示在浏览器的标签页上。

  • 引入样式表：通过 <link> 标签引入外部样式表（CSS），或者使用 <style> 标签内嵌 CSS 样式。

  • 引入脚本：通过 <script> 标签引入外部 JavaScript 文件或内嵌脚本。

  • Meta 信息：使用 <meta> 标签提供关于网页的元信息，比如编码设置、作者信息、关键词和描述等。

  • 设置字符编码：使用 <meta charset="UTF-8"> 来指定网页的字符编码，确保正确显示文本。

  • 图标设置：通过 <link> 标签设置王源饿的 favicon（地址栏图标）。

  • 其他配置：例如，使用<base> 标签来指定相对 URL 的基础路径，或者使用 标签提供视口（viewport）设置以优化移动设备显示。

• 必不可少的标签

  • <title>：定义网页的标题。

  • <meta>：提供关于网页的元信息。

  • <link>：引入外部样式表或图标。

17. HTML4 与 HTML5 有什么区别

- HTML4 语义不强

- HTML4 需要第三方插件（如 Flash）来包含多媒体内容

- HTML4 没有直接支持矢量图形和动画，需要依赖外部技术

- HTML4 表单元素和属性有限，验证需用 JavaScript 实现。

- HTML4 缺乏完整的离线支持和客户端存储

- HTML5 引入了多种新的 API，如地理定位、拖放、Web Workers、WebSockets 等，增强了浏览器的功能和交互性。