开发学习网HTML Formatting
原创HTML格式化
HTML格式化定义了网页上内容呈现的方式，以提高可读性、赋予语义意义并改善视觉样式。
HTML格式化是通过使用HTML物理和逻辑标签来完成的。在本章中，我们将学习HTML格式化对文本外观的影响。
让我们了解什么是物理和逻辑标签：
- 物理标签：这些标签用于为文本内容提供视觉外观。
- 逻辑标签：这些标签用于为文本内容提供逻辑和语义意义。有一些逻辑标签用于屏幕阅读器，但这些标签的影响在浏览器中也是可见的。
HTML格式化的用途
没有格式化，任何内容看起来都不美观或令人赏心悦目。但HTML格式化不仅仅是为了美观或使文本内容更具吸引力。进行HTML格式化有几个原因。
HTML格式化在许多方面都很有用：
- 任何文本的外观都能清晰展示内容的意图，例如突出关键词、将有意义的信息放在引号中、为主要句子加下划线等。
- 格式化有助于搜索引擎理解内容结构，也有助于搜索引擎优化。
- 格式化改善了视觉布局并提高了内容的可读性。
HTML格式化标签
下表列出了用于文本格式化的常见HTML格式化标签：
| 标签 | 描述 | 类别 |
|---|---|---|
| <b> | 此标签用于使文本加粗。 | 物理标签 |
| <i> | 此标签用于使文本斜体。 | 物理标签 |
| <big> | 此标签用于使文本变大。HTML5不支持此标签。 | 物理标签 |
| <small> | 此标签用于使文本变小。 | 物理标签 |
| <u> | 此标签用于为文本添加下划线。 | 物理标签 |
| <strike> | 此标签用于为文本添加删除线。HTML5不支持此标签。 | 物理标签 |
| <tt> | 此标签用于使文本以等宽字体显示。HTML5不支持此标签。 | 物理标签 |
| <strong> | 此标签用于使文本加粗并赋予其语义重要性。 | 逻辑标签 |
| <em> | 此标签用于使文本斜体并赋予其语义强调。 | 逻辑标签 |
| <sup> | 此标签用于创建上标文本（略高于正常行）。 | 其他标签 |
| <sub> | 此标签用于创建下标文本（略低于正常行）。 | 其他标签 |
| <ins> | 此标签用于指示内容已被添加（通常带下划线）。 | 其他标签 |
| <del> | 此标签用于指示内容已被删除（通常带删除线）。 | 其他标签 |
| <mark> | 此标签用于用黄色背景突出显示文本。 | 其他标签 |
HTML格式化标签示例
以下是每种格式化标签的详细说明及其示例：
加粗文本
HTML <b>标签用于使文本加粗；此标签没有逻辑方面，仅用于视觉效果。
示例
此示例演示了使用<b>标签使文本格式加粗：
<!DOCTYPE html> <html> <head> <title>加粗文本示例</title> </head> <body> <p>以下单词使用了<b>加粗</b>字体。</p> </body> </html>
输出：
以下单词使用了加粗字体。
重要文本
HTML <strong>标签用于使文本变得更重要，其中的文本通常以粗体显示。
注意：<b>标签仅用于样式目的使文本加粗，而<strong>标签使文本加粗，同时也为其内容添加了重要性。
示例
此示例演示了使用<strong>标签显示重要文本：
<!DOCTYPE html> <html> <head> <title>重要文本示例</title> </head> <body> <p>以下单词使用了<strong>重要</strong>字体。</p> </body> </html>
输出：
以下单词使用了重要字体。
斜体文本
任何包含在<i>...</i>元素中的内容都会以斜体显示。
示例
此示例演示了使用<i>标签使文本斜体：
<!DOCTYPE html> <html> <head> <title>斜体文本示例</title> </head> <body> <p>以下单词使用了<i>斜体</i>字体。</p> </body> </html>
输出：
以下单词使用了斜体字体。
强调文本
HTML <em>标签赋予其包含的文本语义意义，并在浏览器中以斜体呈现。
示例
此示例演示了使用<em>标签强调文本：
<!DOCTYPE html> <html> <head> <title>强调文本示例</title> </head> <body> <p>以下单词使用了<em>强调</em>字体。</p> </body> </html>
输出：
以下单词使用了强调字体。
大文本
任何包含在<big>...</big>元素中的内容都会比周围文本的字体大小大一号。
示例
此示例演示了使用<big>标签使文本比周围文本更大：
<!DOCTYPE html> <html> <head> <title>大文本示例</title> </head> <body> <p>欢迎来到<big>教程点</big>。</p> </body> </html>
输出：
欢迎来到教程点。
小文本
包含在<small>...</small>元素中的内容会比周围文本的字体大小小一号。
示例
此示例演示了使用<small>标签使文本比周围文本更小：
<!DOCTYPE html> <html> <head> <title>小文本示例</title> </head> <body> <p>欢迎来到<small>教程点</small>。</p> </body> </html>
输出：
欢迎来到教程点。
上标文本
任何包含在<sup>...</sup>元素中的内容都会以上标形式书写；使用的字体大小与周围字符相同，但显示在周围字符高度的一半处，使其比其他文本更小且略微升高。
示例
此示例演示了使用<sup>标签使文本略高于正常文本：
<!DOCTYPE html> <html> <head> <title>上标文本示例</title> </head> <body> <p>以下单词使用了<sup>上标</sup>字体。</p> </body> </html>
输出：
以下单词使用了上标字体。
下标文本
任何<sub>...</sub>元素的内容都会以下标形式书写；使用的字体大小与周围字符相同，并显示在其他字符高度的一半以下。通常用于书写化学公式等，其中某些字符需要显示在常规文本行下方。
示例
此示例演示了使用<sub>标签使文本略低于正常文本：
<!DOCTYPE html> <html> <head> <title>下标文本示例</title> </head> <body> <p>以下单词使用了<sub>下标</sub>字体。</p> </body> </html>
输出：
以下单词使用了下标字体。
插入文本
任何包含在<ins>...</ins>元素中的内容都会显示为已插入的文本。
示例
此示例演示了使用<ins>标签标记已插入的文本：
<!DOCTYPE html> <html> <head> <title>插入文本示例</title> </head> <body> <p>我想喝<del>可乐</del> <ins>葡萄酒</ins></p> </body> </html>
输出：
我想喝可乐葡萄酒
删除文本
包含在<del>...</del>元素中的内容会显示为已删除的文本。
示例
此示例演示了使用<del>标签标记已删除的文本：
<!DOCTYPE html> <html> <head> <title>删除文本示例</title> </head> <body> <p>欢迎来到<del>马德拉斯</del> <ins>金奈</ins></p> </body> </html>
输出：
欢迎来到马德拉斯金奈
下划线文本
任何包含在<u>...</u>元素中的内容都会显示带下划线。
示例
此示例演示了使用<u>标签创建下划线文本：
<!DOCTYPE html> <html> <head> <title>下划线文本示例</title> </head> <body> <p>以下单词使用了<u>下划线</u>字体。</p> </body> </html>
输出：
以下单词使用了下划线字体。
删除线文本
包含在<strike>...</strike>元素中的内容会显示带删除线，即文本中间有一条细线。
示例
此示例演示了使用<strike>标签显示删除线文本：
<!DOCTYPE html> <html> <head> <title>删除线文本示例</title> </head> <body> <p>以下单词使用了<strike>删除线</strike>字体。</p> </body> </html>
输出：
以下单词使用了删除线字体。
标记文本
HTML <mark>标签用于标记或突出显示对标注目的重要的文本。
示例
此示例演示了使用<mark>标签创建标记文本：
<!DOCTYPE html> <html> <head> <title>标记文本示例</title> </head> <body> <p>以下单词使用了<mark>标记</mark>字体。</p> </body> </html>
输出：
以下单词使用了标记字体。
等宽字体文本
任何包含在<tt>...</tt>元素中的内容都会以等宽字体书写。大多数字体被称为等宽字体，因为不同字母的宽度不同（例如，字母"m"比字母"i"宽）。然而，在等宽字体中，每个字母具有相同的宽度。
示例
此示例演示了使用<tt>标签创建电传打字机文本：
<!DOCTYPE html> <html> <head> <title>等宽字体示例</title> </head> <body> <p>以下单词使用了<tt>等宽</tt>字体。</p> </body> </html>
输出：
以下单词使用了等宽字体。
版权声明
本文仅代表作者观点，不代表本站立场。
本文系作者授权本站发表，未经许可，不得转载。
作者文章
- CSS 使用CSS数学函数 4个月前 (08-23)
- CSS Textual data types 4个月前 (08-23)
- CSS 数字数据类型 4个月前 (08-23)
- CSS CSS 属性值定义语法 4个月前 (08-23)
- CSS 使用 CSS 过渡 4个月前 (08-23)