📰 文章标题
📑 章节标题
这是文章内容...
--
:
--
:
--
HTML语法
最后更新于:
HTML 语法示例
基础 HTML 标签
基础结构
1<!DOCTYPE html>
2<html lang="zh-CN">
3<head>
4 <meta charset="UTF-8">
5 <title>页面标题</title>
6</head>
7<body>
8 <h1>Hello World</h1>
9 <p>这是一个段落</p>
10</body>
11</html>效果示例：
Hello World
这是一个段落
常用标签
1<!-- 文本标签 -->
2<h1>一级标题</h1>
3<h2>二级标题</h2>
4<p>段落文本</p>
5<strong>加粗文本</strong>
6<em>斜体文本</em>
7
8<!-- 链接与图片 -->
9<a href="https://example.com">链接文本</a>
10<img src="image.jpg" alt="图片描述">
11
12<!-- 列表 -->
13<ul>
14 <li>无序列表项</li>
15</ul>
16<ol>
17 <li>有序列表项</li>
18</ol>效果示例：
一级标题
二级标题
段落文本
加粗文本 斜体文本- 无序列表项 1
- 无序列表项 2
- 有序列表项 1
- 有序列表项 2
表单元素
1<form action="/submit" method="POST">
2 <label for="name">姓名：</label>
3 <input type="text" id="name" name="name">
4
5 <label for="email">邮箱：</label>
6 <input type="email" id="email" name="email">
7
8 <textarea name="message" rows="4" cols="50"></textarea>
9
10 <button type="submit">提交</button>
11</form>效果示例：
HTML 在 Markdown 中的使用
自定义样式区块
1<div style="padding: 20px; background: #f0f0f0; border-radius: 8px;">
2 <h3>自定义样式区块</h3>
3 <p>这是使用 HTML 创建的自定义样式内容</p>
4</div>效果示例：
自定义样式区块
这是使用 HTML 创建的自定义样式内容
HTML 表格
1<table border="1" cellpadding="10">
2 <tr>
3 <th>特性</th>
4 <th>Markdown</th>
5 <th>HTML</th>
6 </tr>
7 <tr>
8 <td>简洁性</td>
9 <td>✅ 简单</td>
10 <td>❌ 复杂</td>
11 </tr>
12 <tr>
13 <td>灵活性</td>
14 <td>❌ 有限</td>
15 <td>✅ 强大</td>
16 </tr>
17</table>效果示例：
| 特性 | Markdown | HTML |
|---|---|---|
| 简洁性 | ✅ 简单 | ❌ 复杂 |
| 灵活性 | ❌ 有限 | ✅ 强大 |
交互元素
1<!-- 折叠详情 -->
2<details>
3 <summary>点击展开详情</summary>
4 <p>这是隐藏的内容，点击标题可以展开或收起。</p>
5</details>
6
7<!-- 高亮标记 -->
8<mark>高亮文本</mark>
9
10<!-- 下标和上标 -->
11<p>H<sub>2</sub>O 是水的化学式</p>
12<p>E = mc<sup>2</sup></p>效果示例：
点击展开详情
这是隐藏的内容，点击标题可以展开或收起。
高亮文本
H2O 是水的化学式
E = mc2
文本对齐与样式
文本对齐
1<!-- 居中对齐 -->
2<p style="text-align: center;">居中文本</p>
3<div align="center">居中的内容</div>
4
5<!-- 左对齐 -->
6<p style="text-align: left;">左对齐文本</p>
7
8<!-- 右对齐 -->
9<p style="text-align: right;">右对齐文本</p>
10
11<!-- 两端对齐 -->
12<p style="text-align: justify;">两端对齐文本</p>效果示例：
🔵 居中对齐文本
🟢 左对齐文本（默认）
🟠 右对齐文本
🟣 两端对齐文本 - 这是一段较长的文字，用于展示两端对齐的效果，文字会均匀分布在行内。
文字样式
1<!-- 字体大小 -->
2<p style="font-size: 24px;">大号文字</p>
3<p style="font-size: 12px;">小号文字</p>
4
5<!-- 字体颜色 -->
6<p style="color: #ff0000;">红色文字</p>
7<p style="color: blue;">蓝色文字</p>
8
9<!-- 背景色 -->
10<p style="background-color: yellow;">黄色背景</p>
11
12<!-- 行高 -->
13<p style="line-height: 2;">行高加倍的文本</p>效果示例：
🔴 大号红色文字
🔵 小号蓝色文字
🟡 黄色背景文字
综合样式
1<!-- 组合样式 -->
2<p style="text-align: center; font-size: 20px; color: #333; background: #f0f0f0; padding: 10px; border-radius: 5px;">
3 居中、大号、深色文字、灰色背景、圆角
4</p>
5
6<!-- 引用样式 -->
7<blockquote style="border-left: 4px solid #ccc; padding-left: 16px; color: #666;">
8 这是一个带有样式的引用块
9</blockquote>效果示例：
🌈 居中渐变背景样式
💬 这是一个带有样式的引用块，左侧有彩色边框
语义化 HTML5 标签
页面结构
1<header>
2 <nav>导航栏</nav>
3</header>
4
5<main>
6 <article>
7 <h2>文章标题</h2>
8 <section>
9 <h3>章节标题</h3>
10 <p>内容...</p>
11 </section>
12 </article>
13 <aside>
14 <h3>侧边栏</h3>
15 <p>相关内容...</p>
16 </aside>
17</main>
18
19<footer>
20 <p>版权信息 © 2026</p>
21</footer>效果示例：
实用元素
1<!-- 进度条 -->
2<progress value="70" max="100">70%</progress>
3
4<!-- 度量衡 -->
5<meter value="0.6" min="0" max="1" low="0.3" high="0.7" optimum="0.8">60%</meter>
6
7<!-- 时间 -->
8<time datetime="2026-03-03">2026年3月3日</time>
9
10<!-- 代码 -->
11<code>console.log('Hello')</code>
12<pre>
13function example() {
14 return "短代码语法的代码块";
15}
16</pre>效果示例：
进度条： 70%
度量衡：
时间：
行内代码：console.log('Hello')
function example() {
return "短代码语法的代码块";
}
Markdown 与 HTML 对比
1# 标题
2
3**粗体** 和 *斜体*
4
5[链接](https://example.com)
6
7
8
9- 列表项 1
10- 列表项 2
11
12| 表头 1 | 表头 2 |
13|--------|--------|
14| 单元格 | 单元格 | 1<h1>标题</h1>
2
3<strong>粗体</strong> 和 <em>斜体</em>
4
5<a href="https://example.com">链接</a>
6
7<img src="image.jpg" alt="图片">
8
9<ul>
10 <li>列表项 1</li>
11 <li>列表项 2</li>
12</ul>
13
14<table>
15 <tr>
16 <th>表头 1</th>
17 <th>表头 2</th>
18 </tr>
19 <tr>
20 <td>单元格</td>
21 <td>单元格</td>
22 </tr>
23</table> 1<div style="display: flex; gap: 30px;">
2
3<div style="flex: 1; padding: 15px; background: #e8f5e9; border-radius: 8px;">
4 <h4>✅ Markdown 效果</h4>
5 <h1>标题</h1>
6 <p><strong>粗体</strong> 和 <em>斜体</em></p>
7 <p><a href="https://example.com">链接</a></p>
8 <ul>
9 <li>列表项 1</li>
10 <li>列表项 2</li>
11 </ul>
12</div>
13
14<div style="flex: 1; padding: 15px; background: #e3f2fd; border-radius: 8px;">
15 <h4>🌐 HTML 效果</h4>
16 <h1>标题</h1>
17 <p><strong>粗体</strong> 和 <em>斜体</em></p>
18 <p><a href="https://example.com">链接</a></p>
19 <ul>
20 <li>列表项 1</li>
21 <li>列表项 2</li>
22 </ul>
23</div>
24
25</div>效果对比
💡 两种语法渲染效果相同，但 Markdown 更简洁！
1<p style="text-align: center; margin-top: 15px; color: #666;">💡 两种语法渲染效果相同，但 Markdown 更简洁！</p>📡
推荐使用微信支付
推荐使用支付宝
- HTML语法 2026-03-03
- 修改目录样式 2026-03-02
- 站点监控页面配置说明 2026-03-02