全栈面试题|爽爽学编程

# 前端 HTML 面试题 by 爽爽学编程

本文作者：爽爽学编程 (opens new window)

本站地址：https://code-wss.com (opens new window)

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

HTML 中的 src 和 href 属性都用于链接外部资源，但它们各自有不同的用途和特点：

src 属性：

  • src 属性主要用于HTML的 <script> 和 <iframe> 标签，以及 <img>、<embed> 和 <video> 等元素，用于指定外部资源的URL。
  • 当浏览器遇到带有 src 属性的标签时，它会加载并执行或显示指定的资源。
  • src 属性的值通常是一个完整的URL，指向外部脚本、图片、视频等资源。

href 属性：

  • href 属性主要用于 <a>（链接）、<link>（样式表或图标链接）、<base>（文档基URL）等标签，用于指定链接的目的地或资源的URL。
  • 当用户点击带有 href 属性的元素时，浏览器会导航到指定的URL。
  • href 属性的值可以是绝对URL或相对URL，也可以是锚点（页面内的特定部分）。

总结来说，src 属性用于引入外部资源并将其嵌入到当前页面中，而 href 属性则用于创建链接，允许用户或浏览器导航到另一个资源或页面的特定部分。

# 什么是 HTML 语义化？

HTML 语义化是指使用合适的HTML标签来表达网页内容的结构和意义，而不仅仅是为了布局。这样做的好处包括：

  • 提高可访问性：使用语义化的标签有助于屏幕阅读器等辅助技术更好地理解页面内容，从而提高视力障碍用户的网页体验。
  • 提升搜索引擎优化（SEO）：搜索引擎更容易理解使用语义化标签的页面结构，这有助于提高页面在搜索结果中的排名。
  • 增强代码的可读性和可维护性：语义化的标签使得HTML代码更加清晰，其他开发者可以更快地理解页面结构和内容的组织方式。
  • 改善响应式设计：使用语义化的标签可以更容易地通过CSS进行样式调整，以适应不同的屏幕尺寸和设备。
  • 更好的替代内容：当某些资源（如图片或视频）无法加载时，语义化的标签可以提供更有意义的替代内容。

常见的语义化HTML标签包括：

  • <header>：表示页面或区段的页眉。
  • <nav>：表示导航链接的容器。
  • <section>：表示文档中的一个区段。
  • <article>：表示独立的自包含内容。
  • <aside>：表示与页面内容稍微独立的侧边栏内容。
  • <footer>：表示页面或区段的页脚。
  • <figure> 和 <figcaption>：表示图片或图表及其标题。
  • <header>、<hgroup> 和 <section> 等标签也用于组织文档结构。

使用这些标签而不是仅仅依赖于 <div> 和 <span> 标签，可以使HTML文档更加语义化。

# DOCTYPE（文档类型）的作用是什么？

DOCTYPE（文档类型声明）的作用主要包括：

  • 告知浏览器文档类型：DOCTYPE 告诉浏览器这个HTML文档是遵循哪个版本的HTML或XHTML标准。这有助于浏览器确定如何渲染页面。
  • 触发标准模式渲染：当DOCTYPE声明正确时，浏览器会使用标准模式（也称为严格模式）来渲染页面。在标准模式下，浏览器会尽可能按照W3C的标准来解析和显示页面内容。
  • 避免怪异模式：如果没有DOCTYPE声明，或者声明不正确，浏览器可能会进入怪异模式（Quirks Mode），在这种模式下，浏览器的行为可能会与标准模式有所不同，导致页面显示不一致。
  • 兼容性：在不同的浏览器和不同的版本中，DOCTYPE的存在和正确性会影响页面的兼容性。确保使用正确的DOCTYPE有助于减少跨浏览器的兼容性问题。
  • 简化文档类型：现代HTML5的DOCTYPE非常简单，只需要一个简短的声明 <!DOCTYPE html>。这简化了文档的开始，并且由于其普遍性，大多数现代浏览器都能正确识别并使用标准模式渲染页面。

DOCTYPE声明通常位于HTML文档的最开始部分，即在<html>标签之前。正确的DOCTYPE声明有助于确保网页在不同浏览器中具有一致的表现。

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

HTML 中的 <script> 标签用于引入外部JavaScript文件或内嵌JavaScript代码。defer 和 async 是两个属性，它们控制脚本的加载和执行行为：

  • defer：

    • defer 属性告诉浏览器在文档解析完成后再执行脚本，即脚本的执行被推迟到文档的所有元素解析完成之后。
    • 使用 defer 的脚本按照它们在文档中出现的顺序执行。
    • 这对于脚本依赖于DOM元素的情况很有用，因为当脚本执行时，DOM已经完全构建好了。
    • defer 不适用于动态加载的脚本，即在文档解析过程中通过JavaScript动态添加的脚本。

  • async：

    • async 属性允许脚本异步加载，即脚本的加载不会阻塞文档的解析。
    • 一旦 async 脚本加载完成，它将尽快执行，但不一定按照它们在文档中出现的顺序。
    • 使用 async 可以提高页面加载性能，因为它允许页面继续解析和渲染，同时脚本在后台加载。
    • async 脚本通常用于那些不依赖于其他脚本或DOM元素的脚本。

区别总结：

  • 加载顺序：defer 脚本按照它们在文档中出现的顺序执行，而 async 脚本一旦加载完成就执行，不保证顺序。
  • 执行时机：defer 脚本在文档解析完成后执行，async 脚本在加载完成后立即执行。
  • 依赖性：defer 适合那些依赖于DOM的脚本，async 适合那些独立于页面其他脚本和DOM的脚本。
  • 阻塞行为：defer 和 async 都不会阻塞文档的解析，但 async 脚本的执行可能会在文档解析过程中发生。

选择使用 defer 还是 async 取决于脚本的特性和页面的加载需求。如果脚本之间存在依赖关系或需要在DOM完全构建后执行，使用 defer 更合适。如果脚本独立于页面其他部分，并且希望尽快加载以提高性能，使用 async 更合适。

# 常用的 HTML meta 标签有哪些？

  1. 字符集声明：

    <meta charset="UTF-8">
    1
    • 指定文档的字符编码，UTF-8是最常用的字符编码，支持多语言字符。

  2. 视口设置（响应式设计）：

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    1
    • 控制布局在不同设备上的视口和缩放行为，对于响应式设计至关重要。

  3. 描述：

    <meta name="description" content="这里是页面描述">
    1
    • 提供页面内容的简短描述，通常用于搜索引擎结果的摘要。

  4. 关键词：

    <meta name="keywords" content="关键词1, 关键词2, 关键词3">
    1
    • 虽然现代搜索引擎可能不再依赖此标签，但它曾经用于提供页面的关键词。

  5. 作者：

    <meta name="author" content="作者名">
    1
    • 指定页面的作者。

  6. 搜索引擎索引：

    <meta name="robots" content="index, follow">
    1
    • 控制搜索引擎的爬虫如何索引当前页面，index允许索引，follow允许跟踪页面上的链接。

  7. 刷新：

    <meta http-equiv="refresh" content="5">
    1
    • 用于设置页面在指定秒数后刷新或跳转到另一个页面。

  8. X-UA-Compatible（IE兼容性视图）：

    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    1
    • 用于指定IE浏览器使用最新渲染引擎。

  9. Open Graph 协议（社交媒体分享）：

    <meta property="og:title" content="页面标题">
<meta property="og:description" content="页面描述">
<meta property="og:image" content="图片URL">
    1
    2
    3
    • 用于控制社交媒体平台（如Facebook）分享链接时显示的标题、描述和图片。

  10. 主题色：

    <meta name="theme-color" content="#ffffff">
    1
    • 指定移动端浏览器的主题颜色，用于设置浏览器工具栏的颜色。

这些<meta>标签可以提供关于页面的额外信息，帮助搜索引擎、社交媒体平台和浏览器更好地理解和展示页面内容。

# HTML5 相比于 HTML 有哪些更新？

HTML5相比于早期版本的HTML（主要是HTML 4.01）带来了许多重要的更新和改进，以下是一些主要的更新点：

  1. 语义化标签：HTML5引入了一系列新的语义化标签，如<article>、<section>、<nav>、<aside>、<header>、<footer>等，这些标签帮助开发者更好地描述页面结构。
  2. 图形和多媒体：
    • 引入了<canvas>标签，允许在网页上绘制图形。
    • 支持<video>和<audio>标签，使得在网页上嵌入视频和音频变得更加简单。
  3. 表单控件：HTML5增强了表单功能，引入了新的输入类型如email、url、number、range、date等，以及新的属性如placeholder、required、pattern等。
  4. Web存储：提供了两种新的客户端存储选项：
    • localStorage：允许存储数据直到手动清除。
    • sessionStorage：允许存储数据直到浏览器会话结束。
  5. 离线应用：通过应用程序缓存（AppCache）和Service Workers，支持创建离线可用的Web应用。
  6. Web Workers：允许在后台线程中运行脚本，不干扰用户界面的响应性。
  7. WebSockets：支持全双工通信，允许服务器和客户端之间进行实时通信。
  8. 地理位置：通过Geolocation API，允许网页获取用户的地理位置信息。
  9. 拖放API：支持在网页上实现拖放功能。
  10. 响应式图片：通过<picture>元素和srcset属性，支持响应式图片加载。
  11. 新的API和文档对象模型（DOM）：如Web Animations API、Web Components等。
  12. 安全性：HTML5提供了新的安全特性，比如对内容安全策略（CSP）的支持。
  13. 跨文档消息：允许不同源的文档之间安全地通信。
  14. 简化的DOCTYPE声明：只需要一个简单的<!DOCTYPE html>即可。
  15. 移除过时元素：HTML5去除了一些不再推荐使用的元素，如<font>、<center>等。

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

HTML中的<img>标签的srcset属性用于提供一组图片资源，供浏览器根据设备的不同条件（如屏幕分辨率、屏幕尺寸等）选择最合适的图片进行加载。这有助于实现响应式图片，即根据用户的设备条件加载不同大小的图片，从而优化页面加载时间和带宽使用。

srcset属性的基本语法如下：

<img src="default.jpg" srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" sizes="(max-width: 600px) 500px, (max-width: 1000px) 1000px, 1500px">
1

在这个例子中：

  • src属性提供了一个默认图片，如果srcset不被支持，浏览器将使用这个图片。
  • srcset属性定义了一组候选图片及其宽度描述符（w），浏览器根据当前视口的宽度选择一个合适的图片。这里的500w、1000w和1500w分别表示图片的固有宽度是500像素、1000像素和1500像素。
  • sizes属性提供了一组媒体条件和尺寸描述，告诉浏览器在不同的屏幕尺寸或视口宽度下应该使用多大的图片。(max-width: 600px) 500px表示如果视口宽度小于或等于600像素，图片的显示宽度应该是500像素。

srcset属性的高级用法还包括使用x描述符来表示图片的分辨率，例如：

<img src="default.jpg" srcset="icon1.png 1x, icon2.png 2x">
1

在这个例子中，1x和2x表示图片的分辨率因子。如果设备的屏幕分辨率较高，浏览器可能会选择2x的图片以提供更清晰的显示效果。

使用srcset属性可以显著提高网页的响应性和性能，尤其是在移动设备上。

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

行内元素（Inline Elements）：

行内元素在文档的流中连续排列，不会创建新的块或行。它们通常用于文本的一小部分，如强调、链接等。以下是一些常见的行内元素：

  • <a>（链接）
  • <span>（通用行内容器）
  • <strong>（加粗文本）
  • <em>（强调文本）
  • <img>（图片）
  • <input>（输入字段）
  • <label>（表单标签）
  • <button>（按钮）
  • <small>（小号文本）
  • <sup>（上标文本）
  • <sub>（下标文本）
  • <br>（换行）
  • <u>（下划线文本）

块级元素（Block-level Elements）：

块级元素在页面中创建一个块，通常会创建新的行或占据其父元素的宽度。它们用于定义页面的结构，如段落、标题等。以下是一些常见的块级元素：

  • <p>（段落）
  • <div>（通用块级容器）
  • <h1> 到 <h6>（标题）
  • <ul>、<ol>（无序列表和有序列表）
  • <li>（列表项）
  • <header>、<footer>（页眉和页脚）
  • <section>、<article>（文档区段和文章）
  • <nav>（导航链接）
  • <aside>（侧边栏内容）
  • <table>（表格）
  • <fieldset>（表单分组）
  • <blockquote>（引用或引述）

空（void）元素（Void Elements）：

空元素不包含任何内容，也没有结束标签。它们通常用于插入单个元素或执行特定的功能。以下是一些常见的空元素：

  • <br>（换行）
  • <hr>（水平线）
  • <img>（图片）
  • <input>（输入字段）
  • <link>（链接外部资源，如CSS）
  • <meta>（提供关于HTML文档的元数据）
  • <area>（图像映射的区域）
  • <base>（指定文档的基URL）
  • <col>（表格列的属性）
  • <command>（菜单命令）
  • <embed>（嵌入外部内容）
  • <keygen>（密钥对生成器）
  • <param>（对象参数）
  • <source>（媒体源）
  • <track>（音视频轨道）
  • <wbr>（可能的换行点）

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

HTML5的离线存储功能允许Web应用程序在浏览器离线时继续访问相关资源，从而提高性能和用户体验。其工作原理是通过在客户端浏览器中缓存Web应用程序的数据和文件，使Web应用程序像普通应用程序一样在离线状态下继续运行

使用HTML5离线存储主要涉及以下几个步骤：

  1. 创建一个缓存清单文件（manifest），这是一个文本文件，列出了需要缓存的文件，如HTML、CSS、JavaScript等
  2. 在HTML文档的<head>部分使用manifest属性引用上述清单文件
  3. 利用JavaScript调用window.applicationCache对象，监听相关事件，如更新准备(updateready)和进度(progress)，以控制缓存的更新和使用

HTML5离线存储的使用场景包括移动设备应用、新闻网站、博客、游戏应用程序、网络教育平台和电子商务平台等，尤其适用于页面内容不经常更新、静态资源多的场景

需要注意的是，缓存的资源必须在同一域名下，且一旦缓存实现，文件在客户端将一直保留，除非手动清除浏览器缓存。此外，修改缓存清单文件会导致浏览器重新下载文件。每个缓存在浏览器中的资源文件大小通常不能超过50MB

此外，HTML5的离线存储还包括localStorage和sessionStorage，它们通过Web Storage API提供数据存储功能，与离线缓存相辅相成 10。然而，值得注意的是，应用程序缓存（App Cache）由于存在一些缺点和兼容性问题，已经被现代Web开发所弃用，转而推荐使用Service Workers作为实现离线功能的替代方案

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

浏览器对HTML5离线存储资源的管理和加载主要通过以下几种方式实现：

Web Storage API：通过localStorage和sessionStorage对象，Web Storage API提供了一种简单的方式来存储数据。localStorage用于长期存储数据，没有过期时间，而sessionStorage的数据仅在当前会话期间有效，页面关闭时数据即被清除。这两种存储方式都特定于页面的协议，并且键值对以字符串形式存储21。

应用程序缓存（Application Cache）：HTML5的应用程序缓存允许开发者通过一个清单文件（manifest）定义需要缓存的文件列表，包括HTML、CSS、JavaScript和图像等。当用户首次访问网页时，浏览器会根据清单文件下载并存储这些文件。在后续访问中，浏览器会检查清单文件是否有更新，并在必要时更新缓存。当用户处于离线状态时，浏览器会使用缓存的文件加载网页，无需发出网络请求14。

Service Workers：Service Worker作为浏览器后台线程，可以拦截网络请求并返回缓存数据，从而实现离线访问。Service Worker使用CacheStorage API来管理和存储缓存资源。开发者可以在Service Worker的生命周期中，如install事件中缓存资源，在fetch事件中拦截请求并返回缓存数据。Service Worker还支持后台数据同步，允许在网络条件不佳或断网环境下维持请求，待有网络时再进行数据同步17。

Cache API：Service Worker通过caches对象提供的API，可以对缓存进行更细粒度的控制。开发者可以打开、添加、匹配、删除缓存条目，以及获取所有缓存的键17。

离线状态的处理：当用户处于离线状态时，浏览器会使用已缓存的资源来加载网页。对于Web Storage API和Service Worker，离线状态下的数据访问不受影响，而对于应用程序缓存，浏览器会根据清单文件使用本地存储的资源20。

缓存更新和检查：浏览器会在用户再次访问网页时检查清单文件是否有更新，如果有更新，则重新下载并更新缓存。对于Service Worker，开发者可以在Service Worker的activate事件中清理旧缓存，确保用户总是获取最新内容23。

注意事项：使用HTML5离线存储时，需要注意缓存的资源必须在同一域名下，修改缓存清单文件会导致浏览器重新下载所有列出的文件。同时，浏览器对缓存清单文件的缓存策略可能影响更新，因此清单文件通常不应被设置为缓存24。

通过这些机制，浏览器能够高效地管理和加载HTML5离线存储资源，提供更好的用户体验，尤其是在网络不稳定或无网络连接的情况下。

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

HTML中的<title>和<h1>标签虽然都与页面的标题有关，但它们的用途和在页面中的作用是不同的：

  • <title>标签：

    • <title>标签位于<head>部分，它定义了文档的标题。
    • 浏览器会将<title>标签的内容显示在浏览器的标题栏或标签页上。
    • <title>是SEO（搜索引擎优化）的重要因素之一，搜索引擎会根据标题标签的内容判断页面的主题。
    • 每个HTML文档应该只有一个<title>标签。

  • <h1>标签：

    • <h1>标签是头部标签（Heading标签）的一种，表示最大的标题，在页面内容中起到强调作用。
    • <h1>通常用于页面的主标题，是页面内容结构的组成部分，对用户和搜索引擎都表明了页面的主题。
    • 浏览器会将<h1>标签的内容以较大号的字体显示在页面正文中。
    • 一个页面中最好只有一个<h1>标签，如果有多个，搜索引擎可能会降低页面的权重。

区别总结：

  • 位置：<title>位于<head>部分，而<h1>位于<body>部分。
  • 功能：<title>用于定义文档标题，显示在浏览器标签上；<h1>用于页面内容中，表示页面的主标题。
  • 语义：<title>对整个页面的描述，而<h1>是对页面主要内容的概括。
  • SEO：<title>在搜索引擎优化中非常重要，是判断页面内容的重要因素之一；<h1>虽然也重要，但更多是作为页面结构的组成部分。
  • 使用数量：推荐每个页面只有一个<title>和<h1>。

正确使用这两个标签有助于提升页面的可访问性和搜索引擎排名。

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

HTML 中的 <b> 和 <strong> 标签都可以用来使文本加粗，但它们的含义和用途有所不同：

  • <b> 标签：

    • <b> 是一个行内样式标签，表示文本样式的变化，但并不包含任何特殊的意义。它仅仅是用来展示，告诉浏览器将文本显示为加粗，而不传递任何重要性或紧急性的语义信息。
    • 通常用于文本样式的呈现，例如产品名称、专有名词等。

  • <strong> 标签：

    • <strong> 表示文本的重要性，它具有语义性，告诉浏览器和屏幕阅读器这些文本需要被强调，通常用于需要强调或紧急性的内容。
    • 根据HTML规范，<strong> 应该表示“文本的强烈重要性”，在文档结构中具有明确的语义作用。

区别总结：

  • 语义性：<strong> 具有明确的语义，表示内容的重要性，而 <b> 只表示样式，不传递任何语义。
  • 屏幕阅读器：对于视觉障碍用户使用的屏幕阅读器，<strong> 可能会触发不同的阅读方式，比如更慢或更强调的语调，而 <b> 则不会。
  • 样式：尽管两者在默认样式下都会使文本加粗，但它们的使用目的不同。<b> 用于样式需求，<strong> 用于语义需求。
  • 搜索引擎优化（SEO）：由于 <strong> 具有强调内容的语义，搜索引擎可能会给予包含在 <strong> 标签中的文字更高的权重。

在HTML5中，推荐使用 <strong> 来强调重要性，而 <b> 则用于没有语义重要性但需要样式加粗的情况。

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

HTML中的<i>和<em>标签都可以用来呈现斜体文本，但它们的语义和用途不同：

  • <i> 标签：

    • <i>标签原本用于表示文本应该以斜体显示，常用于专业术语、技术术语、外来词汇、某些生物的属名、船只的名字、法庭案件的引用名称等。
    • 它是一个纯粹样式的标签，不包含任何特殊语义，只表示视觉上的斜体效果。

  • <em> 标签：

    • <em>标签表示强调，它具有语义性，告诉浏览器和屏幕阅读器这些文本需要被强调。通常，浏览器会将<em>标签中的文本以斜体显示。
    • 根据HTML规范，<em>应该用于表示文本的强调或重要性，它是一个重要的阅读提示。

区别总结：

  • 语义性：<em>具有语义性，表示内容的强调或重要性，而<i>只表示样式，不传递任何语义。
  • 屏幕阅读器：对于视觉障碍用户使用的屏幕阅读器，<em>可能会触发不同的阅读方式，比如更慢或更强调的语调，而<i>则不会。
  • 样式：尽管两者在默认样式下都会使文本呈现为斜体，但它们的使用目的不同。<i>用于样式需求，如专业术语，<em>用于语义需求，如强调。
  • 搜索引擎优化（SEO）：由于<em>具有强调内容的语义，搜索引擎可能会给予包含在<em>标签中的文本更高的权重。

在HTML5中，推荐使用<em>来强调重要性，而<i>则用于没有语义强调但需要样式斜体的情况，如专业术语或外来词汇。

# iframe 有哪些优点和缺点？

优点：

  • 内容嵌入：可以在当前页面中无缝嵌入另一个HTML页面，这使得可以展示来自不同源的内容。

  • 隔离性：<iframe>内的页面与主页面是隔离的，拥有独立的全局作用域，不会影响主页面的JavaScript变量和样式。

  • 安全性：可以加载第三方内容而不暴露主页面的DOM或JavaScript环境。

  • 样式和布局：<iframe>可以设置大小和样式，易于集成到页面布局中。

  • 同源策略：尽管同源策略限制了跨域访问，但<iframe>可以通过postMessageAPI实现跨域通信。

  • 多媒体内容：适合嵌入视频、地图、文档和其他多媒体内容。

  • 加载性能：可以并行加载多个<iframe>，提高页面加载效率。

缺点：

  • SEO影响：搜索引擎可能无法完全索引<iframe>中的内容，影响网站的SEO。

  • 性能问题：每个<iframe>都是一个完整的页面上下文，可能会消耗更多的内存和CPU资源。

  • 交互性限制：与主页面的交互可能受限，需要特定的技术或API来实现通信。

  • 用户体验：如果不当使用，可能会影响用户体验，例如滚动问题、尺寸不匹配等。

  • 安全性风险：如果嵌入不信任的第三方内容，可能会带来安全风险，如点击劫持等。

  • 维护问题：嵌入的页面如果发生更改或被移除，可能会导致<iframe>内容失效。

  • 响应式设计：<iframe>内容可能不总是很好地适应不同的屏幕尺寸和设备。

  • 加载时间：如果<iframe>内容复杂，可能会增加页面的加载时间。

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

HTML中的<label>标签用于定义表单控件的标签（label）。它的作用主要有以下几点：

  1. 提高可访问性：<label>标签为表单控件（如<input>、<select>、<textarea>等）提供可见的文本说明，这对视觉障碍用户尤其重要。
  2. 增强用户体验：用户可以通过点击标签文本来聚焦对应的表单控件，提高表单的易用性。
  3. 语义化：<label>提供了一种语义化的方式来描述表单控件，使得HTML结构更加清晰。
  4. 使用for属性：<label>标签的for属性应与对应表单控件的id属性值相匹配，这样当用户点击标签时，浏览器会自动聚焦到相关的表单控件。
  5. 组合表单控件和标签：当<label>包裹一个表单控件时（例如<input>），即使没有for属性，浏览器也会将点击标签的操作视为点击控件。

# 如何使用：

以下是一个基本的<label>标签使用示例：

<form action="/submit-form" method="post">
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username">

  <label for="password">密码：</label>
  <input type="password" id="password" name="password">

  <label>
    <input type="checkbox" id="agree" name="agree">
    我同意服务条款
  </label>

  <input type="submit" value="提交">
</form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

在这个例子中：

  • 第一个<label>通过for属性与<input type="text">的id属性关联。
  • 第二个<label>同样使用for属性与<input type="password">关联。
  • 第三个<label>直接包裹了<input type="checkbox">，虽然没有使用for属性，但点击“我同意服务条款”的文本也会选中复选框。
  • 用户填写表单时，点击标签文本会将焦点自动定位到相应的输入字段上。

# Canvas 和 SVG 有什么区别？

Canvas 和 SVG（Scalable Vector Graphics）都是网页上用于绘图的技术，但它们在多个方面存在显著差异：

  • 绘图方法：

    • Canvas：使用像素在画布上绘制图形，是一种位图技术。一旦绘制完成，就不能再次编辑。Canvas 提供一个低级的API，需要手动处理图形的每个像素。
    • SVG：使用XML格式的声明式矢量图形。SVG 图形是可编辑的，可以被无限缩放而不失真，因为它们是基于数学方程的。

  • 性能：

    • Canvas：适合绘制大量像素数据或实时图形（如游戏或视频），因为它们是位图，所以绘制速度很快。
    • SVG：适合绘制静态矢量图形，如图标、徽标等。在处理复杂或大型的矢量图形时，可能会影响页面性能。

  • 交互性：

    • Canvas：交互性有限，通常需要使用JavaScript来实现交互功能。
    • SVG：原生支持事件处理器，可以更容易地添加交互效果。

  • 文件大小：

    • Canvas：由于是基于像素的，文件大小可能会很大，尤其是当画布尺寸较大时。
    • SVG：通常具有更小的文件大小，因为它们是矢量图形，可以被压缩。

  • 缩放和清晰度：

    • Canvas：在缩放时可能会失去清晰度，因为它们是位图。
    • SVG：可以在任何尺寸下都保持清晰，因为它们是矢量图形。

  • 浏览器支持：

    • 两者都被现代浏览器广泛支持，但SVG在一些旧版浏览器中的支持可能较差。

  • 用途：

    • Canvas：常用于需要大量使用图形和动画的网页游戏、实时图形（如图表）等。
    • SVG：适合用于图标、徽标、插图等图形，这些图形需要在不同的尺寸下都保持清晰。

  • 可访问性和搜索引擎优化（SEO）：

    • Canvas：内容不易于被搜索引擎索引，也不支持屏幕阅读器。
    • SVG：由于是基于文本的，因此可以被搜索引擎索引，并且可以提供更好的屏幕阅读器支持。

  • 动画：

    • Canvas：通常使用JavaScript来实现动画。
    • SVG：可以使用CSS和SMIL（Synchronized Multimedia Integration Language）来实现动画。

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

HTML的<head>标签包含了文档的元数据，即关于文档的信息，而不是文档内容本身。它位于文档的<html>标签内，并且通常是<html>的第一个子元素。<head>内的元素不会直接显示在页面上，但它们对于页面的功能至关重要。

以下是一些常见的<head>标签内使用的标签，以及它们的用途：

  1. <title>：定义文档的标题，这是必不可少的标签，因为它显示在浏览器的标题栏或标签页上，也是搜索引擎结果页（SERP）显示的重要信息。
  2. ：提供关于HTML文档的元数据。标签可以定义字符集、页面描述、关键词、作者、视口设置等。其中，字符集声明（如）是必须的，以确保页面正确地使用字符编码。
  3. <link>：用于链接外部资源，如CSS样式表、RSS源、图标等。对于样式表的链接是必不可少的，以确保页面具有适当的布局和样式。
  6. <base>：定义文档中所有相对URL的基URL。这个标签的使用较少，但在需要的情况下可以简化URL路径。
  7. <noscript>：定义在JavaScript被禁用或不可用时的替代内容。虽然不是必需的，但它有助于提升没有启用JavaScript的用户的体验。
  8. ：对于响应式设计至关重要，它控制布局在不同设备上的视口和缩放行为。
  9. <favicon>：定义页面的图标，通常显示在浏览器的标签页上。

在<head>标签中，至少需要包含<title>和字符集声明的<meta>标签。其他标签的使用取决于页面的具体需求和功能。

前端 HTML 面试题 by 爽爽学编程
爽爽学编程   |