整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML 文本格式化

TML 文本格式化

加粗文本

斜体文本

电脑自动输出

这是 下标 和 上标

HTML 格式化标签

HTML 使用标签<b> 与<i> 对输出的文本进行格式, 如:粗体 or 斜体

这些HTML标签被称为格式化标签(请查看底部完整标签参考手册)。

通常标签 <strong> 替换加粗标签 <b> 来使用, <em> 替换 <i>标签使用。然而,这些标签的含义是不同的:<b> 与<i> 定义粗体或斜体文本。<strong> 或者 <em>意味着你要呈现的文本是重要的,所以要突出显示。现今所有主要浏览器都能渲染各种效果的字体。不过,未来浏览器可能会支持更好的渲染效果。

在线实例

文本格式化

此例演示如何在一个 HTML 文件中对文本进行格式化

预格式文本

此例演示如何使用 pre 标签对空行和空格进行控制。

"计算机输出"标签

此例演示不同的"计算机输出"标签的显示效果。

地址

此例演示如何在 HTML 文件中写地址。

缩写和首字母缩写

此例演示如何实现缩写或首字母缩写。

文字方向

此例演示如何改变文字的方向。

块引用

此例演示如何实现长短不一的引用语。

删除字效果和插入字效果

此例演示如何标记删除文本和插入文本。

HTML 文本格式化标签

标签描述
<b>定义粗体文本
<em>定义着重文字
<i>定义斜体字
<small>定义小号字
<strong>定义加重语气
<sub>定义下标字
<sup>定义上标字
<ins>定义插入字
<del>定义删除字

HTML "计算机输出" 标签

标签描述
<code>定义计算机代码
<kbd>定义键盘码
<samp>定义计算机代码样本
<var>定义变量
<pre>定义预格式文本

HTML 引文, 引用, 及标签定义

标签描述
<abbr>定义缩写
<address>定义地址
<bdo>定义文字方向
<blockquote>定义长的引用
<q>定义短的引用语
<cite>定义引用、引证
<dfn>定义一个定义项目。

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039,我们一起飞!

本格式标记

以下HTML标记用于格式化网页上文本的外观。这可以使网页变得更加生动,但是,文本格式的太多变化也会使人不快。

标题 - <head> </head>

head标记有6个级别可用,从h1用于最大和最重要的标题,到h6是最小的标题。

粗体 - <b> </b>

b标记之间的文本以粗体显示,与周围的文本相对突出。

斜体 - <i> </i>

i标记以一个小角度显示文本。

下划线 - <u> </u>

u标记在文本正文添加一条线,请注意,链接已经有下划线,不需要额外的标记。

删除线 - <strike> </strike>

strike标记在文本的正中间画一条线,通常用来表示文本是旧的,不再相关,删除。也可以用<s></s>代替。

预格式化文本 - <pre> </pre>

pre标记之间的任何文本,包括空格、回车符和标点符号,都将像在文本编辑器中一样显示在浏览器中(通常浏览器会忽略多个空格)

源代码 - <code> </code>

code标记之间的文本以固定宽度字体显示,通常在显示源代码时使用。

打字机文本 - <tt> </tt>

tt标记之间的文本就像是用打字机打出了一个固定宽度的文字。

Block Quote - <blockquote> </blockquote>

blockquote标记定义一个块引用,并且在块的左右添加额外的边距。

小号字 - <small> </small>

small标记让你无需设置字体大小,就可以使文本呈现比周围稍小的外观。

字体颜色 - <font color="#??????"> </font>

font标记的color属性改变几个字或一段文字的颜色。属性使用十六进制颜色代码。

字体大小 - <font size="?"> </font>

font标记的size属性改变字体的大小,值范围从1到7,1是最小,7是最大。

字体大小变化 - <font size="+/-?"> </font>

font标记的size属性还可以相对于其前面的字体大小的作即时更改,此用法将按你指定的数字增减字体大小。例如:<font size="-1">一些文本</font>

字体 - <font face="?"> </font>

font标记的face属性以指定的字体显示文本,值为字体名称,如“Helvetica”、“Arial”或“Courier”。

居中 - <center> </center>

center标记之间的所有内容都居中。

强调 - <em> </em>

em标记用于强调文本,文本通常以斜体显示,可能会根据浏览器的不同而有所不同。

着重强调 - <strong> </strong>

strong标记用于着重强调文本,通常以粗体显示,可能会根据浏览器的不同而有所不同。

例子

下面是以上标记的示例:

浏览器显示内容如下所示:

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


参考文档:https://www.cjavapy.com/article/3306/


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>


参考文档:https://www.cjavapy.com/article/3306/