格式化（Formatting）

优质

小牛编辑

136浏览

2023-12-01

如果使用文字处理程序，则必须熟悉使文本变为粗体，斜体或带下划线的能力; 这些只是十个可用选项中的三个，用于指示文本在HTML和XHTML中的显示方式。

粗体

《b》...《/b》元素中出现的任何内容都以粗体显示，如下所示 -

例子 (Example)

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

斜体文字

《i》...《/i》元素中出现的任何内容都以斜体显示，如下所示 -

例子 (Example)

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

带下划线的文字

《u》...《/u》元素中出现的任何内容都会显示下划线，如下所示 -

例子 (Example)

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

罢工文本

《strike》...《/strike》中出现的任何内容《strike》...《/strike》元素都会显示删除线，这是一条细线，如下图所示 -

例子 (Example)

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

Monospaced字体

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

例子 (Example)

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

上标文本

《sup》...《/sup》元素的内容用上标写成; 使用的字体大小与其周围的字符大小相同，但显示的字符高度高于其他字符的半个字符。

例子 (Example)

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

下标文本

《sub》...《/sub》元素的内容用下标写成; 使用的字体大小与其周围的字符相同，但在其他字符下方显示半个字符的高度。

例子 (Example)

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

插入的文字

《ins》...《/ins》元素中出现的任何内容都显示为插入的文本。

例子 (Example)

<!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>

删除文字

《del》...《/del》元素中出现的任何内容都显示为已删除的文本。

例子 (Example)

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

更大的文字

《big》...《/big》元素的内容显示的字体大小比周围文本的其余部分大，如下所示 -

例子 (Example)

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

较小的文字

《small》...《/small》元素的内容显示的字体大小小于其周围文本的其余部分，如下所示 -

例子 (Example)

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

分组内容

《div》和《span》元素允许您将多个元素组合在一起以创建页面的部分或子部分。

例如，您可能希望将所有脚注放在

元素中的页面上，以指示该元素中的所有元素都与脚注相关。然后，您可以将样式附加到此元素，以便它们使用一组特殊的样式规则显示。

例子 (Example)

<!DOCTYPE html>
<html>
   <head>
      <title>Div Tag Example</title>
   </head>
   <body>
      <div id = "menu" align = "middle" >
         <a href = "/index.htm">HOME</a> | 
         <a href = "/about/contact_us.htm">CONTACT</a> | 
         <a href = "/about/index.htm">ABOUT</a>
      </div>
      <div id = "content" align = "left" bgcolor = "white">
         <h5>Content Articles</h5>
         <p>Actual content goes here.....</p>
      </div>
   </body>
</html>

另一方面，元素只能用于对内联元素进行分组。因此，如果您要将一个句子或段落的一部分组合在一起，则可以使用元素，如下所示。

例子 (Example)

<!DOCTYPE html>
<html>
   <head>
      <title>Span Tag Example</title>
   </head>
   <body>
      <p>This is the example of <span style = "color:green">span tag</span>
         and the <span style = "color:red">div tag</span> alongwith CSS</p>
   </body>
</html>

这些标记通常与CSS一起使用，以允许您将样式附加到页面的某个部分。