HTML - 格式化( Formatting)
如果使用文字处理程序，则必须熟悉使文本变为粗体，斜体或带下划线的能力; 这些只是十个可用选项中的三个，用于指示文本在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一起使用，以允许您将样式附加到页面的某个部分。
