HTML 列表
2018-06-16 16:14 更新
HTML列表
HTML 無序列表
ul 元素表示無序列表。
ul 元素中的項目使用 li 元素表示。
元素沒有在HTML5中定義任何屬性，并且您使用CSS控制列表的顯示。
HTML5中的 type 和 compact 屬性已過時。
您可以在以下代碼中查看正在使用的 ul 元素。
<!DOCTYPE HTML>
<html>
<body>
I like:
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
</ul>
</body>
</html>每個列表項都顯示一個項目符號。您可以通過 list-style-typeCSS屬性來控制要使用哪個樣式項目符號。
例2
以下代碼顯示了如何創(chuàng)建嵌套列表。
<!DOCTYPE HTML>
<html>
<body>
<ul>
<li>HTML</li>
<li>CSS
<ul>
<li>Introdunction</li>
<li>CSS attributes</li>
</ul>
</li>
<li>Javascript</li>
</ul>
</body>
</html>HTML 有序列表
ol 元素表示有序列表。列表中的項目使用 li 元素表示。
已在HTML5中添加reversed屬性。 compact 屬性現(xiàn)在在HTML5中已過時。
以下代碼顯示了用于創(chuàng)建簡單有序列表的 ol 元素。
<!DOCTYPE HTML>
<html>
<body>
I like:
<ol>
<li>HTML</li>
<li>CSS</li>
<li>XML</li>
</ol>
</body>
</html>屬性
您可以使用 ol 元素定義的屬性來控制列表中的項目。
start 屬性定義列表中第一個項目的序數(shù)值。如果未定義此屬性，則為第一個項目分配序號值1。
您可以使用 type 屬性來指示每個項目旁邊應(yīng)顯示哪個標記。
下表顯示此屬性支持的值。
| 值 | 描述 | 例子 |
|---|---|---|
| 1 | 小數(shù)(默認) | 1., 2., 3., 4. |
| a | 小寫拉丁字母 | a., b., c., d. |
| A | 大寫拉丁字母 | A., B., C., D. |
| i | 小寫羅馬數(shù)字 | i., ii., iii., iv. |
| I | 大寫羅馬數(shù)字 | I., II., III., IV. |
例3
以下代碼顯示了如何創(chuàng)建嵌套排序列表。
<html>
<body>
<p>Here is a nested ordered list:</p>
<ol>
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
<li>Item four
<ol>
<li>Item 4.1</li>
<li>Item 4.2</li>
<li>Item 4.3</li>
</ol>
</li>
<li>Item Five</li>
</ol>
</body>
</html>例4
以下代碼顯示如何使用大寫字母并從點4開始創(chuàng)建有序列表。
<html>
<body>
<p>Here is an ordered list using capital letters and starting at point 4, which is a letter D:</p>
<ol type="A" start="4">
<li>Point number one</li>
<li>Point number two</li>
<li>Point number three</li>
</ol>
</body>
</html>HTML 自定義列表
描述列表由一組術(shù)語/描述分組組成。
您使用三個元素來定義描述列表: dl ， dt 和 dd 元素。
dl表示描述列表。dt表示描述列表中的術(shù)語。dd表示描述列表中的定義。
多個 dd 元素可用于單個 dt 元素，這允許您為單個術(shù)語提供多個定義。
以下代碼創(chuàng)建說明列表。
<!DOCTYPE HTML>
<html>
<body>
I like:
<dl>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
<dd><i>a style sheet language used for
describing the look and formatting
of a document written in a markup language</i></dd>
<dt>HTML</dt>
<dd>The mark language</dd>
<dt>Javascript</dt>
<dd>The coding logic</dd>
</dl>
</body>
</html>以上內(nèi)容是否對您有幫助：
← HTML 格式化
更多建議：