HTML - 文本格式化

上一页
下一页

HTML 格式是以更好的方式在网站上表示文本上下文的方式，因此用户可以轻松浏览您的网站。HTML 格式是通过使用 HTML 物理和逻辑标签完成的。在本文中，我们将重点介绍具有 HTML 格式的文本外观。

  • 物理标签：这些标签用于为文本内容提供视觉外观。
  • 逻辑标签：这些标签用于赋予文本内容的逻辑和语义意义。有一些逻辑标签用于屏幕阅读器，但这些标签的影响在 bowsers 上是可见的。

html格式有什么用？

如果没有格式化，我们的眼睛看起来就没有什么好看或舒缓的。但是 HTML 格式不仅仅是为了舒缓眼睛或使文本内容具有吸引力。几乎没有理由进行 HTML 格式设置。

  • 任何文本的 Apperacne 都可以让我们知道该关键字有多重要，就像我们加粗一些关键字来表明该关键字的重要性一样。斜体也是如此，下划线也具有重要的含义。
  • 格式化有助于搜索引擎抓取网站，以结构形式对读者和 seacrh 引擎来说都是扫描的。

HTML Formatting标签

我们可以使用 CSS 来设置 HTML 格式，但是当 HTML 提供格式化文本内容的功能时，为什么不使用它们呢？

标签 描述
<b> 此标签用于使文本加粗。
<strong> 此标签用于使文本变得重要，但这也使文本在视觉上加粗。
<i> 此标签用于使文本成为斜体。
<em> 此标签用于将文本设为斜体。
<big> 此标签用于制作较大尺寸的文本。它在 HTML5 中不支持。
<small> 此标签用于制作较小尺寸的文本。
<sup> 此标签使文本上标文本（略高于正常线）。
<sub> 此标签用于使文本下标文本（略低于正常线条）。
<ins> 此标签用于指示已添加内容。
<del> 此标签用于指示内容已删除。
<u> 此标签用于在文本上放置下划线。
<strike> 此标签用于剪切文本或删除文本。它在 HTML5 中不受支持。
<mark> 此标签用于将关键字或句子标记为黄色（背景）。
<tt> 此标签用于使文本出现在电传打字机中，在 HTML5 中不支持。

带有示例的 HTML 格式标签

我们已经介绍了可用于在 HTML 中进行格式设置的每个标签的示例。所有示例都与输出一起描述。

粗体文本

HTML <b> 标签用于使文本加粗，此标签没有逻辑方面仅用于视觉冲击。


<!DOCTYPE html>
<html>
<head>
	 <title>粗体文本示例</title>
</head>
<body>
	 <p>以下单词使用<b>粗体</b>字体。</p>
</body>
</html>
输出： 以下单词使用粗体字体。

强文本

HTML <strong> 标签用于使具有更重要的文本更强，其中的文本通常以粗体显示。


<!DOCTYPE html>
<html>
<head>
	 <title>粗体文本示例</title>
</head>
<body>
	 <p>以下单词使用<strong>粗体</strong>字体。</p>
</body>
</html>
输出 ：以下单词使用粗体字体。

斜体文本

包含在 <i>... 中的任何内容</i> 元素以斜体显示。


<!DOCTYPE html>
<html>
<head>
	 <title>斜体文本示例</title>
</head>
<body>
	 <p>以下单词使用<i>斜体</i>字体。</p>
</body>
</html>
输出： 以下单词使用斜体字体。

强调文本

它为其中包含的文本赋予语义含义，并在浏览器上以斜体呈现。


<!DOCTYPE html>
<html>
<head>
	 <title>斜体文本示例</title>
</head>
<body>
	 <p>以下单词使用<em>强调</em>字体。</p>
</body>
</html>
输出： 以下单词使用强调字体。

大文本

包含在 <big>...</big> 元素的字体大小比其周围的其余文本大一个。


<!DOCTYPE html>
<html>
<head>
	 <title>较大的文本示例</title>
</head>
<body>
	 <p>大家好，欢迎来到<big>启科普教程</big>.</p>
</body>
</html>
输出： 大家好，欢迎来到启科普教程.

小文本

包含在<small>...</small> 元素的字体大小比其周围的其余文本小一个字体。


<!DOCTYPE html>
<html>
<head>
	 <title>较小文本示例</title>
</head>
<body>
	 <p>您好，欢迎使用<small>启科普教程</small>.</p>
</body>
</html>
输出： 您好，欢迎使用启科普教程.

上标文本

包含在 <sup>...</sup> 元素用上标书写;使用的字体大小与其周围的字符大小相同，但显示高度为周围字符的一半，与文本的其余部分相比，其外观更小且略微凸起。


<!DOCTYPE html>
<html>
<head>
	 <title>上标文本示例</title>
</head>
<body>
	 <p>以下单词使用<sup>上标</sup>字体。</p>
</body>
</html>
输出： 以下单词使用上标字体。

下标文本

<sub>...</sub> 元素是用下标写的;使用的字体大小与其周围的字符相同，并显示在其他字符下方半个字符的高度。它通常用于编写化学式之类的内容，其中某些字符需要显示在常规文本行下方。


<!DOCTYPE html>
<html>
<head>
	 <title>下标文本示例</title>
</head>
<body>
	 <p>以下单词使用<sub>下标</sub>字体。 </p>
</body>
</html>
输出： 以下单词使用下标字体。

插入的文本

包含在 <ins>... 中的任何内容</ins> 元素显示为插入的文本。


<!DOCTYPE html>
<html>
<head>
	 <title>插入文本示例</title>
</head>
<body>
	 <p>我想喝<del>可乐</del><ins>葡萄酒</ins></p>
</body>
</html>
输出： 我想喝可乐葡萄酒

已删除的文本

包含在 <del>... 中的内容</del> 元素，显示为已删除的文本。


<!DOCTYPE html>
<html>
<head>
	 <title>删除的文本示例</title>
</head>
<body>
	 <p>你好，欢迎来到<del>启科普</del><ins>教程</ins></p>
</body>
</html>
输出： 你好，欢迎来到启科普教程

带下划线的文本

包含在 <u>...</u> 元素，显示带有下划线。


<!DOCTYPE html>
<html>
<head>
	 <title>下划线文本示例</title>
</head>
<body>
	 <p>以下单词使用带<u>下划线</u>的字体。</p>
</body>
</html>
输出： 以下单词使用带下划线的字体。

删除文本

包含在 <strike>... 中的内容</strike>元素以删除线显示，删除线是文本中的一条细线。


<!DOCTYPE html>
<html>
<head>
	 <title>删除文本示例</title>
</head>
<body>
	 <p>以下单词使用<strike>删除线</strike>字体。</p>
</body>
</html>
输出：以下单词使用删除线字体。

标记的文本

HTML <mark> 标签用于标记或突出显示对表示目的很重要的文本。


<!DOCTYPE html>
<html>
<head>
	 <title>标记文本示例</title>
</head>
<body>
	 <p>以下单词使用<mark>标记</mark>字体。</p>
</body>
</html>
输出： 以下单词使用标记字体。

等宽字体

包含在 <tt>... 中的任何内容</tt> 元素以等宽字体书写。大多数字体被称为可变宽度字体，因为不同的字母具有不同的宽度（例如，字母“m”比字母“i”宽）。但是，在等宽字体中，每个字母的宽度相同。


<!DOCTYPE html>
<html>
<head>
<title>等宽字体示例</title>
</head>
<body>
<p>以下单词使用<tt>等宽</tt>字体。</p>
</body>
</html>
输出： 以下单词使用等宽字体。
打印本页
上一页
下一页