【前端】【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>
核心组成：
| 元素 | 作用 |
|---|---|
|
声明 HTML5 文档类型，浏览器按标准模式解析 |
|
根元素，包含整个页面内容 |
|
页面头部信息（元数据、引入资源） |
|
页面可见内容 |
3. 常见开发工具与编辑器推荐
开发 HTML 网页时，推荐使用以下编辑器（支持语法高亮、自动补全）：
- VS Code（推荐，轻量强大）
- Sublime Text
- WebStorm（功能强大，适合大型项目）
- Notepad++（轻量基础）
大多数现代浏览器也提供了强大的开发者工具（DevTools）用于调试页面结构和样式。
4. 标签命名规范与大小写约定
HTML 标签命名建议遵循以下规范：
- 小写书写标签名（HTML5 标准推荐）
✅ 正确：，；❌ 错误：，- 使用语义化标签（如
）提升代码可读性与 SEO- 合理嵌套标签，避免结构混乱
- 属性值建议使用 双引号包裹，例如：
class="title"
二、常用基础标签
HTML 提供了多种语义清晰的标签，用于表达不同类型的内容结构。以下是最常用的一类基础标签。
1. 文本内容标签
标签 作用描述 ~标题标签， 为最高级标题段落 行内文本容器（无语义） 强调内容（加粗 + 语义） 强调语气（斜体 + 语义） 换行（单标签） 分隔线（单标签） <h2>HTML 是什么？h2> <p><strong>HTMLstrong> 是网页的结构语言。p> <span>这是一段内联文字。span>
2. 超链接标签
标签用于创建超链接，允许用户从一个页面跳转到另一个页面，或者执行其他操作，如跳转到锚点、拨打电话、发送邮件等。
基本用法
<a href="https://www.example.com" target="_blank">访问官网a>href: 必须属性，指定链接目标地址，可以是一个网页的 URL，或者是一个相对路径。target="_blank": 可选属性，指定在新窗口或新标签页打开链接。常用于外部链接。download: 可选属性，表示点击链接时下载指定资源，而不是直接打开该资源。
常见属性
href: 设置链接的目标地址。target: 控制链接打开的方式。_blank: 在新窗口或标签页中打开链接。_self（默认）：在同一窗口或标签页中打开链接。_parent: 在父窗口中打开链接。_top: 在整个浏览器窗口中打开链接。
rel: 用来指定与目标文档之间的关系。通常与target="_blank"一起使用，用来增强安全性。- 例如：
官网 noopener: 防止新页面通过window.opener访问原始页面。noreferrer: 防止传递 HTTP Referer 头。
- 例如：
download: 表示点击链接时触发文件下载，而不是跳转到该文件。- 例如：
下载 PDF
- 例如：
tel: 用于拨打电话。- 例如：
拨打电话
- 例如：
mailto: 用于打开用户的邮件客户端并创建一个新邮件。- 例如：
发送邮件
- 例如：
锚点链接
- 用于在当前页面中定位到特定部分。
<h2 id="section1">第一个部分h2> <a href="#section1">跳转到第一个部分a>多重用途
- 链接到电子邮件：
<a href="mailto:[email protected]">发送邮件a>- 链接到电话号码：
<a href="tel:+1234567890">拨打电话a>无链接的
标签如果不为
href属性指定值，标签仍然可以用作其他目的，如 JavaScript 事件监听：<a href="#" onclick="alert('按钮点击')">点击我a>注意：
href="#"常用于 JavaScript 操作中，但不建议过度使用，因为这会导致页面滚动到顶部或产生不必要的行为。
3. 图片与媒体标签
图片
<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 controls src="music.mp3">audio>视频
<video controls width="300"> <source src="movie.mp4" type="video/mp4" /> 浏览器不支持该视频。 video>
4. 列表标签
- 无序列表
- 有序列表
- 定义列表
（术语）+（定义）
<ul> <li>苹果li> <li>香蕉li> ul> <ol> <li>第一步li> <li>第二步li> ol> <dl> <dt>HTMLdt> <dd>网页的结构dd> dl>
5. 表格标签
标签 作用 表格容器 表格行 单元格 表头单元格 <table border="1"> <tr> <th>姓名th><th>年龄th> tr> <tr> <td>小明td><td>18td> tr> table>
三、布局与结构标签
HTML5 引入了大量语义化标签，用于更清晰地描述网页结构，有助于可维护性、SEO 以及无障碍访问。
1. 常见语义化结构标签
这些标签用来构建网页的大体骨架，更直观、更符合语义。
标签 含义及用途 页头或模块头部，通常包含 logo、标题、导航等 导航栏区域，包含一组跳转链接 页面主内容（全页面唯一） 独立区块或内容组，可嵌套使用 独立文章内容，如博客文章、新闻等 侧边栏信息，常用于补充内容或广告 页脚区域，包含版权、联系信息等 <header> <h1>网站标题h1> <nav> <a href="/">首页a> <a href="/about">关于a> nav> header> <main> <section> <h2>产品介绍h2> <p>这里是产品内容...p> section> <aside> <p>推荐文章p> aside> main> <footer> <p>© 2025 我的公司p> footer>
2. 非语义化容器标签
标签 说明 块级容器，无语义，仅用于布局分组 行内容器，无语义，适用于文字样式包裹 <div class="card"> <span class="highlight">限时优惠span> div>
3. 网页结构的语义化设计原则
- 使用语义明确的标签替代 滥用
- 页面中应仅有一个
标签- 内容结构应清晰分区，有利于 SEO 和可访问性（如屏幕阅读器）
- 可读性优先，利于团队协作与后期维护
✅ 示例对比
❌ 错误：
✅ 正确：
四、表单与用户输入
表单是实现用户交互、数据提交（如注册、登录、搜索等）的核心组件，HTML 提供了丰富的标签和属性支持。
1.
表单基本结构用于包裹一组输入控件，并定义数据的提交方式和目的地。<form action="/submit" method="POST"> form>属性 说明 action表单数据提交的地址 method提交方法，常用 GET/POSTenctype编码类型，上传文件时用 multipart/form-data
2. 表单控件标签
标签 功能 单行输入控件（文本框、密码框、复选框等） - 页面中应仅有一个
- 使用语义化标签（如