HTML 提供了多种标签来格式化文本,包括改变字体、颜色、大小、对齐方式、添加引用、创建代码块等。下面是一些 HTML 文本格式化的实例:
1. 标题
HTML 提供了六个级别的标题标签,从 <h1> 到 <h6>,其中 <h1> 是最大的标题,<h6> 是最小的标题。
html复制代码
|
<h1>这是一个标题 1</h1> |
|
<h2>这是一个标题 2</h2> |
|
<h3>这是一个标题 3</h3> |
|
<!-- 以此类推,直到 h6 --> |
2. 段落和对齐
使用 <p> 标签创建段落,并使用 CSS 来设置文本对齐方式。
html复制代码
|
<p style="text-align:center;">这段文本居中对齐。</p> |
|
<p style="text-align:right;">这段文本右对齐。</p> |
|
<p style="text-align:justify;">这段文本两端对齐。</p> |
3. 文本样式
使用 <span> 标签和 CSS 来改变文本的样式,如颜色、字体和大小。
html复制代码
|
<p>这是一段普通的文本。</p> |
|
<p><span style="color:red; font-family:'Arial', sans-serif; font-size:20px;">这段文本是红色的,并且使用了 Arial 字体和 20px 的大小。</span></p> |
4. 文本引用和强调
使用 <blockquote> 和 <em> 标签来引用和强调文本。
html复制代码
|
<blockquote>这是一段引用的文本。</blockquote> |
|
<p>这段文本<em>很重要</em>,需要强调。</p> |
5. 删除和插入文本
使用 <del> 和 <ins> 标签来表示已删除和已插入的文本。
html复制代码
|
<p><del>这段文本已被删除。</del></p> |
|
<p><ins>这段文本是插入的。</ins></p> |
6. 预格式化文本
使用 <pre> 标签来显示预格式化的文本,通常用于展示计算机代码。
html复制代码
|
<pre> |
|
这是预格式化的文本。 |
|
它会保持原来的空格和换行。 |
|
</pre> |
7. 列表
使用 <ul>、<ol> 和 <li> 标签来创建无序列表和有序列表。
html复制代码
|
<!-- 无序列表 --> |
|
<ul> |
|
<li>苹果</li> |
|
<li>香蕉</li> |
|
<li>橙子</li> |
|
</ul> |
|
|
|
<!-- 有序列表 --> |
|
<ol> |
|
<li>第一步</li> |
|
<li>第二步</li> |
|
<li>第三步</li> |
|
</ol> |
8. 定义列表
使用 <dl>、<dt> 和 <dd> 标签来创建定义列表。
html复制代码
|
<dl> |
|
<dt>咖啡</dt> |
|
<dd>一种受欢迎的饮品,起源于埃塞俄比亚。</dd> |
|
<dt>茶</dt> |
|
<dd>另一种流行的饮品,起源于中国。</dd> |
|
</dl> |
9. 缩写和首字母大写
使用 <abbr> 和 <acronym> 标签来定义缩写,以及使用 CSS 来实现首字母大写。
html复制代码
|
<p>HTML 的全称是 <abbr title="HyperText Markup Language">HTML</abbr>。</p> |
|
<p style="text-transform:capitalize;">这段文本中的每个单词的首字母都会大写。</p> |
以上实例展示了 HTML 中一些基本的文本格式化标签。在实际开发中,通常会结合 CSS 来实现更丰富的文本样式和布局效果。