HTML之列表

ゞ浴缸里的玫瑰 2022-06-04 08:52 132阅读 0赞

（1）建立数字编号的列表：

使用<ol>和<li>标签创建带数字编号的列表。

例如：

<ol>
     <li>《Java从入门到精通》
    	<li>《JSP快速入门》
    	<li>《VC++深入编程》
    	<li>《VB实例教程》
    	<li>《C++系统编程》
    </ol>

效果如下：

![Image 1][]![20171209145328670][]

在<ol>标签中使用start属性，设置起始的序号。在<li>标签中使用value属性，改变列表内的编号顺序。

例如：

<ol start="10">
    	<li>《Java从入门到精通》
    	<li>《JSP快速入门》
    	<li>《VC++深入编程》
    	<li value="20">《VB实例教程》
    	<li>《C++系统编程》
    </ol>

效果如下：

![Image 1][]![20171209145347344][]

**（2）指定编号的格式和顺序：**

在<ol> 和 <li>标签中，使用type属性指定编号系统的类型。type属性的取值如下所示：

![20171209145444162][]

例如：

<ol type="A">
    	<li>《Java从入门到精通》
    	<li>《JSP快速入门》
    	<li>《VC++深入编程》
    	<li>《VB实例教程》
    	<li>《C++系统编程》
    </ol>

效果如下：

![20171209145614760][]

**（3）建立带有项目符号的列表：**

使用<ul> 和 <li> 标签创建带有项目符号的列表，<ul>和<li>标签的type属性指定符号的样式，取值如下：

disc ：显示为实心的圆圈

square：显示为实心的方块

circle：显示为空心的圆圈

例如：

<ul type="disc">
    	<li>《Java从入门到精通》
    	<li>《JSP快速入门》
    	<li>《VC++深入编程》
    	<li>《VB实例教程》
    	<li>《C++系统编程》
    </ul>

效果如下：

![20171209145858327][]

![Image 1][]

**（4）建立无符号的列表：**

使用<dl>与<dt>标签创建无符号的列表。

例如：

<dl>
    	<dt>《Java从入门到精通》
    	<dt>《JSP快速入门》
    	<dt>《VC++深入编程》
    	<dt>《VB实例教程》
    	<dt>《C++系统编程》
    </dl>

效果如下：

![20171209150119519][]

![Image 1][]

使用<dd>标签替换<dt>，可以创建缩进的列表。

**（5）建立术语列表：**

在<dl>元素中同时使用<dt>和<dd>标签，建立术语列表。术语列表中的列表项由两部分组成：术语和它的说明。术语由<dt>标签指定，说明由<dd>标签指定。

例如：

<dl>
    	<dt>HTML
    	<dd>超文本标记语言
    	<dt>HTTP
    	<dd>超文本传输协议
    </dl>

效果如下：

![20171209150251220][]

感谢您的阅读~

[Image 1]: 
[20171209145328670]: /images/20220604/06b49ea30cd94edb9169b2d4972a0467.png
[20171209145347344]: /images/20220604/a158470350fc4a13b1ac9ef5eb8be5ab.png
[20171209145444162]: /images/20220604/cae566527e2a4ae0a5d9f69ef1def541.png
[20171209145614760]: /images/20220604/da6b41d4e8894b409d6679288e3cdcc8.png
[20171209145858327]: /images/20220604/a3e02dce9e0945659a0db52d46f8016a.png
[20171209150119519]: /images/20220604/4aa85c042d454b2bac59c24bf27b5b4c.png
[20171209150251220]: /images/20220604/da201f3dd2ba4465b40945243825ad98.png