第一章 HTML标记与文档结构（HTML文档剖析）
Posted Vivianluolita
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了第一章 HTML标记与文档结构（HTML文档剖析）相关的知识，希望对你有一定的参考价值。
1.2 html文档剖析
1.2.1 HTML模板
今天，按照 HTML5 语法编写的最简单的 HTML 页面的模板可以写成这样：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" /> <title>An HTML Template</title> </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>
<meta charset="utf-8" />
<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>
<img src="images/acoustic_nylon.jpg" alt="nylon string acoustic guitar" />
<img src="images/acoustic_steel.jpg" alt="steel string acoustic guitar" />
<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 个空格，从而保证缩进的一致性。
<nav id="toc">
....<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> <!-- end table of contents -->
两个在标记中嵌套的例子
我们再来看一个嵌套的例子，这一次使用 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 中默认会加上点下划线。
◆ 文档对象模型
1
2
3
4
5
在开始学习 CSS 之前，关于 HTML 我们要介绍的最后一个知识点，就是 HTML 结构所对应的文档对象模型（以下简称“DOM”）。DOM 是从浏览器的视角来观察页面中的元素以及每个元素的属性，由此得出这些元素的一个家族树。通过 DOM，可以确定元素之间的相互关系。在 CSS 中引用 DOM 中特定的位置，就可以选中相应的 HTML 元素，并修改其样式属性。
我们就通过下面这个例子来理解 DOM 吧。
// HTML 代码正确缩进，以表明标签的层次关系
<body>
<section>
<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设计指南》
以上是关于第一章 HTML标记与文档结构（HTML文档剖析）的主要内容，如果未能解决你的问题，请参考以下文章