【前端】【HTML】【总复习】一万六千字详解HTML 知识体系
🌐 HTML 知识体系
一、HTML 基础入门
1. HTML 简介与作用
HTML（HyperText Markup Language，超文本标记语言）是构建网页的基础语言。它的核心作用是：
- 定义网页内容的结构（标题、段落、图片、表格等）
- 提供语义化标签，帮助搜索引擎与辅助设备理解页面内容
- 配合 CSS 实现页面样式、配合 JS 实现交互功能
简而言之：HTML 是网页的骨架。
2. HTML 文件结构
一个完整的 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></head><body><h1>Hello HTML!</h1></body>
</html>
核心组成：
| 元素 | 作用 |
|---|---|
<!DOCTYPE> | 声明 HTML5 文档类型，浏览器按标准模式解析 |
<html> | 根元素，包含整个页面内容 |
<head> | 页面头部信息（元数据、引入资源） |
<body> | 页面可见内容 |
3. 常见开发工具与编辑器推荐
开发 HTML 网页时，推荐使用以下编辑器（支持语法高亮、自动补全）：
- VS Code（推荐，轻量强大）
- Sublime Text
- WebStorm（功能强大，适合大型项目）
- Notepad++（轻量基础）
💡 大多数现代浏览器也提供了强大的开发者工具（DevTools）用于调试页面结构和样式。
4. 标签命名规范与大小写约定
HTML 标签命名建议遵循以下规范：
- 小写书写标签名（HTML5 标准推荐）
✅ 正确：<div>，<h1>；❌ 错误：<DIV>，<H1> - 使用语义化标签（如
<header>、<article>）提升代码可读性与 SEO - 合理嵌套标签，避免结构混乱
- 属性值建议使用 双引号包裹，例如：
class="title"
二、常用基础标签
HTML 提供了多种语义清晰的标签，用于表达不同类型的内容结构。以下是最常用的一类基础标签。
1. 文本内容标签
| 标签 | 作用描述 |
|---|---|
<h1>~<h6> | 标题标签，<h1> 为最高级标题 |
<p> | 段落 |
<span> | 行内文本容器（无语义） |
<strong> | 强调内容（加粗 + 语义） |
<em> | 强调语气（斜体 + 语义） |
<br> | 换行（单标签） |
<hr> | 分隔线（单标签） |
<h2>HTML 是什么？</h2>
<p><strong>HTML</strong> 是网页的结构语言。</p>
<span>这是一段内联文字。</span>
2. 超链接标签 <a>
标签用于创建超链接，允许用户从一个页面跳转到另一个页面，或者执行其他操作，如跳转到锚点、拨打电话、发送邮件等。
基本用法
<a href="https://www.example.com" target="_blank">访问官网</a>
href: 必须属性，指定链接目标地址，可以是一个网页的 URL，或者是一个相对路径。target="_blank": 可选属性，指定在新窗口或新标签页打开链接。常用于外部链接。download: 可选属性，表示点击链接时下载指定资源，而不是直接打开该资源。
常见属性
href: 设置链接的目标地址。- 例如，跳转到一个网页：
<a href="https://www.example.com">官网</a> - 跳转到页面中的锚点：
<a href="#section1">跳到第一个部分</a>
- 例如，跳转到一个网页：
target: 控制链接打开的方式。_blank: 在新窗口或标签页中打开链接。_self（默认）：在同一窗口或标签页中打开链接。_parent: 在父窗口中打开链接。_top: 在整个浏览器窗口中打开链接。
rel: 用来指定与目标文档之间的关系。通常与target="_blank"一起使用，用来增强安全性。- 例如：
<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">官网</a> noopener: 防止新页面通过window.opener访问原始页面。noreferrer: 防止传递 HTTP Referer 头。
- 例如：
download: 表示点击链接时触发文件下载，而不是跳转到该文件。- 例如：
<a href="file.pdf" download="filename.pdf">下载 PDF</a>
- 例如：
tel: 用于拨打电话。- 例如：
<a href="tel:+123456789">拨打电话</a>
- 例如：
mailto: 用于打开用户的邮件客户端并创建一个新邮件。- 例如：
<a href="mailto:someone@example.com">发送邮件</a>
- 例如：
锚点链接
- 用于在当前页面中定位到特定部分。
<!-- 锚点目标 -->
<h2 id="section1">第一个部分</h2><!-- 锚点链接 -->
<a href="#section1">跳转到第一个部分</a>
多重用途
- 链接到电子邮件：
<a href="mailto:someone@example.com">发送邮件</a>
- 链接到电话号码：
<a href="tel:+1234567890">拨打电话</a>
无链接的 <a> 标签
如果不为 href 属性指定值，<a> 标签仍然可以用作其他目的，如 JavaScript 事件监听：
<a href="#" onclick="alert('按钮点击')">点击我</a>
注意：
href="#"常用于 JavaScript 操作中，但不建议过度使用，因为这会导致页面滚动到顶部或产生不必要的行为。
3. 图片与媒体标签
图片 <img>
<img src="logo.png" alt="网站Logo" width="100" loading="lazy" />
src: 图片路径alt: 替代文本（无图时代替显示）width/height: 控制图片尺寸loading="lazy": 启用图片懒加载，图片只有在进入可视区域时才会加载
图片懒加载（Lazy Loading）
使用 loading="lazy" 属性可以实现图片懒加载，优化页面的加载性能，减少不必要的请求。只有当图片滚动到视口时才会加载，从而加速页面初始加载。
注意：
loading="lazy"是 HTML5 中新增的属性，现代浏览器（如 Chrome、Firefox、Edge）支持它。但老版本的浏览器可能不支持该功能，可以通过 JavaScript 或第三方库（如lazysizes）来实现懒加载。
音频 <audio>
<audio controls src="music.mp3"></audio>
视频 <video>
<video controls width="300"><source src="movie.mp4" type="video/mp4" />浏览器不支持该视频。
</video>
4. 列表标签
- 无序列表
<ul>+<li> - 有序列表
<ol>+<li> - 定义列表
<dl>+<dt>（术语）+<dd>（定义）
<ul><li>苹果</li><li>香蕉</li>
</ul><ol><li>第一步</li><li>第二步</li>
</ol><dl><dt>HTML</dt><dd>网页的结构</dd>
</dl>
5. 表格标签
| 标签 | 作用 |
|---|---|
<table> | 表格容器 |
<tr> | 表格行 |
<td> | 单元格 |
<th> | 表头单元格 |
<table border="1"><tr><th>姓名</th><th>年龄</th></tr><tr><td>小明</td><td