HTML _ HTML 列表

HTML 列表

案例 - 无序列表

软件科学
建筑学
金融学

案例 - 有序列表

软件科学
建筑学
金融学

运行一下

HTML 无序列表

无序列表最外面是用<ul>标签包住的，列表的每一项用<li>标签即可。

一般来说，默认情况的无序列表是用实心黑色小圆圈来标记的。（关于列表的标记样式的设置，本页下方会详细介绍的。）

<ul>
  <li>软件科学</li>
  <li>建筑学</li>
  <li>金融学</li>
</ul>

运行一下

HTML 有序列表

有序列表最外面是用<ol>标签包住的，列表的每一项用<li>标签。

顾名思义，列表是有顺序的；默认情况，从上往下分别是1、2、3、4依次类推。（如果不想设置成数字顺序，后续还有高阶的使用心法。）

<ol>
  <li>天机棒 天机老人</li>
  <li>子母龙凤环 上官金虹</li>
  <li>小李飞刀 李寻欢</li>
</ol>

运行一下

HTML 无序列表的标记样式

通过设置<ul>标签的list-style-type属性即可设置标记的样式。

具体样式有如下几种：

取值	标记样式描述
disc	实心圆圈（默认）
circle	空心圆圈
square	小方块
none	不进行标记

运行一次下面的这个例子就全懂啦 ~

<ul style="list-style-type:disc">
  <li>专否社区</li>
  <li>专否沙盒</li>
</ul>

<ul style="list-style-type:circle">
  <li>专否社区</li>
  <li>专否沙盒</li>
</ul>

<ul style="list-style-type:square">
  <li>专否社区</li>
  <li>专否沙盒</li>
</ul>

<ul style="list-style-type:none">
  <li>专否社区</li>
  <li>专否沙盒</li>
</ul>

运行一下

HTML 有序列表的标记样式

通过设置<ul>标签的type属性即可设置标记的样式。

具体样式有如下几种：

type	标记样式描述
type="1"	用阿拉伯数字表示顺序（默认）
type="A"	使用大写字母来表示顺序
type="a"	使用小写字母来表示顺序
type="I"	使用大写的罗马数字来排序
type="i"	使用小写的罗马数字来排序

运行一次下面的这个例子就全懂啦 ~

<ol type="1">
  <li>天机棒 天机老人</li>
  <li>子母龙凤环 上官金虹</li>
  <li>小李飞刀 李寻欢</li>
</ol>

<ol type="A">
  <li>天机棒 天机老人</li>
  <li>子母龙凤环 上官金虹</li>
  <li>小李飞刀 李寻欢</li>
</ol>

<ol type="a">
  <li>天机棒 天机老人</li>
  <li>子母龙凤环 上官金虹</li>
  <li>小李飞刀 李寻欢</li>
</ol>

<ol type="I">
  <li>天机棒 天机老人</li>
  <li>子母龙凤环 上官金虹</li>
  <li>小李飞刀 李寻欢</li>
</ol>

<ol type="i">
  <li>天机棒 天机老人</li>
  <li>子母龙凤环 上官金虹</li>
  <li>小李飞刀 李寻欢</li>
</ol>

运行一下

HTML 描述性列表

这是一种不常用的HTML列表，描述性列表的核心意义是在HTML源码中体现出语义关系。

HTML描述性列表的最外层是<dl>；

在其内部用<dt>标签来定义出一个被描述的客体，从英文的角度来说<dt>是description term的缩写，其强调的就是一个被描述的客体词；

<dd>这个标签则是定义出对上述的客体此的具体描述内容，从英文的简称来说，该标签是description description的缩写，第1个description是整体的限定词，第2个description与上述的term是相对应的。大多情况下，<dd>标签定义出的内容会向右缩进。

<dl>
  <dt>独孤求败</dt>
  <dd>就是老年时养了一只大雕的那位</dd>
  <dt>东方不败</dt>
  <dd>爱上令狐冲的那位</dd>
</dl>

运行一下

列表的嵌套使用

列表是可以嵌套使用的：

<ul>
  <li>日月神教</li>
  <li>五岳剑派
    <ul>
      <li>中岳嵩山派</li>
      <li>东岳泰山派</li>
      <li>西岳华山派</li>
          <ul>
             <li>华山派气宗</li>
             <li>华山派剑宗</li>
          </ul>
      <li>南岳衡山派</li>
      <li>北岳恒山派</li>
    </ul>
  </li>
  <li>少林派</li>
  <li>武当派</li>
  <li>青城派</li>
</ul>

运行一下

有序列表的起始数字

可以对<ol>的start属性进行设置，从而自定义有序列表的起始数字。

<ol start="419">
  <li>浪漫大床房</li>
  <li>码农单人房 ——_——|||</li>
  <li>码农单人房 ——_——|||</li>
</ol>

运行一下

列表的元素可包含其他HTML元素

列表的元素可包含其他HTML元素，下面举的这个例子也是怪怪的，这里其实想说的潜台词是“活学活用”，列表可以被制作成各种功能组件，譬如按钮组、表单组、菜单导航栏等。

例子如下，会意即可：

<ul>
 <li><b>加粗</b></li>
 <li><input type="password"></li>
 <li><button>按钮</button></li>
</ul>

运行一下

利用CSS来搞出水平列表

对，就是搞出，用css搞出水平列表，就是让每个列表元素都在同一条水平线上来分布。有时候，网页的水平菜单导航栏就是这么搞出来的。具体咋搞的呢，主要是设置CSS属性float:left或display:inline即可。

具体还是看例子吧：

<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111111;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">华山派首页</a></li>
  <li><a href="#book">气宗读书</a></li>
  <li><a href="#group">剑宗小组</a></li>
  <li><a href="#fm">风清扬fm</a></li>
</ul>

</body>
</html>

运行一下

总结一下

用<ul>标签来定义无序列表
用list-style-type属性来设置无序列表的标记样式
用<ol>标签来定义有序列表
用type属性来设置有序列表的标记样式
用<li>标签来定义每个列表元素
用<dl>标签来定义描述性列表
用<dt>标签来定义描述性列表中被描述的客体
用<dd>标签来定义对客体的具体描述
各种列表是可以相互嵌套的
列表元素可以包含其他的HTML元素
可以通过设置CSS属性float:left或display:inline来搞出一个水平列表

HTML 列表

推广