17站长网 网站首页 编程教程 Html教程 查看内容

HTML 格式

html格式作用

html格式是对文本进行格式化以提高外观的过程。 HTML使我们无需使用css即可格式化文本。 HTML中有许多格式标签。这些标签用于使文本加粗,斜体或带下划线。在HTML和XHTML中,几乎有14种可用的文本显示方式。

在HTML中,格式标签分为两类:

物理标签:这些标签用于为文本提供视觉外观。逻辑标签:这些标签用于在文本中添加一些逻辑或语义值。

注意:注意:有些物理和逻辑标签可能具有相同的视觉外观,但语义上会有所不同。

在这里,我们将学习14个HTML格式标签。以下是HTML格式文本的列表。

元素名称说明
<b>这是一个物理标签,用于加粗在它们之间写入的文本。
<strong>这是一个逻辑标签,它告诉浏览器文本很重要。
<i>这是一个物理标签,用于使文本变为斜体。
<em>这是一个逻辑标签,用于以斜体显示内容。
<mark>此标签用于突出显示文本。
<u>此标签用于在其间写的文本下划线。
<tt>此标签用于在电传打字机中显示文本。 (HTML5不支持)
<strike>此标签用于在文本的一部分上绘制删除线。 (HTML5不支持)
<sup>它显示的内容略高于正常行。
<sub>它显示的内容略低于正常线。
<del>此标签用于显示已删除的内容。
<ins>此标签显示添加的内容
<big>此标签用于将字体大小增加一个常规单位。
<small>此标签用于将字体大小从基本字体大小减小一个单位。


1)粗体

HTML <b>和<strong>格式设置元素

HTML <b>元素是一个物理标签,以粗体显示文本,没有任何逻辑上的重要性。如果您在<b> ............ </b>元素内写任何东西,则会以粗体显示。

请参见以下示例:

<p> <b>用粗体字写您的第一段。</b></p>

输出:

用粗体字写第一个段落。

HTML <strong>标签是一个逻辑标签,如果您在<strong>......</strong>之间写任何东西,它以粗体显示内容,并告知浏览器其逻辑重要性。

请参见以下示例:

<p><strong>这是重要内容</strong>,这是正常内容</p>

输出:

这是重要的内容 ,这是正常的内容

示例

<!DOCTYPE html>
<html>
<head>
<title>格式元素</title>
</head>
<body>
<h1>格式化元素的说明</h1>
<p><strong>这是重要内容</strong>,这是正常内容</p>
</body>
</html>

2)斜体文本

HTML <i>和<em>格式设置元素

HTML <i>元素是物理元素,它以斜体显示附带的内容,没有任何附加的重要性。如果您在<i> ........ </i>元素内编写任何内容,则会以斜体字母显示。

请参见以下示例:

<p><i>用斜体字写第一段。</i></p>

输出:

用斜体字写第一个段落。

HTML <em>标签是一个逻辑元素,它将以斜体显示附带的内容,并增加了语义的重要性。

请参见以下示例:

<p><em>这是重要内容</em>,以斜体显示。</p>

输出:

这是重要的内容,以斜体显示。

示例

<!DOCTYPE html>
<html>
<head>
<title>格式元素</title>
</head>
<body>
<h1>斜体格式元素的说明</h1>
<p><em>这是重要内容</em>,以斜体显示。</p>
</body>
</html>

3)HTML标签格式

如果要标签或突出显示文本,则应将内容写在<mark> ......</mark>之内。

请参见以下示例:

<h2> 我要在您的脸上贴上<mark>标签</mark> </h2>

输出:

我要在您的脸上贴上 标签

4)带下划线的文本

如果您在<u>.........</u>元素内编写任何内容,则会以带下划线的文本显示

请参见以下示例:

<p> <u>在带下划线的文本中写上您的第一段。</u></p>

输出:

在带下划线的文本中写上您的第一段。

5)带删除线文字

<strike>............</strike>内写的任何内容。元素显示为删除线。这是一条穿过语句的细线。

请参见以下示例:

<p> <strike>用带下划线的文字写您的第一段。</strike>.</p>

输出:

用带下划线的文字写您的第一段。

6)等宽字体

如果您希望每个字母/汉字都具有相同的宽度,则应将内容写在<tt>.....</tt>之中元素。

注意:我们知道大多数字体都称为可变宽度字体,因为不同的字母具有不同的宽度。 (例如:" w"比" i"宽)。等宽字体在每个字母之间提供相似的空格。

请参见以下示例:

<p>你好 <tt>用等宽字体写您的第一段。</tt></p>

输出:

你好用等宽字体写第一个段落。

7)上标文本

如果将内容放在<sup>..............</sup>元素内,表示它显示为比其他字符高半个字符。

请参见以下示例:

<p>你好<sup>用上标写出第一段。</sup></p>

输出:

你好用上标写出第一段。

8)下标文本

如果将内容放在<sub>.............. </sub>元素内,表示它显示为比其他字符低半个字符。

请参见以下示例:

<p>你好<sub>用下标写你的第一段。</sub></p>

输出:

你好用下标写你的第一段。

9)删除的文本

<del>.......... </del>中的所有内容均显示为删除的文本。

请参见以下示例:

<p>您好, <del>请删除段落。</del></p>

输出:

您好,请删除段落。

10)插入的文本

放在<ins> .......... </ins>中的所有内容都显示为插入的文本。

请参见以下示例:

<p> <del>删除第一段。</del><ins>写另一段。</ins></p>

输出:

删除第一段。 写另一段。

11)较大的文本

如果您要使字体大小大于其余文本,则将内容放在<big> ........ </big>。它增加一种字体大小,比上一种字体大。

请参见以下示例:

<p>你好<big>用较大的字体编写段落。</big></p>

输出:

你好用较大的字体编写段落。

12)较小的文本

如果您要使字体大小小于其余文本,则将内容放在<small>....... </small>标签。它比上一个缩小了一种字体大小。

请参见以下示例:

<p>你好<small>用较小的字体编写段落。</small></p>

输出:

你好用较小的字体编写段落。

返回顶部