HTML5——3列表标签

HTML的列表标签主要分为三种,有序列表、无序列表和定义列表。

1.有序列表:有序列表,顾名思义,就是有顺序的列表。一般用于排名等,对排序有要求的情况下。

有序列表主要涉及的标签

<ol>标签 是有序列表标签。

ol内元素是有序的,并且自带序号,后期学完css可以去掉或改变样式

ol内除了li标签外不要写其他东西

<li>标签

li是块及元素,独占一行。

li标签里存放ol的内容

li标签可以嵌套其他标签

2.无序列表:无序列表,每个标题间没有顺序,默认为一个圆点。

<ul>标签 是无序列表标签。

同理,ul内也不要写除了li的其他内容

<li>标签

li是块及元素,独占一行。

li标签里存放ol的内容

li标签可以嵌套其他标签

3.定义列表:用于自定义的一些内容

<dl>标签 是定义列表标签

<dt>标签 是定义标题

dt是块级元素 独占一行

<dd>标签 是定义属性

dd是块级元素 独占一行

dd的内容是无序的 没有序号

4.测试效果

以本文章为例 测试有序列表、无序列表的嵌套。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>列表测试</title>
</head>
<body>
<p>
HTML的列表标签主要分为三种,<strong>有序列表</strong>、<strong>无序列表</strong>和<strong>定义列表</strong>。
</p>
<ol>
<li>有序列表:有序列表,顾名思义,就是有顺序的列表。一般用于排名等,对排序有要求的情况下。<br /> 有序列表主要涉及的标签
<ul>
<li>&lt;ol&gt;标签 是有序列表标签。
<p>ol内元素是有序的,并且自带序号,后期学完css可以去掉或改变样式 ol内除了li标签外不要写其他东西</p>
</li>
<li>&lt;li&gt;标签
<p>
li是块及元素,独占一行。<br /> li标签里存放ol的内容<br /> li标签可以嵌套其他标签
</p>
</li>
</ul>
</li>
<li>无序列表:无序列表,每个标题间没有顺序,默认为一个圆点。
<ul>
<li>&lt;ul&gt;标签 是无序列表标签。
<p>同理,ul内也不要写除了li的其他内容</p>
</li>
<li>&lt;li>&gt;l标签
<p>
li是块及元素,独占一行。<br /> li标签里存放ol的内容<br /> li标签可以嵌套其他标签
</p>
</li>
</ul>
</li>
<li>定义列表:用于自定义的一些内容
<ul>
<li>&lt;dl&gt;标签 是定义列表标签</li>
<li>&lt;dt&gt;标签 是定义标题
<p>dt是块级元素 独占一行</p>
</li>
<li>&lt;dd&gt;标签 是定义属性
<p>dd是块级元素 独占一行</p>
</li>
</ul>
</li>
</ol>
</body>
</html>

定义列表测试效果

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<dl>
<dt>水果</dt>
<dd>香蕉</dd>
<dd>草莓</dd>
<dd>火龙果</dd>
</dl>
<hr/>
<dl>
<dt>电脑</dt>
<dd>联想</dd>
<dd>IBM</dd>
<dd>苹果</dd>
</dl>
</body>
</html>

原文地址:https://www.cnblogs.com/haoyp/p/7061160.html