前情提要
在前两章的内容,我们学习了标记、元素、链接、路径……这一章,我们要学以致用,创建一个完整的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>元素中。