您的位置：首页 > Web前端 > HTML

【HTML】对于列表标签的修饰

2017-04-19 08:46 405 查看

列表

列表是一种条理化地排列信息的方法。它把内容一条条地水平排列显示，直观、清晰。而它也不同于表格，一般列表没有表格复杂。

☆列表标记使用的通用格式

<标记>
<条目标记1>条目内容1
<条目标记2>条目内容2
<条目标记3>条目内容3
……
</标记>

常用列表标记符：

<dl>：列表
<dt>：上层项目
<dd> ：下层项目

1.<dir>和</dir>
2.<menu>和</menu>
3.<ul>和</ul>
4. <ol>与</ol>

<dir>和</dir>把其间包含的内容以列表方式显示，并在每个条目前加上一个标记符号。该标记在HTML5中已经不建议使用！

<menu>和</menu>与<dir>作用相同，这两个标记比较简单，不能实现复杂的变化。

在“条目内容”后不用加换行标记<br>

☆列表的嵌套

主要是ul和ol列表可以相互嵌套。

☆两个可带属性的复杂列表标记ul和ol

1. <ul>和</ul>
此标记可以带属性，变成<ul type=f>的形式，f有如下几种:
f为disc：条目以符号“●”引导。
f为circle：条目以符号“○”引导。
f为square：条目以符号“■”引导。
2. <ol>与</ol>
此标记会自动给条目排序并加上序号，也可带有属性：
1) < ol type=f>
f为A：以大写字母排序。如A，B，C，D等。
f为a：以小写字母排序。如a，b，c，d等。
f为I：以大写罗马数字排序。如I，II，III，IV等。
f为i：以小写罗马数字排序。如i，ii，iii，iv等。
f为1：以阿拉伯数字排序。如1，2，3，4等。
2) <ol start=n>
n是一个数字，此标记符表示重新定义的起始号。

dl、dt、dd代码演示：

<html>
<head>
<title>列表演示</title>
</head>

<dl><!-- ①dl 列表 -->
<dt>部门</dt><!-- ②dt上层项目 -->
<dd>部门1</dd><!--③ dd下层项目 -->
<dd>部门2</dd>
<dd>部门3</dd>
</dl>

运行结果：

dir列表代码演示：

<dir><!-- ④dir列表 -->
<li>这是第一项</li><!-- ⑤li项目 -->
<li>这是第二项</li>
<li>这是第三项</li>
</dir>

运行结果：

menu列表：

<menu>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</menu>

运行结果：

ul无序列表代码演示：

<!-- 列表更多使用ul和ol  都是可以带属性的-->
<ul type="square"><!--⑥ul中的项是无序的，可以设置属性type  -->
<li>这是第一项</li>
<li>这是第二项</li>
<li>这是第三项</li>
</ul>

运行结果：

ol有序列表代码演示：

<ol type="A" start="2"><!--⑦ol中的项是有序的，可以设置属性type -->
<li>这是第一项</li>
<li>这是第二项</li>
<li>这是第三项</li>
</ol>
</html>

运行结果：

关于列表的再次深度理解：

<!-- 演示列表标签 -->
<html>
<head><title>演示列表标签</title></head>
<body>
<!--●<ul>标签：定义无序列表，可选属性type(disc、square、circle)默认为disc-->
<ul type="square">
<li>无序列表项1</li>
<li>无序列表项2</li>
<li>无序列表项3</li>
<li>无序列表项4</li>
<li>无序列表项5</li>
</ul>
<hr  color="#ff00ff" >

<!--●<ol>标签：定义有序列表，可选属性type(A、a、I、i、1) ；start：从第几个开始标记序号-->
<ol start="13" type="i" >
<!--●<li>标签：定义列表的项目，可选属性type(disc、square、circle、A、a、I、i、1) ；value-->
<li type="disc">有序列表项1</li>
<li>有序列表项2</li>
<li>有序列表项3</li>
<li>有序列表项4</li>
<li>有序列表项5</li>
</ol>
<hr  color="#ff00ff" >

<!---●<dl>标签：定义定义列表-->
<dl>
<!---●<dt>标签：定义定义列表中的项目  -->
<dt>定义定义列表中的项目</dt>
<!--●<dd>标签：定义定义列表中项目的描述-->
<dd>HTML</dd>
<dd>C/C++</dd>
</dl>
<hr  color="#ff00ff" >

<!--●列表中定义超链接，实现菜单切换功能  -->
<ul >
<li><a href="file:/f:/测试文件/abc.txt">链接1</a></li>
<li><a href="file:/f:/测试文件/abcs1.txt">链接2</a></li>
<li><a href="file:/f:/测试文件/abcd.txt">链接3</a></li>
</ul>

</body>
</html>

运行结果：

列表标签总结：

1、列表标签中有：
<ul> 定义无序列表。
<ol> 定义有序列表。
<li> 定义列表的项目。
<dir> 不赞成使用。定义目录列表。
<dl> 定义定义列表。
<dt> 定义定义列表中的项目。
<dd> 定义定义列表中项目的描述。
<menu> 定义命令的菜单/列表。
<command> 定义命令按钮。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html

相关文章推荐

新的分享

章节导航