我忽然意识到我还没怎么学正儿八经html，就让d老师写了一个，凑合看吧
本文档旨在介绍 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>
所有可见内容都放在这里
</body>
</html>
<!DOCTYPE html> ：声明文档类型为 HTML5。<html> ：HTML 文档的根元素，lang 属性指定页面语言。<head> ：包含元数据、样式表链接、脚本等，不直接显示在页面上。<meta charset="UTF-8"> ：设置字符编码为 UTF-8。<title> ：定义浏览器标签页上显示的标题。<body> ：放置所有用户可见的内容。<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<p>这是一个段落。段落前后会自动产生间距。</p>
<p>这是第二个段落。<br>这里使用了 <br> 强制换行。</p>
<hr> <!-- 水平分割线 -->
<pre>
保留 空格
和换行 的文本。
</pre>
<br> ：换行（空标签）。<hr> ：水平分割线。<pre> ：预格式化文本，保留空格和换行。| 标签 | 描述 | 示例 |
|---|---|---|
<strong> / <b> |
加粗 | <strong>重要内容</strong> |
<em> / <i> |
斜体 | <em>强调</em> |
<small> |
小号字体 | <small>注释</small> |
<mark> |
标记背景高亮 | <mark>高亮</mark> |
<del> |
删除线 | <del>原价</del> |
<ins> |
下划线（插入） | <ins>新增</ins> |
<sup> |
上标 | x2 |
<sub> |
下标 | H2O |
<blockquote> |
长引用（块级，通常缩进） | <blockquote>引用文本</blockquote> |
<q> |
短引用（内联，自动加引号） | <q>引用</q> |
<abbr> |
缩写 | <abbr title="World Wide Web">WWW</abbr> |
<address> |
联系信息（通常斜体） | <address>email@example.com</address> |
示例组合：
<p><strong>加粗</strong>，<em>斜体</em>，<mark>高亮</mark>，<del>删除</del>，<ins>插入</ins>。</p>
<p>数学：x<sup>2</sup> + y<sup>2</sup> = z<sup>2</sup>，化学：H<sub>2</sub>O</p>
<blockquote cite="https://example.com">
这是一个块引用，通常从左右两侧缩进。
</blockquote>
<p>孔子说：<q>学而时习之，不亦说乎！</q></p>
<p><abbr title="HyperText Markup Language">HTML</abbr> 是超文本标记语言。</p>
<a> 标签用于创建超链接。
<!-- 普通链接 -->
<a href="https://www.example.com">访问示例网站</a>
<!-- 在新标签页打开 -->
<a href="https://www.example.com" target="_blank">在新窗口打开</a>
<!-- 页面内跳转（书签） -->
<a href="#section1">跳转到第一节</a>
...
<h2 id="section1">第一节</h2>
<!-- 下载链接（需服务器支持） -->
<a href="files/document.pdf" download>下载 PDF</a>
<!-- 电子邮件链接 -->
<a href="mailto:someone@example.com">发送邮件</a>
href ：链接的目标 URL。target="_blank" ：在新标签页打开。id 属性配合 # 实现锚点跳转。download ：提示浏览器下载文件而非打开。<img src="images/photo.jpg" alt="描述文字" width="300" height="200">
src ：图片路径（相对或绝对）。alt ：图片无法显示时的替代文本（对 SEO 和无障碍访问很重要）。width / height ：指定宽度和高度（像素），只设置一个时会等比例缩放。<audio controls>
<source src="music.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
controls ：显示播放控件。<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
您的浏览器不支持 video 标签。
</video>
<iframe src="https://www.example.com" width="600" height="400" title="示例页面"></iframe>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橙子</li>
</ul>
<ol>
<li>第一步</li>
<li>第二步</li>
<li>第三步</li>
</ol>
<dl>
<dt>HTML</dt>
<dd>超文本标记语言</dd>
<dt>CSS</dt>
<dd>层叠样式表</dd>
</dl>
表格用于展示结构化数据。
<table border="1">
<caption>月度销售表</caption>
<thead>
<tr>
<th>月份</th>
<th>销售额</th>
</tr>
</thead>
<tbody>
<tr>
<td>1月</td>
<td>¥10,000</td>
</tr>
<tr>
<td>2月</td>
<td>¥12,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总计</td>
<td>¥22,000</td>
</tr>
</tfoot>
</table>
<table> ：定义表格。<tr> ：行。<th> ：表头单元格（默认加粗居中）。<td> ：标准单元格。<caption> ：表格标题。<thead>、<tbody>、<tfoot> ：表格结构分区。合并单元格：
<table border="1">
<tr>
<td rowspan="2">合并两行</td>
<td>单元格1</td>
</tr>
<tr>
<td>单元格2</td>
</tr>
<tr>
<td colspan="2">合并两列</td>
</tr>
</table>
rowspan ：垂直合并。colspan ：水平合并。表单用于收集用户输入并提交数据。
<form action="/submit" method="post">
<!-- 文本输入 -->
<label for="name">姓名：</label>
<input type="text" id="name" name="name" required><br><br>
<!-- 密码 -->
<label for="pwd">密码：</label>
<input type="password" id="pwd" name="pwd" minlength="6"><br><br>
<!-- 单选按钮 -->
<label>性别：</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">男</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女</label><br><br>
<!-- 复选框 -->
<input type="checkbox" id="agree" name="agree" value="yes">
<label for="agree">我同意条款</label><br><br>
<!-- 数字输入 -->
<label for="quantity">数量：</label>
<input type="number" id="quantity" name="quantity" min="1" max="10"><br><br>
<!-- 邮箱 -->
<label for="email">邮箱：</label>
<input type="email" id="email" name="email"><br><br>
<!-- 下拉列表 -->
<label for="city">城市：</label>
<select id="city" name="city">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou">广州</option>
</select><br><br>
<!-- 文本域 -->
<label for="message">留言：</label><br>
<textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>
<!-- 按钮 -->
<button type="submit">提交</button>
<button type="reset">重置</button>
</form>
<input> 类型text：普通文本password：密码radio：单选checkbox：多选submit / reset：提交/重置按钮button：普通按钮file：文件上传email：邮箱格式验证number：数字（可设置范围）date：日期选择器color：颜色选择器
<label> ：提升可访问性，点击标签文本即可聚焦对应的表单项。required：必填字段。placeholder：输入提示。<div> ：块级容器，用于布局分区。<span> ：行内容器，用于对行内元素进行样式或脚本操作。这些标签让页面结构更清晰，有利于 SEO 和代码可读性。
<header>
<h1>网站标题</h1>
<nav>
<a href="#home">首页</a> |
<a href="#about">关于</a> |
<a href="#contact">联系</a>
</nav>
</header>
<main>
<article>
<h2>文章标题</h2>
<section>
<h3>第一节</h3>
<p>内容……</p>
</section>
<section>
<h3>第二节</h3>
<p>内容……</p>
</section>
</article>
<aside>
<h3>相关链接</h3>
<ul>
<li><a href="#">链接1</a></li>
<li><a href="#">链接2</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2025 我的网站。保留所有权利。</p>
</footer>
<header> ：页眉，通常包含 Logo、标题、导航。<nav> ：导航链接区域。<main> ：文档主要内容（每个页面只出现一次）。<article> ：独立的自包含内容，如博客文章、新闻。<section> ：文档中的节，一般带有标题。<aside> ：侧边栏，内容与主内容间接相关。<footer> ：页脚，包含版权、联系信息等。<!-- 这是一段注释，不会显示在浏览器中 -->
在 HTML 中，某些字符需要转义才能正确显示：
| 实体 | 显示结果 |
|——|———-|
| < | < |
| > | > |
| & | & |
| | 不断行空格 |
<progress value="70" max="100">70%</progress>
<meter value="0.6" min="0" max="1" low="0.3" high="0.8" optimum="0.7">60%</meter>
<details>
<summary>点击展开更多信息</summary>
<p>这里是详细内容，默认隐藏。</p>
</details>
<!-- 内部样式 -->
<style>
body { font-family: Arial, sans-serif; }
</style>
<!-- 外部样式 -->
<link rel="stylesheet" href="styles.css">
<!-- 内部脚本 -->
<script>
console.log('Hello, world!');
</script>
<!-- 外部脚本 -->
<script src="script.js"></script>
本文档涵盖了 HTML 中最常用的标签及其基本用法。掌握这些标签后，你已经可以构建结构良好的静态网页。接下来可以学习 CSS 进行样式美化，以及 JavaScript 为页面添加交互功能。实践是掌握 HTML 的最佳途径，多动手写代码吧！