HTML基础——列表(一)

一、列表标记

  • 有序列表:按照数字或者字母等顺序排列列表项目。  <ol>、<li>以及type、start属性
  • 无序列表:没有顺序的列表项目。  <ul>、<dir>、<dl>、<menu>、<li>以及type属性

二、无序列表

1、无序列表标记——ul

语法:

<ul>
<li>第一项</li>
<li>第二项</li>
<li>······</li>
···
</ul>

  <ul></ul>标记表示无序列表的开始和结束,而<li>表示这是一个列表项的开始。

<html>
<head>
<title>创建无序列表</title>
</head>

<body>
<font size="+3" color="#0066FF">乒乓球级别:</font><br/>
<ul>
<li>初级</li>
<li>中级</li>
<li>高级</li>
<li>地狱级</li>
<li>中国级</li>
</ul>
</body>

</html>

2、无序列表类型——type

  语法:<ul type=符号类型>``` </ul>

符号类型包括:disc、circle、square。也可以用于<li type=符号类型> </li>

<html>
<head>
<title>创建无序列表</title>
</head>

<body>
<font size="+3" color="#0066FF">乒乓球级别:</font><br/>
<ul type="circle">
<li>初级</li>
<li type="disc">中级</li>
<li>高级</li>
<li>地狱级</li>
<li type="square">中国级</li>
</ul>
</body>

</html>

三、有序列表

1、有序列表标记——ol

语法:

<ol>
<li>第一项</li>
<li>第二项</li>
<li>······</li>
···
</ol>

默认数字序号排列。

<html>
<head>
<title>创建有序列表</title>
</head>

<body>
<font size="+3" color="#0066FF">乒乓球级别:</font><br/>
<ol>
<li>初级</li>
<li>中级</li>
<li>高级</li>
<li>地狱级</li>
<li>中国级</li>
</ol>
</body>

</html>

2、有序列表类型——type

  语法:<ol type=符号类型>``` </ol>

符号类型包括:1、A、a、Ⅰ、ⅰ。也可以用于<li type=符号类型> </li>

<html>
<head>
<title>创建有序列表</title>
</head>

<body>
<font size="+3" color="#0066FF">乒乓球级别:</font><br/>
<ol type = "A">
<li>初级</li>
<li type="a">中级</li>
<li>高级</li>
<li>地狱级</li>
<li type="1">中国级</li>
</ol>
</body>

</html>

3、有序列表起始数值——start

  默认起始数值从1开始,起始数值只能是数字。

  语法:

<ol start="起始数值">
<li>第一项</li>
<li>第二项</li>
<li>······</li>
···
</ol>

<html>
<head>
<title>创建有序列表</title>
</head>

<body>
<font size="+3" color="#0066FF">乒乓球级别:</font><br/>
<ol type = "A" start="3">
<li>初级</li>
<li type="a">中级</li>
<li>高级</li>
<li>地狱级</li>
<li type="1">中国级</li>
</ol>
</body>

</html>