上一章HTML教程请查看:html属性
如果你使用文字处理程序,你必须熟悉使文本加粗、斜体或下划线的能力,这只是10个选项中的3个,这些选项用于指示文本如何在HTML和XHTML中显示。
粗体文本
任何出现在<b>…</b>元素,以粗体显示,如下所示
例子
<!DOCTYPE html>
<html>
<head>
<title>粗体文本示例</title>
</head>
<body>
<p>下面的文本字体为<b>粗体</b> 文本</p>
</body>
</html>
斜体文本
任何出现在<i>…</i>元素以斜体显示,如下例所示
<!DOCTYPE html>
<html>
<head>
<title>斜体文本</title>
</head>
<body>
<p>下面是一个 <i>斜体文本</i> 示例.</p>
</body>
</html>
下划线
任何出现在<u>…<u>元素,用下划线显示,如下例所示
<!DOCTYPE html>
<html>
<head>
<title>下划线文本示例</title>
</head>
<body>
<p>以下文字使用<u>下划线</u>字体。</p>
</body>
</html>
删除线文本
任何出现在<strike>…<strike>元素显示为删除线,这是一条贯穿文本的细线,如下所示例子:
<!DOCTYPE html>
<html>
<head>
<title>删除线文本</title>
</head>
<body>
<p>这里的文本使用<strike>删除线</strike>字体。</p>
</body>
</html>
等宽字体
<tt>…</tt>元素的内容是用等宽字体的,大多数字体被称为可变宽度字体,因为不同的字母有不同的宽度(例如,字母“m”比字母“i”宽)。然而,在等宽字体中,每个字母都有相同的宽度。
例子
<!DOCTYPE html>
<html>
<head>
<title>等宽字体示例</title>
</head>
<body>
<p>以下文本使用<tt>等宽</tt>字体。</p>
</body>
</html>
上标文本
<sup>…</sup>元素的文本作为上标,使用的字体大小与周围的字符大小相同,但显示的高度比其他字符高一半。例子
<!DOCTYPE html>
<html>
<head>
<title>上标字体示例</title>
</head>
<body>
<p>这是一个 <sup>上标文本</sup> 示例.</p>
</body>
</html>
下标文本
<sub>…</sub>元素的内容为下标文本,使用的字体大小与周围的字符相同,但显示的高度比其他字符低一半。
例子
<!DOCTYPE html>
<html>
<head>
<title>下标文本示例</title>
</head>
<body>
<p>这是一个 <sub>下标文本</sub> 示例.</p>
</body>
</html>
插入文本
出现在<ins>…</ins>元素显示为插入的文本。
例子
<!DOCTYPE html>
<html>
<head>
<title>插入文本示例</title>
</head>
<body>
<p>我需要 <del>吃饭</del> <ins>睡觉</ins></p>
</body>
</html>
已删除文本
出现在<del>元素,显示为已删除的文本。
例子
<!DOCTYPE html>
<html>
<head>
<title>已删除文本示例</title>
</head>
<body>
<p>我需要 <del>睡觉</del> <ins>吃饭</ins></p>
</body>
</html>
大文本
<big>…</big>元素显示的字体比它周围的其他文本大一个,如下所示
例子
<!DOCTYPE html>
<html>
<head>
<title>大文本示例</title>
</head>
<body>
<p>这是一个<big>使用大文本</big> 的示例.</p>
</body>
</html>
小文本
<small>…</small>元素显示的字体比它周围的其他文本小一倍,如下所示
例子
<!DOCTYPE html>
<html>
<head>
<title>小文本示例</title>
</head>
<body>
<p>以下文本使用<small>很小文本的</small>字体。</p>
</body>
</html>
内容分组
<div>和<span>元素允许你将几个元素组合在一起来创建页面的节或子节。
例如,你可能希望将所有脚注放在<div>元素内的页面上,以指示<div>元素内的所有元素都与脚注相关。然后可以将样式附加到这个<div>元素,以便使用一组特殊的样式规则显示它们。
例子 <!DOCTYPE htm
<!DOCTYPE html>
<html>
<head>
<title>div标签示例</title>
</head>
<body>
<div id = "menu" align = "middle" >
<a href = "/index.htm">主页</a> |
<a href = "/about/contact_us.htm">联系</a> |
<a href = "/about/index.htm">关于</a>
</div>
<div id = "content" align = "left" bgcolor = "white">
<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>的例子</p>
</body>
</html>
这些标记通常与CSS一起使用,以便将样式附加到页面的某个部分。
评论前必须登录!
注册