#HTML:無序、有序與定義清單

Maplewing 于 星期六, 12/10/2013 - 09:48 提交

清單在網頁中是很常使用到的東西,故多少還是要了解一下。在HTML中有三種不太一樣的清單,分別是無序清單、有序清單與定義清單,無序清單與有序清單的用法差不多,但與定義清單的用法差距比較大,底下來個別解釋其使用的方法。

無序清單

unordered-list.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>清單</title>
</head>
<body>
<ul>
<li>Sonic</li>
<li>Tails</li>
<li>Knuckles</li>
<li>Amy</li>
<li>Shadow</li>
<li>Silver</li>
</ul>
</body>
</html>

list01.png

無序清單使用<ul>...</ul>將整個清單包起來,每一項使用<li>...<li>即可,效果就跟用Word按的項目符號及編號做出來的差不多。

有序清單

ordered-list.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>清單</title>
</head>
<body>
<ol>
<li>Sonic</li>
<li>Tails</li>
<li>Knuckles</li>
<li>Amy</li>
<li>Shadow</li>
<li>Silver</li>
</ol>
</body>
</html>

list02.png

有序清單的使用與無序清單差不多,僅僅只是將ul(unordered list)標籤換成了ol(ordered list)標籤,效果就從原本的項目符號換成了數字編號。

如果要改變起始的編號,可使用start屬性,例如起始值要改成10,就寫<ol start="10">

HTML5提供了新的屬性,可讓ol反向計算數值,利用reversed屬性即可,僅要寫<ol reversed>即可反向。(HTML5的功能性屬性,大多都是有寫就有效果,不用給值,沒寫就沒有效果)

定義清單

description-list.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>清單</title>
</head>
<body>
<dl>
<dt>Sonic</dt>
<dd>刺蝟音速小子(日文:ソニック・ザ・ヘッジホッグ;英文:Sonic The Hedgehog)是一個電子遊戲人物,也是世嘉公司的吉祥物,誕生於1990年。他是刺蝟音速小子系列的主角,也是世界上最有名的刺蝟,擁有超過音速的奔跑速度,被稱為「世界上最快的刺蝟」。以音速小子為主人公的電玩遊戲曾在多個平台發售,總累計銷量已經超過了7000萬套。以它為主角的動畫、漫畫作品也風靡全球。其主要創作者為中裕司,大島直人以及安田廣和。</dd>
<dt>Tails</dt>
<dd>初登場於音速小子2,是個有兩條尾巴的小狐狸,如同音速小子小弟般的存在。可以藉由兩條尾巴旋轉飛行,其飛行速度接近音速小子。因為天生有兩條尾巴而遭到同伴排擠,在偶然間遇到音速小子後便跟隨他。對於機械有相當高的領悟力。</dd>
</dl>
</body>
</html>

list03.png

與前述兩種清單不同的地方在於,整個清單用<dl>...</dl>包住,每一項從原本僅有一個li標籤,換成dt和dd各一個標籤,dt表示的是欲解釋的項目,dd表示的是欲解釋的內容,因為是解釋的內容,所以dd標籤在排版上會做自動縮排。

巢狀清單用法

若要在清單內的某一項再利用清單解釋,可用以下的做法:

nested-list.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>清單</title>
</head>
<body>
<ul>
<li>
Team Sonic
<ul>
<li>Sonic</li>
<li>Tails</li>
<li>Knuckles</li>
</ul>
</li>
<li>
Team Dark
<ul>
<li>Shadow</li>
<li>Rouge</li>
<li>E-123 Omega</li>
</ul>
</li>
</ul>
</body>
</html>

list04.png

上面對於每一項li標籤內又在加入了另外一個清單去做描述,而清單內的清單瀏覽器會自動在排版上去做縮排,這是很方便可以做多層巢狀清單的用法,各位也可以自己試試看如果換成用ol和dl又會發生什麼事情。

#HTML:無序、有序與定義清單的更多相关文章

  1. Neo4j中實現自定義中文全文索引

    資料庫檢索效率時,一般首要優化途徑是從索引入手,然後根據需求再考慮更復雜的負載均衡.讀寫分離和分散式水平/垂直分庫/表等手段:索引通過資訊冗餘來提高檢索效率,其以空間換時間並會降低資料寫入的效率,因此 ...

  2. Linux Ubuntu 虛擬機系統自定義桌面分辨率且重啓後保持不變

    我用 VMware Workstation 12 Pro 安裝的 Ubuntu MATE Desktop Environment 1.12.1,發現安裝後沒有需要的分辨率,於是安裝 VMware To ...

  3. dataTable.NET的column index的不同定義

    dataTable.NET是一個jQuery的plug in 第三方的library, 用來實現web page中table的interaction controls, 另外最近有在用的還有Teler ...

  4. Q郵箱轉移自定義目錄中的郵件

    1.之前在Q郵箱上建立了許多規則和收件箱,現在想統一用Mac上的郵局管理 2.Mac上會同步對應郵箱的自定義目錄,此時這些目錄便十分多餘礙眼 3.Q郵箱單頁顯示郵件數量上限是100,這意味著手動轉移十 ...

  5. 可以支持jQuery1.10.1 的 fancybox 1.3.4, 並現在type為Ajax時,也可以定義窗口的大小。

    官網上的 fancybox 1.3.4 太老了,不支持jQuery1.10.1,改動了一下源碼,現在可以支持了. type為Ajax時,也可以定義窗口的大小. $("#ajaxlink&qu ...

  6. vue自定義指令

    自定義指令可以允許代碼複用, 全局自定義指令 vue.directive('指令名',{鉤子函數:指令函數}) 局部自定義指令: vue({ directives:{指令名:{鉤子函數:指令函數} } ...

  7. [Xamarin] 取得所有已安裝軟體清單 (转帖)

    最近會用到,簡單記錄一下,抓取所有該手機已經安裝的軟體清單 結果圖: 首先介紹一下Layout :  \Resources\Layout\Main.axml <?xml version=&quo ...

  8. vb.net 使用NPO自定義格式

    '導入命名空間 Imports System.IOImports NPOI.HSSF.UserModelImports NPOI.HPSFImports NPOI.POIFS.FileSystem P ...

  9. 如何寫一個自定義控件/vs2010生成Dll文件并引用dll(C#)

    1.最簡單的例子 首先你先新建->項目->類庫.然後右鍵項目.添加一個用戶控件.設置其用戶控件繼承button. egg: namespace ClassLibrary1{    publ ...

随机推荐

  1. WebLogic中的一些基本概念

    WebLogic中的一些基本概念   WebLogic 中的基本概念 上周参加了单位组织的WebLogic培训,为了便于自己记忆,培训后,整理梳理了一些WebLogic的资料,会陆续的发出来,下面是一 ...

  2. 尝试用md编辑器写博客, 内容为 jupyter笔记

    Matplotlib tutorial http://www.labri.fr/perso/nrougier/teaching/matplotlib/#introduction %matplotlib ...

  3. phpstorm取消强制换行

    1 取消phpstorm右侧竖线显示 2 取消格式化代码时 自动换行

  4. mysql的操作

    关系型数据库是表格形式,比普通文件存储访问数据的速度更快,更容易查阅和提取满足特定条件的数据 关系数据库具有内置的权限系统 每一条数据对应唯一的标识 1,打开XAMPP继承的数据库  打开mysql ...

  5. iOS CommonCrypto 对称加密 AES ecb,cbc

    CommonCrypto 为苹果提供的系统加密接口,支持iOS 和 mac 开发: 不仅限于AES加密,提供的接口还支持其他DES,3DES,RC4,BLOWFISH等算法, 本文章主要讨论AES在i ...

  6. jQurey Plugin

    ; (function ($, window, document, undefined) { "use strict"; var defaults = { name: " ...

  7. webbench---linux压测工具

    webbench最多可以模拟3万个并发连接去测试网站的负载能力,个人感觉要比Apache自带的ab压力测试工具好用,安装使用也特别方便,并且非常小. 1.适用系统:Linux-CentOs 2.编译安 ...

  8. RDLC隔行变色的实现

    在RDLC设计页面设置行属性中的Background为: =IIF((RowNumber(Nothing)) Mod 2 =1,"Transparent","#F6FAF ...

  9. java中参数传递方式

    在 Java 应用程序中永远不会传递对象,而只传递对象引用.因此是按引用传递对象.Java应用程序按引用传递对象这一事实并不意味着 Java 应用程序按引用传递参数.参数可以是对象引用,而 Java ...

  10. zend create project prepare

    1.php ini 安装pear 设置include_path 2.apache AllowOverride LoadModule rerwite去掉注释 <VirtualHost *:> ...