HTML——列表

来源：互联网发布：三菱fx3ga编程手册编辑：程序博客网时间：2024/06/16 19:02

本篇博客简要讲讲制作网页时如何建立列表。

HTML中列表主要分为三种类型：有序列表(Ordered List)；无序列表(Unordered List)；定义列表(Definition List)。

下面分别对这三个例子进行举例简单讲解一下：

一、有序列表(Ordered List)：

※ 有序列表是一列项目，列表项目使用数字进行标记，也可以使用罗马数字、大写或小写字母进行标记。

※ 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

※ 下面举几个例子：

1、建立数字编号的列表

（1）、先举个单用<ol>和<li>标签创建带数字编号的列表：（理科科目）

<html><head>    <title>理科</title></head><body>    <ol>        <li>《语文》</li>        <li>《数学》</li>        <li>《英语》</li>        <li>《化学》</li>        <li>《物理》</li>        <li>《生物》</li>    </ol></body></html>

（2）平常大多数人做列表都从1开始，但是有些人不喜欢从1开始，下面就讲讲如何设置列表不从1开始：

∮ 首先讲讲设置时需要用到的属性：

① 设置起始的序号：使用<ol>标签中的start属性

②改变列表内的编号顺序：使用<li>标签中的value属性

∮ 例子：把上边的理科科目起始序号改成从20开始，设置《化学》下边的科目都从40开始

<ol start="20">        <li>《语文》</li>        <li>《数学》</li>        <li>《英语》</li>        <li value="40">《化学》</li>        <li>《物理》</li>        <li>《生物》</li>    </ol>

2、建立指定编号的格式和顺序列表：用<ol>和<li>标签的type属性指定编号系统的类型。

例子：用小写字母将第（1）个理科项目的列表进行修改

<ol type="a">        <li>《语文》</li>        <li>《数学》</li>        <li>《英语》</li>        <li>《化学》</li>        <li>《物理》</li>        <li>《生物》</li>    </ol>

二、无序列表(Unordered List)：

※ 无序列表是一个项目的列表，此列项目使用实心的圆圈、实心方块等进行标记。
※ 无序列表始于 <ul> 标签。每个列表项始于 <li>。

※ 建立带有项目符号的列表：主要使用用<ul>的type属性指定符号的样式

※ 例子：

<ul type="disc">        <li>《语文》</li>        <li>《数学》</li>        <li>《英语》</li>        <li>《理综》</li>    </ul>    <ul type="square">        <li>《语文》</li>        <li>《数学》</li>        <li>《英语》</li>        <li>《理综》</li>    </ul>    <ul type="circle">        <li>《语文》</li>        <li>《数学》</li>        <li>《英语》</li>        <li>《理综》</li>    </ul>

三、定义列表(Definition List)：
※ 自定义列表不仅仅是一列项目，而是项目及其注释的组合。
※ 自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

※ 例子：

1、建立无符号无数字的列表：用<dl>和<dd>标签创建

<dl>        <dd>《语文》</dd>        <dd>《数学》</dd>        <dd>《英语》</dd>        <dd>《理综》</dd>    </dl>

2、建立无符号无数字缩进的列表：用<dl>和<d>标签创建

<dl>        <dt>《语文》</dt>        <dt>《数学》</dt>        <dt>《英语》</dt>        <dt>《理综》</dt>    </dl>

3、建立术语列表：在<dl>元素中同时使用<dt>和<dd>标签创建术语列表。

∮ 术语列表中的列表项由两部分组成：

①术语：<dt>标签指定

②术语的说明：<dd>标签指定

∮ 例子：

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

阅读全文

0 0