一_HTML_基础
本文将详细讲解HTML的基础语法，包括标签、属性、实体字符等内容，适合初学者阅读。
1、什么是语义化 HTML？有哪些常用的语义化标签?
语义化 HTML 是指使用恰当的 HTML 标签来描述内容的含义，使标签本身能够清晰地表达其包裹内容的性质和用途，而不仅仅是通过 CSS 来定义外观。
语义化的核心价值在于：
- 提高代码的可读性和可维护性，让开发者能快速理解页面结构
- 帮助搜索引擎更好地解析页面内容，提升 SEO 效果
- 便于屏幕阅读器等辅助设备理解页面，提高 accessibility（可访问性）
- 即使没有 CSS 样式，页面也能保持清晰的结构层次
常用的语义化标签包括：
结构类标签：
<header>：页面或区块的头部，通常包含标题、logo、导航等<nav>：导航栏，包含链接到其他页面或当前页面不同部分的链接<main>：页面的主要内容区域，一个页面通常只有一个<footer>：页面或区块的底部，通常包含版权信息、联系方式等<section>：表示一个独立的主题区块，通常包含标题<article>：表示一篇独立完整的内容，如博客文章、新闻报道等<aside>：侧边栏内容，与主要内容相关但非必需的补充信息
文本类标签：
<h1>-<h6>：表示不同级别的标题，h1 级别最高，h6 最低<p>：表示段落文本<strong>：表示重要文本（语义上的强调）<em>：表示强调文本（通常表现为斜体）<blockquote>：表示长引用<q>：表示短引用<ul>/<ol>/<li>：无序列表、有序列表和列表项<dl>/<dt>/<dd>：定义列表、术语和定义
其他语义标签：
<figure>：包含图片、图表等媒体内容<figcaption>：为 figure 元素提供标题说明<time>：表示日期或时间<mark>：表示需要突出显示的文本<address>：表示联系信息
使用语义化标签替代大量无意义的 <div> 和 <span>，能让 HTML 结构更清晰、更具可读性，同时也更符合现代 Web 开发的最佳实践。
2、HTML5 新增了哪些语义化标签？它们的使用场景分别是什么？
HTML5 新增了一系列语义化标签，旨在更清晰地描述页面结构和内容含义。这些标签不仅提升了代码的可读性，还增强了对搜索引擎和辅助设备的友好性。以下是主要新增的语义化标签及其使用场景：
一、结构型语义标签（页面布局相关）
<header>- 场景：表示页面或某个区块的「头部区域」，通常包含标题、Logo、导航、搜索框等。
- 示例：页面顶部的网站标题+导航栏，或文章内的标题+作者信息。
1
2
3
4<header>
<h1>我的博客</h1>
<nav>/* 导航链接 */</nav>
</header><nav>
场景：专门用于「导航区域」，包含链接到其他页面或当前页面不同部分的链接集合。
示例：主导航栏、侧边栏导航、分页导航等。
1
2
3
4
5
6<nav>
<ul>
<li><a href="/home">首页</a></li>
<li><a href="/about">关于</a></li>
</ul>
</nav>
<main>- 场景：表示页面的「主要内容区域」，一个页面只能有一个
<main>，且不应包含页头、页脚等重复内容。 - 示例：博客的文章列表、商品详情页的商品信息、表单页面的表单主体。
1
2
3<main>
<article>/* 主要内容 */</article>
</main>/* 主要内容 */ - 场景：表示页面的「主要内容区域」，一个页面只能有一个
<footer>- 场景：表示页面或区块的「底部区域」，通常包含版权信息、联系方式、相关链接等。
- 示例：页面底部的版权声明，或文章底部的「相关阅读」链接。
1
2
3<footer>
<p>© 2023 我的网站 版权所有</p>
</footer><section>- 场景：表示页面中一个「独立的主题区块」，通常包含一个标题（
<h1>-<h6>），用于将内容划分为逻辑部分。 - 示例：文章中的章节、商品列表中的分类区块、首页的「功能介绍」模块。
1
2
3
4
5<section>
<h2>产品特点</h2>
<p>特点1：...</p>
<p>特点2：...</p>
</section>产品特点
特点1：...
特点2：...
- 场景：表示页面中一个「独立的主题区块」，通常包含一个标题（
<article>- 场景：表示一篇「独立完整的内容」，可单独存在并被理解（如被分享、转载）。
- 示例：博客文章、新闻报道、论坛帖子、商品评价等。
1
2
3
4<article>
<h2>前端语义化的重要性</h2>
<p>正文内容...</p>
</article>前端语义化的重要性
正文内容...
<aside>- 场景：表示与主要内容相关但非必需的「辅助内容」，通常作为侧边栏。
- 示例：文章的「作者简介」、「相关推荐」、「广告」、「目录索引」等。
1
2
3
4
5
6
7
8<article>
<h2>主文章</h2>
<p>...</p>
<aside>
<h3>作者简介</h3>
<p>本文作者：...</p>
</aside>
</article>主文章
...
二、内容型语义标签（文本/媒体相关）
<figure>与<figcaption>- 场景：
<figure>用于包裹「独立的媒体内容」（图片、图表、代码块等），<figcaption>为其提供标题或说明。 - 示例：带说明的图片、带注释的代码片段。
1
2
3
4<figure>
<img src="chart.png" alt="用户增长趋势图">
<figcaption>2023年用户增长趋势</figcaption>
</figure>
2023年用户增长趋势 - 场景：
<time>- 场景：表示「日期或时间」，通过
datetime属性提供机器可识别的格式（便于搜索引擎解析）。 - 示例：文章发布时间、事件开始时间。
1
<p>发布于 <time datetime="2023-10-01">2023年10月1日</time></p>
发布于
- 场景：表示「日期或时间」，通过
<mark>- 场景：表示「需要突出显示的文本」（类似纸质文档中的荧光笔标记），强调其与上下文的相关性。
- 示例：搜索结果中匹配的关键词、文章中需要特别注意的内容。
1
<p>请关注 <mark>语义化标签</mark> 的正确使用方法</p>
请关注 语义化标签 的正确使用方法
<address>- 场景：表示「联系信息」（如作者地址、公司联系方式），通常与
<article>或<body>关联。 - 示例：博客底部的作者邮箱、企业官网的联系地址。
作者邮箱：info@example.com1
2
3<address>
作者邮箱：<a href="mailto:info@example.com">info@example.com</a>
</address>- 场景：表示「联系信息」（如作者地址、公司联系方式），通常与
<details>与<summary>- 场景：
<details>用于展示「可折叠的详细信息」，<summary>是折叠区域的标题（默认显示）。 - 示例：FAQ 中的问答、商品的详细参数（默认隐藏，点击展开）。
1
2
3
4<details>
<summary>如何使用语义化标签？</summary>
<p>根据内容含义选择合适的标签，避免滥用div...</p>
</details>如何使用语义化标签？
根据内容含义选择合适的标签，避免滥用div...
- 场景：
三、使用原则总结
- 优先根据「内容含义」选择标签，而非外观（如不用
<section>单纯为了加样式）。 - 避免过度嵌套（如
<article>内可包含<section>，但不建议多层无意义嵌套）。 - 保持唯一性：
<main>在页面中只能出现一次，<h1>通常一个页面只出现一次（特殊场景如<article>内可嵌套独立<h1>）。
这些标签的合理使用，能让页面结构更清晰，同时降低后续维护成本。
3、DOCTYPE 的作用是什么？不同 HTML 版本的 DOCTYPE 有何区别？
DOCTYPE（Document Type Declaration，文档类型声明）是 HTML 文档开头的一个特殊指令，用于告诉浏览器当前文档使用的 HTML 版本和语法规范，以便浏览器以正确的模式解析页面。
一、DOCTYPE 的核心作用
- 指定 HTML 版本：告诉浏览器文档遵循的 HTML 规范（如 HTML5、HTML4.01 等）。
- 触发正确的渲染模式：
- 标准模式（Standards Mode）：浏览器严格按照 W3C 规范解析和渲染页面，保证跨浏览器的一致性。
- 怪异模式（Quirks Mode）：若缺失
DOCTYPE或声明错误，浏览器会采用兼容旧版本浏览器的非标准方式渲染（可能导致布局错乱，如盒模型计算差异）。
二、不同 HTML 版本的 DOCTYPE 区别
1. HTML5（目前主流）
1 |
- 特点：语法极简，不区分大小写（
<!doctype html>也有效）。 - 原因：HTML5 不再基于 SGML（标准通用标记语言），无需引用 DTD（文档类型定义），仅需声明文档类型为 HTML 即可。
2. HTML4.01（常用版本）
HTML4.01 基于 SGML，需要通过 DTD 定义文档结构，根据是否严格遵循规范分为三种：
严格版（Strict）：不允许使用废弃标签（如
<font>、<center>）和框架集（Frameset）。1
过渡版（Transitional）：允许使用废弃标签（用于兼容旧代码），但不允许框架集。
1
框架集版（Frameset）：专门用于包含框架集的页面（
<frameset>标签）。1
3. XHTML 1.0（基于 XML 的严格语法版本）
XHTML 要求标签闭合、属性引号等严格语法，同样分为三种：
严格版：
1
过渡版：
1
框架集版：
1
三、总结
- 现代开发首选：
<!DOCTYPE html>（HTML5），简洁且兼容所有现代浏览器，自动触发标准模式。 - 历史版本差异：HTML4.01 和 XHTML 需指定 DTD，根据是否允许废弃标签/框架集分为不同类型，但目前已极少使用。
- 关键原则：任何 HTML 文档都必须在开头声明
DOCTYPE，否则可能导致浏览器进入怪异模式，引发布局问题。
4、简述 HTML 中 src 和 href 的区别，举例说明使用场景
src 和 href 是 HTML 中用于引用外部资源的两个重要属性，它们的核心区别在于资源加载方式和作用机制：
一、核心区别
src（source）- 含义：表示「引入资源」，会将外部资源加载并嵌入到当前文档中，替换自身所在的元素位置。
- 加载特性：会暂停当前文档的解析，直到资源加载、编译、执行完成（阻塞性加载），以确保资源能正确嵌入。
href（hypertext reference）- 含义：表示「建立链接」，用于指定当前文档与目标资源之间的关联关系（如引用样式表、跳转链接）。
- 加载特性：不会嵌入资源，仅建立关联，浏览器会并行加载资源，不阻塞当前文档的解析。
二、使用场景举例
1. src 的典型场景（引入并嵌入资源）
图片：
<img src="image.jpg" alt="示例图片">
浏览器会加载image.jpg并显示在<img>元素位置。脚本：
<script src="app.js"></script>
浏览器会暂停 HTML 解析，下载并执行app.js后，再继续解析后续内容（可通过async/defer改变阻塞行为）。iframe：
<iframe src="page.html"></iframe>
加载外部页面并嵌入到当前页面的iframe区域。视频/音频：
<video src="movie.mp4"></video>
加载视频资源并在页面中播放。
2. href 的典型场景（建立关联或跳转）
链接跳转：
<a href="https://example.com">访问示例网站</a>
定义一个超链接，点击后跳转到目标 URL。样式表：
<link href="style.css" rel="stylesheet">
建立当前文档与style.css的关联，浏览器会并行加载样式表并应用样式，不阻塞 HTML 解析。锚点定位：
<a href="#section1">跳转到第一节</a>
链接到当前页面中id="section1"的元素位置。基准 URL：
<base href="https://example.com/images/">
定义页面中所有相对 URL 的基准路径。
三、总结
src是「引入替换」：将外部资源加载到文档中，替换自身位置，会阻塞解析（如图片、脚本）。href是「关联引用」：建立当前文档与外部资源的联系，不替换自身，不阻塞解析（如链接、样式表）。
理解两者的区别能避免资源加载异常（如误将 href 用于脚本引入，导致脚本无法执行）。
5、img 标签的 alt 属性有什么作用？为什么重要？
alt 属性（Alternative Text，替代文本）是 <img> 标签的核心属性，用于为图片提供「替代描述文本」。它的作用和重要性主要体现在以下几个方面：
一、核心作用
图片加载失败时的替代说明
当图片因网络错误、路径错误或格式不支持等原因无法加载时，浏览器会显示alt中的文本，帮助用户理解该位置原本应展示的内容。
示例：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73<img src="logo.png" alt="公司品牌logo（蓝色圆形，内部有白色文字）">
```
若 `logo.png` 加载失败，页面会显示这段描述文字，而非空白或破碎图标。
2. **辅助设备的解读依据**
屏幕阅读器（帮助视障用户浏览网页的工具）无法直接识别图片内容，会读取 `alt` 属性的文本，将图片信息转化为语音，让视障用户理解图片含义。
例如，新闻中的灾难现场图片，`alt` 文本可描述为「地震后的街道，救援人员正在转移伤者」，帮助视障用户感知新闻场景。
3. **搜索引擎的索引依据**
搜索引擎的爬虫无法像人类一样「看见」图片，`alt` 文本是其判断图片内容的重要依据，影响图片在搜索结果中的排名（尤其是图片搜索）。
例如，电商网站的商品图片，`alt` 文本写「黑色纯棉短袖T恤 - 2023夏季新款」比单纯写「图片1」更利于搜索引擎识别和索引。
### 二、为什么重要？
1. **提升可访问性（Accessibility）**
网页不仅为视力正常的用户设计，`alt` 属性是保障视障用户获取图片信息的关键，是Web无障碍标准（WCAG）的核心要求之一，也是尊重不同用户群体的体现。
2. **增强内容鲁棒性**
网络环境不稳定或资源链接失效时，`alt` 文本能保证内容的完整性，避免用户面对「无意义的空白」，提升用户体验。
3. **优化SEO与内容理解**
清晰的 `alt` 文本帮助搜索引擎更全面地理解页面内容，尤其对以图片为主的页面（如摄影网站、电商商品页），能显著提升内容的可检索性。
4. **语义化的重要补充**
HTML语义化不仅体现在标签选择，也包括对资源的描述。`alt` 属性让图片内容在语义层面可被机器和人理解，使HTML结构更完整。
### 三、使用原则
- 描述需简洁准确，避免冗余（如「图片」「照片」这类词可省略）。
- 纯装饰性图片（如分隔线、背景图案）建议设 `alt=""`（空值），避免屏幕阅读器读取无意义内容。
- 重要图片（如信息图表、商品图）需详细描述核心信息，而非简单重复周边文字。
总之，`alt` 属性是平衡「技术实现」与「用户体验」的关键细节，既是对特殊用户群体的关怀，也是提升网页质量的基础实践。
## 6、HTML 中的块级元素和行内元素有哪些区别？如何相互转换？
HTML 中的块级元素（Block-level Elements）和行内元素（Inline Elements）是两种基本的元素显示类型，它们在布局行为、默认样式和使用场景上有显著区别：
### 一、核心区别
| 特性 | 块级元素（Block-level） | 行内元素（Inline） |
|--------------------|-------------------------------------------------|-------------------------------------------------|
| **占据空间** | 独占一行，宽度默认填满父容器（100%） | 只占据自身内容宽度，与其他行内元素共处一行 |
| **尺寸设置** | 可设置 `width`、`height`、`margin`（上下有效） | 不可设置 `width`、`height`，`margin` 上下无效 |
| **包含关系** | 可包含块级元素、行内元素或文本 | 通常只能包含行内元素或文本（不能包含块级元素） |
| **默认样式** | 自带换行（前后有默认间距） | 无换行，紧挨着其他行内元素 |
### 二、常见元素举例
#### 1. 块级元素
- 结构类：`<div>`、`<header>`、`<nav>`、`<main>`、`<footer>`、`<section>`、`<article>`
- 文本类：`<h1>`-`<h6>`、`<p>`、`<ul>`、`<ol>`、`<li>`、`<blockquote>`
- 表单类：`<form>`、`<table>`、`<div>`
#### 2. 行内元素
- 文本类：`<span>`、`<a>`、`<strong>`、`<em>`、`<mark>`、`<code>`
- 媒体类：`<img>`、`<input>`（特殊，属于行内块元素）
- 其他：`<br>`、`<label>`、`<button>`
### 三、相互转换的方法
通过 CSS 的 `display` 属性可以改变元素的默认显示类型：
1. **块级元素 → 行内元素**
设置 `display: inline;`
```css
div {
display: inline; /* div 变为行内元素，不再独占一行 */
}行内元素 → 块级元素
设置display: block;1
2
3
4
5a {
display: block; /* a 标签变为块级元素，独占一行且可设置宽高 */
width: 200px;
height: 50px;
}兼具两者特性：行内块元素（Inline-block）
设置display: inline-block;，元素既有行内元素的「共处一行」特性，又有块级元素的「可设置宽高、margin 上下有效」特性，适合需要排列在同一行且有固定尺寸的元素（如导航按钮、图片列表）。1
2
3
4
5
6span {
display: inline-block;
width: 100px;
height: 50px;
margin: 10px; /* 上下左右 margin 均有效 */
}
四、注意事项
- 转换后会继承目标类型的特性（如块级转行内后，
width设置失效）。 - 行内元素默认不能包含块级元素（如
<span>包裹<div>不符合规范），即使通过 CSS 转换，也建议遵循语义化嵌套规则。 <img>、<input>等元素默认是inline-block类型，因此可直接设置宽高且不独占一行。
理解这两种元素的区别和转换方式，是掌握 HTML 布局的基础，也是实现灵活页面结构的关键。
7、简述 label 标签的作用及使用方式
<label> 标签是 HTML 中用于关联表单元素的辅助标签，主要作用是增强表单的可用性和可访问性，其核心功能和使用方式如下：
一、核心作用
扩大交互区域
点击<label>标签的文本时，会触发关联的表单元素（如输入框、复选框）的交互效果，相当于直接点击表单元素本身。这对小尺寸元素（如复选框、单选按钮）尤为重要，大幅提升了点击体验。提升可访问性
屏幕阅读器会将<label>的文本与关联的表单元素关联起来，帮助视障用户理解该表单元素的用途（例如，读“同意协议”时，用户能知道这是与某个复选框关联的）。明确表单含义
通过文本描述清晰标注表单元素的用途，使表单结构更易理解，尤其对复杂表单（如注册页、信息填写页）能提升可用性。
二、使用方式
<label> 与表单元素的关联有两种方式：
1. 通过 for 属性关联（推荐）
- 为目标表单元素设置
id属性。 - 在
<label>标签中添加for属性，值与表单元素的id一致。
1 | <!-- 示例：关联复选框 --> |
点击“我已阅读并同意用户协议”文本时，会触发复选框的选中/取消状态；点击“用户名：”文本时，输入框会获得焦点。
2. 嵌套关联（隐式关联）
将表单元素直接嵌套在 <label> 内部，无需 for 和 id 属性即可自动关联。
1 | <!-- 示例：嵌套复选框 --> |
点击“我已阅读并同意用户协议”文本时，会触发复选框的选中/取消状态；点击“男”文本时，单选按钮会被选中。
三、使用注意事项
for属性的值必须与目标表单元素的id完全一致（区分大小写）。- 一个
<label>只能关联一个表单元素，一个表单元素也可以被多个<label>关联（但通常无需这样做）。 - 优先使用
for+id方式关联，尤其是在表单元素与标签文本分离的场景（如标签在元素左侧/上方），结构更清晰且兼容性更好。
<label> 标签虽小，但能显著提升表单的易用性，是符合 Web 可访问性标准的重要实践，尤其在用户体验要求较高的场景（如移动端表单、政务类网站）必不可少。
8、HTML5 的 localStorage 和 sessionStorage 有什么区别？使用场景分别是什么？
HTML5 中的 localStorage 和 sessionStorage 都是用于在浏览器端存储数据的本地存储方案，它们同属 Web Storage API，但在生命周期、作用范围和使用场景上有显著区别：
一、核心区别
| 特性 | localStorage | sessionStorage |
|---|---|---|
| 生命周期 | 持久化存储，除非手动删除（清除浏览器数据或代码删除），否则一直存在 | 临时存储，仅在当前会话（session）有效，关闭浏览器窗口/标签页后自动清除 |
| 作用范围 | 同一浏览器的所有窗口/标签页（相同协议、域名、端口）均可访问 | 仅在当前窗口/标签页内有效，不同窗口/标签页（即使同域名）无法共享 |
| 存储大小 | 通常为 5MB 左右（不同浏览器略有差异） | 通常为 5MB 左右（与 localStorage 一致） |
| 数据共享 | 可在同源的多个窗口间共享数据 | 无法跨窗口共享，仅限当前窗口 |
二、使用场景
1. localStorage 的典型场景
适合存储长期需要保留且可能在多个窗口间共享的数据：
- 用户偏好设置：如网站主题（深色/浅色模式）、字体大小、语言选择等，用户下次访问时仍能保持设置。
- 本地缓存：缓存不常变动的静态数据（如城市列表、产品分类），减少重复请求，提升页面加载速度。
- 登录状态标记：存储用户的登录状态标识（非敏感信息），避免用户每次打开页面都重新登录（但敏感信息建议用 Cookie + 后端验证）。
示例代码：
1 | // 存储数据 |
2. sessionStorage 的典型场景
适合存储临时会话相关且仅在当前窗口有效的数据：
- 表单临时数据：用户填写表单过程中（如长文本输入、多步骤表单），临时保存数据，防止意外刷新页面导致内容丢失。
- 单页应用（SPA）状态：存储当前页面的临时状态（如导航位置、弹窗开关状态），仅在当前会话有效。
- 敏感临时数据：如用户在当前会话中的临时操作记录（无需长期保存），关闭窗口后自动清除，降低数据泄露风险。
示例代码：
1 | // 存储临时表单数据 |
三、注意事项
- 两者均只能存储字符串类型数据，存储对象/数组需先用
JSON.stringify()序列化，读取时用JSON.parse()反序列化。 - 数据存储在客户端，完全暴露给用户，不能存储敏感信息（如密码、token 等，建议用 Cookie 并设置
httpOnly）。 - 受同源策略限制，仅同一协议（http/https）、同一域名、同一端口的页面可共享数据。
- 存储容量有限（约 5MB），不适合存储大量数据（如需大容量存储，可考虑 IndexedDB）。
总结：localStorage 适合长期、跨窗口的数据存储，sessionStorage 适合临时、当前窗口的会话数据存储，根据数据的生命周期和共享需求选择即可。
httpOnly是什么？
httpOnly 是 Cookie 的一个安全属性，用于限制客户端脚本（如 JavaScript）对 Cookie 的访问，从而增强 Web 应用的安全性。
核心作用
当一个 Cookie 被标记为 httpOnly 时：
- 禁止 JavaScript 访问：客户端的脚本（如
document.cookie）无法读取或修改该 Cookie，只能由浏览器在 HTTP 请求中自动携带。 - 防御 XSS 攻击：跨站脚本攻击（XSS）通常通过注入恶意脚本窃取 Cookie（尤其是包含身份认证信息的 Cookie），而
httpOnly可阻止脚本获取这类敏感 Cookie，大幅降低攻击风险。
使用方式
httpOnly 由服务器在设置 Cookie 时通过 HTTP 响应头指定，语法如下（以 HTTP 响应头为例）：
1 | Set-Cookie: sessionId=abc123; httpOnly; secure; Path=/ |
- 上述示例中，
sessionId被标记为httpOnly，前端 JavaScript 无法通过document.cookie读取该 Cookie。 - 通常会与
secure属性（仅通过 HTTPS 传输）配合使用，进一步提升安全性。
适用场景
httpOnly 主要用于保护包含敏感信息的 Cookie，例如：
- 用户身份认证凭证（如 Session ID、Token）
- 会话标识（用于维持用户登录状态）
而非敏感的 Cookie（如用户偏好设置、主题选择）则无需设置 httpOnly，以便前端脚本可以访问和修改。
注意事项
httpOnly仅限制客户端脚本访问，Cookie 仍会在每次 HTTP 请求中自动发送给服务器（不影响服务器对 Cookie 的读写）。- 它不能防御所有攻击（如 CSRF 跨站请求伪造），需配合其他安全措施（如
SameSite属性、CSRF Token）使用。 - 该属性由服务器控制，前端无法通过 JavaScript 设置或修改（只能在服务器响应头中配置）。
总之，httpOnly 是保护敏感 Cookie 的基础安全策略，是 Web 应用安全配置中的重要一环。
9、iframe 标签有哪些优缺点？如何解决 iframe 的跨域问题？
<iframe> 标签用于在当前页面中嵌入另一个 HTML 文档，形成“页面中的页面”。它在特定场景下很实用，但也存在明显局限，跨域问题是其使用中常见的挑战。
一、iframe 的优缺点
优点
功能隔离
嵌入的文档与父页面完全独立（拥有独立的 DOM、CSS 环境和 JavaScript 上下文），适合嵌入第三方内容（如广告、地图、支付页面），避免样式和脚本冲突。简化开发
可复用已有的完整页面（如导航栏、评论区），无需重复开发，尤其适合多系统集成（如在企业后台嵌入子系统页面）。异步加载
iframe 内容的加载不会阻塞父页面的解析，可用于优化首屏加载速度（如将非关键内容放入 iframe 延迟加载）。历史兼容性
支持所有主流浏览器，是早期 Web 开发中实现页面嵌套的常用方案。
缺点
性能问题
每个 iframe 都会触发独立的页面解析、渲染和资源加载，增加浏览器内存和 CPU 消耗，过多 iframe 会导致页面卡顿。SEO 不友好
搜索引擎通常会忽略 iframe 中的内容，影响内嵌内容的索引（仅适用于对 SEO 无要求的场景）。用户体验问题
- 可能出现滚动条嵌套（父页面和 iframe 各自滚动），影响操作流畅性。
- 响应式布局适配复杂，iframe 内容可能在不同设备上显示异常。
跨域限制
父页面与 iframe 若不同源（协议、域名、端口任一不同），会受到浏览器同源策略限制，导致二者通信困难。安全性风险
嵌入不可信的第三方 iframe 可能存在 XSS 攻击或恶意代码注入风险（需通过sandbox属性限制）。
二、如何解决 iframe 的跨域问题？
跨域问题的核心是：浏览器禁止不同源的页面通过 JavaScript 直接访问彼此的 DOM 或数据。解决方式主要依赖跨域通信机制：
1. postMessage API（推荐）
HTML5 新增的跨域通信方案，允许不同源的页面通过消息传递数据，支持双向通信。
父页面向 iframe 发送消息：
1
2
3
4
5
6
7// 父页面
const iframe = document.getElementById('myIframe');
// 等待 iframe 加载完成
iframe.onload = () => {
// 目标源（协议+域名+端口，* 表示允许所有源，不推荐）
iframe.contentWindow.postMessage('Hello from parent', 'https://child.example.com');
};iframe 接收并响应消息：
1
2
3
4
5
6
7
8
9
10// iframe 页面
window.addEventListener('message', (event) => {
// 验证发送源（防止恶意网站发送消息）
if (event.origin !== 'https://parent.example.com') return;
console.log('收到父页面消息：', event.data);
// 向父页面回复消息
event.source.postMessage('Hello from iframe', event.origin);
});核心要点：
- 必须验证
event.origin确保消息来自可信源，防止安全漏洞。 - 支持传递字符串、对象等数据（会被自动序列化/反序列化）。
- 必须验证
2. 服务器代理（适用于数据交互）
若需在父页面中获取 iframe 跨域页面的数据，可通过后端代理中转请求：
- 父页面向同域的后端服务器发送请求。
- 后端服务器作为代理，请求目标跨域页面的数据。
- 后端将获取的数据返回给父页面。
- 适合场景：需要主动获取跨域页面数据（而非双向通信），如嵌入第三方接口数据。
3. 共享域名（仅限同主域）
若两个页面属于同主域不同子域（如 a.example.com 和 b.example.com），可通过设置 document.domain 实现通信：
父页面和 iframe 页面均设置：
1
document.domain = 'example.com'; // 统一为主域名
之后可直接访问彼此的 DOM（如
parent.document或iframe.contentDocument）。局限性：仅适用于同主域，且无法解决协议或端口不同的跨域问题。
4. 其他方案（不推荐）
- JSONP：仅支持 GET 请求，且需第三方页面配合，安全性较低。
- iframe + 共享 cookie：通过服务器设置
domain和path共享 cookie，但受浏览器隐私策略限制（如 SameSite 属性）。
三、总结
- iframe 适用场景：嵌入第三方内容（广告、地图）、隔离独立功能模块（支付页）、复用已有页面。
- 避免使用场景：对 SEO 要求高、追求极致性能、需要复杂跨域交互的页面。
- 跨域首选方案：
postMessageAPI，安全且兼容性好（支持 IE8+），使用时务必验证消息来源。
10、HTML 中的 form 表单提交方式有哪些？如何阻止默认提交行为？
HTML 中 form 表单的提交方式及阻止默认提交行为的方法如下：
一、form 表单的提交方式
form 表单的提交主要通过以下几种方式触发，核心是通过 action 属性指定提交地址，method 属性指定请求方式：
1. 原生提交（通过 submit 按钮）
这是最基础的提交方式，通过表单内的 <input type="submit"> 或 <button type="submit"> 触发：
1 | <form action="/api/submit" method="POST"> |
action：指定表单提交的目标 URL（后端接口地址）。method：指定请求方式，常用GET（默认，参数拼接在 URL 上）和POST（参数在请求体中）。
2. 编程式提交（通过 JavaScript）
通过 JavaScript 调用表单的 submit() 方法触发提交，无需点击提交按钮：
1 | <form id="myForm" action="/api/submit" method="POST"> |
3. 其他触发方式
- 表单内的
<input type="image">会被当作作提交按钮（点击时触发提交）。 - 按回车键（在表单内的输入框中）通常会触发提交（依赖浏览器默认行为）。
二、如何阻止默认提交行为？
在实际开发中（如需要先验证表单数据），常需阻止表单的默认提交行为，主要通过以下两种方式：
1. 通过 onsubmit 事件（推荐）
在 form 标签上绑定 onsubmit 事件，返回 false 即可阻止提交：
1 | <form action="/api/submit" method="POST" onsubmit="return validateForm()"> |
2. 通过事件对象的 preventDefault() 方法
在 JavaScript 中监听表单的 submit 事件，调用事件对象的 preventDefault() 方法：
1 | <form id="myForm" action="/api/submit" method="POST"> |
3. 阻止按钮的默认行为（适用于单个按钮）
若仅需阻止某个提交按钮的默认行为，可在按钮的 click 事件中处理：
1 | <form action="/api/submit" method="POST"> |
三、总结
- 提交方式：主要通过 submit 按钮、JavaScript 的
submit()方法触发，核心依赖action和method属性。 - 阻止默认提交：推荐使用
onsubmit事件返回false或event.preventDefault()方法，通常用于表单验证（如检查输入合法性），验证通过后再手动提交或允许默认提交。
这种机制确保了表单提交前的数据合法性，是前端表单处理的基础实践。
11、HTML5 的 input 标签新增了哪些类型？举例说明其用途
HTML5 为 <input> 标签新增了多种专用类型，这些类型不仅能让浏览器提供更贴合场景的输入控件和验证逻辑，还能提升移动设备上的输入体验（如自动弹出对应键盘）。以下是主要新增类型及用途：
一、常用新增输入类型
1. email - 电子邮件输入
用途：用于输入邮箱地址，浏览器会自动验证格式（需包含
@和域名）。示例：
1
<input type="email" name="userEmail" placeholder="请输入邮箱">
特点：提交表单时，若格式错误会提示“请输入有效的电子邮件地址”，移动端会弹出带
@符号的键盘。
2. tel - 电话号码输入
用途：用于输入电话号码（无固定格式验证，需配合
pattern属性自定义规则）。示例：
1
<input type="tel" name="phone" placeholder="请输入手机号" pattern="1[3-9]\d{9}">
特点：移动端会自动弹出数字键盘，方便输入号码；结合
pattern可验证手机号格式（如示例中限制11位手机号）。
3. url - 网址输入
用途：用于输入 URL 地址（需包含
http://或https://等协议前缀）。示例：
1
<input type="url" name="website" placeholder="请输入网址（如https://example.com）">
特点：自动验证格式，缺少协议时会提示错误，适合收集网站链接。
4. number - 数字输入
用途：仅允许输入数字（整数或小数），可通过
min/max限制范围，step控制步长。示例：
1
<input type="number" name="quantity" min="1" max="10" step="1" value="1">
特点：显示上下箭头用于增减数值，提交时自动转换为数字类型，适合数量、年龄等纯数字输入。
5. range - 滑块选择
用途：通过滑块选择一个范围内的数值（视觉化的数字输入）。
示例：
501
2
3
4
5
6
7
8<input type="range" name="volume" min="0" max="100" value="50">
<span id="volumeValue">50</span>
<script>
// 实时显示滑块值
document.querySelector('input[type="range"]').addEventListener('input', (e) => {
document.getElementById('volumeValue').textContent = e.target.value;
});
</script>特点：默认显示为滑块，不直接显示数值（需通过 JS 实时获取），适合音量、亮度等需直观调节的场景。
6. date/month/week/time - 日期时间输入
用途：分别用于选择日期、月份、周、时间，浏览器会提供日期选择器。
示例：
1
2
3
4<input type="date" name="birthday"> <!-- 日期（年-月-日） -->
<input type="month" name="expireMonth"> <!-- 月份（年-月） -->
<input type="week" name="targetWeek"> <!-- 周（年-Wxx） -->
<input type="time" name="alarmTime"> <!-- 时间（时:分） -->
特点：无需手动输入，点击会弹出系统风格的日期/时间选择器，避免格式错误，适合预约、日程等场景。
7. search - 搜索输入
用途：用于搜索框，视觉上可能有特殊样式（如右侧清除按钮）。
示例：
1
<input type="search" name="keyword" placeholder="搜索...">
特点：输入内容后会显示“×”按钮，点击可快速清除，提升搜索体验。
8. color - 颜色选择
用途：用于选择颜色，浏览器会提供颜色选择器。
示例：
1
<input type="color" name="themeColor" value="#ff0000">
特点：点击会弹出颜色面板，选中后值为十六进制颜色码（如
#ff0000），适合主题色设置、画板工具等场景。
二、新增类型的优势
- 自动验证：减少前端验证代码（如
email/url自带格式检查）。 - 优化输入体验：移动端根据类型自动切换键盘（如
tel显示数字键盘）。 - 语义化增强：明确输入内容的类型，提升代码可读性和无障碍性（屏幕阅读器可识别）。
这些类型在现代浏览器中支持良好，可根据具体场景选择使用，同时建议配合 required（必填）、min/max（范围）等属性进一步增强表单控制。
12、简述 HTML 中的 meta 标签的常见属性及作用
<meta> 标签是 HTML 中用于描述网页元数据（metadata）的标签，位于 <head> 区域，不直接显示内容，但对浏览器、搜索引擎和其他工具具有重要指导意义。其常见属性及作用如下：
一、核心属性：name + content
通过 name 定义元数据类型，content 提供具体值，主要用于描述网页信息。
网页基础信息
name="title"：定义网页标题（通常与<title>标签一致，辅助搜索引擎识别）1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76<meta name="title" content="HTML meta标签详解 - 示例网站">
```
- `name="description"`：网页描述（搜索引擎结果页展示的摘要，影响 SEO）
```html
<meta name="description" content="本文详细介绍HTML中meta标签的属性及使用场景，适合前端初学者学习。">
```
- `name="keywords"`：网页关键词（早期搜索引擎用于分类，现在权重降低，但部分场景仍用）
```html
<meta name="keywords" content="HTML, meta标签, SEO, 前端面试">
```
2. **作者与版权**
- `name="author"`：标注网页作者
```html
<meta name="author" content="张三, zhangsan@example.com">
```
- `name="copyright"`：声明版权信息
```html
<meta name="copyright" content="© 2023 示例网站 保留所有权利">
```
3. **浏览器行为控制**
- `name="viewport"`：控制移动端页面布局（核心属性，解决响应式适配问题）
```html
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
- `width=device-width`：让页面宽度等于设备宽度
- `initial-scale=1.0`：初始缩放比例为 1（不缩放）
- 扩展属性：`maximum-scale=1.0`（禁止放大）、`user-scalable=no`（禁止用户缩放，不推荐）
- `name="renderer"`：指定浏览器渲染模式（国内浏览器常用，如强制webkit内核）
```html
<meta name="renderer" content="webkit"> <!-- 优先使用webkit内核 -->
```
4. **robots 搜索引擎指令**
- `name="robots"`：告诉搜索引擎爬虫如何索引页面
```html
<meta name="robots" content="index, follow">
```
- `index`：允许索引本页面
- `follow`：允许爬取页面内的链接
- 其他值：`noindex`（不索引）、`nofollow`（不爬取链接）
### 二、`http-equiv` 属性
模拟 HTTP 响应头的效果，控制浏览器行为或服务器配置。
1. **字符编码声明**（最常用）
```html
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
```
现代 HTML5 可简化为：`<meta charset="UTF-8">`，定义网页字符编码，避免中文乱码。
2. **页面缓存控制**
- 禁止浏览器缓存当前页面（适用于动态内容，如支付页）
```html
<meta http-equiv="Cache-Control" content="no-store"><!-- 告诉浏览器“绝对不要把这份 HTML 页面存到 任何缓存里”——无论是磁盘缓存、内存缓存，还是代理/CDN 缓存，统统不要留副本；每次访问都必须重新向服务器发起完整 请求，拿最新的一份。 -->
<meta http-equiv="Pragma" content="no-cache"> <!-- 兼容HTTP/1.0 -->
<meta http-equiv="Expires" content="0"> <!-- 过期时间为0 -->
页面自动刷新/跳转
5秒后自动刷新页面
1
<meta http-equiv="refresh" content="5">
3秒后跳转到指定页面（如登录成功后跳转）
1
<meta http-equiv="refresh" content="3; url=https://example.com/home">
X-UA-Compatible（兼容旧IE浏览器）
1
<meta http-equiv="X-UA-Compatible" content="IE=edge">
强制IE浏览器使用最新内核渲染页面（避免使用老旧模式导致布局错乱）。
三、charset 属性
单独用于声明字符编码（HTML5 新增，简化写法），等同于 http-equiv="Content-Type" 的字符集设置：
1 | <meta charset="UTF-8"> |
二、SVG 与 Canvas 的核心区别
| 特性 | SVG | Canvas |
|---|---|---|
| 图形类型 | 矢量图形（由几何路径定义） | 位图（像素点组成） |
| 渲染方式 | 浏览器直接解析 XML 并渲染，自动重绘 | 通过 JavaScript 动态绘制像素，需手动重绘 |
| DOM 集成 | 每个图形元素都是独立 DOM 节点 | 整体是一个画布元素，内部图形无 DOM 节点 |
| 可操作性 | 可直接通过 CSS/JS 操作单个元素 | 无法直接操作已绘制的图形（需重绘） |
| 缩放特性 | 无损缩放（放大后清晰度不变） | 缩放会失真（像素拉伸） |
| 性能表现 | 元素数量过多时性能下降（DOM 开销） | 适合大量图形绘制，性能更稳定 |
| 事件支持 | 单个元素可绑定事件（如点击圆形触发） | 仅支持整个画布的事件，需手动计算目标 |
三、适用场景
SVG 适合
- 需要无损缩放的图形：如 Logo、图标、图表（折线图、柱状图）、地图等（放大后仍清晰）。
- 交互需求简单的场景：如点击某个图形元素改变样式（利用 DOM 事件）。
- 静态或轻度动画：通过 SVG 内置的
<animate>标签实现简单动画（如颜色渐变、位置移动）。
Canvas 适合
- 高性能图形绘制：如游戏（大量动态元素）、复杂动画（粒子效果、流体模拟）。
- 像素级操作：如图片编辑（滤镜、像素处理）、实时数据可视化（高频更新的仪表盘）。
- 一次性绘制的图形：无需后续操作单个元素，只需整体展示的场景。
四、总结
- SVG 是“矢量+DOM驱动”，适合静态、可交互、需无损缩放的图形，操作简单但大量元素时性能有限。
- Canvas 是“像素+脚本驱动”，适合动态、高性能、像素级控制的场景，灵活性高但操作复杂。
实际开发中可根据图形类型、交互需求和性能要求选择，甚至结合使用（如 SVG 做界面图标，Canvas 做游戏画布）。
14、HTML 中的注释方式是什么？注释会被浏览器解析渲染吗？
HTML 中的注释方式是使用 <!-- 和 --> 标签包裹内容，格式如下：
1 | <!-- 这是一段 HTML 注释 --> |
注释的特点
浏览器处理方式：浏览器会忽略注释内容，不会解析或渲染注释中的任何代码（包括标签、文本等），注释仅作为开发者的备忘信息存在。
使用场景：
- 解释复杂代码的功能或逻辑（方便团队协作和后期维护）。
- 临时注释掉不需要执行的代码（调试时常用）。
- 标记代码块的开始和结束（如区分不同模块）。
注意事项：
- 注释不能嵌套（即
<!--内部不能再包含<!--），否则会导致注释提前结束。 - 注释中不要包含
-->字符，这会被浏览器识别为注释结束符。
- 注释不能嵌套（即
总结
HTML 注释的语法是 <!-- 注释内容 -->，浏览器不会解析或渲染注释内容，仅用于代码的说明和调试，是提升代码可维护性的重要手段。
15、简述 HTML 的文档结构，包括 DOCTYPE、html、head、body 的作用
HTML 中的注释方式是使用 <!-- 和 --> 标签包裹内容，格式如下：
1 | <!-- 这是一段 HTML 注释 --> |
注释的特点
浏览器处理方式：浏览器会忽略注释内容，不会解析或渲染注释中的任何代码（包括标签、文本等），注释仅作为开发者的备忘信息存在。
使用场景：
- 解释复杂代码的功能或逻辑（方便团队协作和后期维护）。
- 临时注释掉不需要执行的代码（调试时常用）。
- 标记代码块的开始和结束（如区分不同模块）。
注意事项：
- 注释不能嵌套（即
<!--内部不能再包含<!--），否则会导致注释提前结束。 - 注释中不要包含
-->字符，这会被浏览器识别为注释结束符。
- 注释不能嵌套（即
总结
HTML 注释的语法是 <!-- 注释内容 -->，浏览器不会解析或渲染注释内容，仅用于代码的说明和调试，是提升代码可维护性的重要手段。
16、什么是 HTML 实体？常见的 HTML 实体有哪些（如空格、小于号）？
HTML 实体（HTML Entities）是用于表示 HTML 中具有特殊含义的字符（如标签符号）或无法直接输入的字符（如特殊符号）的替代代码。它们通常以 & 开头，以 ; 结尾，确保这些字符能被浏览器正确解析为文本，而非被当作 HTML 语法处理。
为什么需要 HTML 实体？
HTML 中某些字符（如 <、>、&）是语法的一部分（用于定义标签），直接使用会导致浏览器解析错误。例如，若在页面中直接写 <p>，浏览器会认为这是一个标签，而非文本“<p>”。此时需用实体替代这些字符。
常见的 HTML 实体
1. 基础特殊字符（必记）
| 字符 | 描述 | 实体名称 | 实体编号（十进制） |
|---|---|---|---|
< |
小于号 | < |
< |
> |
大于号 | > |
> |
& |
和号 | & |
& |
" |
双引号 | " |
" |
' |
单引号 | ' |
' |
示例：
若要在页面中显示文本 <h1>标题</h1>（而非渲染为标题标签），需写成：
1 | <h1>标题</h1> |
文本1   文本2
3. 常用符号
| 字符 | 描述 | 实体名称 | 实体编号 |
|---|---|---|---|
| © | 版权符号 | © |
© |
| ® | 注册商标 | ® |
® |
| ™ | 商标符号 | ™ |
™ |
| × | 乘号 | × |
× |
| ÷ | 除号 | ÷ |
÷ |
| € | 欧元符号 | € |
€ |
| £ | 英镑符号 | £ |
£ |
总结
HTML 实体用于安全表示特殊字符或特殊符号，核心作用是避免浏览器将文本误解析为 HTML 语法。开发中最常用的是 <（<）、>（>）、&（&）和空格（ ），其他符号可根据需求查阅参考表。
17、HTML 中的 a 标签的 target 属性有哪些取值？分别表示什么含义？
HTML 中 <a> 标签的 target 属性用于指定链接打开的目标位置，常用取值取值及含义如下：
| 取值 | 含义 |
|---|---|
_self |
默认值，在当前窗口/标签页中打开链接，覆盖当前页面内容。 |
_blank |
在新的空白窗口/标签页中打开链接，不影响当前页面。 |
_parent |
在当前框架的父框架中打开链接，若当前页面没有框架，则等同于 _self。 |
_top |
在整个浏览器窗口中打开链接，忽略所有框架结构，直接替换整个页面。 |
framename |
在指定名称的框架（<frame> 或 <iframe>）中打开链接，需框架存在且名称匹配。 |
示例说明
_self（默认）1
<a href="page.html" target="_self">在当前页打开</a>
点击后，
page.html会在当前窗口加载，替换现有内容。_blank（常用）1
<a href="https://example.com" target="_blank">在新窗口打开</a>
点击后，链接在新标签页打开，当前页面保持不变。
⚠️ 建议配合rel="noopener noreferrer"使用，提升安全性（防止新页面篡改原页面）。_parent和_top（框架场景）
若页面包含框架结构（如<frameset>）：1
2
3
4
5<!-- 在父框架中打开 -->
<a href="parent.html" target="_parent">在父框架打开</a>
<!-- 突破所有框架，在整个窗口打开 -->
<a href="fullpage.html" target="_top">在全窗口打开</a>framename（指定框架）1
2
3
4
5<!-- 定义一个名为 "contentFrame" 的 iframe -->
<iframe name="contentFrame"></iframe>
<!-- 链接在该 iframe 中打开 -->
<a href="frame-content.html" target="contentFrame">在指定框架打开</a>
注意事项
_blank是最常用的取值之一，适合外部链接或不希望替换当前页面的场景。- 框架相关的
_parent、_top和framename在现代开发中较少使用（因框架布局逐渐被 CSS 布局替代）。 - 使用
target时需考虑用户体验，避免过多新窗口导致用户迷失。
18、简述 HTML5 的拖放 API 的基本使用步骤
HTML5 的拖放（Drag and Drop）API 允许元素被拖动并放置到目标位置，常用于实现交互性强的功能（如拖拽排序、文件上传等）。其基本使用步骤如下：
一、设置可拖动元素（源元素）
添加
draggable属性
为需要拖动的元素设置draggable="true"，使其可被拖动（默认只有<a>和<img>可拖动，其他元素需手动开启）。1
<div draggable="true" id="dragSource">可拖动的元素</div>
可拖动的元素监听拖动事件（源元素）
源元素触发的关键事件：dragstart：开始拖动时触发（通常在此存储拖动数据）。dragend：拖动结束时触发（可处理清理逻辑）。
1
2
3
4
5
6
7
8
9
10
11
12
13
14const dragSource = document.getElementById('dragSource');
// 开始拖动时，存储数据（供目标元素读取）
dragSource.addEventListener('dragstart', (e) => {
// 存储自定义数据（键值对形式）
e.dataTransfer.setData('text/plain', '这是被拖动的内容');
// 可选：设置拖动时的视觉效果（如半透明）
e.target.style.opacity = '0.5';
});
// 拖动结束时，恢复样式
dragSource.addEventListener('dragend', (e) => {
e.target.style.opacity = '1';
});
二、设置可放置目标（目标元素）
允许元素接受放置
默认情况下，元素不接受放置，需通过dragover事件阻止默认行为（否则无法触发drop事件）。监听放置事件（目标元素）
目标元素触发的关键事件：dragover：拖动元素经过目标时持续触发（需阻止默认行为以允许放置）。dragenter：拖动元素进入目标时触发（可修改目标样式提示可放置）。dragleave：拖动元素离开目标时触发（恢复目标样式）。drop：元素被放置到目标时触发（处理核心逻辑，如读取拖动数据）。
1
2
3<div id="dropTarget" style="width: 200px; height: 200px; border: 2px dashed #ccc;">
放置区域
</div>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30const dropTarget = document.getElementById('dropTarget');
// 允许放置（必须阻止默认行为）
dropTarget.addEventListener('dragover', (e) => {
e.preventDefault();
// 可选：设置光标样式
e.dataTransfer.dropEffect = 'move'; // 提示“移动”操作
});
// 进入目标时，修改样式
dropTarget.addEventListener('dragenter', (e) => {
e.preventDefault(); // 必须阻止默认行为
dropTarget.style.borderColor = 'blue';
});
// 离开目标时，恢复样式
dropTarget.addEventListener('dragleave', () => {
dropTarget.style.borderColor = '#ccc';
});
// 放置时，处理数据
dropTarget.addEventListener('drop', (e) => {
e.preventDefault(); // 阻止浏览器默认行为（如打开链接）
// 读取拖动时存储的数据
const data = e.dataTransfer.getData('text/plain');
// 执行放置逻辑（如添加内容到目标）
dropTarget.innerHTML = `已放置：${data}`;
// 恢复目标样式
dropTarget.style.borderColor = '#ccc';
});
三、核心对象：dataTransfer
dataTransfer 是拖放事件对象的属性，用于在源元素和目标元素之间传递数据，常用方法：
setData(format, data)：存储数据（format通常为text/plain或text/html）。getData(format)：读取指定格式的数据。setDragImage(img, x, y)：自定义拖动时显示的图像（默认显示源元素的快照）。
四、总结
HTML5 拖放 API 的基本步骤：
- 为源元素设置
draggable="true"，并监听dragstart（存数据）和dragend。 - 为目标元素监听
dragover（阻止默认行为允许放置）、dragenter、dragleave和drop（读数据并处理）。 - 通过
dataTransfer在源和目标之间传递数据。
该 API 可用于实现拖拽排序、拖拽上传、拖放式编辑器等交互功能，兼容性良好（支持所有现代浏览器）。
19、HTML 中的 table 标签的基本结构（thead、tbody、tfoot）及作用是什么？
HTML 中的 <table> 标签用于创建表格，通过 <thead>、<tbody>、<tfoot> 三个子标签可以将表格结构划分为逻辑清晰的部分，提升代码的可读性和可维护性。
一、表格的基本结构
1 | <table> |
二、各部分的作用
<thead>- 表示表格的表头区域，用于定义表格的列标题（通常包含列名、字段说明等）。
- 内部必须包含
<tr>（表格行），行内通常用<th>（表头单元格）定义标题文字（默认加粗居中显示）。 - 作用：明确表格的列含义，辅助浏览器和屏幕阅读器识别表格结构，打印时可能会被固定在每页顶部。
<tbody>- 表示表格的主体内容区域，包含表格的主要数据行。
- 内部由多个
<tr>组成，每行用<td>（表格数据单元格）存放具体数据。 - 作用：是表格的核心内容区，当表格内容过长时，浏览器可能会单独对 tbody 进行滚动处理（表头固定），且便于 CSS 样式定位和 JS 操作（如动态添加/删除数据行）。
<tfoot>- 表示表格的底部区域，通常用于展示汇总信息（如总计、平均值、说明文字等）。
- 内部结构与 thead 类似，包含
<tr>和<td>/<th>。 - 作用：与表头呼应，提供数据的总结性信息，打印时可能会被固定在每页底部。
三、注意事项
- 三个标签的书写顺序可以灵活调整（如 tfoot 可写在 tbody 之前），但浏览器会自动按 thead → tbody → tfoot 的顺序渲染。
- 一个表格只能有一个
<thead>和一个<tfoot>，但可以有多个<tbody>（用于分组显示不同类别的数据）。 - 即使不明确写出这三个标签，浏览器也会默认将表格内容解析为
tbody（表头自动归为隐含的 thead），但显式声明能让结构更清晰，便于维护和样式控制。
通过这种结构化划分，表格的语义更加明确，无论是开发者阅读代码，还是浏览器、辅助设备解析表格，都能更高效地理解内容逻辑。
20、什么是 ARIA？它在 HTML 中的作用是什么？
ARIA（Accessible Rich Internet Applications，可访问的富互联网应用）是一组用于增强 Web 内容可访问性的属性标准，主要解决动态内容和高级 UI 组件在无障碍访问方面的问题。
一、ARIA 的核心作用
ARIA 的核心目标是让残障用户（尤其是使用屏幕阅读器的视障用户）能够理解和使用复杂的 Web 交互组件，例如：
- 动态更新的内容（如实时通知、加载状态）
- 自定义 UI 组件（如下拉菜单、模态框、标签页、滑块等）
- 状态变化的元素（如开关按钮的开启/关闭状态）
这些组件通常由 HTML、CSS 和 JavaScript 组合实现，原生 HTML 标签可能无法准确描述其语义和状态，导致屏幕阅读器无法正确解读。
二、ARIA 的主要功能
ARIA 通过三类属性实现无障碍增强：
角色（Roles）
定义元素的功能角色（类似原生 HTML 标签的语义），如：role="button"：表示该元素是一个按钮（即使它用<div>实现）role="navigation"：表示该区域是导航栏role="dialog"：表示该元素是一个模态对话框
示例：
1
2<!-- 用 div 实现的自定义按钮，通过 role 声明语义 -->
<div role="button" onclick="handleClick()">点击我</div>状态与属性（States and Properties）
描述元素的动态状态，如：aria-expanded="true"：表示下拉菜单处于展开状态aria-checked="false"：表示复选框未选中aria-hidden="true"：表示该元素对屏幕阅读器隐藏（纯装饰性内容）aria-live="polite"：表示该区域内容会动态更新，屏幕阅读器应适时播报
示例：
1
2
3
4
5
6
7
8<!-- 动态通知区域，内容更新时自动通知用户 -->
<div aria-live="polite" id="notification"></div>
<script>
// 模拟动态更新
setTimeout(() => {
document.getElementById('notification').textContent = "新消息通知";
}, 2000);
</script>关系（Relationships）
定义元素之间的关联关系，如：aria-labelledby="labelId"：表示当前元素由 ID 为labelId的元素进行标注aria-controls="menuId"：表示当前元素控制 ID 为menuId的元素
示例：
1
2
3<label id="searchLabel">搜索：</label>
<!-- 输入框与标签关联，屏幕阅读器会读取“搜索：输入框” -->
<input type="text" aria-labelledby="searchLabel">
三、使用原则
- 优先使用语义化 HTML：ARIA 是对原生 HTML 的补充，而非替代。例如，应优先使用
<button>而非<div role="button">，因为原生标签自带无障碍特性。 - 不修改原生语义：不要为原生标签添加冲突的 role，例如
<button role="link">会混淆屏幕阅读器。 - 状态自动更新：当组件状态变化时（如从关闭到展开），需通过 JavaScript 同步更新 ARIA 属性，确保屏幕阅读器能感知变化。
四、总结
ARIA 是提升 Web 应用无障碍性的关键技术，通过为复杂组件添加语义、状态和关系描述，让残障用户能够通过辅助技术（如屏幕阅读器）理解和操作界面。它与语义化 HTML 相辅相成，是构建包容性 Web 产品的重要标准。
21、HTML 中的 script 标签的 defer 和 async 属性有什么区别？
defer 和 async 是 <script> 标签的两个属性，用于控制外部脚本（通过 src 引入的 JS 文件）的加载和执行时机，解决脚本加载阻塞 HTML 解析的问题。它们的核心区别在于执行时机和是否保证执行顺序：
一、默认行为（无 defer/async）
当 <script src="script.js"> 没有任何属性时：
- 浏览器解析 HTML 时，遇到脚本会暂停解析。
- 下载脚本文件。
- 下载完成后立即执行脚本。
- 脚本执行完毕后，才继续解析后续 HTML。
问题：若脚本体积大或网络慢，会导致页面加载卡顿，出现“白屏”。
二、async 属性（异步执行）
1 | <script src="script.js" async></script> |
- 加载：脚本下载与 HTML 解析并行进行（不阻塞解析）。
- 执行：下载完成后立即中断 HTML 解析，执行脚本，执行完毕后继续解析。
- 顺序：多个
async脚本的执行顺序不确定（谁先下载完谁先执行）。
适用场景：独立的第三方脚本（如统计代码、广告脚本），脚本之间无依赖关系。
三、defer 属性（延迟执行）
1 | <script src="script.js" defer></script> |
- 加载：脚本下载与 HTML 解析并行进行（不阻塞解析）。
- 执行：脚本下载完成后不立即执行，等待整个 HTML 解析完成后（
DOMContentLoaded事件前）才按顺序执行。 - 顺序：多个
defer脚本会按照在 HTML 中出现的顺序执行（与下载顺序无关）。
适用场景：依赖 DOM 结构的脚本、有执行顺序要求的脚本（如库文件 + 业务脚本）。
四、直观对比
| 特性 | 无属性（默认） | async | defer |
|---|---|---|---|
| 下载阶段 | 阻塞 HTML 解析 | 不阻塞（并行下载） | 不阻塞（并行下载） |
| 执行阶段 | 阻塞 HTML 解析 | 阻塞（下载完立即执行） | 不阻塞（HTML 解析完才执行） |
| 执行顺序 | 按出现顺序执行 | 无序（取决于下载速度） | 按出现顺序执行 |
| DOM 就绪依赖 | 执行时可能 DOM 未完全解析 | 执行时可能 DOM 未完全解析 | 执行时 DOM 已完全解析 |
五、总结
- **
async**：“下载优先”，适合无依赖的独立脚本，执行时机不可控。 - **
defer**：“顺序优先”，适合有依赖或需要操作 DOM 的脚本，执行时机确定。
两者均能提升页面加载性能（避免下载阶段阻塞），选择时主要看脚本是否有执行顺序要求和 DOM 依赖。现代开发中，也常结合动态导入（import()）进一步优化脚本加载。
