html5中的列表有什么

青灯夜游原创: 2022-03-15 15:12:374328浏览

html5中的列表有3种：1、无序列表，使用“ff6d136ddc5fdfeffaf53ff6ee95f185”和“25edfb22a4f469ecb59f1190150159c6”标签来定义；2、有序列表，使用“c34106e0b4e09414b63b2ea253ff83d6”和“25edfb22a4f469ecb59f1190150159c6”标签来定义；3、定义列表，使用“5c69336ffbc20d23018e48b396cdd57a”、“73de882deff7a050a357292d0a1fca94”和“67bc4f89d416b0b8236eaa5f43dee742”标签来定义。

html5中的列表有什么

本教程操作环境：windows7系统、HTML5版、Dell G3电脑。

无序列表(unordered list)

作用: 给一堆内容添加无序列表语义(一个没有先后顺序整体), 列表中的条目是不分先后

格式：

li 英文是 list item, 翻译为列表项

<h4>选择居住城市(CN)</h4>
<ul>
  <li>北京</li>
  <li>上海</li>
  <li>广州</li>
  <li>铁岭</li>
</ul>

ul应用场景:

导航条
商品列表等
新闻列表

注意事项:

这里指的无序是指对于主体来说内容没有先后之分, 例如主题是”选择居住城市(CN)”北京上海都是中国的城市, 无论谁放在前面它都还是中国的城市的. 如果标题改为”中国雾霾排行”, 那么就必须有严格的排名,北京必须写在前面
浏览器会给无需列表自动添加先导符号但是一定一定千万千万要记住, ul的作用并不是给文字添加小圆点, 而是增加无序列表的语义
- 其实ul还有一个type属性, 可以修改先导符号的样式, 取值有disc、square、circle几种
- 但是由于样式将来都是通过css来完成, 所以这里就不给大家介绍了
ul是一个组标签, 一定是一坨一坨的出现, 也就是说li标签不能单独存在, 必须包裹在ul里面
由于ul和li是一个整体, 所以ul里面不推荐包裹其它标签, 永远记住ul里面最好只写li标签
虽然ul中推荐只能写li标签, 但是li标签是一个容器标签, li标签中可以添加任意标签, 甚至可以添加ul标签

<ul>
  <li>
      好吃的
      <ul>
          <li>牛奶</li>
          <li>面包</li>
      </ul>
  </li>
  <li>
      日用的
      <ul>
          <li>毛巾</li>
          <li>牙膏</li>
      </ul>
  </li>
</ul>

有序列表(ordered list)

作用: 给一堆内容添加有序列表语义(一个有顺序整体), 列表中的条目有先后之分

格式:

  3f7b3decd2dcafb07b84d2d3985d9f40中国房价排行0f6dfd1e3624ce5465eb402e300e01ae
  c34106e0b4e09414b63b2ea253ff83d6
      25edfb22a4f469ecb59f1190150159c6北京bed06894275b65c1ab86501b08a632eb
      25edfb22a4f469ecb59f1190150159c6上海bed06894275b65c1ab86501b08a632eb
      25edfb22a4f469ecb59f1190150159c6广州bed06894275b65c1ab86501b08a632eb
      25edfb22a4f469ecb59f1190150159c6铁岭bed06894275b65c1ab86501b08a632eb
  f6f112ef45f603be226bc581f9dd5e90

ol应用场景:

xxx排行榜
其实ol应用场景并不多, 因为能用ol做的用ul都能做

注意事项:

ol和ul就是语义不一样，怎么使用都是一样的以及注意点都一样
其实ul还有两个常见属性start、type属性, 可以修改先导符号的样式和序号
但是由于样式将来都是通过css来完成, 所以这里就不给大家介绍了

定义列表(definition list)

作用: 给一堆内容添加列表语义, 通过dt罗列出列表的条目, 然后再通过dd给每个条目进行相应的描述

格式:

dt英文definition title, 翻译为定义标题
dd英文definition description, 翻译为定义描述信息

5c69336ffbc20d23018e48b396cdd57a
  73de882deff7a050a357292d0a1fca94北京c72c1af5e0e7f90179c047c5ef85885e
  67bc4f89d416b0b8236eaa5f43dee742国家的首都, 看升国旗的地方82e295699cff932a4d4dabba39074c35
  73de882deff7a050a357292d0a1fca94上海c72c1af5e0e7f90179c047c5ef85885e
  67bc4f89d416b0b8236eaa5f43dee742魔都, 遍地是黄金的地方82e295699cff932a4d4dabba39074c35
cd324b2387ec29e44e8e788c60648872

dl应用场景:

网站底部相关信息
但凡看到一堆内容都是用于描述某一个内容的时候就要想到dl

注意事项:

- dl是一个`组标签`, 一定是一坨一坨的出现, 也就是说dt和dd标签不能单独存在, 必须包裹在dl里面

由于dl和dt、dd是一个整体, 所以dl里面不推荐包裹其它标签
dd和dt和li标签一样是容器标签, 里面可以添加任意标签
定义列表非常灵活, 可以给一个dt配置多个dd, 但是最好不要出现多个dt对应一个dd, dd的语义是描述离它最近的一个dt, 所以其它dt相当于没有描述, 而定义列表存在的意义就是既可以列出每一个条目又可以对每一个条目进行描述
定义列表非常灵活, 可以将多个dt+dd组合拆分为多个dl

html5中的列表有什么

无序列表(unordered list)

有序列表(ordered list)

定义列表(definition list)

相关文章