web前端学习笔记——列表

对于一些内容相似、结构相似、样式相似的内容使用列表结构进行搭建

一、无序列表

标签：ul li （嵌套关系，ul>li）

ul：unordered list,表示一个无序列表的大结构

li：list item，列表项，定义无序列表内的某一项

<ul>
	<li>列表项1</li>
	<li>列表项2</li>
	<li>列表项3</li>
	<li>列表项4</li>
</ul>

• 1
• 2
• 3
• 4
• 5
• 6

效果：

注：

1. 一个列表中可以有任意个列表项
2. ul内部只能嵌套li，并且li标签不能脱离ul单独书写
3. li标签是一个容器级标签，可以放置任何内容
4. li标签之间，没有顺序之分，都是一样重要的
5. 无序列表的作用只是搭建列表结构，没有添加样式前缀的功能，样式是由css负责的，去除前面的点：list-style：none

二、有序列表

标签：ol li（嵌套，ol>li）

ol：orderer list，表示一个有序的列表的大结构

li：list item，定义由序列表内的每一项

 <ol>
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
        <li>列表项4</li>
</ol>

• 1
• 2
• 3
• 4
• 5
• 6

效果：

注：

1. 一个列表中可以有任意个列表项
2. ol内部只能嵌套li，并且li标签不能脱离ul单独书写
3. li标签是一个容器级标签，可以放置任何内容
4. li标签之间，有顺序之分，需要根据内容的顺序合理书写
5. 有序列表的作用只是搭建列表结构，没有添加样式前缀的功能，样式是由css负责的，去除前面的点：list-style：none

三、定义列表

标签：dl dt dd

dl：definition list，自定义列表的大结构

dt：definition term，表示自定义列表的一个主题

dd：definition description，定义解释项，表示描述或解释前面的主题

 <dl>
        <dt>主题</dt>
        <dd>解释项1</dd>
        <dd>解释项2</dd>
        <dd>解释项3</dd>
 </dl>

• 1
• 2
• 3
• 4
• 5
• 6

效果：

注：

1. dl内部只能嵌套dt和dd，dt和dd不能脱离dl单独书写，dt和dd是同级
2. dl内部可以书写多组dt和dd，每个dd解释前面最近的一个dt
3. dt后面可以有0到多个dd
4. dt和dd标签都是容器级，内部可以放任意内容
5. 定义列表中的缩进样式是由css负责，标签只负责语义搭建