HTML基础复习：全面回顾核心概念
目录
- 1 HTML基础
- 1.1 HTML 文档和元素
- 1.2 HTML 标题
- 1.3 HTML 段落
- 1.4 文本格式化元素
- 1.5 上标和下标
- 2 常见的 HTML 元素
- 2.1 HTML 列表
- 2.2 HTML 表格
- 2.3 HTML 表单
- 3 标识符和分组
- 3.1 HTML ID 和 Class 属性
- 3.2 HTML Div 和 Span
- 4 特殊字符和链接
- 4.1 HTML 特殊字符 (实体)
- 4.2 创建超链接
- 5 模板和编码
- 5.1 HTML 文档类型声明
- 5.2 字符编码
- 6 SEO 和社交分享
- 6.1 元数据 (Meta Data)
- 6.2 Open Graph 协议 (OGP)
- 7 媒体元素和优化
- 7.1 HTML 图片
- 7.2 响应式图片
- 8 多媒体集成
- 8.1 HTML 音频和视频
- 8.2 iframe
- 9 目标属性类型
- 10 绝对路径与相对路径
- 11 链接状态
- 总结
1 HTML基础
1.1 HTML 文档和元素
HTML 文档由一系列的 HTML 元素构成。一个 HTML 元素通常包括一个开始标签、一些内容和一个结束标签。例如，<p>这是一个段落</p>。有些元素是自闭合的，如 <br>（换行）和 <hr>（水平线），它们没有结束标签。
1.2 HTML 标题
HTML 提供了六个级别的标题，从 <h1> 到 <h6>。<h1> 表示最重要的标题，<h6> 表示最不重要的标题。它们用于组织网页内容，提供结构化的信息流。
<h1>主标题</h1>
<h2>副标题</h2>
1.3 HTML 段落
使用 <p> 标签来创建段落。浏览器会自动在段落前后添加一些空白，使其与其他内容区分开来。
<p>这是第一段文本。</p>
<p>这是第二段文本。</p>
1.4 文本格式化元素
HTML 提供了多种元素用于文本格式化。<strong> 用于表示文本的重要性（通常显示为粗体），而 <em> 用于强调文本（通常显示为斜体）。<b>（粗体）和 <i>（斜体）也可以用于视觉效果，但它们没有语义含义。<u> 用于下划线，<s> 或 <del> 用于删除线，表示内容不再准确或已被删除。
<strong>重要文本</strong>
<em>强调文本</em>
<b>粗体文本</b>
<i>斜体文本</i>
<u>下划线文本</u>
<s>删除线文本</s>
<del>已删除文本</del>
1.5 上标和下标
<sup> 标签用于创建上标文本，而 <sub> 标签用于创建下标文本，这在表示数学公式或化学式时非常有用。
E=mc<sup>2</sup>
H<sub>2</sub>O
2 常见的 HTML 元素
2.1 HTML 列表
HTML 支持两种主要的列表类型：无序列表（<ul>）和有序列表（<ol>）。每个列表项都使用 <li> 标签定义。
无序列表 (Unordered List)：项目前通常带有项目符号。
<ul><li>咖啡</li><li>茶</li>
</ul>
有序列表 (Ordered List)：项目前通常带有数字或字母。
<ol><li>第一步</li><li>第二步</li>
</ol>
2.2 HTML 表格
表格用于组织行和列中的数据。表格由 <table> 元素定义，其中包含 <tr>（表格行）、<th>（表头单元格）和 <td>（表格数据单元格）。
<table><tr><th>姓名</th><th>年龄</th></tr><tr><td>张三</td><td>30</td></tr>
</table>
2.3 HTML 表单
HTML 表单用于收集用户输入。<form> 元素用于创建表单，内部可以包含各种输入字段，如 <input>（文本、按钮、复选框等）、<textarea>（多行文本）和 <select>（下拉列表）。action 属性指定表单提交的URL，method 属性指定提交方式（GET 或 POST）。
<form action="/submit_data" method="post"><label for="username">用户名:</label><input type="text" id="username" name="username"><br><br><input type="submit" value="提交">
</form>
3 标识符和分组
3.1 HTML ID 和 Class 属性
id 属性用于为 HTML 元素提供唯一的标识符，一个页面中不允许有重复的 id 值。class 属性用于为元素分组，可以将相同的样式或行为应用于具有相同 class 的多个元素。
<p id="intro">这是介绍段落。</p>
<p class="highlight">这段文本被高亮显示。</p>
<div class="container"><p>内容区内的段落。</p>
</div>
3.2 HTML Div 和 Span
<div> 是一个块级容器，用于将文档的不同部分分组，常用于布局。<span> 是一个行内容器，用于对文本或其他行内元素进行分组，通常用于应用样式。
<div style="border: 1px solid black;"><h3>这是一个区块</h3><p>这个区块包含一些内容。</p>
</div>
<p>这是一段包含 <span style="color: red;">红色</span> 文本的段落。</p>
4 特殊字符和链接
4.1 HTML 特殊字符 (实体)
HTML 使用特殊字符实体来显示那些在 HTML 中具有特殊含义的字符，或者键盘上不易输入的字符。例如，< 表示 <，> 表示 >，& 表示 &，© 表示 ©。
<p>版权所有 © 2025</p>
<p>小于号: < , 大于号: ></p>
4.2 创建超链接
<a>（锚）标签用于创建超链接，它允许用户从一个页面导航到另一个页面，或者页面内的特定部分。href 属性是必需的，用于指定链接的目标URL。
<a href="https://www.example.com">访问示例网站</a>
<a href="#section2">跳转到第二部分</a>
5 模板和编码
5.1 HTML 文档类型声明
<!DOCTYPE html> 声明必须是 HTML 文档的第一行。它告诉浏览器文档使用的 HTML 版本，确保浏览器以标准模式渲染页面。
<!DOCTYPE html>
<html><head><title>我的网页</title></head><body></body>
</html>
5.2 字符编码
在 <head> 部分，使用 <meta charset="UTF-8"> 来指定文档的字符编码。UTF-8 是推荐的编码，因为它支持几乎所有的字符，有助于避免乱码问题。
<head><meta charset="UTF-8"><title>我的网页</title>
</head>
6 SEO 和社交分享
6.1 元数据 (Meta Data)
<meta> 标签用于提供关于 HTML 文档的元数据，这些数据不会显示在网页上，但对搜索引擎优化 (SEO) 和社交媒体分享非常重要。例如，description 用于网页描述，keywords 用于关键词。
<head><meta name="description" content="这是一个关于HTML基础的复习博客。"><meta name="keywords" content="HTML, Web开发, 基础">
</head>
6.2 Open Graph 协议 (OGP)
Open Graph 协议允许您控制网页在社交媒体上分享时的显示方式。通过 og: 前缀的 meta 属性可以定义标题、类型、图片、URL 等。
<head><meta property="og:title" content="HTML基础复习"><meta property="og:type" content="article"><meta property="og:image" content="https://example.com/image.jpg"><meta property="og:url" content="https://example.com/html-review">
</head>
7 媒体元素和优化
7.1 HTML 图片
<img> 标签用于在网页中嵌入图片。src 属性是图片的来源 URL，alt 属性提供图片的替代文本，这对于图片无法加载时显示文本以及屏幕阅读器非常重要。width 和 height 属性可以控制图片显示尺寸。
<img src="my_image.jpg" alt="我的图片描述" width="500" height="300">
7.2 响应式图片
使用 srcset 属性和 <picture> 元素可以为不同设备和屏幕密度提供不同的图片版本，以优化性能和用户体验。srcset 允许浏览器根据像素密度选择合适的图片，而 <picture> 允许根据媒体查询选择不同的图片资源。
<img srcset="small.jpg 500w, large.jpg 1000w" src="default.jpg" alt="响应式图片">
<picture><source media="(min-width: 800px)" srcset="large_image.jpg"><img src="small_image.jpg" alt="不同尺寸的图片">
</picture>
8 多媒体集成
8.1 HTML 音频和视频
<audio> 和 <video> 标签用于在网页中嵌入音频和视频内容。src 属性指定媒体文件的URL，controls 属性会显示播放/暂停等控件。autoplay 属性可以让媒体自动播放（通常不推荐，因为它会影响用户体验）。
<audio controls><source src="audio.mp3" type="audio/mpeg">您的浏览器不支持音频元素。
</audio><video controls width="640" height="360"><source src="video.mp4" type="video/mp4">您的浏览器不支持视频元素。</video>
8.2 iframe
<iframe> 元素用于在当前 HTML 文档中嵌入另一个 HTML 文档。这常用于嵌入第三方内容，如 视频、地图等。请注意，使用 iframe 可能涉及安全和性能考虑。
<iframe src="https://www.***.com/embed/dQw4w9WgXcQ" width="560" height="315" frameborder="0" allowfullscreen></iframe>
9 目标属性类型
target 属性通常与 <a> 标签一起使用，用于指定链接文档在哪里打开。最常见的值是 _blank（在新窗口或标签页中打开）、_self（在当前窗口或标签页中打开，默认值）、_parent（在父框架中打开）和 _top（在顶级窗口中打开）。
<a href="https://www.example.com" target="_blank">在新标签页打开</a>
<a href="page2.html" target="_self">在当前页面打开</a>
10 绝对路径与相对路径
在引用外部资源（如图片、样式表、JavaScript 文件或链接）时，可以使用绝对路径或相对路径。
绝对路径 (Absolute Path)：从根目录开始的完整路径，通常包含协议和域名。它在任何地方都能准确找到资源。
<img src="https://www.example.com/images/logo.png" alt="Logo">
<a href="https://www.example.com/about.html">关于我们</a>
相对路径 (Relative Path)：相对于当前文档的位置。它不包含域名，通常用于引用同一网站内的资源。
<img src="../images/banner.jpg" alt="Banner">
<a href="contact.html">联系我们</a>
11 链接状态
通过 CSS，可以为链接的不同状态（未访问、已访问、悬停、激活）定义不同的样式，从而增强用户体验。这些状态通常通过伪类来表示：
:link：未访问的链接:visited：已访问的链接:hover：鼠标悬停在链接上:active：链接被点击时
a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: red; }
a:active { color: green; }
总结
本次HTML基础复习涵盖了从最基本的文档结构到更高级的语义化、多媒体集成和路径管理。理解并熟练运用这些知识点是进行网页开发的关键。希望通过这次复习，您能对HTML有更深入的理解和掌握。不断练习，才能成为一名优秀的Web开发者！