HTML 列表
HTML 支持有序、无序和定义列表
无序的HTML列表
无序列表以<ul>标签开头。 每个列表项都以 <li>标签开头 。
默认情况下，列表项将标有项目符号(小黑圈)：
示例：
<ul>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>无序HTML列表 – 选择列表项标记
list-style-type 属性用于定义列表项标记的样式：
| 值 | 描述 |
|---|---|
| disc | 将列表项标记设置为一个实心黑点(默认值) |
| circle | 将列表项标记设置为圆形 |
| square | 将列表项标记设置为正方形 |
| none | 列表项将不会被标记 |
示例 – Disc
<ul style="list-style-type:disc">
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>示例 – Circle
<ul style="list-style-type:circle">
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul><p>示例 - Square</p>
<ul style="list-style-type:square">
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>示例 – None
<ul style="list-style-type:none">
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>有序的HTML列表
有序列表以<ol>标记开头.每个列表项都以<li> 标标签开头。
默认情况下，列表项将标有数字：
示例
<ol>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ol>有序HTML列表 – 类型属性
标签的type属性<ol> tag, 定义了列表项标记的类型：
| 类型 | 描述 |
|---|---|
| 类型=”1″ | 列表项将用数字编号(默认) |
| 类型=”A” | 列表项将用大写字母编号 |
| 类型=”a” | 列表项将用小写字母编号 |
| 类型=”I” | 列表项将用大写罗马数字编号 |
| 类型=”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还支持描述列表。
描述列表是术语列表，其中包含每个术语的描述。
<dl>标记定义了描述列表，所述<dt>标签定义了术语(名称)，和<dd>标签描述各术语：
示例：
<dl>
<dt>咖啡</dt>
<dd>- black hot drink</dd>
<dt>牛奶</dt>
<dd>- white cold drink</dd>
</dl>嵌套的HTML列表
列表可以嵌套(列表中的列表)：
示例
<ul>
<li>咖啡</li>
<li>茶
<ul>
<li>黑茶</li>
<li>绿茶</li>
</ul>
</li>
<li>牛奶</li>
</ul>注意:列表项可以包含新列表和其他HTML元素，如图像和链接等。
控制列表计数
默认情况下，有序列表将从1开始计数。如果要从指定的数字开始计数，可以使用以下start属性：
示例：
<ol start="50">
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ol>CSS的水平列表
可以使用CSS以多种不同方式设置HTML列表的样式。
一种流行的方法是水平设置列表，以创建导航菜单：
示例：
<!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">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>提示: 您可以在我们的 CSS 教程中学习更多关于CSS的知识。
章节总结
- 使用HTML
<ul>元素定义无序列表 - 使用CSS
list-style-type属性定义列表项标签 - 使用HTML
<ol>元素定义有序列表 - 使用HTML
type属性定义编号类型 - 使用HTML
<li>元素定义列表项 - 使用HTML
<dl>元素定义描述列表 - 使用HTML
<dt>元素定义描述术语 - 使用HTML
<dd>元素在描述列表中描述术语 - 列表可以嵌套在列表中
- 列表项可以包含其他HTML元素
- 使用CSS属性
float:left或display:inline水平显示列表
HTML列表标签
| 标签 | 描述 |
|---|---|
<ul> |
定义了一个无序列表 |
<ol> |
定义了一个有序列表 |
<li> |
定义了一个列表项 |
<dl> |
定义列表 |
<dt> |
自定义列表项目 |
<dd> |
定义自定列表项的描述 |
原创文章，作者：奋斗，如若转载，请注明出处：https://blog.ytso.com/59269.html