首页 > 代码库 > HTML 学习笔记(列表)

HTML 学习笔记(列表)

2024-08-26 23:59:40   220人阅读

HTML 列表

html中列表使用标签<ul>和 <ol>来实现，不同的行用标签<li>来实现 <li>中包含的就是列表每行的内容。列表包含有序列表<ol> 和 无序列表<ul>

定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

 

实例

不同类型的无序列表

    <body>
    <h4>Disc 项目符号列表</h4>
    <ul type="disc">
        <li>苹果</li>
        <li>香蕉</li>
        <li>柠檬</li>
    </ul>
    <h4>Circle 项目符号列表</h4>
    <ul type="circle">
        <li>苹果</li>
        <li>香蕉</li>
        <li>柠檬</li>
    </ul>
    <h4>Square 项目符号列表</h4>
    <ul type="square">
        <li>苹果</li>
        <li>香蕉</li>
        <li>柠檬</li>
    </ul>
        
    </body>

不同类型的有序列表

<body>
    <h4>数字列表</h4>
    <ol>
        <li>苹果</li>
        <li>香蕉</li>
        <li>柠檬</li>
    </ol>
    <h4>字母列表</h4>
    <ol type="A">
        <li>苹果</li>
        <li>香蕉</li>
        <li>柠檬</li>
    </ol>
    <h4>小写字母列表</h4>
    <ol type="a">
        <li>苹果</li>
        <li>香蕉</li>
        <li>柠檬</li>
    </ol>
    
    <h4>罗马字母列表：</h4>
        <ol type="I">
             <li>苹果</li>
             <li>香蕉</li>
             <li>柠檬</li>
             <li>桔子</li>
        </ol>  

    <h4>小写罗马字母列表：</h4>
        <ol type="i">
             <li>苹果</li>
             <li>香蕉</li>
             <li>柠檬</li>
             <li>桔子</li>
        </ol>
    
    </body>

嵌套列表

<body>
    <h4>嵌套列表</h4>
    <ol>
        <li>茶：
         <ul>
             <li>红茶</li>
             <li>绿茶</li>
         </ul>
        </li>
        <li>香蕉</li>
        <li>柠檬</li>
    </ol>
    
    
    </body>

自定义列表

<body>
    <h4>自定义列表</h4>
    <dl>
        <dt>计算机</dt>
        <dd>注释:用来计算的机器</dd>
        
        <dt>显示器</dt>
        <dd>以视觉方式显示信息的装置</dd>
    </dl>
    </body>

HTML列表的学习就到这里了。

HTML 学习笔记(列表)


联系
我们