Z
ZHANK
布局与结构

HTML 列表

ul 无序列表、ol 有序列表、dl 描述列表、嵌套列表

HTML 列表

三种列表:无序列表 <ul>有序列表 <ol>描述列表 <dl>

学完本章你将: 掌握 ul/ol/dl、嵌套列表、自定义序号。


无序列表 ul

html
<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ul>
<!-- 默认显示圆点符号 -->

有序列表 ol

html
<ol>
  <li>打开电脑</li>
  <li>打开 VS Code</li>
  <li>开始写代码</li>
</ol>
<!-- 默认显示数字序号 -->

<!-- 自定义序号类型 -->
<ol type="A">   <!-- A, a, I, i, 1 -->
  <li>第一步</li>
  <li>第二步</li>
</ol>

<!-- 指定起始数字 -->
<ol start="5">
  <li>从 5 开始</li>
  <li>编号 6</li>
</ol>

描述列表 dl

html
<dl>
  <dt>HTML</dt>
  <dd>超文本标记语言——网页的骨架</dd>
  <dt>CSS</dt>
  <dd>层叠样式表——网页的外观</dd>
</dl>

嵌套列表

html
<ul>
  <li>前端
    <ul>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </li>
  <li>后端
    <ol>
      <li>Node.js</li>
      <li>Python</li>
    </ol>
  </li>
</ul>