摘要:块状元素可以相互嵌套,并且可以包裹内联元素。内联元素之间可以相互嵌套但是它们不可以包裹块状元素,我们常用讲内联元素用在小块的内容上,比如几句话。
我们初步了解了HTML和CSS,现在让我们深入挖掘HTML并了解哪些元素构成了这种语言。
建设网站前,我们需要了解什么元素适合排版什么内容。这对于理解元素如何展示在页面中以及元素的语义化都有非常重要的意义。
在工作中使用适当的元素排版需要长时间的实践,但接下来的学习中我们将会合理的使用它们。
语义化概述究竟什么是语义化呢?HTML语义化是在页面中使用恰当的元素让内容具有意义和结构。语义化编码仅针对页面的内容而不关心内容的样式。使用语义化元素有很多的好处,包括使计算机,屏幕阅读器,搜索引擎以及其他设备充分阅读和理解页面的内容。 另外,HTML语义化也更利于管理和使用,因为它非常清晰的显示了每个内容是什么。
接下来的学习中,我们会一边介绍新元素,一边讨论这些元素的实际意义和他们最能代表的内容类型。在此之前,我们先来看一下两个元素:
,用
包裹的内容被理解为段落;但
块状元素与内联元素
大部分的HTML元素都可被分为块状元素或内联元素。那两者之间有什么不同呢?
块状元素会另起一行,并多带带占据一整行空间。块状元素可以相互嵌套,并且可以包裹内联元素。我们常用块状元素包裹大块的内容,比如段落。
行内元素不会另起一行。它们被划分为正常的文件流,一个接着一个显示,宽度之随着内容的变化而变化。内联元素之间可以相互嵌套;但是它们不可以包裹块状元素,我们常用讲内联元素用在小块的内容上,比如几句话。
我们通常会见到的
举个例子来说,我们有一个包裹了社交媒体链接(social media links)内容的
</>复制代码
I may be found on...
Additionally, I have a profile on...
Soon we"ll be writing HTML with the best of them.
HTML和CSS的注释
上述代码中有感叹号,那不是元素,而是HTML注释
HTML和CSS都可以在代码中添加注释,注释中的内容不会被展示在页面上。注释有助于我们保持代码的有序性,允许我们设置提醒,并为我们提供了一种更有效的管理代码的方法。 注释在多人编辑一份文件的时候变得非常有用。
HTML注释格式开始于, CSS注释开始于/*结束于*/。
基于文本的元素虽然线上存在着许多不同形式的媒体和内容,但文字是主要的。于是,页面中就有了许多用于排版文字的元素。现在我们将一些更常用的元素,包括标题,段落,表示重要性的粗体和用于强调的斜体。
标题标题都是块状元素,它们有六个等级,
在页面中使用标题要有顺序。页面或者章节的主标题应该用
每个等级的标题元素都应该用在适合它语义的地方,不应该单纯为了使文字加粗或变大而使用它——我们有更好的方法做到。
以下是不同等级的标题元素的示例:
</>复制代码
Heading Level 1
Heading Level 2
Heading Level 3
Heading Level 4
Heading Level 5
Heading Level 6
段落
标题后常跟着段落。段落用
元素来定义。段落可以一个接一个,按照需要展示在页面上。以下是段落的示例:
</>复制代码
Steve Jobs was a co-founder and longtime chief executive officer at Apple. On June 12, 2005, Steve gave the commencement address at Stanford University.
In his address Steve urged graduates to follow their dreams and, despite any setbacks, to never give up–advice which he sincerely took to heart.
用strong加粗文字
加粗和强调文本,我们可以使用内联元素。我们有两个元素可以加粗文本:和元素。理解它们的语义非常重要。
元素的语义是强调文本的重要性,因此它是最常用于加粗文本的元素。没有特殊的语义,只是改变文本的样式,因此在突出文本重要性这个方面它不是最好的选择。我们可以根据需要选择合适的元素。
以下是用两种元素加粗文本的示例:
</>复制代码
Caution: Falling rocks.
This recipe calls for bacon and baconnaise.
用em呈现斜体
用斜体强调文本,可以使用内联元素。与加粗文本一样,也有两种元素可以设置斜体,它们也有不同的语义。
的语义是强调重点文本,因此它是最常用于斜体的元素。而另一个元素,语义是代替语音或者有语调的文本,类似于放在引号里。我们可以根据需要选择合适的元素。
以下是斜体示例:
</>复制代码
I love Chicago!
The name Shay means a gift.
创建结构
长时间以来,我们都用