尚硅谷web前端工程師1000集學習筆記22

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>列表</title>
		<style type="text/css">
			
			/*
			 	去掉項目符號
			 * */
			/*ul{
				list-style: none;
			}*/
			
		</style>
	</head>
	<body>
		
		<!-- 
			列表就相當於去超市購物時的那個購物清單,
				在HTML也可以創建列表,在網頁中一共有三種列表:
					1.無序列表
					2.有序列表
					3.定義列表
		-->
		
		<!--
			無序列表
				- 使用ul標籤來創建一個無序列表
				- 使用li在ul中創建一個一個的列表項,
					一個li就是一個列表項
					
			通過type屬性可以修改無序列表的項目符號
				可選值:
					disc,默認值,實心的圓點
					square,實心的方塊
					circle,空心的圓
					
			注意:默認的項目符號我們一般都不使用!!因爲在不同的瀏覽器中顯示的不同
				如果需要設置項目符號,則可以採用爲li設置背景圖片的方式來設置
				
			ul和li都是塊元素	
		-->
		<ul>
			<li>西門大官人</li>
			<li>柴大官人</li>
			<li>許大官人</li>
			<li>唐僧大官人</li>
		</ul>
		
		<!-- 
			有序列表和無序列表類似,只不過它使用ol來代替ul
			有序列表使用有序的序號作爲項目符號
			type屬性,可以指定序號的類型
				可選值:1,默認值,使用阿拉伯數字
						a/A 採用小寫或大寫字母作爲序號
						i/I 採用小寫或大寫的羅馬數字作爲序號
						
			ol也是塊元素			
		-->
		<ol type="I">
			<li>結構</li>
			<li>表現</li>
			<li>行爲</li>
		</ol>
		
		<!-- 
			列表之間都是可以互相嵌套,可以在無序列表中放個有序列表
				也可以在有序列表中放一個無序列表
		-->
		
		<p>菜譜</p>
		<ul>
			<li>
				魚香肉絲
				<ol>
					<li>魚</li>
					<li>香</li>
					<li>肉絲</li>
				</ol>
			</li>
			<li>
				宮保雞丁
				<ul>
					<li>宮保</li>
					<li>雞丁</li>
				</ul>
			</li>
			<li>青椒肉絲</li>
		</ul>
		
	</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>定義列表</title>
		
	</head>
	<body>
		<!--
			定義列表用來對一些詞彙或內容進行定義
			使用dl來創建一個定義列表
				dl中有兩個子標籤
					dt : 被定義的內容
					dd : 對定義內容的描述
			同樣dl和ul和ol之間都可以互相嵌套		
		-->
		<dl>
			<dt>武松</dt>
			<dd>景陽岡打虎英雄,戰鬥力99</dd>
			<dd>後打死西門慶,投奔梁山</dd>
			<dt>武大</dt>
			<dd>著名餐飲企業家,戰鬥力0</dd>
		</dl>
	</body>
</html>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章