Html 简明教程

HTML - Formatting

HTML 格式化是以更好的方式表示网站文本环境的方法，因此用户可以轻松地浏览你的网站。HTML 格式化通过使用 HTML 物理和逻辑标签完成。在本文中，我们将重点关注 HTML 格式化的文本外观。

HTML Formatting is the way of representing textual context on the website in a better way, so the user can easily navigate through your website. HTML Formatting are done by using HTML physical and logical tags. Here in this article we will focus on the text appearance with HTML formatting.

  1. Physical Tag: These tags are used to give the visual appearance to the the textual content.

  2. Logical Tag: These tags are used to give the logical & semantic meaning to the the textual content. There are a few logical tags which are used for screen readers, but the impact of those tags are visible on the bowsers.

What is the use of html formatting?

没有格式，一切看起来都不美观或让人赏心悦目。但 HTML 格式化不仅仅是为了赏心悦目或使文本内容具有吸引力。进行 HTML 格式化的原因有几个。

Without formatting nothing looks good or soothing to our eyes. But HTML Formatting is not only for soothing to the eye or make textual content attarctive. There are few reason to do the HTML Formatting.

  1. Apperacne of any text can gives us the idea that how important is that keyword is, like if we bold some keyword that indicate the importance of that keyword. Same goes with italic, underline each one of them carry an important meaning as well.

  2. Formatting helps search engines to crawl the website, in a structure form things are scanbale to the readers as well as seacrh engines.

HTML Formatting Tags

我们可以使用 * CSS* 来完成 HTML 格式化，但是当 HTML 提供格式化文本内容的功能时，为何不使用它们？

We can use CSS to do the HTML formatting, but when HTML is providing the feature to format the textual content, then why not to use them.

Tag

Description

<b>

This physical tag is used to make the text bold.

<strong>

This logical tag is used to make the text important, but this also make the text bold visually.

<i>

This physical tag is used to make the text italic.

<em>

This logical tag is used to make the text italic.

<big>

This physical tag is used to make the bigger size text. It is not supported in HTML5.

<small>

This physical tag is used to make the smaller size text.

<sup>

This tag is used to make the text superscript text(Slightly above the normal line).

<sub>

This tag is used to make the text subscript text(Slightly below the normal line).

<ins>

This tag is used to indicate that the content is added.

<del>

This tag is used to indicate that the content is deleted.

<u>

This tag is used to put an underline on the text.

<strike>

This tag is use to cut the lines or strike on text. It is not supported in HTML5.

<mark>

This tag is used to mark the keyword or sentence in yellow color(background).

<tt>

This tag is used to make the text appeared in teletype, and it is not supported in HTML5.

HTML Formatting Tags with Example

我们已介绍了可用于在 HTML 中进行格式化的每个标签的示例。所有示例均在下面进行了描述，并给出了输出。

We have covered examples of each tags that can be used to do formatting in HTML. All the examples are described bellow with the output.

Bold Text

HTML <b> 标签用于使文本变为粗体，此标签没有逻辑方面的意义，仅用于视觉效果。

HTML <b> tag is used for making the text bold, there is no logical aspect of this tag only used for visual impact.

<!DOCTYPE html>
<html>
<head>
   <title>Bold Text Example</title>
</head>
<body>
   <p>The following word uses a <b>bold</b> typeface.</p>
</body>
</html>
The following word uses a bold typeface.

Strong Text

HTML <strong> 标签用于使文本变为有更重要意义的粗体，且标签内的文本通常会以粗体显示。

HTML <strong> tag is used for making the text strong that has more importance and the text inside it is typically displayed in the bold.

<!DOCTYPE html>
<html>
<head>
   <title>Bold Text Example</title>
</head>
<body>
   <p>The following word uses a <strong>strong</strong> typeface.</p>
</body>
</html>
The following word uses a strong typeface.

Italic Text

<i>…​</i> 元素中包含的任何内容都会以斜体显示。

Any content that is enclosed within <i>…​</i> element is displayed in italicized.

<!DOCTYPE html>
<html>
<head>
   <title>Italic Text Example</title>
</head>
<body>
   <p>The following word uses a <i>italicized</i> typeface.</p>
</body>
</html>
The following word uses a italicized typeface.

Emphasized Text

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

It gives semantic meaning to the text contained within it and renders it in italics on the browser.

<!DOCTYPE html>
<html>
<head>
   <title>Italic Text Example</title>
</head>
<body>
   <p>The following word uses a <em>emphasized</em> typeface.</p>
</body>
</html>
The following word uses a emphasized typeface.

Big Text

<big>…​</big> 元素中包含的任何内容都会显示为比其周围的文本大一号字体。

Any content which is enclosed within <big>…​</big> element is displayed one font size larger than the rest of the text surrounding it.

<!DOCTYPE html>
<html>
<head>
   <title>Larger Text Example</title>
</head>
<body>
   <p>Hello Welcome to <big>Tutorialspoint</big>.</p>
</body>
</html>
Hello Welcome to Tutorialspoint.

Small Text

<small>…​</small> 元素中包含的内容会显示为比其周围的文本小一号字体。

The content which is enclosed within <small>…​</small> element is displayed one font size smaller than the rest of the text surrounding it.

<!DOCTYPE html>
<html>
<head>
   <title>Smaller Text Example</title>
</head>
<body>
   <p>Hello Welcome to <small>Tutorialspoint</small>.</p>
</body>
</html>
Hello Welcome to Tutorialspoint.

Superscript Text

包含在 <sup>…​</sup> 元素中的任何内容都将以上角标形式书写；所使用的字体大小与周围的字符相同，但以周围字符一半的高度显示，与文本的其余部分相比，它具有更小且略微凸起的外观。

Any content enclosed within <sup>…​</sup> element is written in superscript; the font size used is the same size as the characters surrounding it but is displayed at half the height of the surrounding characters, giving it a smaller and slightly raised appearance compared to the rest of the text.

<!DOCTYPE html>
<html>
<head>
   <title>Superscript Text Example</title>
</head>
<body>
   <p>The following word uses a <sup>superscript</sup> typeface. </p>
</body>
</html>
The following word uses a superscript typeface.

Subscript Text

<sub>…​</sub> 元素中的任何内容都将以下标形式书写；所使用的字体大小与周围的字符相同，并显示在其他字符下方半字符的高度处。它通常用于编写化学公式之类的内容，其中某些字符需要显示在常规文本行下方。

Any content of a <sub>…​</sub> element is written in subscript; the font size used is the same as the characters surrounding it and is displayed half a character’s height beneath the other characters. It is typically used for writing things like chemical formulas, where certain characters need to be displayed below the regular text line.

<!DOCTYPE html>
<html>
<head>
   <title>Subscript Text Example</title>
</head>
<body>
   <p>The following word uses a <sub>subscript</sub> typeface. </p>
</body>
</html>
The following word uses a subscript typeface.

Inserted Text

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

Any content that is enclosed within <ins>…​</ins> element is displayed as inserted text.

<!DOCTYPE html>
<html>
<head>
   <title>Inserted Text Example</title>
</head>
<body>
   <p>I want to drink <del>cola</del> <ins>wine</ins></p>
</body>
</html>
I want to drink cola wine

Deleted Text

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

Content that is enclosed within <del>…​</del> element, is displayed as deleted text.

<!DOCTYPE html>
<html>
<head>
   <title>Deleted Text Example</title>
</head>
<body>
   <p>Hello welcome to <del>Madras</del> <ins>Chennai</ins></p>
</body>
</html>
Hello welcome to Madras Chennai

Underlined Text

包含在 <u>…​</u> 元素中的任何内容都将以带下划线的方式显示。

Any content enclosed within <u>…​</u> element, is displayed with underline.

<!DOCTYPE html>
<html>
<head>
   <title>Underlined Text Example</title>
</head>
<body>
   <p>The following word uses a <u>underlined</u> typeface.</p>
</body>
</html>
The following word uses a underlined typeface.

Strike Text

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

Content that is enclosed within <strike>…​</strike> element is displayed with strikethrough, which is a thin line through the text.

<!DOCTYPE html>
<html>
<head>
   <title>Strike Text Example</title>
</head>
<body>
   <p>The following word uses a <strike>strikethrough</strike> typeface.</p>
</body>
</html>
The following word uses a strikethrough typeface.

Marked Text

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

HTML <mark> tag is used to mark or highlight text that is important for notation purposes.

<!DOCTYPE html>
<html>
<head>
   <title>Strike Text Example</title>
</head>
<body>
   <p>The following word uses a <mark>strikethrough</mark> typeface.</p>
</body>
</html>
The following word uses a marked typeface.

Monospaced Font

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

Any content enclosed within <tt>…​</tt> element is written in monospaced font. Most of the fonts are known as variable-width fonts because different letters are of different widths (for example, the letter 'm' is wider than the letter 'i'). In a monospaced font, however, each letter has the same width.

<!DOCTYPE html>
<html>
<head>
   <title>Monospaced Font Example</title>
</head>
<body>
   <p>The following word uses a <tt>monospaced</tt> typeface.</p>
</body>
</html>
The following word uses a monospaced typeface.