前端面试之HTML篇前端面试之HTML篇梳理HTML模块需要掌握的相关知识点，祝各位早日上岸！1. DOCTYPE声明

🎯 愿景和目标

梳理HTML模块需要掌握的相关知识点，祝各位早日上岸！

1. DOCTYPE声明的作用

核心原理： <!DOCTYPE>不是HTML标签，而是文档类型声明，告诉浏览器文档遵循的HTML规范。
- 若未声明或声明错误，浏览器会进入怪异模式（Quirks Mode） ，以兼容旧版本渲染方式（如IE5的盒模型）。
- 声明正确则进入标准模式（Standards Mode） ，按W3C标准渲染。
示例深入：

<!DOCTYPE html>  <!-- HTML5标准模式 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  <!-- HTML4过渡模式 -->

常见问题：
- 怪异模式下，元素宽高计算可能包含边框和内边距（IE盒模型），导致布局错乱。
- 可通过document.compatMode检测当前模式（BackCompat为怪异模式，CSS1Compat为标准模式）。

2. HTML 语义化的优势

详细场景：
- <nav>：包裹导航链接，帮助屏幕阅读器快速定位。
- <article>：独立内容（如博客文章、新闻），可被聚合工具提取。
- <figure> + <figcaption>：描述图像或图表及其标题。
SEO 优化：搜索引擎爬虫通过语义标签理解页面结构，例如：
- <h1>到<h6>定义内容层次，影响关键词权重。
- <meta name="description">提供页面摘要，影响搜索结果展示。
可访问性（A11Y） ：
- 使用aria-label为无文本元素（如图标按钮）提供说明。
- <table>配合<th scope="col">定义表头关联数据。

3. HTML5新特性

多媒体：

示例深入：

<video controls width="600"><source src="video.mp4" type="video/mp4">
  您的浏览器不支持视频播放。
</video>

controls：显示播放控件；autoplay（慎用，可能被浏览器阻止）。

Canvas与 SVG 对比：

特性	Canvas	SVG
图像类型	位图（像素操作）	矢量图（XML描述）
动态更新	高性能（适合动画、游戏）	DOM操作慢，适合静态图形
事件处理	需手动计算坐标	支持DOM事件（如点击路径）

Web Workers：允许在后台线程运行脚本，避免主线程阻塞：
示例深入：

const worker = new Worker('worker.js');
worker.postMessage(data);  // 主线程发送数据
worker.onmessage = (e) => { /* 处理返回数据 */ };

4. 块级元素 vs 行内元素

常见块级元素列表

<div>：通用容器。
<p>：段落。
<h1> ~ <h6>：标题。
<ul>、<ol>、li>：列表及列表项。
<table>、<form>：表格和表单。
<header>、<footer>、<section>、<article>：HTML5 语义化标签。
<hr>：水平分割线。
<pre>：预格式化文本（保留空格和换行）。
<blockquote>：块级引用。

表现形式

布局行为：
- 独占一行：默认从新行开始，占据父容器的全部宽度。
- 盒模型：可设置 width、height、margin、padding。
- 垂直排列：多个块级元素按从上到下的顺序排列。
示例：

<div style="background: lightblue; width: 200px; height: 100px;">块级元素</div><p style="background: lightgreen;">段落块</p>

上述两个元素会分两行显示，各自占据完整宽度。

常见行内元素列表

<span>：通用行内容器。
<a>：超链接。
<strong>、<em>：强调文本（粗体、斜体）。
<img>：图像（属于替换元素，可设宽高）。
<input>、<button>：表单控件（替换元素）。
<label>：表单标签。
<br>：换行符。
<code>：行内代码片段。
<time>：时间/日期。

表现形式

布局行为：
- 同行显示：与其他行内元素或文本在同一行排列。
- 宽高由内容决定：默认无法直接设置 width、height。
- 边距与填充：margin 和 padding 仅水平方向生效，垂直方向不影响布局（但可能覆盖其他元素）。

<span style="background: pink;">行内元素1</span><a href="#" style="background: lightyellow;">链接</a>

上述元素会在同一行显示，宽度由内容决定。
CSS 控制：
- display: block：元素变为块级（如<span style="display:block">）。
- display: inline-block：行内显示但可设宽高（如表单元素）。
特殊规则：
- <p>内不能嵌套块级元素（浏览器会自动闭合<p>标签）。
- <a>可包裹块级元素（HTML5允许，但需注意可点击区域）。

5. 表单相关

表单验证：

<input type="email" required pattern=".+@example.com">

required：字段必填。

pattern：正则验证（如限制邮箱域名）。

:valid和:invalid伪类可自定义验证样式。

文件上传：

<input type="file" accept="image/*" multiple>

accept限制文件类型；multiple允许多选。

6. 响应式图片处理

srcset深度解析：

<img src="small.jpg" srcset="large.jpg 1024w, medium.jpg 640w"sizes="(max-width: 600px) 100vw, 50vw">

1024w表示图片宽度（非文件大小）；sizes定义视口条件与显示宽度。

<picture>艺术指导：

<picture>
    <source media="(min-width: 800px)" srcset="large.jpg">
    <source media="(min-width: 400px)" srcset="medium.jpg">
    <img src="small.jpg" alt="响应式图片">
 </picture>

根据媒体条件切换图片源（如不同屏幕尺寸加载不同裁剪版本）。

7. `<meta>`标签的用途

移动端适配：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

width=device-width：视口宽度等于设备宽度。

user-scalable=no：禁止用户缩放（谨慎使用，可能影响可访问性）。

HTTP-equiv：浏览器控制行为

 <!-- 禁止缓存 -->
<meta http-equiv="cache-control" content="no-cache">
<!-- 设置字符编码 -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- 自动刷新5秒后跳转 -->
<meta http-equiv="refresh" content="5; url=http://example.com">
  <!-- 强制IE使用最新引擎 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
 <!-- 内容安全策略  防止XSS攻击-->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">

8. `async`与`defer`的区别

执行顺序图示：

正常脚本：HTML解析 → 遇到脚本 → 下载并执行 → 继续解析 async脚本：HTML解析 → 下载脚本（异步） → 下载完成立即执行（可能中断解析） defer脚本：HTML解析 → 下载脚本（异步） → 解析完成后按顺序执行

应用场景：
- async：适用于独立脚本（如统计代码），不依赖DOM或其他脚本。
- defer：适用于需要按顺序执行的依赖脚本（如库文件+业务代码）。

9. 本地存储

API 使用：

localStorage.setItem('key', 'value');  // 存储（字符串）
const data = localStorage.getItem('key');  // 读取
localStorage.removeItem('key');  // 删除

存储限制：
- 各浏览器不同（通常约5MB），超出会触发QuotaExceededError。
- sessionStorage在页面关闭后清除，localStorage需手动或通过代码清除。

10. Canvas vs SVG

Canvas动画示例：

const ctx = canvas.getContext('2d');
function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillRect(x, y, 50, 50);
  x += 1;
  requestAnimationFrame(animate);
 }

SVG 结构：

<svg width="100" height="100"><circle cx="50" cy="50" r="40" stroke="black" fill="red" /></svg>

SVG元素可通过CSS修改样式（如悬停效果）。

11. SEO 优化措施

结构化数据：使用Schema.org标记（JSON-LD格式）：

<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": "标题",
    "author": { "@type": "Person", "name": "作者" }
  }
</script>

避免 SPA 的 SEO 问题：
- 服务端渲染（SSR）或预渲染（Prerendering）。
- 使用<noscript>标签提供备用内容。

12. 可访问性（ARIA）

动态内容更新：

<div role="status" aria-live="polite">新消息已加载</div>

aria-live="polite"：屏幕阅读器在空闲时播报更新。

表单错误提示：

<input aria-invalid="true" aria-describedby="error"><div id="error" role="alert">请输入有效邮箱</div>

ARIA 的核心概念

1.1 角色（Roles）

作用：定义元素的类型或功能，帮助辅助技术理解其用途。
常见角色：
- role="button"：表示元素行为类似按钮。
- role="dialog"：表示模态对话框。
- role="navigation"：标识导航区域（通常用 <nav> 替代）。
- role="alert"：表示需要立即注意的动态内容（如错误提示）。
- role="status"：表示非紧急的更新信息（如加载完成提示）。

1.2 属性（Attributes）

作用：提供元素的额外状态、属性或关系信息。
关键属性：
- aria-label：为元素提供简短的文本标签（当元素本身无文本内容时）。
- ```
<button aria-label="关闭弹窗">×</button>
```
- aria-labelledby：关联另一个元素的 ID 作为当前元素的标签。
- ```
<div id="modal-title">设置选项</div><div role="dialog" aria-labelledby="modal-title">...</div>
```
- aria-describedby：关联另一个元素的 ID 作为当前元素的详细描述。
- ```
<input aria-describedby="password-hint"><div id="password-hint">密码需包含至少8个字符</div>
```
- aria-hidden="true"：对辅助技术隐藏元素（但对视觉用户可见）。
- ```
<div class="decorative-icon" aria-hidden="true">★</div>
```
- aria-live：定义动态更新区域的优先级（如实时通知）。
- ```
<div aria-live="polite">新消息：3条未读</div>
```
- polite：辅助技术空闲时播报更新。
- assertive：立即中断当前播报以通知更新。

13. 跨域问题

CORS 预检请求：复杂请求（如Content-Type: application/json）会先发送OPTIONS请求，检查服务器是否允许跨域。
JSONP 原理：

function handleResponse(data) { /* 处理数据 */ }
const script = document.createElement('script');
script.src = 'https://api.com/data?callback=handleResponse';
document.body.appendChild(script);

服务器返回handleResponse({ data: ... })，触发回调函数。

14. `data-*`属性

JavaScript 访问：

<div data-user-id="123" data-role="admin"></div><script>
  const div = document.querySelector('div');
  console.log(div.dataset.userId);  // "123"
  console.log(div.dataset.role);    // "admin"
</script>

15. 元素嵌套规则

典型错误：

<a href="#"><div>块级元素</div><a href="#">嵌套链接（错误！）</a></a>

浏览器会解析为两个独立的<a>标签。
列表结构： <ul>和<ol>的直接子元素必须是<li>，中间不能插入其他元素。

16. `target="_blank"`的安全问题

攻击示例：恶意页面通过window.opener.location = 'phishing-site.com'修改原页面URL。
防御代码：rel="noopener noreferrer"

通过在链接中添加 rel="noopener noreferrer"，可彻底消除 window.opener 的引用并增强隐私保护。

1. `noopener` 的作用

禁用 window.opener：新页面无法通过 window.opener 访问原页面的 window 对象。
现代浏览器默认行为：Chrome 88+、Firefox 79+ 已默认对 target="_blank" 添加 noopener，但为兼容旧浏览器仍需显式声明。

2. `noreferrer` 的作用

隐藏 Referer 请求头：阻止新页面在请求中携带来源页面的 URL（隐私保护）。
兼容旧浏览器：在旧版浏览器（如 Safari < 15.4）中，noreferrer 会隐式触发 noopener 行为。

<a href="https://external.com" target="_blank" rel="noopener noreferrer">
  安全链接
</a>

17. `<iframe>`的优缺点

沙箱隔离：

<iframe sandbox="allow-scripts allow-same-origin" src="..."></iframe>

sandbox限制iframe权限（如禁止表单提交、弹出窗口）。
通信方式：
- 同源：window.parent访问父窗口。
- 跨域：postMessage API传递消息。

18. 字符实体

XSS 防御：用户输入需转义<为<，>为>，防止注入恶意脚本。

19. HTML 全局属性

contenteditable：使元素可编辑（如富文本编辑器）：

<div contenteditable="true">点击编辑</div>

hidden：隐藏元素（等同于display: none），但对屏幕阅读器不可见。

扩展建议：

使用工具（如Lighthouse）检测页面SEO和可访问性。
结合HTTP协议理解表单提交过程（如enctype="multipart/form-data"用于文件上传）。
实践Canvas/SVG绘图、本地存储操作等，加深理解。

20. Cookie、localStorage 和 sessionStorage

对比表格

特性	Cookie	localStorage	sessionStorage
存储容量	~4KB	~5MB	~5MB
生命周期	可设置过期时间或会话级	永久存储（需手动清除）	标签页关闭后清除
作用域	可跨子域名（通过 domain 和 path）	同源	同源 + 同标签页
自动发送	是（通过 HTTP 头）	否	否
访问方式	document.cookie	localStorage API	sessionStorage API
安全性	支持 Secure 和 HttpOnly	明文存储，易受 XSS	同 localStorage
适用场景	会话管理、服务端需访问的小数据	长期保存的客户端数据	临时会话数据

选择建议

需要与服务器交互 → 使用 Cookie（如身份验证 Token）。
长期保存客户端数据 → 使用 localStorage（如用户主题偏好）。
临时保存单标签页数据 → 使用 sessionStorage（如表单草稿）。

注意事项

隐私合规：使用 Cookie 需明确用户同意（如 GDPR、CCPA）。
敏感数据：避免在 Cookie/localStorage 中存储密码等敏感信息。
存储格式：localStorage 和 sessionStorage 仅支持字符串，存储对象需 JSON.stringify()。

前端面试之HTML篇

🎯 愿景和目标

1. DOCTYPE声明的作用

2. HTML 语义化的优势

3. HTML5新特性

4. 块级元素 vs 行内元素

常见块级元素列表

表现形式

常见行内元素列表

表现形式

5. 表单相关

6. 响应式图片处理

7. <meta>标签的用途

8. async与defer的区别

9. 本地存储

10. Canvas vs SVG

11. SEO 优化措施

12. 可访问性（ARIA）

1.1 角色（Roles）

1.2 属性（Attributes）

13. 跨域问题

14. data-*属性

15. 元素嵌套规则

16. target="_blank"的安全问题

1. noopener 的作用

2. noreferrer 的作用

17. <iframe>的优缺点

18. 字符实体

19. HTML 全局属性

20. Cookie、localStorage 和 sessionStorage

对比表格

选择建议

注意事项

7. `<meta>`标签的用途

8. `async`与`defer`的区别

14. `data-*`属性

16. `target="_blank"`的安全问题

1. `noopener` 的作用

2. `noreferrer` 的作用

17. `<iframe>`的优缺点