HTML 文本格式化

时间：2024-04-05 21:13:35浏览次数：28

HTML文本格式化通常使用一系列特定的标签来改变文本的外观或结构。这些标签可以控制文本的字体、大小、颜色、对齐方式等，也可以用来标记文本的逻辑结构（如段落、标题、列表等）。除了这些基本的格式化标签，HTML还支持通过CSS（级联样式表）来更精细和灵活地控制文本的格式和样式。

参考文档：HTML 文本格式化-CJavaPy

1、标题

HTML中，文本格式化和结构化主要通过一系列标签来完成，其中标题（Headings）标签是最常用于定义文本格式的元素之一。HTML提供了六级标题标签，从 <h1> 到 <h6>，<h1> 表示最高级别的标题，而 <h6> 表示最低级别的标题。这些标题标签不仅帮助改善网页的结构和可读性，还对搜索引擎优化（SEO）至关重要，因为搜索引擎使用这些标签来识别网页上的不同部分和内容的层次结构。每个级别的标题都有默认的样式，通常是不同的大小和加粗，以显示它们的层次结构

<h1>这是一个 H1 标题</h1>
<h2>这是一个 H2 标题</h2>
<h3>这是一个 H3 标题</h3>
<h4>这是一个 H4 标题</h4>
<h5>这是一个 H5 标题</h5>
<h6>这是一个 H6 标题</h6>

2、段落与换行

HTML中，文本格式化通常涉及使用特定的标签来控制文本的显示方式。段落和换行是两个基本但非常重要的文本格式化概念。用<p>创建段落，<br>插入换行。

1）段落 (<p> 标签)

<p> 标签自带上下边距，用以区分不同的段落。
<p>这是一个段落。</p>
<p>这是另一个段落。</p>

2）换行 (<br> 标签)

<br> 标签只是简单地添加一个换行点，不添加任何额外的空间或边距，并且通常用于诗歌或地址等需要精确控制换行位置的文本。

这是文本行的开始。<br>这是新的一行，但在同一个段落内。

3、强调文本

使用<em>和<strong>强调文本。HTML中，强调文本通常使用 <em> 和 <strong> 标签来实现。这两个标签既有语义意义，也影响文本的表现形式。

<em> 标签用于表示强调文本，通常表现为斜体，用以表示文本的轻度强调。

<strong> 标签用于表示更强烈的强调，通常表现为加粗，表示文本的高度强调。

<p>This is <em>emphasized</em> text.</p>
<p>This is <strong>strongly emphasized</strong> text.</p>

4、列表

HTML 提供了两种主要的列表类型：有序列表（<ol>）和无序列表（<ul>）。两种类型都使用列表项（<li>）来定义列表中的实际项。

1）有序列表

有序列表以 <ol> 标签开始。每个列表项都放在 <li> 标签内。列表是有序的，也就是每个项目都是编号的。这适用于项目顺序很重要的列表，如食谱或待办事项列表。

<ol>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ol>

2）无序列表

无序列表以 <ul> 标签开始。像有序列表一样，每个项都放在 <li> 标签内。然而，无序列表中的项目不是编号的。使用圆点符号进行表示。这适用于项目顺序不重要的列表，如购物清单。

<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ul>

5、使用示例

<!DOCTYPE html>
<html>
<head>
<title>文本格式化示例</title>
</head>
<body>

<h1>HTML 文本格式化</h1>
<p>这是一个<em>斜体</em>和<strong>加粗</strong>的示例。</p>
<p><u>这段文本下划线</u>和<s>这段文本是删除线</s>。</p>
<p>化学水分子公式为H<sub>2</sub>O，E=mc<sup>2</sup>。</p>

<pre>
这是预格式化文本，
保留了空格和
换行符。
</pre>

<blockquote>这是一个长引用的示例，可能包含多个段落。</blockquote>
<p>这是一个<q>短引用</q>的示例。</p>

<p>使用<code>HTML</code>和<code>CSS</code>进行网页设计。</p>
<p>按<kbd>Ctrl</kbd> + <kbd>C</kbd>复制文本。</p>
<p><samp>这是计算机程序的输出。</samp></p>
<p>在JavaScript中，<var>x</var>可以作为变量。</p>

</body>
</html>