第一章 网页的构造
前言
尽管现在网页变得越来越复杂，但是其底层结构依然相当简单。创建网页是离不开 HTML 的。一个网页主要包括以下三个部分。文本内容（text content）、对其他文件的引用（references to other files）、标记（markup）。
1.1HTML 思想
设想这样一种场景：你在厨房里，一只手上拿着便利贴，上面的每一页都写着一个单词。有的贴纸上写的是“汤”，有的写着“燕麦片”、“盘子”、“酱汁”等。
你打开一个橱柜，为里面的每一样物品都贴上最能描述它的便利贴。一只黄色的装燕麦片的盒子贴上了写有“燕麦片”的贴纸。还有一个红色的盒子也是装燕麦片的，也为它贴上写有“燕麦片”的贴纸。其他的物品也采用类似的做法。
编写 HTML 与这个过程是很相似的。不同的是，编写 HTML 并非向食物和餐具上贴标签，而是为网页内容打上能够描述它们的标签。你无需自己创建标签名称，HTML 已经完成了这一工作，它有一套预先定义好的元素。p 元素用于段落，abbr 元素用于缩略词，li 元素用于列表项目。
1.2基本的 HTML 页面
每个网页都由下图中所示的结构开始构建。这个 HTML 相当于一张白纸，因为访问者看到的内容位于主体（body）部分（即 和 之间的部分），而这一部分现在是空着的。我们马上就会给它填上内容。
每个网页都包含 DOCTYPE、html、head 和body 元素，它们是网页的基础。在这个页面中，可以定制的内容包括两项，一是赋予 lang 属性的语言代码，二是
首先，简单说明一下，HTML 使用 < 和 > 包围 HTML 标签。开始标签（如 ）用于标记元素的开始，结束标签（如 ）用于标记元素的结
束。有的元素没有结束标签，如 meta。
1. 网页的顶部和头部
前面提到，页面内容位于主体部分，那么其他的代码有什么作用呢？实际上，开始标签以上的内容都是为浏览器和搜索引 擎 准 备 的。 部 分（ 称 为DOCTYPE）告诉浏览器这是一个 HTML5 页面。DOCTYPE 应该始终位于页面的第一行。接下来是 html 元素，它包着页面的其余部 分， 即 和 结 束标签（表示页面的结尾）之间的内容。再接下来是文档的头部，即 和 之间的区域。 会之后讲解。主体前面的代码中，有一部分是用户可见的，即
2.网页的主体：你的内容
接下来为页面添加一些内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Blue Flax (Linum lewisii)</title>
</head>
<body>
<article>
<h1>The Ephemeral Blue Flax</h1>
<img src="blueflax.jpg" width="300" height="175" alt="Blue Flax" />
<p>I am continually <em>amazed</em> at the beautiful, delicate <a href="http://en.wikipedia.
➝ org/wiki/Linum_lewisii" rel="external" title="Learn more about Blue Flax">Blue Flax</a>
➝ that somehow took hold in my garden. They are awash in color every morning, yet not a single
➝ flower remains by the afternoon. They are the very definition of ephemeral.</p>
</article>
</body>
</html
下面图片显示了桌面浏览器呈现这段HTML 的效果
HTML 提供了很多的元素。上面所示的例子演示了六种最为常见的元素：a、
article、em、h1、img 和 p。每个元素都有各自的含义，例如，h1 是标题，a 是链接，img是图像。
1.3标签：元素、属性、值及其他
见识了一些 HTML 之后，我们来仔细看看标签的组成：元素（element）、属性（attribute）和值（value）。
1. 元素
我们在便利贴的例子中讲到，元素就像描述网页不同部分的小标签一样：这是一个标题，那是一个段落，而那一组链接是一个导航。有的元素有一个或多个属性，属性用来进一步描述元素。大多数元素既包含文本，也包含其他元素（就像基本页面中的 p 元素）。如前面提到的，这些元素由开始标签、内容和结束标签组成。开始标签是放在一对尖括号中的元素的名称及可能包含的属性，结束标签是放在一对尖括号中的斜杠加元素的名称。
2. 属性和值
属性包含了元素的额外信息。在 HTML5 中，属性值两边的引号是可选的，但习惯上大家还是会写上，因此建议始终这样做。跟元素的名称一样，尽量使用小写字母编写属性的名称。
3. 父元素和子元素
如果一个元素包含另一个元素，它就是被包含元素的父元素，被包含元素称为子元素。子元
最低0.47元/天 解锁文章
241
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
