HTML基础3

一.列表标签

1.概述

列表：相当于一个容器，可以存放每一列的网页内容。

在Web领域中有无序列表、有序列表、定义列表。

2.无序列表

作用：可以在网页中搭建没有顺序的列表。

在使用无序列表的时候，需要两个标签配合使用，分别为ul标签、li标签。

ul: 英文是unorder list，表示一个无序列表的容器。

li：英文是list item，表示列表的每一项。

<ul>
   <li>列表的每一项</li>
   <li>列表的每一项</li>
   <li>列表的每一项</li>
</ul>

---

总结

①ul标签内部只能嵌套li标签，li标签不可以脱离ul标签，更不能单独使用。

②ul标签可以放多个li标签。

③ul标签和li标签都是容器级别标签，li标签里还可以放ul、li、h2等标签。所以li标签里也可以放置其他级别的标签。

3.有序列表

作用：可以在网页中搭建有顺序的的列表，分别为ol标签、li标签。

ol: 英文是order list，表示一个有序列表的容器。

li：英文是list，表示列表的每一项。

   <ol>
        <li>列表的每一项</li>
        <li>列表的每一项</li>
        <li>列表的每一项</li>
    </ol>

---

总结

①ol标签内部只能嵌套li标签，li标签不可以脱离ol标签，更不能单独使用。

②ol标签可以放多个li标签。

③ol和li都属于容器级别标签 ，li标签里可以放其他级别的标签。

4.定义列表

作用：用来定义一个自定义标题和内容列表的容器。

定义列表时，需要结合三个标签配合使用，分别为dl、dt、dd。

dl：definition list，表示定义列表的容器。

dt: definition term，表示列表主题。

dd: definition description，表示列表描述，对主题的一些解释。

<dl>
    <dt>say</dt>
    <dd>说话</dd> 
    <dt>do</dt>
    <dd>做</dd>  
</dl>

---

总结

①在使用定义列表的时候，dl标签需要嵌套dt、dd一起使用。而dt和dd是同一级别的关系，也就是兄弟的关系。

②dt和dd都属于容器级别标签，内部可以放置任意的标签。

二.布局标签

1.概述

在前端开发中，有两个很重要的布局标签，分别为div标签和span标签。布局标签可以简称为盒子。

2.div标签

div标签:英文是division。区域、跨度、分割。

div标签是双标签，是容器列表级别的标签。

div标签的作用：划分页面区域，用来辅助布局。它可以将一些内容、布局相似的标签放在一个div的盒子里进行统一的管理，方便后期维护我们的项目。

<div>容器
   <div>左</div>
   <div>