首页 > 其他 > 详细

列表标签

时间:2021-06-27 09:31:51      阅读:21      评论:0      收藏:0      [点我收藏+]

无序列表

<ul>标签和<li>标签

  • 无序列表使用<ul></ul>标签,每个列表都是<li></li>标签
<ul>                 <------ unordered list  无序列表
    <li>面包</li>    <------ 
    <li>牛奶</li>    <------   list item
    <li>鸡蛋</li>    <------    列表项
    <li>水果</li>    <------ 
</ul>

技术分享图片

 

有序列表

<ol>标签和<li>标签

<ol>                 
    <li>面包</li>    
    <li>牛奶</li>    
    <li>鸡蛋</li>    
    <li>水果</li>   
</ol>

技术分享图片

 

注意事项

  • 有序列表使用<ol></ul>标签,每个列表都是<li></li>标签
  • 无序列表有序列表都是一个父子组合标签,不能单独出现
  • <ul>或者<ol>的子标签只能是<li>,绝对不能出现其他任何标签
  • <li>不能单独使用,它必须放到<ul>或者<ol>中使用
  • <li>标签是容器,内部可以放任何其他标签
    技术分享图片

    技术分享图片

 

列表嵌套

<ul>
       <li>
           一级清单
            <ul>
                <li>二级清单</li>
                <li>二级清单</li>
                <li>二级清单</li>
            </ul>
       </li>
       <li>
           一级清单
            <ul>
                <li>二级清单</li>
                <li>二级清单</li>
                <li>二级清单</li>
            </ul>
       </li>     
   </ul>

技术分享图片

 

定义列表

  • 需要逐条给出定义描述的列表,就是定义列表

<dl>和<dt>、<dd>标签

  • <dl>是定义列表标签,内容交替出现<dt>、<dd>标签
  <dl>
       <dt>A</dt>
       <dd>abcdefgefg</dd>
       <dt>B</dt>
       <dd>abcdefgefg</dd>
       <dt>C</dt>
       <dd>abcdefgefg</dd>
   </dl>
  • 也允许dt和dd不交替出现,而是分别处于不同的定义列表中
    <dl>
        <dt>A</dt>
        <dd>abcdefgefg</dd>
    </dl>
    <dl>
        <dt>B</dt>
        <dd>abcdefgefg</dd>        
    </dl>
    <dl>
        <dt>C</dt>
        <dd>abcdefgefg</dd>
    </dl>

技术分享图片

列表标签

原文:https://www.cnblogs.com/hjlong2/p/14939444.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!