1. 文本内容标签
在HTML中,文本内容标签进一步规定了文本的内容,增强了文本的可读性。常用的文本内容标签可以分为以下几类:
- 标题及段落标签
<h1>-<h6>:标题标签共有六级,浏览器会自动在标题的前后添加空行。<p>:段落标签分割文本,浏览器会自动在段落的前后添加空行。
- HTML文本格式化标签
<b>定义粗体文本<em>定义着重文字<i>定义斜体字<strong>定义加重语气<mark>定义文本标记<small>定义小号字<sub>定义下标字<sup>定义上标字<ins>定义插入字<del>定义删除字
- HTML "计算机输出" 标签
<code>定义计算机代码<pre>定义预格式文本
<kbd>定义键盘码<samp>定义计算机代码样本<var>定义变量
- HTML 引文, 引用, 及标签定义
<cite>定义引用、引证<q>定义短的引用语
<blockquote>定义长的引用
<abbr>定义缩写<address>定义地址<bdo>定义文字方向<dfn>定义一个定义项目
1.1 <b>、<strong>、<i>、<em>
如果只从显示效果来看,在不额外添加css的情况下,<i>和<em>包围的文字将会以斜体呈现,<b>和<strong>包围的文字则会加粗显示。
这里是b标签包围的文本
这里是strong标签包围的文本
这里是em标签包围的文本
这里是i标签包围的文本
在HTML 5中增加了很多标签的语义化特性,所以尽管这些标签的呈现特征相似,他们在语义上还是存在,明显的区别。
1.1.1 <b>
<b>元素只是单纯的加粗文字,表明文字的实用目的,不带有任何额外重要或者暗示不同语态或语气的一段文本。<b>的典型应用场景为一段文本摘要中的关键词、一段审查中的产品名称、文本驱动软件中的可执行语句或者一篇文章的导语。
当没有其他元素可用时,再考虑用<b>。
标题应该使用<h1>到<h6>,突出对内容的强调用<em>,突出重要紧急用<strong>,文本标记使用<mark>。
// 下面的 b 元素起到突出关键词的作用,但不具备强调重要性的作用
<p>The <b>frobonitor</b> and <b>barbinator</b> components are fried.</p>
// 下面的 b 元素让被包围的词特殊化
<p>You enter a small room. Your <b>sword</b> glows
brighter. A <b>rat</b> scurries past the corner wall.</p>
// 下面的 b 元素标注了文章的导语
<article>
<h2>Kittens 'adopted' by pet rabbit</h2>
<p><b class="lede">Six abandoned kittens have found an
unexpected new mother figure — a pet rabbit.</b></p>
<p>Veterinary nurse Melanie Humble took the three-week-old
kittens to her Aberdeen home.</p>
...
</article>
1.1.2 <strong>
<strong>用于说明内容的重要性、严重性或者紧急性。
- 重要性:
<strong>可以被用于标题(heading)、说明(caption)或者段落(paragraph),以显示这部分被包围的文字的重要性。
// 章节序号不重要,章节的名字才重要
<h1>Chapter 1: <strong>The Praxis</strong></h1>
- 严重性:
<strong>可被用与标记警告或者警示标志。
<p><strong>Warning.</strong> This dungeon is dangerous.</p>
- 紧急性:
<strong>可被用与表示需要被尽快看见的部分。
<p>Welcome to Remy, the reminder system.</p>
<p>Your tasks for today:</p>
<ul>
<li><p><strong>Turn off the oven.</strong></p></li>
<li><p>Put out the trash.</p></li>
<li><p>Do the laundry.</p></li>
</ul>
1.1.3 <i>
<i>代表在文本中具有不同语态或语气的一段文本,某种程度上表明一段不同特性的文本,如一个分类学名称/技术术语/外语习语/音译/一个想法······
// 分类学名称
<p>The <i class="taxonomy">Felis silvestris catus</i> is cute.</p>
// 术语
<p>The term <i>prose content</i> is defined above.</p>
// 外语习语
<p>There is a certain <i lang="fr">je ne sais quoi</i> in the air.</p>
使用<i>标签时可以用class进一步说明元素的意图,这样该样式在以后如需修改时,不需要仔细检查全部文档来更改。
在使用<i>标签时候时,推荐考虑是否应用其他标签更为合适,如用<em>来突出强调,<dfn>标签来定义项目实例。
1.1.4 <em>
<em>表示对其包裹的内容的强调。突出强调的位置会改变语句本身的意义。因此,<em>元素是内容构成的一个部分。采用<em>表示强调的程度依赖于内容的语言类型,比如汉语里面重读某个词表示不同含义。
// 这是一句不带任何强调的句子
<p>Cats are cute animals.</p>
// em 包围 Cats,强调猫是种可爱的动物,而不是狗或者其他动物
<p><em>Cats</em> are cute animals.</p>
// em 包围 are,代表句子所说是事实,来反驳那些说猫不可爱的人
<p>Cats <em>are</em> cute animals.</p>
// em 包围 cute,强调猫是一种可爱的动物,而不是有人说的刻薄、讨厌的动物
<p>Cats are <em>cute</em> animals.</p>
// 这里强调猫是动物,而不是植物
<p>Cats are cute <em>animals</em>.</p>
TIPS:
<em>不是一个普通的斜体标签。
如果有时是为了说明部分文本与其他部分存在语气或者语态的差异,此时<i>标签更为合适。
<em>标签不是为了表明重要性,如果是出于这个目的,<strong>标签更为合适。
1.2 <pre>
<pre> 标签可定义预格式化的文本,常见应用就是用来表示计算机的源代码。元素表示预定义格式文本。在该元素中的文本通常按照原文件中的编排,以等宽字体的形式展现出来,文本中的空白符(比如空格和换行符)都会显示出来。(紧跟在 <pre> 开始标签后的换行符也会被省略)
<pre>
L TE
A A
C V
R A
DOU
LOU
REUSE
QUE TU
PORTES
ET QUI T'
ORNE O CI
VILISÉ
OTE- TU VEUX
LA BIEN
SI RESPI
RER - Apollinaire
</pre>
L TE
A A
C V
R A
DOU
LOU
REUSE
QUE TU
PORTES
ET QUI T'
ORNE O CI
VILISÉ
OTE- TU VEUX
LA BIEN
SI RESPI
RER - Apollinaire
TIPS:
<code> 用于表示计算机源代码或者其他机器可以阅读的文本内容。只是把文本变成等宽字体,主要是对对文档中的文本进行格式化。<pre>和<code>可以同时使用,但是使用顺序为:在<pre>中使用<code>标签
2. HTML全局属性
全局属性是所有HTML元素共有的属性;它们可以被用于所有元素,即使属性对某些元素不起作用。我们可以在所有的HTML元素上指定全局属性,甚至是在标准里没有指定的元素。
常用的全局属性有:
-
class:规定元素的类名(classname)
-
contenteditable:规定是否可编辑元素的内容。
<p contenteditable="true">这是一个段落。是可编辑的。尝试修改文本。</p>这是一个段落。是可编辑的。尝试修改文本。
-
hidden:规定对元素进行隐藏。
<p hidden="hidden">这是一段隐藏的段落。</p> <p>这是一段可见的段落。</p>这是一段隐藏的段落。
这是一段可见的段落。
-
id:规定元素的唯一名称
-
lang 设置元素中内容的语言代码。
-
style 规定元素的行内样式(inline style)
-
tabindex 设置元素的 Tab 键控制次序。
-
title 规定元素的额外信息(可在工具提示中显示)