HTML|列表标签-CFANZ编程社区

HTML|列表标签

1.什么是列表

列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快地获得相应的信息。

列表可以分为：

无序列表
有序列表
定义列表

上诉的几种列表的分类的显示方式其实就是一种无序列表。

2.有序列表

大标签是ol（ordered list的缩写），在ol中再添加小标签li即可显示出列表：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表标签</title>
</head>
<body>

<!--
有序列表：
大标签：ol标签（ordered list的缩写）
小标签：li标签
-->
<ol>
  <li>Java</li>
  <li>C++</li>
  <li>Python</li>
  <li>HTML</li>
</ol>


</body>
</html>

HTML|列表标签_列表

3.无序列表

大标签是ul（unordered list的缩写），在ul中再添加小标签li即可显示出列表：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表标签</title>
</head>
<body>

<!--
有序列表：
大标签：ol标签（ordered list的缩写）
小标签：li标签
-->
<ol>
  <li>Java</li>
  <li>C++</li>
  <li>Python</li>
  <li>HTML</li>
</ol>

<!--水平线作为分隔-->
<hr/>

<!--
无序列表：
大标签：ul（unordered list的缩写）
小标签：li标签
-->
<ul>
  <li>语文</li>
  <li>数学</li>
  <li>英语</li>
</ul>

</body>
</html>

HTML|列表标签_java_02

4.自定义列表

自定义列表：
大标签：dl（definition list的缩写）
dt标签：dt（t即title）表示列表名称
dd标签：dd（d即details）表示列表内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表标签</title>
</head>
<body>

<!--
有序列表：
大标签：ol标签（ordered list的缩写）
小标签：li标签
-->
<ol>
  <li>Java</li>
  <li>C++</li>
  <li>Python</li>
  <li>HTML</li>
</ol>

<!--水平线作为分隔-->
<hr/>

<!--
无序列表：
大标签：ul（unordered list的缩写）
小标签：li标签
-->
<ul>
  <li>语文</li>
  <li>数学</li>
  <li>英语</li>
</ul>

<!--水平线作为分隔-->
<hr/>

<!--
自定义列表：
大标签：dl（definition list的缩写）
dt标签：dt（t即title）表示列表名称
dd标签：dd（d即details）表示列表内容
-->
<dl>
  <dt>学科：</dt>
  <dd>语文</dd>
  <dd>数学</dd>
  <dd>英语</dd>

  <dt>编程语言：</dt>
  <dd>C++</dd>
  <dd>Java</dd>
  <dd>Python</dd>
</dl>

</body>
</html>

HTML|列表标签_c++_03

人生没有白走的路，每一步都算数！