HTML 列表允许 Web 开发人员在列表中对一组相关项进行分组。
无序 HTML 列表
无序列表以标记<ul>开头。每个列表项都以标记<li>开头。默认情况下，列表项将标有项目符号（黑色小圆圈）：
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
无序列表有不同的标记
disc标记无序列表
<ul style="list-style-type:disc;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
circle标记无序列表
<ul style="list-style-type:circle;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
square标记无序列表
<ul style="list-style-type:square;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
none标记无序列表
<ul style="list-style-type:none;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
嵌套的 HTML 无序列表
列表可以嵌套
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
有序的 HTML 列表
有序列表以标记<ol>开头。每个列表项都以标记<li>开头。默认情况下，列表项将标有数字：
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
网页描述列表
HTML 还支持描述列表。描述列表是术语列表，其中包含每个术语的说明。标签<dl>定义描述列表，标签<dt>定义术语（名称），标签<dd>描述每个术语：
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
带 CSS 的水平列表
HTML列表可以用CSS以许多不同的方式设置样式。一种流行的方法是水平设置列表样式，以创建导航菜单：
<!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>
网友评论