CSS——关于列表

无序列表：表示一个列表的语义，每个项目之间不分先后。
ul: unordered list; li: list item, 列表项。li不能单独存在，必须包裹在ul里。

<ul>
	<li>芝士荔枝乌龙</li>
	<li>芝士茉莉绿妍</li>
	<li>桃乐粉粉优乐多</li>
	<li>满满红柚四季春</li>
</ul>	

错误示例:

<ul>
	<h1>甜荟奶霜茶饮</h1>
		<li>芝士荔枝乌龙</li>
		<li>芝士茉莉绿妍</li>
		<li>桃乐粉粉优乐多</li>
		<li>满满红柚四季春</li>
</ul>	

浏览器会默认给无序列表前加个先导符号**·**
但ul的作用并不在于给文字增加小圆点，而是增加无序列表的语义。
li是一个容器级的标签，里面可以放置很多内容。如：

	<ul>
		<li>
			<h1>第七张专辑——后青春期的诗</h1>
			<p>五月天一方面相约用“置之死地而后生”的方式来创作这张专辑，却又同时找回过去第二张专辑的录音混音师，是新和旧的混搭混种。五月天站在此时此刻，回头看这一路过来的音乐历程，然后全心全意的向前创作第七张专辑，因此这张《后青春期的诗》反映了过去、现在、未来，也说出此时此刻世代的“后青春期”精神。</p>
			<li>突然好想你</li>
			<li>如烟</li>
			<li>你不是真正的快乐</li>
			<li>后青春期的诗</li>
			<li>我心中尚未崩坏的地方</li>
			<li>笑忘歌</li>
			<li>………</li>
		</li>
		<li>
			<h1>第八张专辑——第二人生</h1>
			<p>为了呼应《第二人生》的专辑主轴，再加上团员内部对曲目排序的僵持，五月天最后决定推出“明日版Now Here”和“末日版No Where”两种版本，忠实呈现世人面对末日的价值观对立、甚至是五月天团员们在面对这样的创作主题时所衍生而出的内心自我挣扎。两种不同版本最大的差异就是在曲序编排上。虽然听众都可以在计算机上按照喜好自己挑着听，但希望提供五月天的曲序选择给大家。另外，在这两种不同版本中，歌曲与歌曲中的间隔长度也略微有所不同，让曲序连接起来能够听得更顺畅。</p>
			<li>2012</li>
			<li>仓颉</li>
			<li>干杯</li>
			<li>我不愿让你一个人</li>
			<li>星空</li>
			<li>………</li>
		</li>
		<li>
			<h1>第九张专辑——自传</h1>
			<p>五月天将专辑《自传》看作一部与青春有关的作品，将他们出道以来的人生感悟和心路历程写进了专辑中。同时，五月天也希望将专辑作为生活在21世纪的这一时代的人的自传，体现出21世纪人们生活中的喜怒哀乐。专辑的封面照在嘉南平原的到天中拍摄，以体现专辑返璞归真的概念。而在专辑的内页照中，五月天的五位成员则各自回到自己的家乡和母校，在他们视作自己人生起点的地方拍摄。</p>
			<li>如果我们不曾相遇</li>
			<li>成名在望</li>
			<li>好好（想把你写成一首歌）</li>
			<li>少年他的奇幻漂流</li>
			<li>终于结束的起点</li>
			<li>………</li>
		</li>
	</ul>

<ul>
	<li>想喝奶茶
		<ul>
			<li>甜荟</li>
				<ul>
					<li>芝士茉莉绿妍</li>
					<li>桃乐粉粉优乐多</li>
					<li>满满红柚四季春</li>
				</ul>
			<li>黑泷太郎</li>
				<ul>
					<li>芒椰玛奇朵</li>
					<li>四季春芝士奶盖</li>
					<li>西柚有茶</li>
				</ul>
			<li>京茶山</li>
				<ul>
					<li>元气水果茶</li>
					<li>脆梅冰绿</li>
					<li>奶缇抹茶初雪</li>
				</ul>
		</ul>
	</li>
	<li>想吃火锅
		<ul>
			<li>捞王锅物料理</li>
				<ul>
					<li>玫瑰鲷鱼片</li>
					<li>鸳鸯猪肚鸡</li>
					<li>爆浆手打虾丸</li>
				</ul>
			<li>小龙坎火锅</li>
				<ul>
					<li>红糖粑粑</li>
					<li>极品巴沙鱼片</li>
					<li>麻辣牛肉</li>
				</ul>
			<li>小辉哥火锅</li>
				<ul>
					<li>龙虾海鲜拼盘</li>
					<li>香滑芝心包</li>
					<li>口口香牛肉粒</li>
				</ul>
		</ul>
	</li>
</ul>		

有序列表：ordered list，用ol表示，浏览器会自动增加阿拉伯序号。

<ol>
	<li>终于结束的起点</li>
	<li>成名在望</li>
	<li>少年他的奇幻漂流</li>
</ol>

ol和ul只是语义不一样，使用方法是一样的。ol里面只能有li，li必须被ol包裹。
ol标签用的不多，如果需要表达顺序，也可以用ul：

<ul>
	<li>1.终于结束的起点</li>
	<li>2.成名在望</li>
	<li>3.少年他的奇幻漂流</li>
</ul>

定义列表：
dl: definition list 定义列表
dt: definition title 定义标题
dd: definition description 定义表述词
dt、dd只能在dl里面，dl里面也只能有dt、dd，dd是描述dt的

<dl>
	<dt>南京博物馆</dt>
	<dd>前身是1933年蔡元培等倡建的国立中央博物院，是中国创建最早的博物馆，是大型综合性的国家级博物馆、全国综合性历史艺术博物馆。</dd>
	<dt>六朝博物馆</dt>
	<dd>博物馆二层的观众休憩区，根据“兰亭雅集”的意境，特别设计了一处曲水流觞的小品，四周挂着书法作品《兰亭序》，摆放的长方形矮座椅则是根据东晋墓葬内出土的陶榻设计制作。座椅上设有两个耳机插孔,自带耳机就可以欣赏到《高山流水》、《广陵散》等六朝琴乐。</dd>
	<dt>江宁织造博物馆</dt>
	<dd>建筑整体风格是取中国山水画中深远、高远、平远之意境，将北高南低的建筑群尽可能用园林手法加以覆盖。建筑内复建了织造署中原有的西池、楝亭、萱瑞堂、西堂等建筑，从南望北叠叠高起，如同一幅江南山水画，是现代建筑的语言和传统园林建筑结合的经典之作。</dd>
</dl>

定义列表用法灵活，可以一个dt搭配很多dd：

<dl>
	<dt>南京博物馆</dt>
	<dd>前身是1933年蔡元培等倡建的国立中央博物院，是中国创建最早的博物馆</dd>
	<dd>是大型综合性国家博物馆，全国综合性历史艺术博物馆。</dd>
	<dt>六朝博物馆</dt>
	<dd>博物馆二层的观众休憩区，根据“兰亭雅集”的意境，特别设计了一处曲水流觞的小品，四周挂着书法作品《兰亭序》，摆放的长方形矮座椅则是根据东晋墓葬内出土的陶榻设计制作。座椅上设有两个耳机插孔,自带耳机就可以欣赏到《高山流水》、《广陵散》等六朝琴乐。</dd>
	<dt>江宁织造博物馆</dt>
	<dd>建筑整体风格是取中国山水画中深远、高远、平远之意境，将北高南低的建筑群尽可能用园林手法加以覆盖。</dd>
	<dd>建筑内复建了织造署中原有的西池、楝亭、萱瑞堂、西堂等建筑，从南望北叠叠高起，如同一幅江南山水画，是现代建筑的语言和传统园林建筑结合的经典之作。</dd>
</dl>

使用标签应根据语义。dt和dd都是容器级标签，想放什么都可以，也可以拆开，每一个dl里面只有一个dt和dd：

<dl>
	<dt>南京博物馆</dt>
	<dd>前身是1933年蔡元培等倡建的国立中央博物院，是中国创建最早的博物馆</dd>
	<dd>是大型综合性国家博物馆，全国综合性历史艺术博物馆。</dd>
</dl>

<dl>
	<dt>六朝博物馆</dt>
	<dd>博物馆二层的观众休憩区，根据“兰亭雅集”的意境，特别设计了一处曲水流觞的小品，四周挂着书法作品《兰亭序》，摆放的长方形矮座椅则是根据东晋墓葬内出土的陶榻设计制作。座椅上设有两个耳机插孔,自带耳机就可以欣赏到《高山流水》、《广陵散》等六朝琴乐。</dd>
</dl>

<dl>
	<dt>江宁织造博物馆</dt>
	<dd>建筑整体风格是取中国山水画中深远、高远、平远之意境，将北高南低的建筑群尽可能用园林手法加以覆盖。</dd>
	<dd>建筑内复建了织造署中原有的西池、楝亭、萱瑞堂、西堂等建筑，从南望北叠叠高起，如同一幅江南山水画，是现代建筑的语言和传统园林建筑结合的经典之作。</dd>
</dl>