如何使HTML文本格式化、详细操作教程点我查看

某些HTML标记除了具有一定的含义(含义)外,还具有默认样式,如<b>(粗体)、<em>(倾斜)等。 这些标签允许您在不通过CSS的情况下定义网页中内容的样式。 许多具有这些含义和默认样式的标签是用于文本的。 这些标签允许您格式化(添加样式)文本,如加粗、倾斜和加下划线文本。

HTML 中有许多用来格式化文本的标签,如下表所示:

标签 描述
<b>…</b> 加粗标签中的字体
<em>…</em> 强调标签中的内容,并使标签中的字体倾斜
<i>…</i> 定义标签中的字体为斜体
<small>…</small> 定义标签中的字体为小号字体
<strong>…</strong> 强调标签中的内容,并将字体加粗
<sub>…</sub> 定义下标文本
<sup>…</sup> 定义上标文本
<ins>…</ins> 定义文档的其余部分之外的插入文本
<del>…</del> 在文本内容上添加删除线
<code>…</code> 定义一段代码
<kbd>…</kbd> 用来表示文本是通过键盘输入的
<samp>…</samp> 定义程序的样本
<var>…</var> 定义变量
<pre>…</pre> 定义预格式化的文本,被该标签包裹的文本会保留所有的空格和换行符,字体也会呈现为等宽字体
<abbr>…</abbr> 用来表示标签中的内容为缩写形式
<address>…</address> 用来定义文档作者的联系信息,被该标签包裹的文本通常会以斜体呈现,并在文本前面换行
<bdo>…</bdo> 定义标签中的文字方向
<blockquote>…</blockquote> 定义一段引用的文本,例如名人名言,文本会换行输出,并在左右两边进行缩进
<q>…</q> 定义一段短的引用,浏览器会将引用的内容使用双引号包裹起来
<cite>…</cite> 表示对某个文献的引用,例如书籍或杂志的名称,文本会以斜体显示
<dfn>…</dfn> 用来定义一个术语,标签中的文本会以斜体呈现

按照作用的不同,可以将这些用来格式化文本的标签分为两类:

  • 物理标签:这类标签用来为设置文本的外观;
  • 逻辑标签:这类标签用来赋予文本一些逻辑或语义值。

通过上表可以看出,有些标签的呈现效果虽然相同,但语义却不同,例如<strong><b>标签、<em><i>标签,下面就来详细介绍一下。

<strong>和<b>标签之间的区别

默认情况下,<strong><b>标签都可以使文本以粗体展示标签中的文本,但是<strong>标签的语义是标签中的内容具有很高的重要性,而<b>标签的语义仅仅是加粗文本以引起读者的注意,并没有特殊的意思。

示例代码如下所示:

  1. <!DOCTYPE html>
  2. <html lang=“en”>
  3. <head>
  4. <meta charset=“UTF-8”>
  5. <title>&lt;strong&gt;&lt;b&gt;标签演示</title>
  6. </head>
  7. <body>
  8. <p>当您决定使用C语言中文网,您已经超越了 <strong>90%</strong> 的程序员,请记住网址 <b>http://c.biancheng.net/</b></p>
  9. </body>
  10. </html>

此处给90%添加 <strong> 标签是为了强调C语言中文网的重要性,以及它带来的震撼效果;而给网址添加 <b> 标签仅仅是为了视觉上的加粗效果,这样能引起读者的注意。

运行结果如下图所示:

1-21092R05513Q1
图1:<strong> 和 <b> 标签示例

<em>和<i>标记之间的区别

同样,<em><i>标签默认情况下均以斜体显示标签中的文本,但是<em>标签具有强调的语义,用来表示标签中的内容很重要,而<i>标签仅仅用于定义斜体文本。

示例代码如下:

  1. <!DOCTYPE html>
  2. <html lang=“en”>
  3. <head>
  4. <meta charset=“UTF-8”>
  5. <title>&lt;em&gt;&lt;i&gt;标签演示</title>
  6. </head>
  7. <body>
  8. <p>当您决定使用C语言中文网,您已经超越了 <em>90%</em> 的程序员,请记住网址 <i>http://c.biancheng.net/</i></p>
  9. </body>
  10. </html>

同上例一样,给90%添加 <em> 标签是为了强调C语言中文网带来的震撼效果,而给网址添加 <i> 标签仅仅是为了引起读者的注意。

运行结果如下图所示:

1-21092R10120Q7
图2:<em> 和 <i> 标签示例

根据 HTML5 的规范,标题应该用<h1>~<h6>标签定义,被强调的文本应该用<em>标签定义,重要的文本应该用<strong>标签定义,被标记的或者高亮显示的文本应该用<mark>标签定义等等,类似这样的规范还有很多,后面我们会一一为大家介绍。

© 版权声明
THE END
喜欢就支持一下吧
点赞8 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片