学会使用各种文本标签丰富你的内容
HTML 提供六级标题,从 h1(最重要)到 h6(最不重要)。
<h1>网站主标题</h1>
<h2>章节标题</h2>
<h3>小节标题</h3>
<h4>子节标题</h4>
<h5>更小的标题</h5>
<h6>最小的标题</h6>段落标签用于包裹文本段落。浏览器会自动在段落前后添加空白。
<p>这是第一个段落。HTML 会自动处理文本的换行和空格。</p>
<p>这是第二个段落。段落之间会有默认的间距。</p><br> 是单标签,用于在段落内强制换行。
<p>
第一行文本<br>
第二行文本<br>
第三行文本
</p><hr> 创建一条水平分隔线,用于分隔内容区块。
<p>上面的内容</p>
<hr>
<p>下面的内容</p>HTML5 强调语义化,即标签应该表达内容的含义,而不仅仅是外观。
| 语义化标签 | 纯样式标签 | 效果 | 推荐使用 |
|---|---|---|---|
<strong> |
<b> |
粗体 | strong(表示重要性) |
<em> |
<i> |
斜体 | em(表示强调) |
<del> |
<s> |
del(表示已删除) |
<!-- 推荐:表示重要内容 -->
<p>请注意:<strong>截止日期是明天</strong>。</p>
<!-- 不推荐:仅表示粗体样式 -->
<p>这个词只是<b>看起来粗一点</b>。</p><!-- 推荐:表示强调 -->
<p>我<em>真的</em>很喜欢这个产品。</p>
<!-- 不推荐:仅表示斜体样式 -->
<p>书名:《<i>HTML5 权威指南</i>》</p>删除线:原价 ¥999
下划线:需要特别注意的内容
高亮标记:这是重点内容
小号文字:版权所有 © 2026
上标:x2 + y2 = z2
下标:H2O 是水的化学式
<del>已删除的内容</del>
<u>下划线文本</u>
<mark>高亮文本</mark>
<small>小号文本</small>
<sup>上标</sup>
<sub>下标</sub>某些字符在 HTML 中有特殊含义,需要使用字符实体来表示。
| 字符 | 实体名称 | 实体编号 | 说明 |
|---|---|---|---|
| |   | 不间断空格 | |
| < | < | < | 小于号 |
| > | > | > | 大于号 |
| & | & | & | 和号 |
| " | " | " | 引号 |
| © | © | © | 版权符号 |
| ® | ® | ® | 注册商标 |
| ™ | ™ | ™ | 商标符号 |
| ♥ | ♥ | ♥ | 心形符号 |
<!-- 显示 HTML 标签代码 -->
<p>使用 <p> 标签创建段落。</p>
<!-- 显示版权信息 -->
<p>版权所有 © 2026 我的公司</p>
<!-- 创建多个空格 -->
<p>这里有 三个空格。</p>用于引用大段的文本,通常会有缩进效果。
<blockquote cite="https://example.com/source">
<p>这是一段引用的文字。它可以很长,包含多个段落。</p>
<p>blockquote 会自动添加缩进样式。</p>
</blockquote>用于短引用,浏览器会自动添加引号。
<p>爱因斯坦说过:<q>想象力比知识更重要。</q></p>| 标签 | 用途 | 示例 |
|---|---|---|
<code> |
行内代码 | 使用 console.log() 输出 |
<pre> |
预格式化文本 | 保留空格和换行 |
<kbd> |
键盘输入 | 按 Ctrl + C 复制 |
<samp> |
程序输出 | Error: File not found |
<!-- 行内代码 -->
<p>使用 <code>console.log()</code> 输出信息。</p>
<!-- 代码块(保留格式) -->
<pre><code>
function hello() {
console.log("Hello, World!");
}
</code></pre>
<!-- 键盘按键 -->
<p>按 <kbd>Ctrl</kbd> + <kbd>S</kbd> 保存文件。</p>创建一个包含以下内容的 HTML 页面: