HTML之列表标签（笔记三）

来源：互联网发布：php实时更新数据编辑：程序博客网时间：2024/05/17 04:51

1. HTML中的列表标签
- 1.1 无序列表Unordered List(使用最多)
  - 注意点
  - 使用场景
- 1.2 有序列表Ordered List(使用最少)
- 1.3 定义列表Definition List(其次)
  - 使用场景
  - 注意点
  - 练习

HTML中的列表标签

回到目录

列表标签主要是给一些数据添加列表语义，就是告诉浏览器哪些数据是一个整体。

无序列表

回到目录

给一堆数据添加列表语义，并且这一堆数据中所有的数据没有先后顺序。<!--无序列表的格式--><ul> Unordered List 缩写    <li>需要显示的条目内容</li> List Item 缩写    <li>需要显示的条目内容</li>          <li>需要显示的条目内容</li></ul>

案例01 :

<ul>        <li>太原</li>        <li>大同</li>        <li>吕梁</li>        <li>朔州</li>        <li>运城</li></ul>

效果如下 :

太原
大同
吕梁
朔州
运城

注意点 :

回到目录

无序列表标签只为一堆数据添加列表语义，并不改变样式
ul标签和li标签是一个整体，所以它们都是一起出现的，不会单个出现，是结合在一起使用的
正是因为ul标签和li标签是一个组合，所以ul标签中不建议包含其他的标签，也就是说ul标签中一般只会见到li标签
虽然ul标签内尽量只包含li标签，但是对与复杂的界面来说，还可以在li标签内部再包含其他标签，如再包含个ul标签都是可以的

使用场景

回到目录

新闻列表条目展示
商品列表
导航条

案例02 ：

<h4>全国的省份</h4>     <ul>         <li>                <h5>山西省</h5>                <ul>                    <li>大同市</li>                    <li>太原市</li>                </ul>         </li>         <li>             <h5>山东省</h5>             <ul>                 <li>济南市</li>                 <li>青岛市</li>             </ul>         </li>     </ul>

效果如下 :

全国的省份

山西省
- 大同市
- 太原市
山东省
- 济南市
- 青岛市

在WebStrom中快速创建ul标签

快捷方式 : ul>li*N N代表生成几个li标签 然后按tab键          ul>li*N>h1+ul>li*N 这个也是同理

有序列表

回到目录

有序列表标签是给一堆数据添加列表语义的，并且这一堆数据中的所有数据时有先后顺序的,而且注意事项和用法跟无序列表大致相同<ol type="A">    <h3>成绩单</h3>    <li>小红98分</li>    <li>小明60分</li>    <li>小刚59分</li></ol>

效果如下 :

成绩单

小红98分
小明60分
小刚59分

定义列表

回到目录

定义列表标签是给一堆数据添加列表语义的，通过dt标签给所有的列表条目添加标题，dd标签来添加描述。其中dt（Definition Title）标签用来定义列表条目的标题；dd（Definition Description）标签用于定义列表条目的描述。<dl>    <dt>潮服</dt>    <dd>韩国服装</dd>    <dd>巴黎时尚</dd>    <dt>家居</dt>    <dd>瑞士家居</dd>    <dd>哥特式家居</dd></dl>

效果如下 :

潮服: 韩国服装; 巴黎时尚
家居: 瑞士家居; 哥特式家居

使用场景

回到目录

01. 用来制作网页底部的相关信息02. 用来做图文混排

注意点 :

回到目录

01. dl标签与dt标签和dd标签是组合标签，所以不能单独出现，都是一起出现的。02. dt标签和dd标签建议是一对一的成对出现，虽然也可以1个dt对应多个dd或一个dt没有对应的dd标签。03. 一般在一个dl标签内只会出现dt和dl标签，若页面复杂，可以在dt和dd标签内部再添加其他标签。

定义列表标签练习

回到目录

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>UnorderedList</title>    <style type="text/css">        *{ margin:0; padding:0; border: 0;}    </style></head><body>    <dl>        <dt><h4>购物指南</h4></dt>        <dd>            <p><a href="javascript:">购物流程</a></p>            <p><a href="javascript:">全员介绍</a></p>            <p><a href="javascript:">生活旅行/团购</a></p>            <p><a href="javascript:">常见问题</a></p>            <p><a href="javascript:">大家电</a></p>            <p><a href="javascript:">联系客服</a></p>        </dd>    </dl></body></html>

效果如下 :

购物指南

购物流程

全员介绍

生活旅行/团购

常见问题

大家电

联系客服

0 0