【html学习笔记15】- 列表

2023-08-28 本文已影响0人兔小小

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>