前端列表

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

无序列表 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>


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

posted @ 2020-02-15 14:21  阳神  阅读(279)  评论(0)  编辑  收藏  举报