重点和重要性编辑部分
在人类语言中,我们经常强调某些词语来改变句子的含义,我们经常希望以某种方式将某些词语标记为重要或不同。HTML提供了各种语义元素,允许我们用这样的效果标记文本内容,在本节中,我们将介绍一些最常见的内容。
重点部分
当我们想要强调口语时,我们会强调某些词语,巧妙地改变我们所说的含义。同样地,在书面语言中,我们倾向于通过将它们用斜体来强调词语。例如,以下两个句子具有不同的含义。
我很高兴你没迟到。
我很高兴你没迟到。
第一句听起来真的松了一口气,这个人没有迟到。相比之下,第二个听起来是讽刺性的或被动式的,表达了这个人迟到的烦恼。
在HTML中,我们使用<em>
(emphasis)元素来标记这样的实例。除了使文档阅读更有趣之外,这些文档还被屏幕阅读器识别并以不同的语调说出来。默认情况下,浏览器将此样式设置为斜体,但您不应仅使用此标记来获取斜体样式。要做到这一点,你要使用一个<span>
元素和一些CSS,或者一个<i>
元素(见下文)。
<p>I am <em>glad</em> you weren't <em>late</em>.</p>
非常重要部分
为了强调重要的话,我们倾向于强调他们在语言和大胆他们在书面语言。例如:
这种液体毒性很大。
我指望着你。别迟到了!
在HTML中,我们使用<strong>
(强重要性)元素来标记这样的实例。除了使文档更有用之外,屏幕阅读器还可以识别这些文档,并以不同的语调使用。默认情况下,浏览器将其设置为粗体文本,但您不应仅使用此标记来获得粗体样式。要做到这一点,你要使用一个<span>
元素和一些CSS,或者一个<b>
元素(见下文)。
<p>This liquid is <strong>highly toxic</strong>.</p> <p>I am counting on you. <strong>Do not</strong> be late!</p>
如果需要,你可以在彼此内部强大并强调:
<p>This liquid is <strong>highly toxic</strong> — if you drink it, <strong>you may <em>die</em></strong>.</p>
主动学习:让我们变得重要!部分
在这个主动学习部分,我们提供了一个可编辑的示例。在它里面,我们希望你尝试增加重点并强调你认为需要它们的单词,只是为了进行一些练习。
<h1>Important notice</h1>
<p>On Sunday January 9th 2010, a gang of goths were
spotted stealing several garden gnomes from a
shopping center in downtown Milwaukee. They were
all wearing green jumpsuits and silly hats, and
seemed to be having a whale of a time. If anyone
has any information about this incident, please
contact the police now.</p>
Important notice
On Sunday January 9th 2010, a gang of goths were spotted stealing several garden gnomes from a shopping center in downtown Milwaukee. They were all wearing green jumpsuits and silly hats, and seemed to be having a whale of a time. If anyone has any information about this incident, please contact the police now.
斜体,粗体,强调......部分
到目前为止我们讨论过的元素都有明确的语义关联。有这种情况<b>
,<i>
和<u>
稍微复杂一些。他们的出现使得人们可以在CSS仍然支持不良或根本不支持的时代写出粗体,斜体或带下划线的文本。像这样的元素,只影响表示而不是语义,被称为表示元素,不应再使用,因为正如我们之前所见,语义对于可访问性,SEO等非常重要。
HTML5重新定义<b>
,<i>
并且<u>
具有新的,有些令人困惑的语义角色。
这是最好的经验法则:如果没有更合适的元素<b>
,它可能适合使用,<i>
或<u>
传达传统上用粗体,斜体或下划线表达的含义。但是,保持可访问性思维方式始终至关重要。斜体的概念对于使用屏幕阅读器的人或使用拉丁字母以外的书写系统的人来说并不是很有帮助。
<i>
用来表达传统上用斜体传达的含义:外来词,分类学名称,技术术语,思想......<b>
用来传达传统上用粗体表达的含义:关键词,产品名称,主导句......<u>
用于表达传统上由下划线传达的含义:正确的名称,拼写错误......
关于下划线的一种警告:人们强烈地将下划线与超链接联系起来。因此,在Web上,最好只加下链接。在<u>
语义上合适时使用该元素,但考虑使用CSS将默认下划线更改为更适合Web的内容。下面的例子说明了如何完成它。
<!-- scientific names -->
<p> The Ruby-throated Hummingbird (<i>Archilochus colubris</i>) is the most common hummingbird in Eastern North America. </p> <!-- foreign words --> <p> The menu was a sea of exotic words like <i lang="uk-latn">vatrushka</i>, <i lang="id">nasi goreng</i> and <i lang="fr">soupe à l'oignon</i>. </p> <!-- a known misspelling --> <p> Someday I'll learn how to <u>spel</u> better. </p> <!-- Highlight keywords in a set of instructions --> <ol> <li> <b>Slice</b> two pieces of bread off the loaf. </li> <li> <b>Insert</b> a tomato slice and a leaf of lettuce between the slices of bread. </li> </ol>
摘要编辑部分
这就是现在!本文应该让您了解如何开始在HTML中标记文本,并向您介绍该领域中一些最重要的元素。在这个领域还有更多的语义元素要涵盖,我们将在后面的课程中更多地介绍我们的“更多语义元素”一文。在下一篇文章中,我们将详细介绍如何创建超链接,可能是Web上最重要的元素。