html-列表、div和span

一、列表

1.1无序列表

无序列表是用来表示一个列表的语义，并且每个项目和每个项目之间是不分先后的.

ul是英语uordered list“无序列表”的意思.

li是英语list item "列表项"的意思。

这是组标签，要么不写，要么就写一组。

<ul>

<li>北京</li>

<li>上海</li>

<li>广州</li>

</ul>

li不能单独存在，必须包裹在ul里面，ul里面只有li,ul的作用不是给文字增加小圆点，而是增加无序列表的语义。

li是一个容器级标签，li里面什么都能放。

1.2有序列表

<ol>

酷狗音乐排行榜

<li>1:一百万个可能</li>

<li>2:卡路里</li>

<li>3:去年夏天</li>

</ol>

也就是说ol和ul就是语义不一样，怎么使用都是一样的，ol里面只能有li,li必须被ol包裹，li是容器级。

1.3定义列表

定义列表也是一个组标签，不过比较复杂，出现三个标签：

dl表示definition list定义列表

dt表示definition title定义标题

dd表示definition description定义描述词

dt,dd只能在dl里面，dl里面只能有dt,dd.

<dl>

<dt>北京</dt>

<dd>国家首都，政治文化</dd>

<dt>上海</dt>

<dd>魔都，外滩</dd>

<dt>广州</dt>

<dd>中国的南大门</dd>

</dl>

表达的语义是两层：

1）是一个列表，列出了北京，上海，广州三个项目

2）每个词都有自己的描述项

dd是用来描述dt的，并且有就近原则，可以让一个dt配多个dd,也可以让每一个dl里面只有一个dt和一个dd

结构：

<dl>
<dt>购物指南</dt>
<dd>
<a href="#">购物流程 </a>
<a href="#">会员介绍 </a>
<a href="#">常见问题 </a>
</dd>
</dl>
  

dt和dd都是容器级标签，什么都可以放。

二、div和span

div和span是非常重要的标签，div的语义是division“分割”；

span的语义是span“范围”；

<div>
<h3>中国主要城市</h3>
<ul>
<li>北京</li>
<li>上海</li>
<li>广州</li>
</ul>
</div>

div在所有浏览器中，默认是不会增加任何效果的，但语义变了，div中所有元素是一个小区域，div是一个容器级，里面什么都可以放。

span也是表达“小区域”的标签，但是是一个“文本级“的标签，span里面只能放文字，图片，表单元素。

<p>
 简介.........
<span>
<a href="#">详细信息</a>
<a href="#">购买</a>
</span>
</p>