HTML5之列表

来源：互联网发布：菜鸟网络工资编辑：程序博客网时间：2024/06/05 15:55

1.无序列表

无序列表是一个项目的列表
无序列表始于 <ul> 标签。每个列表项始于 <li>。、
无序列表的type有三个属性值：disc（默认值，圆实心点）、circle（圆空心点）、square（方实心点）。
列表项内部可以使用段落、换行符、图片、链接以及其他列表等。

基本格式：

<ul type="">

<li></li>

</ul>

代码示例：

<!DOCTYPE html><html lang="zh-cn"><head><meta charset="UTF-8"><title>无序列表</title></head><body><h1>无序列表</h1><ul type="circle"><li>无序列表项1</li><li>无序列表项2</li><li>无序列表项3</li><li>无序列表项4</li></ul></body></html>

效果图：

2. 有序列表

同样，有序列表也是一列项目，列表项目使用数字进行标记。
有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
type属性：（1）整数(默认)。（2）大（小）写英文。[a/z/、A/Z]（3）大小写罗马字母.[i/I]
start属性：定义列表的开始序号。
value属性：定义某个单个列表的符号。

基本格式：

<ol>

<li></li>

</ol>

代码示例：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>有序列表</title></head><body><ol><li>有序列表1</li><li>有序列表2</li><li>有序列表3</li><li>有序列表4</li></ol><ol type="A"><li>有序列表1</li><li>有序列表2</li><li>有序列表3</li><li>有序列表4</li></ol><ol type="i"> <!-- 罗马字母 --><li>有序列表1</li><li>有序列表2</li><li>有序列表3</li><li>有序列表4</li></ol><ol start="8"><li>有序列表1</li><li>有序列表2</li><li>有序列表3</li><li>有序列表4</li></ol><ol start=""><li>有序列表1</li><li>有序列表2</li><li value="6">有序列表3</li><li>有序列表4</li></ol></body></html>

效果图：

3自定义列表

自定义列表不仅仅是一列项目，而且是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

基本格式：

<dl>

<dt>项目列表</dt>

<dd>项目列表说明</dd>

</dl>

代码示例：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>自定义列表</title></head><body><dl><dt>列表项目1</dt><dd>列表项目一的内容****************************************************************************************************************************************</dd><dt>列表项目2< /dt><dd>列表项目2的内容****************************************************************************************************************************************</dd><dt>列表项目3</dt><dd>列表项目3的内容****************************************************************************************************************************************</dd></dl></body></html>

效果图：

阅读全文

1 0