HTMl-列表.jpg

有序列表

基本语法:

<ol>
    <li>星期一</li>
    <li>星期二</li>
    <li>星期三</li>
    <li>星期四</li>
    <li>星期五</li>
    <li>星期六</li>
    <li>星期天</li>
</ol>
  1. 星期一
  2. 星期二
  3. 星期三
  4. 星期四
  5. 星期五
  6. 星期六
  7. 星期天

有序列表序号类型

<ol type="1">
    <li>星期一</li>
    <li>星期二</li>
    <li>星期三</li>
    <li>星期四</li>
    <li>星期五</li>
    <li>星期六</li>
    <li>星期天</li>
</ol>
类型值列表项目的序号类型
1数字1、2、3、4……
a小写英文字母a、b、c、d……
A大写英文字母A、B、C、D……
i小写罗马数字ⅰ、ⅱ、ⅲ、ⅳ……
I大写罗马数字Ⅰ、Ⅱ、Ⅲ、Ⅳ……

有序列表的启示数值

默认情况下有序列表的启始编号始从1开始的,那么我们可以通过 start属性对起始编号进行控制。

基本语法:

<ol type="1" start="2">
    <li>星期一</li>
    <li>星期二</li>
    <li>星期三</li>
    <li>星期四</li>
    <li>星期五</li>
    <li>星期六</li>
    <li>星期天</li>
</ol>

html-ol-start.png

无序列表

基本语法:

<ul>
    <li>星期一</li>
    <li>星期二</li>
    <li>星期三</li>
    <li>星期四</li>
    <li>星期五</li>
    <li>星期六</li>
    <li>星期天</li>
</ul>

无序列表中的项目排列没有顺序,一般以符号作为分项的标识。

  • 星期一
  • 星期二
  • 星期三
  • 星期四
  • 星期五
  • 星期六
  • 星期天

无序列表的类型

一般情况下无序列表的项目符号是通过type属性我们可以控制符号样式

类型值列表项目的符号
disc默认值,黑色实心圆的项目符号●
circle空心圆的项目符号○
square正方形的项目符号”□“

使用方法:

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="utf-8"> 
        <title>无序列表类型</title> 
    </head> 
    <body>
    <ul type="circle">
        <li>东风夜放花千树,更吹落,星如雨。</li>
        <li>宝马雕车香满路。</li>
        <li>凤箫声动,玉壶光转,一夜鱼龙舞。</li>
        <li>蛾儿雪柳黄金缕,笑语盈盈暗香去。</li>
        <li>众里寻他千百度,蓦然回首,那人却在,灯火阑珊处。</li>
    </ul>
    </body> 
</html>

html-ul-type.png

定义列表

定义列表由两部分组成:定义条件和定义描述,定义列表的全程是definition list。<dt>用来指定需要解释的名词,全称是definition term; <dd>是具体的解释,全称是definition description。

基本语法:

<dl>
    <dt>定义条件</dt>
    <dd>定义描述</dd>
    ... ...
</dl>

在该语法中<dl></dl>定义了列表的开始和结束。<dt>后添加名词, <dd>后添加具体的解释。

菜单列表标记

基本语法:

<meun>
    <li>圆珠笔</li>
    <li>钢笔</li>
    <li>中性笔</li>
</meun>