您的位置:首页> 前端教程> HTML教程
文章导航

HTML 文本格式化元素

2018-9-12 10:24| 作者: admin| 查看: 707| 评论: 0|来自: 蚂蚁部落

文本格式化元素,就是通过标签自身的天然属性给文本一定的格式化效果。

一.加粗效果:

使用<b>和<strong>标签可以使文本加粗,起到强调作用。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
</head>
<body>
  <p>蚂蚁部落一</p>
  <b>蚂蚁部落二</b><br />
  <strong>蚂蚁部落三</strong>
</body>
</html>

虽然<b>标签和<strong>标签都有相同的加粗效果,但是在实际开发过程中,通常推荐使用<strong>标签。

<strong>比<b>更加具有语义性,对网站优化也有一定的效果。

二.文本斜体效果:

<i>、<cite>和<em>三个标签可以实现文本的斜体效果。

在实际开发中推荐使用<em>标签。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
</head>
<body>
  <i>蚂蚁部落一</i><br />
  <cite>蚂蚁部落二</cite><br />
  <em>蚂蚁部落三</em>
</body>
</html>

三.上标/下标效果:

使用<sup>标签可以实现上标效果。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
</head>
<body>
<p>(a+b)<sup>2</sup>=a<sup>2</sup>+b<sup>2</sup>+2ab</p>
</body>
</html>

使用<sub>标签可以实现下标效果。

代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
</head>
<body>
  <p>SO<sub>2</sub></p>
</body>
</html>

四.大号和小号字体:

通过<big>和<small>标签可以设置文本大号字体和小号字体。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
</head>
<body>
  <p>蚂蚁部落一 </p>
  <big>蚂蚁部落二</big><br />
  <small>蚂蚁部落三</small>
</body>
</html>

实际应用中很少使用这两个标签,而是推荐使用CSS font-size属性精准控制。

五.删除线效果:

通过<s>标签可以给文本添加一条贯穿的删除线。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
</head>
<body>
  <p>JavaScript权威指南</p>
  <p><s>原价:100¥</s></p>
  <p><strong>现在仅售:68¥</strong></p>
</body>
</html>

不过还是推荐使用css实现,text-decoration: line-through也可以实现。

六.下划线效果:

使用<u>标签可以实现下划线效果。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
</head>
<body>
  <p>蚂蚁部落一 </p>
  <u>蚂蚁部落二</u>
</body>
</html>

鲜花

握手

雷人

路过

鸡蛋
上一篇:HTML p元素下一篇:HTML <hr>水平线标签

最新评论

返回顶部