前端列表

含义
把…制成表,以表显示容器里面装载着文字或图表的一种形式,叫列表。列表最大的特点就是 整齐 、整洁、 有序

无序列表 ul

无序列表的各个列表项之间没有顺序级别之分,是并列的。其基本语法格式如下:

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ul>

注意点:

 1. <ul></ul>中只能嵌套<li></li>,直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
 2. <li></li>之间相当于一个容器,可以容纳所有元素。
 3. 无序列表会带有自己样式属性,放下那个样式,一会让CSS来!

例子:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
     <h3> 你喜欢的水果:</h3>
     <ul>
      <li>香蕉</li>
      <li>苹果</li>
      <li>橘子</li>
      <li>榴莲</li>
      <li>大白菜</li>
      <li>
       <h4>水果蔬菜</h4>
       <p>西红柿</p>
      </li>
     </ul>
    </body>
</html>

运行结果如下:

有序列表 ol

有序列表即为有排列顺序的列表,其各个列表项按照一定的顺序排列定义,有序列表的基本语法格式如下:

<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ol>

所有特性基本与ul 一致。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
     <ol>
      <li>中国</li>
      <li>美国</li>
      <li>英国</li>
      <li>俄罗斯</li>
     </ol>
    </body>
</html>

运行结果如下:

自定义列表

定义列表常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号。其基本语法如下:

  <dt>名词1</dt>
  <dd>名词1解释1</dd>
  <dd>名词1解释2</dd>
  ...
  <dt>名词2</dt>
  <dd>名词2解释1</dd>
  <dd>名词2解释2</dd>
  ...
</dl>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
     <dl>
      <dt>北京</dt>
      <dd>昌平</dd>
      <dd>通州</dd>
      <dd>顺义</dd>
      <dd>海淀</dd>
     </dl>
     <dl>
      <dt>雍正</dt>
      <dd>甄嬛</dd>
      <dd>皇后</dd>
      <dd>沈眉庄</dd>
      <dd>年妃</dd>
      <dt>雍正</dt>
      <dd>甄嬛</dd>
      <dd>皇后</dd>
      <dd>沈眉庄</dd>
      <dd>年妃</dd>
     </dl>
    </body>
</html>


网站底部的友情链接用自定义列表做比较好

发布了156 篇原创文章 · 获赞 16 · 访问量 5929

猜你喜欢

转载自blog.csdn.net/qq_44797965/article/details/104327421