manbetx手机登录

HTML基础——列表标签

列表标签

  • 作用:告诉浏览器这一堆数据是一个整体
  • 分类:无序列表、有序列表、界说列表

无序列表

  • 作用:给一堆数据增添列表语义,且一切数据不先后之分
  • 花式:
<ul>
     <li>需求显示的条款内容</li>
</ul>
  • 注意点:
    • ul和li标签是一个组合,普通情况下一同涌现
    • ul标签中不推荐包括
      除li外的其他标签,li标签中的内容可能会很庞杂,因而,能够在li标签中增添其它标签来丰盛界面(可增添ul标签,完成列表嵌套),比如:
<h2>物品清单</h2>
<ul>
    <li>
        <h3>蔬菜</h3>
        <ul>
            <li>白菜</li>
            <li>萝卜</li>
            <li>黄瓜</li>
        </ul>
    </li>
    <li>
        <h3>生果</h3>
        <ul>
            <li>苹果</li>
            <li>梨子</li>
            <li>桃子</li>
        </ul>
    </li>
</ul>
  • 以上例子也能够通过下列方式生成次要框架:
ul>li*2>h2+ul>li*3
  • 无序列表使用
    • 静态列表
    • 商品列表
    • 导航条

有序列表

  • 作用:给一堆数据增添语义,且一切数据有先后之分
  • 花式:
<ol>
      <li></li>
</ol>
  • 其他用法和ul相似

界说列表

  • 作用:界说列表的作用
    • 给一堆数据增添列表语义
    • dt界说列表中一切标题,dd给每一个标题增添描绘信息
  • 花式:
<dl>
      <dt></dt>
      <dd></dd>
      <dt></dt>
      <dd></dd>
<dl>
  • dt:definition title,界说列表中的标题
  • dd:definition description,界说标题中对应的描绘
  • 界说列表使用
    • 网站尾部的相关信息
    • 图文混排
  • 注意点:
  • dl和dt、dd是整体,普通一同涌现
  • dl中只加dt和dd
  • dt能够不对应的dd,推荐一个dt对一个dd
  • 需求丰盛界面时,能够在dt和dd标签中继续增添其他标签

更多精彩,尽在https://she31network.com

You may also like...