zoukankan      html  css  js  c++  java
  • HTML 学习笔记(列表)

    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列表的学习就到这里了。

  • 相关阅读:
    我爱淘冲刺阶段站立会议每天任务2
    我爱淘冲刺阶段站立会议每天任务1
    大道至简-灵活的软件工程
    大道至简-实现,才是目的
    冲刺第二阶段工作总结06
    课堂练习-最低价购书方案
    构建之法阅读笔记04
    冲刺第二阶段工作总结05
    冲刺第二阶段工作总结04
    冲刺第二阶段工作总结03
  • 原文地址:https://www.cnblogs.com/huanying2000/p/6170958.html
Copyright © 2011-2022 走看看