前情提要
在前两章的内容，我们学习了标记、元素、链接、路径……这一章，我们要学以致用，创建一个完整的Web页面。
从日志到网站
Tony准备骑着他的Segway周游美国，他会写一些游记，我们负责帮他创建一个网页。
需要的工作有：
- 画一个粗略的日志草图，作为页面设计的基础。
- 创建HTML的基本构建模块(<h1>,<h2>,<h3>,<p>等)，把草图翻译成HTML的缩略图（或蓝图）。
- 把蓝图翻译成真正的HTML。
- 在完成基本页面上加一些改进，认识一些新的HTML元素。
测试页面
增加一些新元素
短内容引用：<q>元素
下面，我们增加一些更常见的元素。
上图有一段引用，我们用一个元素<q>来代替：
很长的引用：<blockquote>元素
与<q>元素不同（<q>用于短引用，作为现有段落的一部分），<blockquote>元素用于较长的引用，需要单独显示。
下面我们修改Tony 7月14日的日志：
下面来看一下引用前后的区别：
- 通常来说，在段落里加一些引用，就使用<q>，如果要引用一段或多段文字，就要用<blockquote>。
- 实际上，<blockquote>相当于一个新的段落。另外，并非所有浏览器显示<blockquote>时都会缩进。
- 可以把一个或多个<q>元素放在<blockquote>中，反过来也可以（不过把<blockquote>放在<q>中没有任何意义。
回车和 <br> 元素
有这样一个元素，它的唯一任务就是在你需要 时候提供一个换行，让浏览器注意到并插入回车符。这就是<br>元素。我们可以用<br>把刚才<blockquote>引用的内容分割开，来看看效果：
在第一章中我们说过，元素是开始标记 +内容 + 结束标记。 <br>却没有任何内容，也没有结束标记。由于<br>只是一个换行，是一个没有任何实际内容的元素，所以用简写，即只写开始标记，而省略结束标记。
像<br>这样没有实际内容的元素还有很多，我们把这些元素叫做void元素（空元素）。比如之前的<img>元素，就也是一个void元素。
让Tony的网站更上一层楼
两步轻松构建HTML列表
下面我们让Tony的网页中的城市内容以列表形式展现。
首先，创建一个HTML列表需要两个元素，结合使用这两个元素就构成了列表。第一个元素用来标记每个列表项，第二个元素确定你创建的是哪种类型的列表：有序列表还是无序列表。
第一步，将每个列表项放在一个<li>元素中。
第二步，用<ol>或<ul>元素包围列表项。
如下图：
下面改变后城市列表后的页面内容：
- <ol> 和<li>（或者 <ul> 和<li>）总是要一起使用。这些元素离开彼此就没有任何意义了。列表实际上就是一组列表项。<li>元素用来标识每个元素， <ol> 元素把它们归为一组。
- <ol> 和<ul>元素，设计为只能包含<li>元素，不能嵌套其他元素。
- 在列表中可以嵌套列表。
元素的嵌套
把一个元素放在另一个元素中，我们称之为“嵌套”。如<p>元素嵌套在<body>元素中，<body>元素嵌套在<html>元素中。
总结
188
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
