HTML教程

HTML - 格式化

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

粗体文本

示例

<!DOCTYPE html>
<html>

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

Italic Text

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

Example

Live Demo

<!DOCTYPE html>
<html>

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

Underlined Text

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

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

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

Superscript Text

<sup> ... </ sup>元素的内容用上标书写；所使用的字体大小与其周围的字符相同，但是显示为比其他字符高半个字符的高度haracters.

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>

Subscript Text

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

Inserted Text

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

Deleted Text

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

Larger Text

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

Smaller Text

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

Grouping Content

<div>和<span>元素使您可以将几个元素组合在一起以创建页面的节或子节。

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

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>

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

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