【前端】【总复习】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="请输入邮箱" />