跳到主要内容

WTF HTML极简教程: 3. 常用文本标签

WTF HTML教程,帮助新人快速入门HTML。

推特@WTFAcademy_@0xAA_Science

WTF Academy社群: 官网 wtf.academy | WTF Solidity教程 | discord | 微信群申请

所有代码和教程开源在github: github.com/WTFAcademy/WTF-HTML


HTML 提供了大量的文本标签,以供我们在制作网页时使用。这些标签可以帮助我们更好地组织和格式化我们的文本内容。以下是一些常用的 HTML 文本标签。

<p>:段落标签

<p> 标签用于定义一个段落。它会在前后各添加一个换行,使得段落之间有明显的区分。

<p>这是一个段落。</p>
<p>这是另一个段落。</p>

浏览器中效果:

这是一个段落。

这是另一个段落。

<h1><h6>:标题标签

这些标签用于定义 HTML 标题。<h1> 定义最大的标题,<h6> 定义最小的标题。

<h1>这是一个 h1 标题</h1>
<h2>这是一个 h2 标题</h2>
...
<h6>这是一个 h6 标题</h6>

浏览器中效果:

这是一个 h1 标题

这是一个 h2 标题

...
这是一个 h6 标题

<br>:换行标签

<br> 标签用于插入一个简单的换行符。

<p>这是一个段落。<br/>这是同一个段落的新一行。</p>

浏览器中效果:

这是一个段落。
这是同一个段落的新一行。

<strong>:加粗标签

<strong> 标签用于定义强调文字,浏览器通常会将其显示为粗体。

<p>这是一个<strong>加粗</strong>的文字。</p>

浏览器中效果:

这是一个加粗的文字。

<em>:斜体标签

<em> 标签用于定义强调文字,浏览器通常会将其显示为斜体。

<p>这是一个<em>斜体</em>的文字。</p>

浏览器中效果:

这是一个斜体的文字。

<u>:下划线标签

<u> 标签用于定义下划线文本。

<p>这是一个<u>带下划线</u>的文字。</p>

浏览器中效果:

这是一个带下划线的文字。

<del>:删除线标签

<del> 标签用于展示已经被删除的文字,浏览器通常会在其上添加一条横线。

<p>这是一个<del>已删除</del>的文字。</p>

浏览器中效果:

这是一个已删除的文字。

<mark>:高亮标签

<mark> 标签用于定义标记或高亮的文本。

<p>这是一个<mark>高亮</mark>的文字。</p>

浏览器中效果:

这是一个高亮的文字。

<sub><sup>:下标和上标标签

<sub> 用于定义下标文本,<sup> 用于定义上标文本。

<p>这是一个<sub>下标</sub><sup>上标</sup>的例子。</p>

浏览器中效果:

这是一个下标上标的例子。

总结

这一讲我们介绍了一些常用的 HTML 文本标签,合理使用这些标签可以帮助我们更好地组织和展示我们的网页内容。