你已处于离线状态，显示的是缓存的页面内容

学html的文档

时间：2026-03-13   标签：

我忽然意识到我还没怎么学正儿八经html，就让d老师写了一个，凑合看吧

HTML 常用标签学习文档

本文档旨在介绍 HTML 中最常用的标签及其基本用法，通过大量示例帮助初学者快速掌握网页开发的基础知识。

1. HTML 文档基础结构

每个 HTML 页面都遵循一个固定的基础结构，用于声明文档类型和定义页面框架。

1
2
3
4
5
6
7
8
9
10
11
<!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> ：放置所有用户可见的内容。

2. 文本标签

标题

1
2
3
4
5
6
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

段落、换行、分隔线

1
2
3
4
5
6
7
<p>这是一个段落。段落前后会自动产生间距。</p>
<p>这是第二个段落。<br>这里使用了 &lt;br&gt; 强制换行。</p>
<hr>   <!-- 水平分割线 -->
<pre>
    保留    空格
    和换行   的文本。
</pre>
  • <br> ：换行（空标签）。
  • <hr> ：水平分割线。
  • <pre> ：预格式化文本，保留空格和换行。

3. 文本格式化标签

标签 描述 示例
<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>

示例组合：

1
2
3
4
5
6
7
<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>

4. 链接

<a> 标签用于创建超链接。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!-- 普通链接 -->
<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 ：提示浏览器下载文件而非打开。

5. 图像与多媒体

图像

1
<img src="images/photo.jpg" alt="描述文字" width="300" height="200">
  • src ：图片路径（相对或绝对）。
  • alt ：图片无法显示时的替代文本（对 SEO 和无障碍访问很重要）。
  • width / height ：指定宽度和高度（像素），只设置一个时会等比例缩放。

音频

1
2
3
4
<audio controls>
    <source src="music.mp3" type="audio/mpeg">
    您的浏览器不支持 audio 元素。
</audio>
  • controls ：显示播放控件。

视频

1
2
3
4
<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    您的浏览器不支持 video 标签。
</video>

内联框架

1
<iframe src="https://www.example.com" width="600" height="400" title="示例页面"></iframe>
  • 嵌入另一个网页或外部内容。

6. 列表

无序列表

1
2
3
4
5
<ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>橙子</li>
</ul>

有序列表

1
2
3
4
5
<ol>
    <li>第一步</li>
    <li>第二步</li>
    <li>第三步</li>
</ol>

定义列表（描述列表）

1
2
3
4
5
6
<dl>
    <dt>HTML</dt>
    <dd>超文本标记语言</dd>
    <dt>CSS</dt>
    <dd>层叠样式表</dd>
</dl>

7. 表格

表格用于展示结构化数据。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<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> ：表格结构分区。

合并单元格：

1
2
3
4
5
6
7
8
9
10
11
12
<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 ：水平合并。

8. 表单

表单用于收集用户输入并提交数据。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<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：输入提示。

9. 分组与语义化标签

通用容器

  • <div> ：块级容器，用于布局分区。
  • <span> ：行内容器，用于对行内元素进行样式或脚本操作。

HTML5 语义标签

这些标签让页面结构更清晰，有利于 SEO 和代码可读性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<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> ：页脚，包含版权、联系信息等。

10. 其他常用标签

注释

1
<!-- 这是一段注释，不会显示在浏览器中 -->

字符实体

在 HTML 中，某些字符需要转义才能正确显示：

实体 显示结果
&lt; <
&gt; >
&amp; &
&nbsp; 不断行空格

进度条

1
<progress value="70" max="100">70%</progress>

度量

1
<meter value="0.6" min="0" max="1" low="0.3" high="0.8" optimum="0.7">60%</meter>

可折叠内容

1
2
3
4
<details>
    <summary>点击展开更多信息</summary>
    <p>这里是详细内容，默认隐藏。</p>
</details>

脚本与样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- 内部样式 -->
<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 的最佳途径，多动手写代码吧！

相关文章

社交的

bilibili   email   YouTube

VICP-T6JGPJNE
© 2025 - 2026 lm-xiao-fen
文章内容遵循 CC BY-NC-SA 4.0 协议，源码遵循 APL 2.0 协议
源码 在GitHub开源
RSS 网站地图