常见html标签详解（2）_列表

最新推荐文章于 2022-09-29 19:37:50 发布

风之舞_yjf

最新推荐文章于 2022-09-29 19:37:50 发布

阅读量309

点赞数

分类专栏： HTML 文章标签： html5 html 前端

本文链接：https://blog.csdn.net/no15870678621/article/details/107932690

版权

HTML 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

列表（list）：
定义：容器里面装载着文字或图表的一种形式，叫列表；列表最大的特点就是整齐、整洁、有序。

html支持有序、无序和自定义列表，在html中可以创建列表，html列表一共有三种：
1、有序列表（Ordered List）
2、无序列表（Unordered List）
3、自定义列表（Definition List）

有序列表：有序列表是一列项目的列表，列表项目使用数字进行标记。使用ol标签来创建有序列表（使用频率少）
使用li标签（list item）表示列表项

<html>
    <head>
         <title>有序列表类型</title>
    </head>
    <body>
         有序列表类型
<p>
         <ol>
              <li type="A">ONE-ONE</li>
              <li type="A">ONE-TWO</li>
         </ol>
</p>
         <ol>
              <li type="a">ONE-ONE</li>
              <li type="a">ONE-TWO</li>
         </ol>
<p>
         <ol>
              <li type="I">ONE-ONE</li>
              <li type="I">ONE-TWO</li>
         </ol>
</p>
<p>
         <ol>
              <li type="i">ONE-ONE</li>
              <li type="i">ONE-TWO</li>
         </ol>
</p>
         <ol>
              <li>ONE-ONE</li>
              <li>ONE-TWO</li>
         </ol>
    </body>
<html>

无序列表：无序列表也是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。使用ul标签来创建无序列表（使用频率多，应用于网站导航菜单）
使用li标签（list item）表示列表项

<html>
    <head>
	     <title>无序列表类型</title>
    </head>
    <body>
         <h1>无序列表类型</h1>
<hr>         <!--水平线-->
         <ul>
              <li type="disc">无序列表1</li>
              <li type="circle">无序列表2</li>
              <li type="square">无序列表3</li>
         </ul>
    </body>
</html>

自定义列表：自定义列表不仅仅是一列项目，而是项目及其注释的组合。使用dl标签来创建定义列表（使用频率少，类似下拉菜单）
使用dt标签（definition term）表示定义的内容
使用dd标签（definition description）表示对内容进行解释说明

<!doctype html>
<html lang="en">   
    <head>
	 <meta charset="UTF-8">
         <title>自定义列表</title>
    </head>
    <body>
         <dl>
              <dt>春天</dt>
              <dd>- 春意盎然，是万物复苏的季节</dd>
              <dt>秋天</dt>
              <dd>- 秋风送爽，是丰收的季节</dd>
         </dl>
    </body>
</html>

提示：列表之间可以互相嵌套，列表项内部可以使用段落、换行符、图片、链接以及其他列表等等

<html>
    <head>
         <title>列表的嵌套</title>
    </head>
    <body>
         <ol start="5">
              <li type="A">ONE-ONE</li>
              <li>ONE-TWO</li>
         </ol>
         <ol start="10">
              <li>ONE-ONE</li>
              <li type="i">ONE-TWO</li>
         </ol>
    </body>
</html>

<!doctype html>
<html lang="en">
  <head>
  <title>列表的嵌套</title>
  </head>
  <body>
      <ul>
	<li>
	     aa
		<ul>
		    <li>aa_1</li>
		    <li>aa_2</li>
		    <li>aa_3</li>
		</ul>
	</li>
      </ul>
  </body>
</html>