关于前端:HTML列表标签

67次阅读

共计 1101 个字符,预计需要花费 3 分钟才能阅读完成。

  • 无序列表
  • 有序列表
  • 自定义列表

1,无序列表

无序列表的标签是:

<ul> 无序列表 </ul>

定义一个无序列表:

<li> 定义一个列表项;
<ul> 标签里还有 type 属性,指定的是无序列表的符号;

type 的值有以下几个:

  • disc: 实心的圆点,默认值
  • circle: 空心的圆
  • square: 实心的正方形

例:

 <ul type="circle">
    <li> 湖南 </li>
    <li> 江苏 </li>
    <li> 河南 </li>
    <li> 郑州 </li>
</ul>

效果图:

  • 湖南
  • 江苏
  • 河南
  • 郑州

2,有序列表

有序列表的标签是

<ol> 有序列表 </ol>

ordered list 的缩写,有序列表其实就是带有序号的列表,

type 属性的取值为:

  • 1. 序号为 1.2.3.4.……
  • A. 序号为 A.B.C.D.……
  • a. 序号为 a.b.c.d.……
  • I 序号为 I.II.III.IV.……
  • i 序号为 i.ii.iii.iv.……

例:

<ol type="A"start="1">
    <li> 湖南 </li>
    <li> 嘉兴 </li>
    <li> 河南 </li>
    <li> 广东 </li>
</ol>

效果图:

  1. 湖南
  2. 嘉兴
  3. 河南
  4. 广东

3,自定义列表

自定义标签的构造是:

<dl> 自定义标签 </dl>

定义一个自定义列表

  • <dt> 列表项的题目
  • <dd> 列表项的形容

例:

<body>
<dl>
    <h3> 唐诗三百首 </h3>
    <dt> 静夜思 </dt>
    <dd> 床前明月光,疑是地上霜。举头望明月,抬头思故土。</dd>
    <dt> 绝句 </dt>
    <dd> 迟日江山丽,春风花草香。泥融飞燕子,沙暖睡鸳鸯。</dd>
</dl>
</body>

示例:

<html>
<head>
<meta charset="UTF-8">
<title> 列表标签 </title>
</head>
<body>
    喜好
    <ol type="A" start="3">
        <li> 玩手机
        <li> 看电视
        <li> 听音乐
    </ol>
    <!-- ol 定制有序列表,type 属性设置有序列表前每一项前的系数,蕴含(a,A,i,I,1)-->
    <!-- start 属性设置系数从那一项开始 -->
    <!-- li 定制有序列表中独自的一项 -->
    <hr>
    喜好
    <ul type="square">
        <li> 玩手机
        <li> 看电视
        <li> 听音乐
    </ul>
    <!-- ul 定制无序列表,type 定制每一项前的系数类型,蕴含(disc,square,circle)-->
    <hr>
    <dl>
        <dt> 喜好
        <dd> 玩手机
        <dd> 看电视
        <dd> 听音乐
    </dl>
    <!-- dl 定制列表,dt 定制列表题目,dd 定制列表我的项目 -->
    <hr>
</body>
</html>

正文完
 0