HTML学习第九章(HTML列表)

列表

 列表是网页中最常用的一种数据排列方式。

在HTML中,列表共有三种:有序列表、无序列表和定义列表。

1.有序列表

定义一些顺序重要的列表

<ol type="属性值">
    <li>张三</li>
    <li>李四</li>
    <li>王五</li>
</ol>
  1. <ol>和</ol>标志着有序列的开始和结束,而<li>和</li>标签表示这是一个列表项。一个有序列表可以包含多个列表项。
  2. <ol>和<li>需要配合一起使用,不可以单独使用,而且<ol>标签的子标签也只能是li标签,不能是其他标签。

注:属性说明:type:用来定义列表的编号类型 :

  • a 表示小写英文字母编号
  • A 表示大写英文字母编号
  • i 表示小写罗马数字编号
  • I 表示大写罗马数字编号
  • 1 表示数字编号(默认)

元素注意事项:

  • ol元素的子元素只能是li,不能是其他元素;
  • ol元素内部的文本,只能在li元素内部添加,不能在li元素外部添加。

2.无序列表

定义一些顺序不重要的列表

<ul type="属性值">
    <li>张三</li>
    <li>李四</li>
    <li>王五</li>
</ul>
  1. <ul>和</ul>标志着一个无序列表的开始和结束,<li>表示这是一个列表项。一个无须列表可以包含多个列表项。
  2. <ul>和<li>需要配合一起使用,不可以单独使用,而且ul标签的子标签也只能是li标签,不能是其他标签。这一点与有序列表是一样的。

注:属性说明:type:用来定义列表的标记类型 --HTML5已舍弃。

disc(默认-实心圆)/circle(空心圆)/square(实心正方形)/decimal(数字)。

现在修改默认标记类型则使用CSS属性修改:

<ul style="list-style-type: disc;">    //默认--实心圆
<ul style="list-style-type: square;">  //实心正方形
<ul style="list-style-type: circle;">  //空心圆

元素注意事项:

  • ul元素的子元素只能是li元素,不能是其他元素;
  • ul元素内部的文本,只能在li元素内部添加,不能在li元素外部添加。

3.定义列表

用来对一些专有名词进行解释说明

<dl>
    <dt> HTML </dt>
    <dd> 超文本标记语言 </dd>
    <dd> 是用来描述网页的一种语言 </dd>
​
    <dt> CSS </dt>
    <dd> 层叠样式表 </dd>
    <dd> 用来给网页添加样式的一种语言 </dd>
</dl>

注:

<dt> 标签定义一个描述列表的项目/名字;

<dd> 标签被用来描述一个描述列表的项目/名字。

元素注意事项:

  • dl元素的子元素只能是dt元素在前面,dd元素在后面;
  • dl元素内部的文本,只能在dt和dd元素内部添加,不能在dt和dd元素外部添加。

注意事项:

所有的列表可以进行嵌套,实现列表内展示列表的无限嵌套功能。

<ul>
    <li>第一级</li>
    <ul>
        <li>第二级</li>
        <ul>
           <li>第三级</li>
        </ul>
    </ul>
</ul>

猜你喜欢

转载自blog.csdn.net/Baileys_99/article/details/131984873