育將電腦工作室 - 列表練習

網頁設計好好玩(10501)

7-1 列表練習

無序列表 7-1.html

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

有序列表 7-2.html

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

嵌套列表 7-3.html

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

自定義列表

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>自定義列表</title>
</head>
<body>
	<dl>
		<dt>咖啡</dt>
			<dd>黑色的飲料</dd>
		<dt>牛奶</dt>
			<dd>白色的飲料</dd>
	</dl>
</body>
</html>

有序列表的屬性 http://hhjh.webugm.com/7-2.html

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

無序屬性 http://hhjh.webugm.com/7-1.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>

7. HTML5 列表

8. HTML5區塊元素標籤的使用與樣式 next

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

Title1

Title2

Title3

7-1 列表練習