HTML之列表

作者: 落花的季节 | 来源:发表于2016-11-21 20:15 被阅读38次

    列表的创建过程

    创建一个HTML列表需要两个元素,这两个元素结合使用就可以创建一个HTML列表。
    第一个元素用来标记列表项,第二个元素决定你创建的列表类型:有序还是无序。

    • 第一步:
      把每个列表项目放到一个< li>元素中
      把每个列表项目放到各自的< li>元素中创建列表。这意味着把内容放在< li>和< /li>之间。
    <li>我是一个列表项目<li>
    
    • 第二步
      用< ul>和< ol>封装列表元素。
      如果使用< ul>封装列表元素,则列表为无序列表;如果使用< ol>封装列表元素,则列表为有序列表。
      无序列表:
    <ul>
        <li>Javascript</li>
        <li>Java</li>
    <ul>
    

    有序列表:

    <ol>
        <li>第一天</li>
        <li>第二天</li>
    </ol>
    

    运行结果:
    <ul> <li>Javascript</li> <li>Java</li> <ul> <ol> <li>第一天</li> <li>第二天</li> </ol>

    列表的嵌套使用

    在制作列表的时有时候需要也个列表嵌套使用,比如:目录
    列表在嵌套创建时可以在有序列表中嵌套无序列表,也可以在无序列表中嵌套有序列表。

    <ul>   
       <li>JavaScript</li>    
       <ol>        
          <li>第一章</li>        
          <ul>            
                <li>const</li>              
                <li>let</li>        
          </ul>         
       </ol>    
    </ul>
    

    运行结果:
    <ul> <li>JavaScript</li> <ol> <li>第一章</li> <ul> <li>const</li> <li>let</li> </ul> </ol></ul>

    列表的使用注意事项

    • < ol>和< li>必须一起使用吗?
      必须一起使用,它们唇齿相依,缺一不可。
    • 我们可以在< ol>或< ul>中添加其他元素或文字吗?
      不行,< ol>和< ul>的诞生只是为了配合< li>的使用。
    • 列表有有序列表和无序列表,还有其他的类型吗?
      还有自定义列表,列表中的每个项目都有一个限项< dt>和一个描述< dd>。
      自定义列表示例:
    <dl>
        <dt>HTML</dt>
         <dd>HTML 是用来描述网页内容的一种语言。全称超文本标记语言 (Hyper Text Markup Language)</dd>
        <dt>JavaScript</dt>
          <dd>JavaScript,一种高级编程语言</dd>
    </dl>
    

    运行结果:
    <dl> <dt>HTML</dt> <dd>HTML 是用来描述网页内容的一种语言。全称超文本标记语言 (Hyper Text Markup Language)</dd> <dt>JavaScript</dt><dd>JavaScript,一种高级编程语言</dd>
    </dl>

    相关文章

      网友评论

        本文标题:HTML之列表

        本文链接:https://www.haomeiwen.com/subject/xuwupttx.html