HTML 文本格式化

时间:2019-06-08 23:19:23  来源:igfitidea点击:

HTML提供了几个标签,我们可以使用web页面上做一些文本出现不同于正常的文本。

粗体文本

<b>…</b>元素中出现的任何内容都将以粗体显示:

<p>文本文本<b>粗体文本</b>文本</p>
<p>文本文本<strong>粗体文本</strong>文本</p>

HTML中<strong><b>标签的区别

<strong><b>标签默认以粗体显示所包含的文本,
<strong>标签表明其内容非常重要,
<b>标签只是用来吸引读者的注意,而不传达任何特殊的重要性。

斜体文本

<i>…</i>元素中出现的任何内容都以斜体显示,如下所示

<p>普通文本<i>斜体文本</i> 普通文本内容</p>

HTML中<em><i>标签的区别

<em><i>标签文本在默认情况下都显示为斜体。
<em>标记强调与周围文本相比,表明其内容强调。
<i>标记用于标记文本从正常的文本可读性的原因,比如这是一个技术术语,这是另一种语言的习语等。

下划线文本

<u>…</u>元素中出现的任何内容都将以下划线显示,如下所示

<p>下面的单词使用<u>带下划线</u> 的样式。</p>

删除文本

<strike>…</strike>元素中出现的任何内容都将用删除线显示,这是贯穿文本的一条细线,如下所示:

<p>下面的文本使用<strike>删除线</strike> 的样式。</p>

等宽字体

<tt>…</tt>元素的内容以等宽字体书写。
大多数字体被称为可变宽度字体,因为不同的字母具有不同的宽度(例如,字母“m”比字母“i”宽)。
然而,在等宽字体中,每个字母的宽度相同。

 <p>下面使用的是<tt>等宽字体min</tt></p>

上标文本

<sup>…</sup>元素的内容是用上标写的;使用的字体大小与它周围的字符大小相同,但在其他字符上方显示半个字符的高度。

<p>右边的是<sup>上标12</sup>,其他文本</p>

下标文本

<sub>…</sub>元素的内容是用下标编写的;使用的字体大小与它周围的字符相同,但在其他字符下面显示半个字符的高度。

<p>这是<sub>下标</sub>文本</p>

插入文本

<ins>…</ins>元素中出现的任何内容都将显示为插入的文本。

<p>这是<del>删除文本</del> 这是<ins>插入文本</ins></p>

删除文本

<del>…</del>元素中出现的任何内容都将显示为已删除的文本。

<p>这是<del>删除文本</del> 这是<ins>插入文本</ins></p>

big文本

<big>…</big>元素的内容显示为比周围其他文本大一个字体,如下所示:

<p>下面的文本是<big>big</big>样式,即字体大一号</p>

small文本

<small>…</small>元素的内容显示为比其周围其他文本小一个字体大小,如下所示:

<p>下面的文字是小一号字体<small>我是小号字体</small></p>

分组内容

<div>和<span>元素允许我们将多个元素组合在一起,以创建页面的部分或子部分。

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

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

另一方面,<span>元素只能用于分组内联元素。因此,如果你想把句子或段落的某一部分组合在一起,你可以使用下面的<span>元素。

<p><span style = "color:green">span标签</span>示例
<span style = "color:red">span属于内联元素</span></p>

这些标记通常与CSS一起使用,允许我们将样式添加到页面的某个部分。

格式化引文

我们可以使用HTML <blockquote>标签轻松格式化来自其他来源的引用块。

Blockquotes通常显示为左右缩进的页边距,并在上面和下面增加一些额外的空间。

<blockquote>
 <p>今天很残酷明天很残酷后天很美好</p>
 <cite>—马云</cite>
</blockquote>

“引用”标签用于描述一项创造性的工作。通常包括该作品的标题或作者的名字。

对于简短的内联引号,可以使用HTML <q>标记。 大多数浏览器通过在文本周围加上引号来显示内联引号。

<p>高尔基:<q>书是人类进步的阶梯</q></p>

显示缩写

缩写是一个单词、短语或名字的缩写形式。

可以使用<abbr>标记表示缩写。
在此标记中使用title属性来提供缩写的完整扩展,当鼠标光标悬停在元素上时,浏览器将以工具提示的形式显示该缩写。

<p>The <abbr title="Hypertext Markup Language">HTML</abbr> 是设计用于在web浏览器中显示的文档的标准标记语言。</p>