html制作列表

HTML列表是网页中常见的一种元素，它可以包含有序列表（ol）和无序列表（ul），有序列表按照数字、字母或符号的顺序进行排列，而无序列表则没有特定的顺序。

1、创建有序列表

有序列表使用<ol>标签来定义，每个列表项使用<li>标签表示。

<ol>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ol>

2、创建无序列表

无序列表使用<ul>标签来定义，每个列表项使用<li>标签表示。

<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ul>

3、列表样式

可以通过CSS来设置列表的样式，例如设置列表项的字体大小、颜色等。

ul {
  font-size: 18px;
  color: red;
}
ol {
  font-size: 24px;
  color: blue;
}

4、列表嵌套

可以将一个列表嵌套在另一个列表中，例如将一个有序列表嵌套在一个无序列表中。

<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
  <ul>
    <li>草莓</li>
    <li>蓝莓</li>
  </ul>
</ul>

5、列表项样式

可以通过CSS来设置列表项的样式，例如设置列表项的背景颜色、边框等。

li {
  background-color: yellow;
  border: 1px solid black;
  padding: 10px;
}

6、列表项链接

可以将列表项设置为链接，点击链接可以跳转到其他页面。

<ul>
  <li><a href="https://www.apple.com">苹果</a></li>
  <li><a href="https://www.banana.com">香蕉</a></li>
  <li><a href="https://www.orange.com">橙子</a></li>
</ul>

7、列表项图片

可以将列表项设置为图片，显示图片的同时也可以添加链接。

<ul>
  <li><a href="https://www.apple.com"><img src="apple.jpg" alt="苹果"></a></li>
  <li><a href="https://www.banana.com"><img src="banana.jpg" alt="香蕉"></a></li>
  <li><a href="https://www.orange.com"><img src="orange.jpg" alt="橙子"></a></li>
</ul>

8、列表项表格

可以将列表项设置为表格，显示表格的同时也可以添加链接。

<ul>
  <li><a href="https://www.apple.com"><table><tr><td>苹果</td></tr></table></a></li>
  <li><a href="https://www.banana.com"><table><tr><td>香蕉</td></tr></table></a></li>
  <li><a href="https://www.orange.com"><table><tr><td>橙子</td></tr></table></a></li>
</ul>

9、列表项内联样式

可以在列表项内部直接使用CSS来设置样式，例如设置字体大小、颜色等。

<ul>
  <li style="font-size: 24px; color: blue;">苹果</li>
  <li style="font-size: 36px; color: green;">香蕉</li>
  <li style="font-size: 48px; color: red;">橙子</li>
</ul>

10、列表项内联类名和ID

可以在列表项内部直接使用CSS类名和ID来设置样式，例如设置背景颜色、边框等。

<ul>
  <li class="fruit" id="apple">苹果</li>
  <li class="fruit" id="banana">香蕉</li>
  <li class="fruit" id="orange">橙子</li>
</ul>