育將電腦工作室

網頁設計與雲端應用

4-1 練習

無序列表
https://webugm.github.io/tncomu10601/3-1.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>無序列表3-1</title>
</head>
<body>
	
	<ul>
		<li>蘋果</li>
		<li>香蕉</li>
		<li>橘子</li>
		<li>水蜜桃</li>
	</ul>
	
</body>
</html>

有序列表
https://webugm.github.io/tncomu10601/3-2.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>有序列表3-2</title>
</head>
<body>
	
	<ol>
		<li>蘋果</li>
		<li>香蕉</li>
		<li>橘子</li>
		<li>水蜜桃</li>
	</ol>
	
</body>
</html>

嵌套列表
https://webugm.github.io/tncomu10601/3-3.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>嵌套列表3-3</title>
</head>
<body>
	
	<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>
	
</body>
</html>

自定義列表
https://webugm.github.io/tncomu10601/3-4.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>自定義列表3-4</title>
</head>
<body>

	<dl>
		<dt>咖啡</dt>
		<dd>黑色的飲料</dd>
		<dt>牛奶</dt>
		<dd>白色的飲料</dd>
	</dl>
	
</body>
</html>

有序列表的屬性
https://webugm.github.io/tncomu10601/3-5.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>有序列表的屬性3-5</title>
</head>
<body>
	
	<ol type="A">
		<li>蘋果</li>
		<li>香蕉</li>
		<li>橘子</li>
		<li>水蜜桃</li>
	</ol>
	<ol type="a">
		<li>蘋果</li>
		<li>香蕉</li>
		<li>橘子</li>
		<li>水蜜桃</li>
	</ol>
	<ol type="I">
		<li>蘋果</li>
		<li>香蕉</li>
		<li>橘子</li>
		<li>水蜜桃</li>
	</ol>
	<ol type="i">
		<li>蘋果</li>
		<li>香蕉</li>
		<li>橘子</li>
		<li>水蜜桃</li>
	</ol>
	<ol start="6">
		<li>蘋果</li>
		<li>香蕉</li>
		<li>橘子</li>
		<li>水蜜桃</li>
	</ol>
	
</body>
</html>

無序列表的屬性
https://webugm.github.io/tncomu10601/3-6.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>無序列表</title>
	</head>
	<body>	
		<ul type="disc">
			<li>蘋果</li>
			<li>香蕉</li>
			<li>橘子</li>
			<li>水蜜桃</li>
		</ul>
		<ul type="circle">
			<li>蘋果</li>
			<li>香蕉</li>
			<li>橘子</li>
			<li>水蜜桃</li>
		</ul>
		<ul type="square">
			<li>蘋果</li>
			<li>香蕉</li>
			<li>橘子</li>
			<li>水蜜桃</li>
		</ul>
	</body>
</html>

4. HTML列表與CSS介紹

5. HTML區塊元素與樣式表使用 next

友善列印 & 下載 PDF 匯出 MarkDown 格式

Title1

Title2

Title3

4-1 練習