HTML - 格式设置

如果您使用文字处理程序，您必须熟悉将文本设为粗体、斜体或下划线的功能；这些只是可用于指示文本如何在 HTML 和 XHTML 中显示的十个选项中的三个。

加粗字体

<b>...</b>元素中出现的任何内容均以粗体显示，如下所示 -

例子

<!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>元素中出现的任何内容均以斜体显示，如下所示 -

例子

现场演示

<!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>元素中出现的任何内容都带下划线显示，如下所示 -

例子

现场演示

<!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>元素中出现的任何内容均以删除线显示，这是一条穿过文本的细线，如下所示 -

例子

现场演示

<!DOCTYPE html>
<html>

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

这将产生以下结果 -

等宽字体

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

例子

现场演示

<!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>元素的内容用上标书写；使用的字体大小与其周围的字符大小相同，但显示在其他字符上方半个字符的高度。

例子

现场演示

<!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>元素的内容用下标书写；使用的字体大小与其周围的字符相同，但显示在其他字符下方半个字符的高度。

例子

现场演示

<!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>元素中出现的任何内容都显示为插入文本。

例子

现场演示

<!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>元素中出现的任何内容都显示为已删除文本。

例子

现场演示

<!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>元素的内容显示的字体大小比其周围文本的其余部分大一个，如下所示 -

例子

现场演示

<!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>元素的内容显示的字体大小比其周围文本的其余部分小一个，如下所示 -

例子

现场演示

<!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>元素允许您将多个元素组合在一起以创建页面的部分或子部分。

例如，您可能希望将页面上的所有脚注放在 <div> 元素内，以指示该 <div> 元素内的所有元素都与脚注相关。然后，您可以将样式附加到此 <div> 元素，以便它们使用一组特殊的样式规则显示。

例子

现场演示

<!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" >
         <h5>Content Articles</h5>
         <p>Actual content goes here.....</p>
      </div>
   </body>
	
</html>

这将产生以下结果 -

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

例子

现场演示

<!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 一起使用，以允许您将样式附加到页面的某个部分。