首页 > 编程笔记 > HTML笔记 阅读：1

HTML中的列表（附带实例，新手必看）

列表是一种非常有效的展示信息的方式，能够增强文字内容的逻辑性。本节介绍如何在HTML中设置各种列表格式，包括有序列表、无序列表，以及嵌套列表。

HTML有序列表

有序列表也称数字式列表，它是一种在各项内容前显示有数字或字母的缩排列表，用来表示文本内容的前后顺序关系。例如，一个操作步骤列表（如菜谱）在逻辑上就应该是一个有序列表。

创建有序列表需要使用有序列表标记符 <ol> 和列表项标记符 <li>，基本语法如下： 
<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ol>
ol 标记符的 type 属性可用来设置数字序列样式，属性值如下表所示。

表：有序列表的 type 属性值
值 含义
1 阿拉伯数字：1、2、3 等，此选项为默认值
A 大写字母：A、B、C 等
a 小写字母：a、b、c 等
I 大写罗马数字：I、Ⅱ、Ⅲ、IV 等
i 小写罗马数字：i、ii、iii、iv 等

例如，以下代码将创建一个以大写罗马数字排序的列表： 
<ol type="I">
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ol>
注意，用 type 属性设置列表类型显然也属于“设置显示效果”问题，建议使用 CSS 替代。

HTML无序列表

无序列表也称强调式列表，它是一种在各项内容前显示有特殊项目符号的缩排列表，用于表示并列的关系。例如，网站的导航条一般而言就应该是一个无序列表。

创建无序列表需使用无序列表标记符 <ul> 和列表项标记符 <li>。与 <ol> 标记符类似，<ul> 标记符也包含一个 type 属性，用于控制列表项前特殊符号的显示。

无序列表中 type 属性的取值有 3 种：
因此，创建无序列表的基本语法如下： 
<ul type="disc|circle|square">
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

HTML嵌套列表

如果把整个列表作为某个列表项下的内容，则能形成嵌套列表。有序列表和无序列表都可以嵌套，也可以互相嵌套，如以下实例代码所示： 
<html>
<head><title>混合嵌套列表</title></head>
<body>
<h1>如何开始玩《王者荣耀》？</h1>
<hr />
<ol>
  <li>选择英雄：</li>
    <ul type="square">
       <li> 坦克（项羽、程咬金等）</li>
       <li> 法师（诸葛亮、貂蝉等）</li>
       <li> 射手（后羿、孙尚香等）</li>
       <li> 战士（花木兰、杨戬等）</li>
       <li> 刺客（孙悟空、阿珂等）</li>
       <li> 辅助（鬼谷子、张飞等）</li>
    </ul>
  <li>组队战斗！</li>
</ol>
</body>
</html>
效果见下图：


图 1 混合嵌套列表网页效果

相关文章