html列表标签分为那三种,列表标签之间是如何嵌套呢?

作者:IT技术 | 时间:2018-11-05

html列表标签分为:有序列表标签,无序列表标签,自定义列表标签三种,下面通过Html列表代码详细讲解下html列表标签的嵌套

HTML无序列表标签

无序列表使用 <ul> 标签开始,每个内容项用<li>内容</li>标签

HTML无序列表标签实例代码如下:

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

HTML 有序列表标签

有序列表使用<ol> 标签开始。每个列表项用<li>内容</li>标签。

HTML 有序列表标签代码实例:

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

HTML 自定义列表标签

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

HTML 自定义列表标签代码实例:

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

html标签嵌套代码1

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>我有答案www.woyoudaan.cn</title> 
</head>
<body>
<h4>嵌套列表:</h4>
<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>
</body>
</html>

效果如下:

html列表标签分为那三种,列表标签之间是如何嵌套呢?

html标签嵌套代码2

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>我有答案www.woyoudaan.cn</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>

效果如下:

html列表标签分为那三种,列表标签之间是如何嵌套呢?

通过上面的html标签代码实例,你知道html标签分为哪几种以及html列表标签如何实现嵌套了吗?