第一章 HTML标记与文档结构（HTML文档剖析）

来源：互联网发布：windows 10控制面板编辑：程序博客网时间：2024/05/01 18:53

1.2 HTML文档剖析

1.2.1 HTML模板

今天，按照 HTML5 语法编写的最简单的 HTML 页面的模板可以写成这样：

<!DOCTYPE html>

<html>

<head>

<body>

</body>

</html>

模板的第一行代码是一种新语法，或者说是一种简化的 DOCTYPE，这一行就是为了声明：“以下是一个 HTML 文档。”注意，这个标签不用关闭。

然后是<html>标签，也就是所谓的根级标签，因为页面中所有的其他标签都嵌套在这个标签内部，而且它的闭标签也是整个页面中的最后一个闭标签。<html>标签只有两个直接的子标签：<head>和<body>。

使用 HTML 注释标签，可以为你自己或者其他将来可能会修改这个页面的人写一些备注。HTML 注释以结尾，注释内容就写在它们中间。浏览器在加载页面时，会忽略注释，不会显示其中的内容。

帮助浏览器理解页面的信息都包含在<head>标签中。在这个最简单的例子里，<head>

标签里只包含<meta>和<title>两个标签。其中，<meta>标签有一个charset 属性，它是在告诉浏览器这个页面使用的是 UTF-8 编码。而<title> 标签中的文本会在页面显示时，作为整个页面的标题出现在浏览器窗口顶部的标题栏中。上面模板中页面

的标题是“An HTML Template”。

【关于title标签】

搜索引擎会给<title>标签中的文字内容赋予很高的权重，而且这些文字也会作为网页标题出现在搜索结果列表中。为此，千万不要让那些“欢迎光临我的网页！”之类的废话占据你的<title>标签。一定要让这些文字简洁明确，而且包含目标读者在搜索你的网页内容时会使用的关键词。

在上面模板的<body>标签中，我们再添加两个标签：

<body>

<h1>Stylin' with CSS</h1>

<p>Great Web pages start with great HTML markup!</p> </body>

图 1展示了当前页面在浏览器中显示的效果。

浏览器把包含内容的元素在页面中自上而下地一一排列，起点是页面的左上角。仔细看一看，会发现页面中标题和段落文本的字号不一样，但字体都是 Times Roman，而且标题与段落之间还有一定的间距。很显然，浏览器已经为页面应用了一些基本的样式。这些初始（默认）的样式，来自浏览器内置的一个 CSS 样式表，它只会为每个 HTML 元素添加一些最基本，当然也谈不上美观的样式。

接下来再给模板添加两个比较常用的 HTML 元素，一个链接，一个图片。

<body>

<h1>Stylin' with CSS</h1>

<p>Great Web pages start with great HTML markup!</p> <a href="http://www.stylinwithcss.com">My Books</a> <img src="images/cisco.jpg" alt="My dog Cisco" />

</body>

图 1-3 展示了页面现在的效果。

链接是使用<a>标签创建的，该标签有一个必需的属性 href（hyperlink reference，超

链接引用），其中包含着链接指向的页面的 URL。

前面我们也提到过<img>标签，而现在你终于看到它的效果了。在这个标签里，同样

是给出图片所在位置的 URL，要使用 src（source，来源）而不是 href 属性。

有一点你可能注意到了：虽然标题和段落是上下堆叠在一起的，但链接和图片却是并

排显示的。为什么会这样呢？因为标题和段落是块级元素，而链接和图片是行内元素。

1.2.2块级元素和行内元素

图展示了所谓“文档流”的效果，也就是 HTML 元素会按照它们各自在标记中出现的先后顺序，依次从页面上方“流向”下方。浏览器的样式表之所以提供这种流动式效果，就是为了让那些简单但却正确标记了 HTML 的内容，能够以朴素但却可用的方式显示出来。CSS 的妙处就在于把这种实用主义的默认显示效果，转换成既有吸引力又直观的页面设计。

几乎所有 HTML 元素的 display 属性值要么为block，要么为inline。最明显的一个例外是table 元素，它有自己特殊的display 属性值。

块级元素（比如标题和段落）会相互堆叠在一起沿页面向下排列，每个元素分别占一行。而行内元素（比如链接和图片）则会相互并列，只有在空间不足以并列的情况下才会折到下一行显示。

无论你想了解哪个 HTML 元素，第一个要问的问题都应该是：它是块级元素，还是行内元素？知道了这一点之后，就可以在编写标记的时候，预想到某个元素在初始状态下是如何定位的，这样才能进一步想好将来怎么用 CSS 重新定位它。

<!DOCTYPE html>

<html>

<head>

<title>Block and Inline Elements</title>

</head>

<body>

<h1>Types of Guitars</h1>

<p>Guitars come in two main types: electric and acoustic.</p>

<h2>Acoustic Guitars</h2>

<p>Acoustic guitars have a large hollow body that projects the sound of the strings.</p>

<h3>Nylon String Acoustic Guitars</h3>

<p>Descendants of the gut-strung instruments of yore, nylon string guitars have a mellow tone.</p>

<h3>Steel String Acoustic Guitars</h3>

<p>Steel string guitars first appeared in country music and today most acoustic guitars have steel strings.</p>

<h2>Electric Guitars</h2>

<p>Electric guitars have a solid or hollow body with pickups that capture the string vibration so it can be amplified.</p>

<h3>Solid Body Electric Guitars</h3>

<p>Solid body electric guitars are commonly used in rock and country music.</p> <h3>Hollow Body Electric Guitars</h3>

<p>Hollow body acoustic guitars are commonly used in blues and jazz.</p>

</body>

</html>

在以上代码和屏幕截图中，可以看到三种级别的标题。浏览器为每一级标题分别应用了不同的字号，从而让页面内容的层次显得非常分明。由于标题和段落都是块级元素，所以每个元素各占一行。

还有，页面四周都添加了一定的边距，所以文本才不会碰到浏览器窗口。而且，段落中的行与行之间也有距离。好了，边距的话题回头我们再仔细聊，还是先给页面添几张图片吧。如图 1-5 所示，当然你已经知道了，图片是行内元素。

标记中的两个<img>标签虽然分别位于两行，但这并不影响图片在浏览器中显示时的效果。图片是行内元素，所以它们显示的时候就会并列出现在一行上；而且，标签之间的空白（包括制表、回车和空格）都会被浏览器忽略^①。因此，为了让代码的版式布局一目了然，你可以随意在标签之间添加换行和空格。一般推荐的做法都是子标签相对于父标签要有一个缩进。

以下是图 1-5 中展示的那部分页面对应的代码，其中包含两张图片。图片是行内元素，所以两把吉它会并排显示。

<body>

<h1>Types of Guitars</h1>

<p>Guitars come in two main types: electric and acoustic</p>

<h2>Acoustic Guitars</h2>

<p>Acoustic guitars have a large hollow body that projects the sound of the

strings.</p>

</body>

【省略】要安装 Web Developer，在 Firefox 工具栏中选择“附加组件”，然后在“附加组件管理器”中搜索“Web Developer”。找到之后，点击安装。

块级元素盒子会扩展到与父元素同宽

在我们这个页面中，所有块级元素的父元素都是 body，而它的宽度默认与浏览器窗口一样宽（当然有少量边距）。因此，所有块级元素就与浏览器窗口一样宽了。说到这，相信你就能理解为什么块级元素始终会占一行了。对了，就是因为它们始终会保持与浏览器窗口同宽。这样一来，一个块级元素旁边也就没有空间容纳另一个块级元素了。

行内元素盒子会“收缩包裹”其内容，并且会尽可能包紧

说到这，你就可以理解为什么几个行内元素会并排显示在一行，而每个块级元素都会另起一行了。

1.2.3 嵌套元素

在 Dreamweaver 等 HTML 编辑器中，每次按 Tab 键时就会缩进 4 个空格，从而保证缩进的一致性。

....<ol>

........<li><a href="#">Introduction</a></li>

........<li><a href="#">Chapter 1</a></li>

........<li><a href="#">Chapter 2</a></li>

........<li><a href="#">Chapter 3</a></li>

....</ol>

</nav>

两个在标记中嵌套的例子

我们再来看一个嵌套的例子，这一次使用 blockquote 元素。顾名思义，blockqoute元素包含引用内容，而且在页面上看起来是独立的元素。请注意代码中使用的表示弯引号的 HTML 实例。

<blockquote>“Sometimes you want to give up the guitar, you'll hate the guitar. But if you stick with it, you're gonna be rewarded.” <cite>Jimi Hendrix</cite> //使用 cite 元素包含作者姓名

</blockquote>

图 1-10 展示了这段代码在页面中显示的效果，为两个元素都加了轮廓。

blockquote 元素默认会缩进

blockquote:独立引用

cite:引证

q:文本类引用

abbr:简写

【HTML实体】

HTML 实体常用于生成那些键盘上没有的印刷字符，比如 ^TM、† 、©，等等。HTML 实体以一个和号（&）开头，一个分号（;）结尾，二者之间是表示实体的字符串。在前面的例子中，两个实体的名字分别是“left-double-quote”（左双引号）和“right-double-quote”（右双引号）的简写。

Peachpit 另一位作者 Elizabeth Castro（她的书非常赞，在此强烈向大家推荐）在自己的一个网页中列出了常用的 HTML 实体：http://www.elizabethcastro.com/ html/extras/entities.html。

要注意的是，由于和号表示实体开头，所以在要显示和号的时候不能直接写和号，而要在 HTML 标签包含的文本中使用& 实体，这样才能显示出&来。比如，写成 Johnson & Johnson，

才会显示成：Johnson & Johnson。

显然，<blockquote> 标签也是一个块级元素（它名字里就有 block）。因为它的目的就是在页面中独立显示一块内容，所以作为块级元素非常合适。

嵌套在 blockquote 元素中位于引用文本之后的是cite 元素，它是一个行内元素。因为文本结束后还有空间，所以它就显示在了段落最后一行上。从图 1-10 中也可以看到，<cite>标签的内容默认是斜体。

同样是在这个例子中，还可以看到两个 HTML 实体，“和”，分别用于生成能够正确打印出来的左、右双引号。使用这两个引号的实体，而不是按键盘上的 Shift-'（Shift-引号键），能让页面显示更加专业。

第二个嵌套的例子如下，是一个块级元素包含三个行内元素。

<p>It is <strong>absolutely critical</strong> that <em>everyone</em> does this <abbr title="as soon as possible">ASAP</abbr>!</p>

图 1-11 展示了 Firefox 浏览器中显示的效果。

这个例子除了能让你感到情况紧急之外，还能让你有如下收获。

q 文本被标记为段落，而其中包含三个行内元素。

q <strong>标签表示重要，默认以粗体显示。

q <em>标签表示强调，默认以斜体显示。

q <abbr>标签表示简写，在 Firefox 中默认会加上点下划线。

◆ 文档对象模型

在开始学习 CSS 之前，关于 HTML 我们要介绍的最后一个知识点，就是 HTML 结构所对应的文档对象模型（以下简称“DOM”）。DOM 是从浏览器的视角来观察页面中的元素以及每个元素的属性，由此得出这些元素的一个家族树。通过 DOM，可以确定元素之间的相互关系。在 CSS 中引用 DOM 中特定的位置，就可以选中相应的 HTML 元素，并修改其样式属性。

我们就通过下面这个例子来理解 DOM 吧。

// HTML 代码正确缩进，以表明标签的层次关系

<body>

<h1>The Document Object Model</h1>

<p>The page's HTML markup structure defines the DOM.</p>

</section>

</body>

上面的代码示例和图 1-13 展示了一个典型的页面结构，即结构化的标签（即<section>）包含着几个子内容标签（这里的<h1>和<p>）。代码中用缩进表示元素间的层次关系。这种层次关系也可以用垂直的、类似家族树的结构图表示。

对于这个例子中的 DOM 层次，我们可以作如下表述。

◆ section 是 h1和 p的父元素，也是直接祖先元素。

◆ h1 和 p是 section的子元素，也是直接后代元素。

◆ h1 和 p是同胞元素，它们有共同的父元素 section。

◆ section、h1和 p是 body的后代元素，或者下面的元素（嵌套在后者的内部）。

◆ section 和 body 是 h1 和 p 的祖先元素，或者上面的元素（在某一层次上包含后者）。

在本书后面几章里，我们会经常使用子元素、父元素、同胞元素、祖先元素和后代元素这些概念。所以，请读者务必先对 HTML 创建的 DOM 的层次有一个清晰的认识，搞明白这些概念的含义，以及它们之间的嵌套关系。

CSS 操作 DOM 的过程是先选择一个或一组元素，然后再修改这些元素的属性。通过 CSS 修改了元素后，比如修改了宽度或者在标记里插入一个伪元素，这些变化会立即在 DOM 中发生，并体现在页面上。

简言之，就是通过 HTML 标记来构建 DOM，然后在页面初次加载和用户与页面交互时，使用 CSS 来修改 DOM。

◆ 小结

本章讲解了 HTML 标签怎么为内容提供结构，以及每个元素会在屏幕上生成什么样的盒子。演示了块级元素和行内元素的区别，以及在元素互相嵌套的情况下，它们之间会存在的一种层次关系。你知道了标记中嵌套的 HTML 元素会生成屏幕上嵌套的盒子。最后，我们学习了 DOM，它是浏览器中文档的模型，而 CSS 可以修改 DOM 中元素的样式属性，从而修改页面本身的布局和外观。本章学习的这些基础知识，对于使用 CSS 为 HTML 添加样式至关重要。第 2 章，我们会从 CSS 的规则和机制入手，讲一讲它是怎么对 HTML 发生作用的。

本文摘选自《CSS设计指南》

0 0