HTML面试题

题目来源于面试鸭

答案为我自行整理如有侵权请联系我

`href` 和 `src` 的区别

1. `href`（Hypertext Reference）

用途：用于建立当前文档与外部资源之间的链接关系，通常用于导航或引用外部资源（但不直接嵌入内容）。
常见标签
- <a href="...">：超链接，点击后跳转到指定 URL。
- <link href="...">：引入外部样式表（如 CSS 文件）。
行为特点
- 浏览器不会立即加载 href 指向的内容（除非用户点击链接或需要应用样式）。
- 它表示一种"引用"或"关系"，而不是直接嵌入内容。

2. `src`（Source）

用途：用于嵌入外部资源到当前文档中 ，资源会立即被加载并显示。
常见标签

：
- <img src="...">：插入图片。
- <script src="...">：引入 JavaScript 文件。
- <iframe src="...">：嵌入另一个网页。
行为特点

：
- 浏览器会立即下载并渲染/执行 src 指定的资源。
- 资源是文档内容的一部分。

对比总结：

属性	全称	作用	是否立即加载	常见标签
`href`	Hypertext Reference	建立链接或引用关系	否（按需加载）	`<a>`, `<link>`
`src`	Source	嵌入资源到页面中	是（立即加载）	`<img>`, `<script>`, `<iframe>`

什么是`html`语义化

使用具有明确含义的标签来表达内容的结构和意义，而不是仅为了样式或布局。

✅ 举例：

用 <header> 表示页头，而不是 <div class="header">
用 <article> 表示独立文章，用 <nav> 表示导航栏

🌟 好处：

更好的可读性（人和机器都能理解）
有利于 SEO（搜索引擎优化）
提升无障碍访问（如屏幕阅读器）

`defer`和`async`有什么区别

defer 和 async 都是用于优化 <script> 标签加载行为的属性，避免脚本阻塞 HTML 解析，但它们的执行时机不同。

✅ 共同点：

都只用于外部脚本 （<script src="...">）；
都能让脚本异步下载（不阻塞 HTML 解析）。

🔍 核心区别：

属性	下载时机	执行时机	执行顺序
`async`	异步下载	下载完立即执行	无序（谁先下载完谁先执行）
`defer`	异步下载	等 HTML 解析完成后再执行（DOMContentLoaded 之前）	按顺序（按代码出现顺序执行）

📌 一句话总结：

async 是"谁快谁先跑"，defer 是"等 DOM 建好再按顺序跑"。

常用的`html` meta标签

常用的 HTML <meta> 标签用于提供网页的元数据 （如字符集、视口、描述、关键词等），不会显示在页面上，但对浏览器、搜索引擎和社交平台非常重要。

以下是最常用的几个：

1. 字符编码

html 复制代码

<meta charset="UTF-8">

告诉浏览器使用 UTF-8 编码解析页面，避免乱码。必须放在 <head> 最前面。

2. 视口设置（移动端适配）

html 复制代码

<meta name="viewport" content="width=device-width, initial-scale=1.0">

控制页面在移动设备上的缩放和布局，实现响应式设计。

3. 禁止缓存（开发/调试用）

html 复制代码

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">

告诉浏览器不要缓存页面（慎用，影响性能）。

4. 社交分享卡片（Open Graph，用于微信、Facebook 等）

html 复制代码

<meta property="og:title" content="页面标题">
<meta property="og:description" content="页面描述">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/page">

控制链接在社交平台分享时的预览样式。

✅ 最佳实践：

一个现代网页通常至少包含：

html 复制代码

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="简洁准确的页面描述">
  <title>页面标题</title>
</head>

⚠️ 注意：<meta> 标签必须放在 <head> 中。

`src`标签内的`srcset`属性的作用是什么

srcset 是 HTML 中 <img> 标签的一个属性，用于为不同屏幕分辨率或设备像素比（DPR）提供多个图片源 ，让浏览器自动选择最合适的一张加载，从而：

在高清屏（如 Retina 屏）上显示更清晰的图片；
在普通屏或小屏幕上加载更小的图片，节省流量、提升性能。

✅ 基本语法：

html 复制代码

<img src="default.jpg"
     srcset="small.jpg 480w,
             medium.jpg 800w,
             large.jpg 1200w"
     sizes="(max-width: 600px) 480px,
            (max-width: 1000px) 800px,
            1200px"
     alt="示例图片">

🔍 关键概念解释：

1. `srcset`

列出多个图片资源及其宽度描述符（如 480w） 或 像素密度描述符（如 2x）。

480w 表示这张图宽 480 像素；
2x 表示这是 2 倍图（用于 DPR=2 的高清屏）。

2. `sizes`（可选但推荐）

告诉浏览器：在不同视口条件下，这张图在页面上会占多宽。

(max-width: 600px) 480px：当屏幕 ≤600px 时，图片显示宽度为 480px；
最后的 1200px 是默认值。

浏览器会结合 sizes 和设备 DPR，从 srcset 中选最合适的图。

✅ 优点：

性能优化：避免在小屏设备下载大图；
体验提升：高清设备显示更锐利的图像；
渐进增强 ：不支持 srcset 的老浏览器会回退到 src。

📌 一句话总结：

srcset 让浏览器根据设备屏幕大小和像素密度，智能选择最合适的图片加载，兼顾清晰度与性能。

`html`中的行内元素，块元素和空元素

在 HTML 中，元素根据显示方式 和内容模型 可分为三类：块级元素（block） 、行内元素（inline） 和 空元素（void elements）。它们的行为和用途各不相同。

1. 块级元素（Block-level Elements）

特点：
- 独占一行（前后自动换行）；
- 可设置 width、height、margin、padding 等；
- 默认宽度为父容器的 100%；
- 可包含其他块级或行内元素（部分例外）。

常见例子：

html 复制代码

<div>, <p>, <h1>~<h6>, <header>, <footer>, <section>, <article>, <ul>, <li>, <form>, <table>

2. 行内元素（Inline Elements）

特点：
- 不会换行，和其他行内元素在同一行显示；
- 不能设置宽高 （width/height 无效）；
- margin 和 padding 只在左右生效，上下不影响布局（但视觉上可能有空间）；
- 只能包含文本或其他行内元素（不能包含块级元素）。

常见例子：

html 复制代码

<span>, <a>, <strong>, <em>, <img>, <input>, <label>, <button>, <code>

💡 注意：<img> 和 <input> 虽是行内元素，但属于 "行内块元素（inline-block）" 行为（可设宽高），是特例。

3. 空元素（Void Elements）

特点：
- 没有闭合标签 ，也不能包含任何内容；
- 自身即完整，写法如 <br> 或 <br />（后者是 XHTML 风格，HTML5 中 / 可省略）；
- 多用于插入内容或定义行为，而非包裹内容。

常见例子：

html 复制代码

<br>, <hr>, <img>, <input>, <link>, <meta>, <area>, <base>, <col>, <embed>, <source>, <track>, <wbr>

❌ 错误写法：<br></br>、<img>图片</img>（无效，浏览器会忽略闭合标签）。

📌 对比总结：

类型	是否换行	可设宽高	可包含块级元素	示例
块级元素	✅ 是	✅ 是	✅ 通常可以	`<div>`, `<p>`, `<section>`
行内元素	❌ 否	❌ 否（多数）	❌ 不可以	`<span>`, `<a>`, `<em>`
空元素	视具体而定	部分可以（如 `<img>`）	❌ 不能包含内容	`<br>`, `<img>`, `<input>`

💡 补充说明：

通过 CSS 的 display属性可以改变元素默认显示行为：
- display: block → 行内变块级
- display: inline → 块级变行内
- display: inline-block → 行内但可设宽高（如 <img> 的默认行为）

✅ 一句话记住：

块级占整行，行内不换行，空元素自闭合。

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

浏览器对 HTML5 离线存储资源 的管理和加载，主要依赖于现代标准中的 Service Worker + Cache API （而非已废弃的 AppCache）。下面从注册、缓存、拦截、更新、清理五个环节，清晰说明浏览器如何管理这些离线资源。

🧠 核心机制：Service Worker 是"网络代理"

Service Worker 是一个独立于网页主线程、运行在后台的脚本，它能：

拦截页面发出的所有网络请求（fetch）；
决定是返回缓存、请求网络，还是两者结合；
管理缓存的生命周期。

⚠️ 前提：必须通过 HTTPS （或 localhost）访问，确保安全。

🔁 1. 注册与安装（Registration & Install）

流程：

页面 JS 调用 navigator.serviceWorker.register('/sw.js')；
浏览器下载并解析 sw.js；
触发 install 事件 → 开发者在此阶段预缓存关键资源。

js 复制代码

// sw.js
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('v1').then(cache => 
      cache.addAll(['/index.html', '/app.js', '/style.css'])
    )
  );
});

浏览器行为：

首次访问时，页面正常加载（Service Worker 安装不影响当前页面）；
安装成功后，Service Worker 进入 "waiting" 状态，不会立即接管页面（避免运行中新旧逻辑冲突）；
下次打开页面（或调用 skipWaiting()）才会激活。

📥 2. 激活（Activate）

触发时机：

当前没有旧版 Service Worker 控制的页面；
或主动调用 self.skipWaiting() + clients.claim()。

js 复制代码

self.addEventListener('activate', event => {
  // 清理旧缓存
  const cacheWhitelist = ['v1'];
  event.waitUntil(
    caches.keys().then(keys => 
      Promise.all(keys.map(key => {
        if (!cacheWhitelist.includes(key)) return caches.delete(key);
      }))
    )
  );
});

浏览器行为：

激活后，Service Worker 开始拦截该作用域下的所有网络请求；
此时才真正具备"离线服务能力"。

🌐 3. 请求拦截与资源加载（Fetch & Cache Strategy）

每次页面请求资源（HTML、JS、图片等），浏览器会：

先检查是否有激活的 Service Worker；
若有，则触发 fetch 事件，由开发者决定如何响应。

常见策略（由开发者实现）：

策略	行为	适用场景
Cache First	优先返回缓存，无则走网络	静态资源（CSS/JS/图片）
Network First	优先走网络，失败再用缓存	动态内容（API 数据）
Cache Only	只返回缓存	纯离线页面
Stale-While-Revalidate	先返回缓存，同时后台更新	平衡速度与新鲜度

js 复制代码

// Cache First 示例
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(res => res || fetch(event.request))
  );
});

✅ 离线时 ：fetch() 失败，但 caches.match() 成功 → 返回缓存内容。

✅ 在线时：可选择是否更新缓存（取决于策略）。

🔄 4. 更新机制（Update）

浏览器如何检测更新？

每次页面加载时，浏览器自动检查 sw.js 是否有字节级变化；
如果有变化，则视为新版本，触发新一轮 install → waiting → activate。

开发者控制更新：

调用 registration.update() 主动检查；
在页面监听 updatefound 事件，提示用户"有新版本"；
使用 skipWaiting() + clients.claim() 实现即时更新（类似 PWA 的"刷新生效"）。

🧹 5. 缓存清理与存储管理

浏览器自动管理：

离线缓存（Cache Storage）与 localStorage、IndexedDB 等共享存储配额（通常为设备存储的 50%~80%）；
当存储空间不足时，浏览器可能自动清除整个站点的存储（按 LRU 策略）；
用户可在浏览器设置中手动"清除站点数据"。

开发者手动清理：

在 activate 事件中删除旧缓存（如上文示例）；
调用 caches.delete('old-cache')。

📊 存储位置（开发者工具查看）

在 Chrome DevTools 中：

Application > Service Workers：查看注册状态、强制更新；
Application > Cache Storage：查看缓存的资源列表；
Application > Clear storage：一键清除所有离线数据。

✅ 总结：浏览器如何管理 HTML5 离线资源？

阶段	浏览器行为
注册	下载 `sw.js`，安装时缓存指定资源
激活	接管页面请求，开始拦截 `fetch`
加载	根据 Service Worker 中的策略，返回缓存或网络资源
更新	检测 `sw.js` 变化，自动触发新版本安装
清理	按存储配额和用户操作，自动或手动清除缓存

💡 关键点 ：离线能力不是"自动开启"的，而是由 开发者通过 Service Worker 精细控制，浏览器提供底层支持。

这种机制让 Web 应用真正具备了类原生 App 的离线体验，是 PWA 的核心基础。

title和h1标签的区别

<title> 和 <h1> 都用于表示"标题"，但用途、位置和受众完全不同。一句话概括：

<title> 是给浏览器标签页和搜索引擎看的；<h1> 是给用户在网页里看的。

📌 详细对比：

特性	`<title>`	`<h1>`
位置	必须在 `<head>` 中	在 `<body>` 中
显示位置	浏览器标签页、书签、搜索引擎结果页（SERP）	网页正文顶部（用户可见）
是否可见	页面内不可见	页面内可见
SEO 作用	非常重要，影响搜索排名和点击率	重要，表示页面核心主题
数量建议	每页只能有一个	每页推荐一个（语义上主标题）
HTML 示例	`<title>新闻详情 - 网站名</title>`	`<h1>今日头条：AI 技术新突破</h1>`

✅ 记住：<title> 是"窗口的名片"，<h1> 是"内容的招牌"。

`b`和`strong`标签的区别

<b> 和 <strong> 在浏览器中默认都显示为粗体文字 ，但它们的语义和用途完全不同。

✅ 核心区别：

标签	作用	语义	推荐场景
`<b>`	纯视觉加粗	无语义（仅样式）	仅需视觉突出，不表示重要性（如关键词高亮、产品名）
`<strong>`	强调内容重要性	有语义（表示强强调）	表示内容在上下文中非常重要（如警告、关键信息）

💡 技术细节：

默认样式 ：两者都 font-weight: bold，但可通过 CSS 修改；
嵌套效果 ：<strong><strong>文本</strong></strong> 可能被读得更重（取决于阅读器）；
HTML5 建议 ：优先使用语义化标签 ，只有在确实不需要语义 时才用 <b> 或 <i>。

📌 原则：

要强调重要性 → 用 <strong>；

只要看起来粗一点 → 用 <b> 或 CSS。

一句话总结：

<strong> 是"内容重要"，<b> 是"看起来粗"------前者讲语义，后者只管样式。

`i`和`em`标签的区别

<i> 和 <em> 在浏览器中默认都显示为斜体文字 ，但它们的语义和用途有本质区别。

✅ 核心区别：

标签	作用	语义	默认样式	推荐场景
`<em>`	表示强调（emphasis）	✅ 有语义：表示语气上的重音或重点	斜体（`font-style: italic`）	需要传达语气强调的内容（如"我真的不想去"）
`<i>`	纯视觉斜体	❌ 无语义：仅用于样式或特殊文本类别	斜体（`font-style: italic`）	外文词、科技术语、船名、思想等传统需斜体但无强调意图的内容

💡 HTML5 的语义化建议：

HTML5 明确指出：

<em> 用于强调（可嵌套，越深强调越强）；
<i>

用于与周围文本"不同类"的文本，例如：
- 外语词汇（如 c'est la vie）
- 技术术语、生物分类学名
- 船舶名称（如 Titanic）
- 思想、梦境、声音等

📌 注意：不要用 <i> 仅仅为了"让文字变斜" ------ 如果只是样式需求，应该用 CSS（如 <span style="font-style: italic">）。

一句话总结：

<em> 是"说的时候加重语气"，<i> 是"按惯例写成斜体"------前者有语义，后者只是分类或样式。

label标签的作用和使用

<label> 标签在 HTML 中用于为表单控件（如 <input>、<textarea>、<select> 等）定义标签文本 ，它的核心作用是：提升可访问性（a11y）和用户体验。

✅ 核心作用

点击标签 = 聚焦/选中控件
用户点击 <label> 文字时，关联的表单元素会自动获得焦点（如输入框）或被选中（如复选框），扩大点击区域，提升移动端体验。
屏幕阅读器友好
视障用户使用读屏软件时，能明确知道"这个输入框是用于填写什么的"，避免表单无法使用。
语义清晰，结构规范
明确建立"标签 ↔ 控件"的关系，符合 HTML 语义化标准。

🔧 两种使用方式

方式一：使用 `for` 属性（推荐）

<label> 的 for 值 = 表单控件的 id
结构灵活，标签和控件可不在一起

html 复制代码

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

方式二：将控件嵌套在 `<label>` 内

无需 for 和 id，自动关联
适合简单场景（如复选框、单选按钮）

html 复制代码

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

⚠️ 注意：两种方式不要混用 ，且每个控件只能关联一个 label。

🌰 常见示例

1. 文本输入框

html 复制代码

<label for="email">邮箱地址：</label>
<input type="email" id="email" required>

2. 单选/复选框（推荐嵌套写法）

html 复制代码

<label><input type="radio" name="gender" value="m"> 男</label>
<label><input type="radio" name="gender" value="f"> 女</label>

<label><input type="checkbox" name="news"> 订阅新闻</label>

3. 下拉菜单

html 复制代码

<label for="country">国家：</label>
<select id="country">
  <option>中国</option>
  <option>美国</option>
</select>

一句话总结：

<label> 让表单"可点击、可读、可用"------是构建无障碍、高可用表单的必备标签。

canvas和svg有什么区别

<canvas> 和 <svg> 都是 HTML5 中用于图形绘制 的技术，但它们的底层原理、适用场景和特性有本质区别。以下是清晰对比：

🧩 核心区别一句话总结：

<canvas> 是"画布"（像素绘制），<svg> 是"矢量图形"（XML 标签描述）。

✅ 详细对比

特性	`<canvas>`	`<svg>`
类型	位图（光栅图形）基于像素绘制	矢量图形基于 XML 标签描述图形
缩放效果	放大后失真、模糊（像素被拉伸）	无限放大不失真（数学公式重绘）
DOM 结构	无 DOM 只是一个 `<canvas>` 元素，内容不可访问	每个图形都是 DOM 节点如 `<circle>`、`<rect>` 可单独操作
事件绑定	不能直接给图形绑事件需通过坐标计算模拟	可直接给图形元素绑定事件如 `circle.addEventListener('click', ...)`
性能	适合大量图形、高频更新（如游戏、动画）但复杂度高时内存占用大	适合少量图形、交互性强的场景图形过多时 DOM 膨胀，性能下降
可访问性（a11y）	差（屏幕阅读器无法识别内容）	好（可添加 `title`、`aria-label` 等）
文件格式	不能直接保存为图像文件（需调用 `toDataURL()` 导出）	本身就是 XML，可保存为 `.svg` 文件，文本可读
CSS 控制	无法用 CSS 控制内部图形	图形样式可用 CSS 控制（如 `circle { fill: red; }`）

✅ 一句话总结：

要"画一次就完事"或做高性能动画 → 用 <canvas>；
要"图形可交互、可缩放、可维护" → 用 <svg>。

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

<head> 标签是 HTML 文档的元数据容器 ，它不会在页面上直接显示内容 ，但包含了浏览器、搜索引擎和开发者理解与正确渲染页面所需的关键信息。

✅ `<head>` 的主要作用：

定义文档基本信息（标题、字符编码等）
引入外部资源（CSS、JS、图标等）
提供 SEO 和社交分享元数据（描述、关键词、Open Graph 等）
控制视口、缓存、安全策略等行为

🔑 `<head>` 中必不可少的标签（现代 Web 开发标准）

虽然 HTML 规范对某些标签的"强制性"较宽松，但从功能性、兼容性和最佳实践 角度，以下标签强烈建议必须包含：

1. `<meta charset="UTF-8">`

作用：声明文档字符编码为 UTF-8（支持全球语言）
为什么必要：避免中文、表情符号等乱码
位置：应放在 <head> 最前面（部分浏览器会提前解析）

html 复制代码

<meta charset="UTF-8">

2. `<title>`

作用：定义网页标题
显示位置：浏览器标签页、书签、搜索引擎结果
SEO 影响：极其重要，影响点击率和排名

html 复制代码

<title>我的网站 - 首页</title>

⚠️ 注意：<title> 是 HTML 文档唯一强制要求的 <head> 子元素（根据 HTML 标准，缺少会导致文档不合规）。

📌 强烈推荐（虽非"语法必需"，但现代开发必备）

3. `<meta name="viewport">`（移动端适配）

html 复制代码

<meta name="viewport" content="width=device-width, initial-scale=1.0">

没有它，移动端页面会以桌面宽度缩放显示，导致布局错乱。

4. `<link rel="icon">`（网站图标）

html 复制代码

<link rel="icon" href="/favicon.ico">

提升品牌识别度，避免 404 请求。

🧩 其他常见 `<head>` 标签（按需使用）

标签	用途
`<meta name="description">`	页面描述，用于 SEO 和社交分享
`<link rel="stylesheet">`	引入 CSS 文件
`<script>`	引入 JS（通常放 `<body>` 底部，但某些需放 `<head>`）
`<meta http-equiv="X-UA-Compatible">`	旧版 IE 兼容（现代项目已不需要）
`<meta property="og:...">`	社交媒体分享卡片（如微信、Facebook）
`<base>`	设置页面相对 URL 的基准路径

📄 完整最小推荐模板

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>页面标题</title>
  <link rel="icon" href="/favicon.ico">
  <!-- 可选：SEO 描述 -->
  <meta name="description" content="这是一个示例页面">
</head>
<body>
  <!-- 页面内容 -->
</body>
</html>

✅ 总结

标签	是否必不可少	说明
`<meta charset="UTF-8">`	✅ 必须	防止乱码
`<title>`	✅ 必须	HTML 标准要求，SEO 核心
`<meta viewport>`	✅ 移动端必须	响应式基础
其他	❌ 按需	根据项目需求添加

💡 记住：

没有 <title>，HTML 不合规；

没有 charset，中文可能变乱码；

没有 viewport，移动端体验极差。

html4和html5有什么区别

HTML4（1999年发布）和 HTML5（2014年正式标准化）之间的区别不仅是"版本升级"，更是Web 从文档展示平台向应用开发平台的跃迁。以下是核心区别，按类别清晰对比：

🧱 1. 文档结构与语义化

HTML4	HTML5
依赖 `<div>` + `id/class` 构建结构（如 `<div id="header">`）	新增语义化标签： `<header>`, `<nav>`, `<main>`, `<article>`, `<section>`, `<aside>`, `<footer>`
结构无语义，不利于 SEO 和无障碍访问	结构清晰，机器（搜索引擎、读屏器）可理解内容角色

✅ 示例：

html 复制代码

<!-- HTML4 -->
<div id="nav">...</div>

<!-- HTML5 -->
<nav>...</nav>

🎥 2. 多媒体支持

HTML4	HTML5
需依赖 Flash、QuickTime 等第三方插件播放音视频	原生支持 `<audio>` 和 `<video>` 标签，无需插件
无统一 API，兼容性差	提供标准 JavaScript API 控制播放

✅ 示例：

html 复制代码

<video controls src="movie.mp4"></video>
<audio src="bgm.mp3" autoplay></audio>

🎨 3. 图形与动画

HTML4	HTML5
只能通过 `<img>` 显示静态图，或用 Flash 做动画	新增 `<canvas>` 标签，支持JavaScript 动态绘图（游戏、图表、图像处理）
无矢量图形支持	支持内联 SVG（可缩放矢量图形）

✅ 示例：

html 复制代码

<canvas id="game" width="800" height="600"></canvas>
<svg><circle cx="50" cy="50" r="40" fill="red"/></svg>

📝 4. 表单增强

HTML4	HTML5
输入类型只有 `text`, `password`, `checkbox` 等基础类型	新增 13+ 种 input 类型： `email`, `url`, `number`, `date`, `time`, `range`, `color`, `search` 等
验证需 JavaScript 实现	内置表单验证（如 `required`, `pattern`, `min/max`）
无占位提示	支持 `placeholder` 属性

✅ 示例：

html 复制代码

<input type="email" required placeholder="请输入邮箱">
<input type="range" min="0" max="100">

💾 5. 客户端存储

HTML4	HTML5
仅支持 Cookie（容量小、每次请求携带、不安全）	新增： - `localStorage`（持久存储） - `sessionStorage`（会话存储） - `IndexedDB`（大型结构化数据）
无离线能力	支持 Service Worker + Cache API 实现离线应用（PWA）

🌐 6. API 与功能扩展

HTML5 引入大量 JavaScript API，使 Web 应用能力接近原生：

功能	HTML5 新增 API
获取用户位置	Geolocation API
多任务/后台计算	Web Workers
实时通信	WebSocket
拖放操作	Drag and Drop API
历史管理（SPA）	History API
设备方向	DeviceOrientation API

💡 HTML4 几乎没有这类原生 API。

🧾 7. 语法简化

HTML4	HTML5
DOCTYPE 冗长： `<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">`	DOCTYPE 极简： `<!DOCTYPE html>`
属性值必须加引号，标签必须闭合	更宽松：属性值可不加引号，部分标签可省略闭合（如 `<br>`）
`type="text/css"` 或 `type="text/javascript"` 必须写	`<style>` 和 `<script>` 的 `type` 属性可省略（默认即 CSS/JS）

✅ 示例：

html 复制代码

<!-- HTML5 -->
<script src="app.js"></script>
<style> body { margin: 0; } </style>

🚫 8. 移除或废弃的元素

HTML5 移除了纯表现性或过时的标签，倡导"结构与样式分离"：

HTML4 元素	HTML5 状态	替代方案
`<font>`, `<center>`, `<strike>`	❌ 废弃	用 CSS 控制样式
`<frameset>`, `<frame>`	❌ 废弃	用 `<iframe>` 或 SPA 架构
`<applet>`	❌ 废弃	用 `<canvas>` 或 WebAssembly

✅ 总结：HTML5 的核心进步

维度	HTML4	HTML5
定位	文档标记语言	应用开发平台
语义	弱（靠 div）	强（语义标签）
多媒体	依赖插件	原生支持
交互性	有限（靠 JS + 插件）	丰富 API（定位、存储、通信等）
开发体验	繁琐	简洁、标准化

题目来源于面试鸭

答案为我自行整理 如有侵权请联系我

href 和 src 的区别

1. href（Hypertext Reference）

2. src（Source）

对比总结：

什么是html语义化

defer和async有什么区别

✅ 共同点：

🔍 核心区别：

📌 一句话总结：

常用的html meta标签

1. 字符编码

2. 视口设置（移动端适配）

3. 禁止缓存（开发/调试用）

4. 社交分享卡片（Open Graph，用于微信、Facebook 等）

✅ 最佳实践：

src标签内的srcset属性的作用是什么

✅ 基本语法：

🔍 关键概念解释：

1. srcset

2. sizes（可选但推荐）

✅ 优点：

📌 一句话总结：

html中的行内元素，块元素和空元素

1. 块级元素（Block-level Elements）

2. 行内元素（Inline Elements）

3. 空元素（Void Elements）

📌 对比总结：

💡 补充说明：

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

🧠 核心机制：Service Worker 是"网络代理"

🔁 1. 注册与安装（Registration & Install）

流程：

浏览器行为：

📥 2. 激活（Activate）

触发时机：

浏览器行为：

🌐 3. 请求拦截与资源加载（Fetch & Cache Strategy）

常见策略（由开发者实现）：

🔄 4. 更新机制（Update）

浏览器如何检测更新？

开发者控制更新：

🧹 5. 缓存清理与存储管理

浏览器自动管理：

开发者手动清理：

📊 存储位置（开发者工具查看）

✅ 总结：浏览器如何管理 HTML5 离线资源？

title和h1标签的区别

📌 详细对比：

b和strong标签的区别

✅ 核心区别：

💡 技术细节：

一句话总结：

i和em标签的区别

✅ 核心区别：

💡 HTML5 的语义化建议：

一句话总结：

label标签的作用和使用

✅ 核心作用

🔧 两种使用方式

方式一：使用 for 属性（推荐）

方式二：将控件嵌套在 <label> 内

🌰 常见示例

1. 文本输入框

2. 单选/复选框（推荐嵌套写法）

3. 下拉菜单

一句话总结：

canvas和svg有什么区别

🧩 核心区别一句话总结：

✅ 详细对比

✅ 一句话总结：

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

✅ <head> 的主要作用：

🔑 <head> 中必不可少的标签（现代 Web 开发标准）

1. <meta charset="UTF-8">

2. <title>

📌 强烈推荐（虽非"语法必需"，但现代开发必备）

3. <meta name="viewport">（移动端适配）

答案为我自行整理如有侵权请联系我

`href` 和 `src` 的区别

1. `href`（Hypertext Reference）

2. `src`（Source）

什么是`html`语义化

`defer`和`async`有什么区别

常用的`html` meta标签

`src`标签内的`srcset`属性的作用是什么

1. `srcset`

2. `sizes`（可选但推荐）

`html`中的行内元素，块元素和空元素

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

`b`和`strong`标签的区别

`i`和`em`标签的区别

方式一：使用 `for` 属性（推荐）

方式二：将控件嵌套在 `<label>` 内

✅ `<head>` 的主要作用：

🔑 `<head>` 中必不可少的标签（现代 Web 开发标准）

1. `<meta charset="UTF-8">`

2. `<title>`

3. `<meta name="viewport">`（移动端适配）

4. `<link rel="icon">`（网站图标）

🧩 其他常见 `<head>` 标签（按需使用）