本章讲解HTML中文本格式化的标签，比如您想将文本设为粗体、斜体或下划线等，请看下面的例子讲解。

字体加粗<b>...</b> 

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

示例

<!DOCTYPE html>
<html>

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

测试一下

斜体文本<i>...</i> 

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

示例

<!DOCTYPE html>
<html>

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

测试一下

带下划线的文本<u>...</u> 

<u>...</u> 元素中出现的任何内容都会带下划线显示，如下所示−

示例

<!DOCTYPE html>
<html>

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

测试一下

删除线文本<strike>...</strike>

<strike>...</strike> 元素中出现的任何内容都会带有删除线，请看下面的例子 -

示例

<!DOCTYPE html>
<html>

   <head>
      <title>删除线文本 例子</title>
   </head>
	
   <body>
      <p>以下单词使用 <strike>删除线</strike> 字体。</p>
   </body>
	
</html>

测试一下

等宽字体<tt>...</tt> 

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

示例

<!DOCTYPE html>
<html>

   <head>
      <title>等宽字体例子</title>
   </head>
	
   <body>
       <p>以下单词使用<tt>等宽</tt>字体。</p>
   </body>
	
</html>

测试一下

上标文本<sup>...</sup>

写入 <sup>... </sup>  元素的内容上标中显示；使用的字体大小与其周围的字符大小相同，但显示在其他字符上方半个字符的高度。

示例

<!DOCTYPE html>
<html>

   <head>
      <title>上标文本例子</title>
   </head>
	
   <body>
     <p>以下单词使用<sup>上标</sup>字体。</p>
   </body>
	
</html>

测试一下

下标文本<sub>...</sub>

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

示例

<!DOCTYPE html>
<html>

   <head>
      <title>下标文本例子</title>
   </head>
	
   <body>
      <p>以下单词使用<sup>下标</sup>字体。</p>
   </body>
	
</html>

测试一下

插入文本<ins>...</ins> 

<ins>...</ins> 元素中出现的任何内容均显示为插入文本。

示例

<!DOCTYPE html>
<html>

   <head>
      <title>插入文本例子</title>
   </head>
	
   <body>
      <p>我想喝<del>可乐</del> <ins>果汁</ins></p>
   </body>
	
</html>

测试一下

删除文本<del>...</del>

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

示例

<!DOCTYPE html>
<html>

   <head>
      <title>删除文本</title>
   </head>
	
   <body>
      <p>我想喝<del>可乐</del> <ins>果汁</ins></p>
   </body>
	
</html>

测试一下

较大文本<big>...</big> 

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

示例

<!DOCTYPE html>
<html>

   <head>
      <title>big标签文本</title>
   </head>
	
   <body>
       <p>以下单词使用<big>big</big>字体。</p>
   </body>
	
</html>

测试一下

较小的文本<small>...</small> 

<small>...</small> 元素的内容显示为比其周围文本的其余部分小一个字体大小，如下所示 -

示例

<!DOCTYPE html>
<html>

   <head>
      <title>Smaller标签例子</title>
   </head>

   <body>
      <p>以下单词使用<small>small</small>字体。</p>
   </body>

</html>

测试一下

对内容进行分组

<div> 和 <span> 元素允许您将多个元素分组在一起以创建页面的部分或子部分。看下面的例子: 

示例

<!DOCTYPE html>
<html>

   <head>
      <title>Div 标签例子</title>
   </head>
	
   <body>
      <div id = "menu" align = "middle" >
         <a href = "/">首页</a> | 
         <a href = "/">联系我们</a> | 
         <a href = "/">关于</a>
      </div>

      <div id = "content" align = "left" >
         <h5>标题内容</h5>
         <p>内容部分.</p>
      </div>
   </body>
	
</html>

测试一下

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

示例

<!DOCTYPE html>
<html>

   <head>
      <title>Span标签例子</title>
   </head>
	
   <body>
      <p>这是<span style = "color:green">span标签</span>的示例
         和 <span style = "color:red">div 标签</span> 以及 CSS</p>
   </body>
	
</html>

测试一下

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