3.4　列表标签小案例：制作国际新闻页面

一般来说，新闻网页上都会以非常整齐的列表形式展示每个新闻的标题和简介，在HTML中，这些列表也有对应的标记，这一节我们通过一个新闻页面的例子了解一下列表标签的用法。

3.4.1　列表标签的妙用

任务描述：新闻列表、标签的嵌套、列表的使用，效果见图3.6。

图3.6

操作步骤：打开Notepad++，新建02_news.html，并输入如图3.7所示的代码。

在这个任务中，有三个标签：＜hr＞、＜ul＞、＜li＞，对应着每一行代码来看。

代码行1-7，16-17：基本框架的代码始终和3.2小节案例一致，不再赘述。

代码行8：＜h2＞是二级标题标签。

代码行9：＜hr＞是一个单标记，它的作用是画了一条横线，将标题与正文分隔开，这个很有用，一定要记住。

图3.7

代码行10和15：＜ul＞＜/ul＞是无序列表的标签，无序的意思是用实心原点来代表每一个条目，这是默认的，如果你想要更多形状，可以参考HTML5手册，具体见这一章的结尾。无序列表在实际的应用中非常广泛，需要牢记。

代码行11-14：四个li标签表示每一个新闻条目，且它们都是超链接。其中，＜a＞中href=“#”是指仍然停留在当前页面，不调转至其他页面，另外，target=“_blank”是说另外打开一个新网页。（目标窗口的打开方式还有其他三种形式，请自己去查看手册自学）。你可以点击每一个条目看看效果，浏览器中又打开了4个新的网页窗口。你还会发现，＜a＞标签被放在了＜li＞标签里面，叫嵌套，就是标记内部套着另一个标记，这个非常常见，慢慢就会更有体会了。

3.4.2　列表标签的基本用法

在HTML中，列表分为有序列表＜ol＞和无序列表＜ul＞，要记住这两个标签，可以借助英文单词，ordered List就是有序列表，意思是条目都是按照数字排列的顺序，比如罗马数字1、2等，而它的否定unordered List是无序列表，它其中的条目就不是按照数字顺序，而是统一的圆点、方块等实心形状。关于列表条目，则无论有序、无序，统一为＜li＞，这里我们以无序列表为例，说明列表的基本用法如下：

列表内部的条目内容很广泛，可以是文字类的新闻列表，也可以是图片，甚至可以是一个图文块。总之，你希望网页上的内容采用整齐的条目类表示法，就可以采用列表标签。