HTML 提供了多种标签来格式化文本,以便更好地显示内容。以下是一些常用的 HTML 格式化标签及其用途:
常用格式化标签
粗体和斜体
<b>
: 粗体文本(不强调)<strong>
: 粗体文本(强调)<i>
: 斜体文本(不强调)<em>
: 斜体文本(强调)
html<p>这是<b>粗体</b>文本。</p> <p>这是<strong>强调的粗体</strong>文本。</p> <p>这是<i>斜体</i>文本。</p> <p>这是<em>强调的斜体</em>文本。</p>
下划线和删除线
<u>
: 下划线文本<s>
: 删除线文本<del>
: 删除的文本<ins>
: 插入的文本
html<p>这是<u>下划线</u>文本。</p> <p>这是<s>删除线</s>文本。</p> <p>这是<del>删除的</del>文本。</p> <p>这是<ins>插入的</ins>文本。</p>
上标和下标
<sup>
: 上标文本<sub>
: 下标文本
html<p>这是上标文本:x<sup>2</sup></p> <p>这是下标文本:H<sub>2</sub>O</p>
引用和缩略词
<blockquote>
: 块级引用<q>
: 行内引用<abbr>
: 缩略词<cite>
: 引用标题<code>
: 代码片段
html<blockquote>这是一个块级引用。</blockquote> <p>这是一个行内引用:<q>引用内容</q>。</p> <p>这是一个缩略词:<abbr title="HyperText Markup Language">HTML</abbr>。</p> <p>这是一个引用标题:<cite>引用标题</cite>。</p> <p>这是一个代码片段:<code>console.log('Hello, world!');</code></p>
预格式化文本
<pre>
: 预格式化文本<kbd>
: 键盘输入<samp>
: 样本输出<var>
: 变量
html<pre> 这是预格式化文本, 保留空格和换行。 </pre> <p>键盘输入:<kbd>Ctrl+C</kbd></p> <p>样本输出:<samp>输出结果</samp></p> <p>变量:<var>x</var> = <var>y</var> + 2</p>
标记和强调
<mark>
: 标记或高亮显示文本<small>
: 小号文本
html<p>这是<mark>高亮显示</mark>的文本。</p> <p>这是<small>小号</small>文本。</p>
示例
结合以上标签,可以创建复杂的格式化文本。例如:
html
<!DOCTYPE html>
<html>
<head>
<title>HTML 格式化示例</title>
</head>
<body>
<h1>格式化文本示例</h1>
<p>这是一段包含<strong>粗体</strong>、<em>斜体</em>、<u>下划线</u>和<s>删除线</s>的文本。</p>
<p>这是一个包含<abbr title="Cascading Style Sheets">CSS</abbr>缩略词的段落。</p>
<blockquote>
这是一个块级引用。
</blockquote>
<p>这是一个包含行内引用的段落:<q>这是引用内容</q>。</p>
<pre>
function hello() {
console.log('Hello, world!');
}
</pre>
<p>键盘输入示例:<kbd>Ctrl+S</kbd></p>
<p>变量示例:<var>y</var> = <var>m</var><sup>2</sup> + <var>c</var></p>
<p>样本输出示例:<samp>输出结果</samp></p>
<p>高亮示例:<mark>这是高亮文本</mark></p>
<p>小号文本示例:<small>这是小号文本</small></p>
</body>
</html>
这些标签的组合使用可以帮助您在网页中展示丰富多样的文本格式。