跳到主要内容

列表标签

无序列表unordered list使用频率最高 定义列表definition list使用频率一般 有序列表ordered list使用频率最低

无序列表​

作用: 给一堆内容添加无序列表语义(一个没有先后顺序整体), 列表中的条目是不分先后

li英文是list item翻译为列表项

<h4>选择居住城市(CN)</h4>
<ul>
	<li>北京</li>
	<li>上海</li>
	<li>广州</li>
	<li>铁岭</li>
</ul>

应用场景​

1.新闻列表 2.商品列表 3.导航条

注意事项​

这里指的无序是指对于主体来说内容没有先后之分, 例如主题是"选择居住城市(CN)"北京上海都是中国的城市, 无论谁放在前面它都还是中国的城市的。如果标题改为"中国雾霾排行", 那么就必须有严格的排名,北京必须写在前面

浏览器会给无序列表自动添加先导符号，但千万要记住, ul的作用并不是给文字添加小圆点, 而是增加无序列表的语义

由于ul和li是一个整体, 所以ul里面不推荐包裹其它标签, 永远记住ul里面最好只写li标签，也就是说li标签不能单独存在, 必须包裹在ul里面

其实ul还有一个type属性, 可以修改先导符号的样式, 取值有disc、square、circle几种。样式将来都是通过css来完成。

虽然ul中推荐只能写li标签, 但是li标签是一个容器标签, li标签中可以添加任意标签, 甚至可以添加ul标签

有序列表(ordered list)​

作用: 给一堆内容添加有序列表语义(一个有顺序整体), 列表中的条目有先后之分简写ol

<h4>中国房价排行</h4>
<ol>
	<li>北京</li>
	<li>上海</li>
	<li>广州</li>
	<li>铁岭</li>
</ol>

应用场景​

1.排行榜 2.其他并不多，用ol能做的ul都可以做

注意事项​

ol和ul语义不一样，怎么使用都是一样的以及注意点都一样

ul还有两个常见属性start、type属性, 可以修改先导符号的样式和序号但由于样式将来都是通过css来完成, 不推荐使用

有定义列表(definition list)​

作用: 内容添加列表语义, 通过dt罗列出列表的条目, 通过dd给每个条目进行相应的描述

 dt英文definition title, 翻译为定义标题
dd英文definition description, 翻译为定义描述信息
<dl>
	<dt>北京</dt>
	<dd>国家的首都, 看升国旗的地方</dd>
	<dt>上海</dt>
	<dd>魔都, 遍地是黄金的地方</dd>
</dl>

应用场景​

  1. 网站底部相关信息
  2. 但凡看到一堆内容都是用于描述某个内容的时候就要想到dl
  3. 图文混排

注意事项​

  • dl是一个组标签, 也就是说dt和dd标签不能单独存在, 必须包裹在dl里面
  • 由于dl和dt、dd是一个整体, 所以dl里面不推荐包裹其它标签
  • dd、dt、li标签一样是容器标签, 里面可以添加任意标签
  • 定义列表非常灵活, 可以给一个dt配置多个dd, 但是最好不要出现多个dt对应一个dd, dd的语义是描述离它最近的一个dt, 所以其它dt相当于没有描述, 而定义列表存在的意义就是既可以列出每一个条目又可以对每一个条目进行描述
  • 定义列表非常灵活, 可以将多个dt+dd组合拆分为多个dl