【前端】【总复习】HTML
一、HTML（结构）
HTML 是网页的骨架，主要负责网页的结构与语义表达，为 CSS 和 JavaScript 提供承载基础。
1.1 HTML 基本结构与语义化标签
1.1.1 HTML 基本结构
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>文档标题</title>
</head>
<body><h1>Hello HTML</h1>
</body>
</html>
🔹说明：
<!DOCTYPE html>：声明 HTML5 文档类型<html>：HTML 文档根元素<head>：文档头部，包含 meta、title、link 等信息<body>：主体内容，浏览器显示的主要区域
1.1.2 语义化标签（Semantic Tags）
常见语义化标签：
| 标签 | 语义描述 |
|---|---|
<header> | 页眉或导航区域 |
<nav> | 导航链接块 |
<main> | 页面主内容 |
<section> | 页面中的区块 |
<article> | 独立的文章内容块 |
<aside> | 侧边栏（如广告、推荐） |
<footer> | 页脚信息 |
🔹好处：
- 更易于搜索引擎抓取（SEO）
- 提高可访问性（如屏幕阅读器识别）
- 结构清晰，易于团队协作
1.2 表单相关元素与属性
HTML 表单用于收集用户输入，是前后端交互的基础。
1.2.1 常见元素
<input>：单行输入（类型众多）<select>：下拉选择<textarea>：多行文本输入<label>：字段说明，增强可用性<button>/<input type="submit">：提交按钮
1.2.2 <input> 常见类型
<input type="text" />
<input type="email" />
<input type="password" />
<input type="checkbox" />
<input type="radio" />
<input type="number" />
<input type="file" />
1.2.3 关键属性
| 属性 | 说明 |
|---|---|
name | 用于提交字段标识 |
value | 默认值 |
placeholder | 占位提示 |
required | 是否必填 |
disabled | 禁用 |
readonly | 只读 |
autocomplete | 自动补全 |
maxlength / minlength | 输入长度限制 |
1.3 常见标签的用法
1.3.1 <meta> 标签
<meta charset="UTF-8" />
<meta name="description" content="页面描述，有助于 SEO" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
1.3.2 <link> 标签
<link rel="stylesheet" href="styles.css" />
<link rel="icon" href="favicon.ico" />
1.3.3 <canvas> 画布
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>const ctx = document.getElementById("myCanvas").getContext("2d");ctx.fillStyle = "red";ctx.fillRect(10, 10, 100, 50);
</script>
1.3.4 <iframe> 内嵌页面
<iframe src="https://example.com" width="300" height="200"></iframe>
1.4 SEO 与可访问性（Accessibility）
1.4.1 SEO（搜索引擎优化）
| 要点 | 示例 |
|---|---|
| 使用语义化标签 | <article>, <section> |
| 正确使用标题标签 | <h1> 到 <h6> |
| 提供描述性 meta 标签 | <meta name="description"> |
| 图片加 alt 文本 | <img src="..." alt="描述"> |
1.4.2 可访问性
- 使用
<label>与表单元素关联：提高辅助技术兼容性 - 使用
aria-*属性增强无障碍访问 - 保证对比度、结构清晰、键盘可操作
1.5 常见场景考点
1.5.1 禁用自动填充
<input type="text" name="username" autocomplete="off" />
1.5.2 placeholder 与 label 的区别
| 比较项 | placeholder | label |
|---|---|---|
| 展示方式 | 输入框内提示文字 | 输入框外说明文字 |
| 是否提交 | 否 | 否 |
| 可访问性 | 较差 | 较好（配合 for 使用） |
| 推荐用法 | 仅作提示 | 用于表单说明，推荐 |
✅建议：同时使用 label + placeholder，提升体验与可访问性：
<label for="email">邮箱地址</label>
<input type="email" id="email" placeholder="请输入邮箱" />