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>Write Your First Paragraph in bold text.</b></p>

立即测试

输出:


Write Your First Paragraph in bold text. 

HTML <strong>标记是一个逻辑标记, 它以粗体显示内容, 并通知浏览器其逻辑重要性。如果你在<strong> ???????之间写任何东西。 </ strong>, 显示重要的文本。

请参阅以下示例:

<p><strong>This is an important content</strong>, and this is normal content</p>

立即测试

输出:


 This is an important content, and this is normal content 

<!DOCTYPE html>
<html>
<head>
	<title>formatting elements</title>
</head>
<body>
<h1>Explanation of formatting element</h1>
<p><strong>This is an important content</strong>, and this is normal content</p>
</body>
</html>

立即测试


2)斜体文字

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

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

请参阅以下示例:

<p> <i>Write Your First Paragraph in italic text.</i></p>

立即测试

输出:


 Write Your First Paragraph in italic text. 

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

请参阅以下示例:

<p><em>This is an important content</em>, which displayed in italic font.</p>

立即测试

输出:


This is an important content, which displayed in italic font.
<!DOCTYPE html>
<html>
<head>
	<title>formatting elements</title>
</head>
<body>
<h1>Explanation of italic formatting element</h1>
<p><em>This is an important content</em>, which displayed in italic font.</p>
</body>
</html>

立即测试


3)HTML标记格式

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

请参阅以下示例:

<h2>  I want to put a <mark> Mark</mark> on your face</h2>

立即测试

输出:


I want to put a Mark on your face

4)带下划线的文字

如果你在<u> ……… </ u>元素内写了任何内容, 则会在带下划线的文本中显示。

请参阅以下示例:

<p> <u>Write Your First Paragraph in underlined text.</u></p>

立即测试

输出:


 Write Your First Paragraph in underlined text. 

5)罢工文字

<strike> ………………….. </ strike>元素中写入的所有内容均带有删除线。这是一条跨越声明的细线。

请参阅以下示例:

<p> <strike>Write Your First Paragraph with strikethrough</strike>.</p>

立即测试

输出:


 Write Your First Paragraph with strikethrough. 

6)等宽字体

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

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

请参阅以下示例:

<p>Hello <tt>Write Your First Paragraph in monospaced font.</tt></p>

立即测试

输出:


Hello  Write Your First Paragraph in monospaced font. 

7)上标文字

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

请参阅以下示例:

<p>Hello <sup>Write Your First Paragraph in superscript.</sup></p>

立即测试

输出:


Hello  Write Your First Paragraph in superscript. 

8)下标文字

如果将内容放在<sub> ………….. </ sub>元素中, 则显示在下标;表示它显示为比其他字符低半个字符的高度。

请参阅以下示例:

<p>Hello <sub>Write Your First Paragraph in subscript.</sub></p>

立即测试

输出:


Hello  Write Your First Paragraph in subscript.

9)删除文字

放在<del> ………. </ del>中的所有内容都将显示为已删除的文本。

请参阅以下示例:

<p>Hello <del>Delete your first paragraph.</del></p>

立即测试

输出:


Hello 

10)插入文字

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

请参阅以下示例:

<p> <del>Delete your first paragraph.</del><ins>Write another paragraph.</ins></p>

立即测试

输出:


 Delete your first paragraph.Write another paragraph.

11)较大的文字

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

请参阅以下示例:

<p>Hello <big>Write the paragraph in larger font.</big></p>

立即测试

输出:


Hello  Write the paragraph in larger font. 

12)较小的文字

如果要使字体大小小于文本的其余部分, 则将内容放在<small> ……… </ small>标记内。它比前一种缩小了一种字体大小。

请参阅以下示例:

<p>Hello <small>Write the paragraph in smaller font.</small></p>

立即测试

输出:


Hello  Write the paragraph in smaller font.  

微信公众号
手机浏览(小程序)
0
分享到:
没有账号? 忘记密码?