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
以下代码显示了如何创建嵌套列表。
<!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 属性现在在HTML5中已过时。
以下代码显示了用于创建简单有序列表的 ol 元素。
<!DOCTYPE HTML> <html> <body> I like: <ol> <li>HTML</li> <li>CSS</li> <li>XML</li> </ol> </body> </html>点击查看实例
属性
您可以使用 ol 元素定义的属性来控制列表中的项目。
start 属性定义列表中第一个项目的序数值。如果未定义此属性，则为第一个项目分配序号值1。
您可以使用 type 属性来指示每个项目旁边应显示哪个标记。
下表显示此属性支持的值。
| 值 | 描述 | 例子 |
|---|---|---|
| 1 | 小数(默认) | 1., 2., 3., 4. |
| a | 小写拉丁字母 | a., b., c., d. |
| A | 大写拉丁字母 | A., B., C., D. |
| i | 小写罗马数字 | i., ii., iii., iv. |
| I | 大写罗马数字 | I., II., III., IV. |
例3
以下代码显示了如何创建嵌套排序列表。
<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开始创建有序列表。
<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 自定义列表
描述列表由一组术语/描述分组组成。
您使用三个元素来定义描述列表: dl ， dt 和 dd 元素。
dl表示描述列表。dt表示描述列表中的术语。dd表示描述列表中的定义。
多个 dd 元素可用于单个 dt 元素，这允许您为单个术语提供多个定义。
以下代码创建说明列表。
<!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>点击查看实例