学习笔记:HTML列表

HTML支持有序、无序和自定义列表

有序列表:

  1. 第一个列表项
  2. 第二个列表项
  3. 第三个列表项

无序列表:

  • 列表项
  • 列表项
  • 列表项

1、无序列表

无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。

标签:<ul>

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

浏览器显示如下 

2、有序列表

有序列表也是一列项目,用数字进行标记,这个好像在学MarkDown的时候学的

标签:<ol>

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

3、自定义列表

自定义列表不仅仅是一列项目,而是项目及其注释的组合。

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

浏览器显示如下:

Coffee
- black hot drink
Milk
- white cold drink

4、嵌套列表

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<h4>嵌套列表:</h4>
<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea
        <ul>
          <li>China</li>
          <li>Africa</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

</body>
</html>

结果:

列表标签汇总

标签 描述
<ol> 定义有序列表
<ul> 定义无序列表
<li> 定义列表项
<dl> 定义列表
<dt> 自定义列表项目
<dd> 定义自定列表项的描述
发布了241 篇原创文章 · 获赞 360 · 访问量 4万+

猜你喜欢

转载自blog.csdn.net/cool99781/article/details/105640014