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

最新推荐文章于 2022-05-09 00:24:19 发布

YI_DIAN_DIAN

最新推荐文章于 2022-05-09 00:24:19 发布

阅读量1.3k

点赞数

分类专栏： ❸JavaEE ---- ----①HTML 文章标签： html

本文链接：https://blog.csdn.net/qq_35415600/article/details/70236464

版权

❸JavaEE 同时被 2 个专栏收录

46 篇文章 3 订阅

订阅专栏

---- ----①HTML

11 篇文章 0 订阅

订阅专栏

列表

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

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

<标记>
<条目标记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>
    <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> 定义命令按钮。

YI_DIAN_DIAN

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【HTML】对于列表标签的修饰

列表列表是一种条理化地排列信息的方法。它把内容一条条地水平排列显示，直观、清晰。而它也不同于表格，一般列表没有表格复杂。☆列表标记使用的通用格式<标记><条目标记1>条目内容1<条目标记2>条目内容2<条目标记3>条目内容3……</标记>常用列表标记符：<dl>：列表<dt>：上层项目<dd> ：下层项目1.<dir>和</dir>2.<menu>和</menu>3.<ul>和
复制链接

扫一扫