#HTML:無序、有序與定義清單
#HTML:無序、有序與定義清單
Maplewing 于 星期六, 12/10/2013 - 09:48 提交
清單在網頁中是很常使用到的東西,故多少還是要了解一下。在HTML中有三種不太一樣的清單,分別是無序清單、有序清單與定義清單,無序清單與有序清單的用法差不多,但與定義清單的用法差距比較大,底下來個別解釋其使用的方法。
無序清單
unordered-list.html
1 |
<!DOCTYPE html> |
list01.png
無序清單使用<ul>...</ul>
將整個清單包起來,每一項使用<li>...<li>
即可,效果就跟用Word按的項目符號及編號做出來的差不多。
有序清單
ordered-list.html
1 |
<!DOCTYPE html> |
list02.png
有序清單的使用與無序清單差不多,僅僅只是將ul(unordered list)標籤換成了ol(ordered list)標籤,效果就從原本的項目符號換成了數字編號。
如果要改變起始的編號,可使用start
屬性,例如起始值要改成10,就寫<ol start="10">
。
HTML5提供了新的屬性,可讓ol反向計算數值,利用reversed
屬性即可,僅要寫<ol reversed>
即可反向。(HTML5的功能性屬性,大多都是有寫就有效果,不用給值,沒寫就沒有效果)
定義清單
description-list.html
1 |
<!DOCTYPE html> |
list03.png
與前述兩種清單不同的地方在於,整個清單用<dl>...</dl>
包住,每一項從原本僅有一個li標籤,換成dt和dd各一個標籤,dt表示的是欲解釋的項目,dd表示的是欲解釋的內容,因為是解釋的內容,所以dd標籤在排版上會做自動縮排。
巢狀清單用法
若要在清單內的某一項再利用清單解釋,可用以下的做法:
nested-list.html
1 |
<!DOCTYPE html> |
list04.png
上面對於每一項li標籤內又在加入了另外一個清單去做描述,而清單內的清單瀏覽器會自動在排版上去做縮排,這是很方便可以做多層巢狀清單的用法,各位也可以自己試試看如果換成用ol和dl又會發生什麼事情。
#HTML:無序、有序與定義清單的更多相关文章
- Neo4j中實現自定義中文全文索引
資料庫檢索效率時,一般首要優化途徑是從索引入手,然後根據需求再考慮更復雜的負載均衡.讀寫分離和分散式水平/垂直分庫/表等手段:索引通過資訊冗餘來提高檢索效率,其以空間換時間並會降低資料寫入的效率,因此 ...
- Linux Ubuntu 虛擬機系統自定義桌面分辨率且重啓後保持不變
我用 VMware Workstation 12 Pro 安裝的 Ubuntu MATE Desktop Environment 1.12.1,發現安裝後沒有需要的分辨率,於是安裝 VMware To ...
- dataTable.NET的column index的不同定義
dataTable.NET是一個jQuery的plug in 第三方的library, 用來實現web page中table的interaction controls, 另外最近有在用的還有Teler ...
- Q郵箱轉移自定義目錄中的郵件
1.之前在Q郵箱上建立了許多規則和收件箱,現在想統一用Mac上的郵局管理 2.Mac上會同步對應郵箱的自定義目錄,此時這些目錄便十分多餘礙眼 3.Q郵箱單頁顯示郵件數量上限是100,這意味著手動轉移十 ...
- 可以支持jQuery1.10.1 的 fancybox 1.3.4, 並現在type為Ajax時,也可以定義窗口的大小。
官網上的 fancybox 1.3.4 太老了,不支持jQuery1.10.1,改動了一下源碼,現在可以支持了. type為Ajax時,也可以定義窗口的大小. $("#ajaxlink&qu ...
- vue自定義指令
自定義指令可以允許代碼複用, 全局自定義指令 vue.directive('指令名',{鉤子函數:指令函數}) 局部自定義指令: vue({ directives:{指令名:{鉤子函數:指令函數} } ...
- [Xamarin] 取得所有已安裝軟體清單 (转帖)
最近會用到,簡單記錄一下,抓取所有該手機已經安裝的軟體清單 結果圖: 首先介紹一下Layout : \Resources\Layout\Main.axml <?xml version=&quo ...
- vb.net 使用NPO自定義格式
'導入命名空間 Imports System.IOImports NPOI.HSSF.UserModelImports NPOI.HPSFImports NPOI.POIFS.FileSystem P ...
- 如何寫一個自定義控件/vs2010生成Dll文件并引用dll(C#)
1.最簡單的例子 首先你先新建->項目->類庫.然後右鍵項目.添加一個用戶控件.設置其用戶控件繼承button. egg: namespace ClassLibrary1{ publ ...
随机推荐
- SQL查出异常数据(ORA-01722: 无效数字)
-- Created on 2015/4/29 by MENGHU DECLARE -- Local variables here I INTEGER; BEGIN FOR OPEN_DATA IN ...
- 老王讲自制RPC框架.(三.ZOOKEEPER)
(#)定义Zookeeper 分布式服务框架是 Apache Hadoop 的一个子项目,它主要是用来解决分布式应用中经常遇到的一些数据管理问题,如:统一命名服务.状态同步服务.集群管理.分布式应用配 ...
- IE下,js改变绝对定位的属性不生效
如果想要动态改变定位位置的值,例如改变TOP的值,IE下必须要给TOP一个初始值,不然不生效..
- C++输入cout与输出cin
输入和输出并不是C++语言中的正式组成成分.C和C++本身都没有为输入和输出提供专门的语句结构.输入输出不是由C++本身定义的,而是在编译系统提供的I/O库中定义的.C++的输出和输入是用" ...
- Python之路 day3 函数定义 *args及**kwargs
#!/usr/bin/env python # -*- coding:utf-8 -*- #Author:ersa import time # def logger(): # time_format ...
- RxAndroid/java小记
Rxandroid 作为一个在设计模式中能把MVP发挥的淋漓尽致的框架不去学习感觉真的对不起自己,然后也学点新东西吧,响应式编程,MVP观察者模式,然后使用RxAndroid使我们自己的代码更加简洁 ...
- openxml(二) 添加页眉,页脚
openxml 中 word 文档的结构是如下图: 其中,页眉是 header,属于headerpart 部件,页脚是footer,属于footerpart 部件,图上还有其他的东西,之后会一一介绍. ...
- Python’s SQLAlchemy vs Other ORMs[转发 0]
原文地址:http://pythoncentral.io/sqlalchemy-vs-orms/ Overview of Python ORMs As a wonderful language, Py ...
- 拆分SharePoint 2013 中CreatedModifiedInfo 的时间
最近在自定义DisForm.aspx页面时 发现 创建时间信息无法进行拆分,人事MM只想要修改时间,去掉创建人,创建时间和修改人. 于是我的重新研究下在SPD里面如何去拆分这个时间. 在详情页面上找到 ...
- 51nod 1244 莫比乌斯函数之和
题目链接:51nod 1244 莫比乌斯函数之和 题解参考syh学长的博客:http://www.cnblogs.com/AOQNRMGYXLMV/p/4932537.html %%% 关于这一类求积 ...