块级元素和内联元素

HTML中有两种你需要知道的重要元素类别,块级元素和内联元素。

· 块级元素在页面中以块的形式展现 —— 相对于其前面的内容它会出现在新的一行,其后的内容也会被挤到下一行展现。块级元素通常用于展示页面上结构化的内容,例如段落、列表、导航菜单、页脚等等。一个以block形式展现的块级元素不会被嵌套进内联元素中,但可以嵌套在其它块级元素中。

· 内联元素通常出现在块级元素中并环绕文档内容的一小部分,而不是一整个段落或者一组内容。内联元素不会导致文本换行:它通常出现在一堆文字之间例如超链接元素 元素(或称锚元素)可以创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接。"><a>或者强调元素) 标记出需要用户着重阅读的内容,   元素是可以嵌套的,嵌套层次越深,则其包含的内容被认定为越需要着重阅读。"><em>)表示文本十分重要,一般用粗体显示。"><strong>

看一看下面的例子:

<em>第一</em><em>第二</em><em>第三</em>

<p>第四</p><p>第五</p><p>第六</p>


) 标记出需要用户着重阅读的内容,   元素是可以嵌套的,嵌套层次越深,则其包含的内容被认定为越需要着重阅读。"><em>是一个内联元素,所以就像你在下方可以看到的,第一行代码中的三个元素都没有间隙的展示在了同一行。而元素(或者说 HTML 段落元素)表示文本的一个段落。该元素通常表现为一整块与相邻文本分离的文本,或以垂直的空白隔离或以首行缩进。另外,


是块级元素。"><p>是一个块级元素,所以第二行代码中的每个元素分别都另起了新的一行展现,并且每个段落间都有一些间隔(这是因为默认的浏览器有着默认的展示元素(或者说 HTML 段落元素)表示文本的一个段落。该元素通常表现为一整块与相邻文本分离的文本,或以垂直的空白隔离或以首行缩进。另外,

是块级元素。"><p>元素的CSS styling)。

: HTML5重新定义了元素的类别:见 元素内容分类(译文)。尽管这些新的定义更精确,但却比上述的 “块级元素” 和 “内联元素” 更难理解,因此在之后的讨论中仍使用旧的定义。

: 在这篇文章中提到的“块”和“内联”,不应该与 the types of CSS boxes 中的同名术语相混淆. 尽管他们默认是相关的,但改变CSS显示类型并不会改变元素的分类,也不会影响它可以包含和被包含于哪些元素。防止这种混淆也是HTML5摒弃这些术语的原因之一。

: 你可以查阅包含了块级元素和内联元素列表的参考页面—see Block-level elements and Inline elements.

空元素

不是所有元素都拥有开始标签,内容,结束标签。一些元素只有一个标签,通常用来在此元素所在位置插入/嵌入一些东西。例如:元素 元素将一份图像嵌入文档。"><img>是用来在元素 元素将一份图像嵌入文档。"><img>所在位置插入一张指定的图片。例子如下:

<img src="https://roy-tian.github.io/learning-area/extras/getting-started-web/beginner-html-site/images/firefox-icon.png">

: 空元素(Empty elements) 有时也被叫作 void elements.

属性

属性包含元素的额外信息,这些信息不会出现在实际的内容中。在上述例子中,这个class属性给元素赋了一个识别的名字(id),这个名字此后可以被用来识别此元素的样式信息和其他信息。

一个属性必须包含如下内容:

1. 一个空格,在属性和元素名称之间。(如果已经有一个或多个属性,就与前一个属性之间有一个空格。)

2. 属性名称,后面跟着一个等于号。

3. 一个属性值,由一对引号“ ”引起来。

学习实践:为一个元素添加属性

另一个例子是关于元素 元素(或称锚元素)可以创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接。"><a>——元素 元素(或称锚元素)可以创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接。"><a>是锚,它使被标签包裹的内容成为一个超链接。此元素也可以添加大量的属性,其中几个如下:

· href: 这个属性声明超链接的web地址,当这个链接被点击浏览器会跳转至href声明的web地址。例如:href="https://www.mozilla.org/"

· title: 标题title属性为超链接声明额外的信息,比如你将链接至的那个页面。例如:title="The Mozilla homepage"。当鼠标悬停在超链接上面时,这部分信息将以工具提示的形式显示。

· target: 目标target属性用于指定链接如何呈现出来。例如,target="_blank"将在新标签页中显示链接。如果你希望在当前标签页显示链接,忽略这个属性即可。

编辑下面的文本框中的内容,使之变成指向任一个你喜欢的web地址的链接。首先,添加<a>元素,然后为它添加href属性和title属性。你可以即时的在输出区域看到你修改的内容。你应该可以看到一个连接,当鼠标移上此链接时会显示title属性值,当点击此链接时会跳转到href指定的web地址。记住:在元素名和属性名之间以及两个属性之间要有一个空格。

如果写错了,可随时按【重置】按钮重新开始,如果实在想不出来,可按【显示答案】按钮查看答案。

译注:可到 Github 在线使用这个“代码操场”。

布尔属性

有时你会看到没有值的属性,它是合法的。这些属性被称为布尔属性,他们只能有跟它的属性名一样的属性值。例如disabled 属性,他们可以标记表单输入使之变为不可用(变灰色),此时用户不能向他们输入任何数据。

<input type="text" disabled="disabled">

方便起见,我们完全可以将其写成以下形式(我们还提供了一个非禁止输入的表单元素供您参考,以作为对比)

<!-- 使用disabled属性来防止终端用户输入文本到输入框中 --><inputtype="text" disabled>

<!-- 下面这个输入框没有disabled属性,所以用户可以向其中输入 --><input type="text">

上面两段HTML代码产生的效果如下:

省略包围属性值的引号

当你浏览那些粗糙的web网站,你将会看见各种各样奇怪的标记风格,其中就有不给属性值添加引号。在某些情况下它是被允许的,但是其他情况下会破坏你的标记。例如,我们可以写一个只拥有一个href属性的链接,如下:

<a href=https://www.mozilla.org/>收藏页面</a>

然而,当我们再添加一个title属性时就会出错,如下:

<a href=https://www.mozilla.org/ title=The Mozilla homepage>收藏页面</a>

此时浏览器会误解你的标记,它会把title属性理解为三个属性——title的属性值为"The“,另外还有两个布尔属性Mozillahomepage。看下面的例子,它明显不是我们所期望的,并且在这个编码里面它会报错或者出现异常行为。试一试把鼠标移动到链接上,看会显示什么title属性值!

我们建议始终添加引号——这样可以避免很多问题,并且使代码更易读。

单引号或者双引号?

在目前为止,本章内容所有的属性都是由双引号来包裹。也许在一些HTML中,你以前也见过单引号。这只是风格的问题,你可以从中选择一个你喜欢的。以下两种情况都可以:

<a href="http://www.example.com">示例站点链接</a>

<a href='http://www.example.com'>示例站点链接</a>

但你应该注意单引号和双引号不能在一个属性值里面混用。下面的语法是错误的:

<a href="http://www.example.com'>示例站点链接</a>

在一个HTML中已使用一种引号,你可以在此引号中嵌套另外一种引号:

<a href="http://www.example.com" title="你觉得'好玩吗'?">示例站点链接</a>

如果你想将引号当作文本显示在html中,你就必须使用实体引用

剖析HTML文档

学习了一些HTML元素的基础知识,这些元素单独一个是没有意义的。现在我们来学习这些特定元素是怎么被结合起来,从而形成一个完整的HTML页面的:

<!DOCTYPE html><html>

  <head>

    <meta charset="utf-8">

    <title>我的测试站点</title>

  </head>

  <body>

    <p>这是我的页面</p>

  </body></html>

分析如下:

1. <!DOCTYPE html>: 声明文档类型. 很久以前,早期的HTML(大约19912),文档类型声明类似于链接,规定了HTML页面必须遵从的良好规则,能自动检测错误和其他有用的东西。使用如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2. 然而这种写法已经过时了,这些内容已成为历史。只需要知道<!DOCTYPE html>是最短有效的文档声明。

3. <html></html>: <html>元素。这个元素包裹了整个完整的页面,是一个根元素。

4. <head></head>: <head>元素. 这个元素是一个容器,它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述,CSS样式,字符集声明等等。以后的章节能学到更多关于<head>元素的内容。

5. <meta charset="utf-8">: 这个元素设置文档使用utf-8字符集编码,utf-8字符集包含了人类大部分的文字。基本上他能识别你放上去的所有文本内容。毫无疑问要使用它,并且它能在以后避免很多其他问题。

6. <title></title>: 设置页面标题,出现在浏览器标签上,当你标记/收藏页面时它可用来描述页面。

7. <body></body>: <body>元素。 包含了你访问页面时所有显示在页面上的内容,文本,图片,音频,游戏等等。