玩转HTML5+跨平台开发[3] HTML列表标签

无序列表(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)

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

• 格式:

<h4>中国房价排行</h4>
  <ol>
      <li>北京</li>
      <li>上海</li>
      <li>广州</li>
      <li>铁岭</li>
  </ol>

• ol应用场景:

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

• 注意事项:

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

定义列表(definition list)-dl

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

• 格式:

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

<dl>
  <dt>北京</dt>
  <dd>国家的首都, 看升国旗的地方</dd>
  <dt>上海</dt>
  <dd>魔都, 遍地是黄金的地方</dd>
</dl>

dl应用场景

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

定义列表练习

注意事项:

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

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

补充：WebStorm使用技巧

设置自动换行：当一行内容超出屏幕时，使WebStorm能够自动换行，方便查看。

设置方法：在WebStorm菜单打开 [File]->[Setttings]，然后选择 [Editor]->[General]，勾选【Soft Wraps】中的”Use soft wraps in editor”即可。

参考：03HTML基础--列表标签