HTML的列表、表格、表单标签的使用

目标：掌握嵌套关系标签的写法，使用列表标签布局网页

01-列表

作用：布局内容排列整齐的区域。

列表分类：无序列表、有序列表、定义列表。

无序列表

作用：布局排列整齐的不需要规定顺序的区域。

标签：ul 嵌套 li，ul 是无序列表，li 是列表条目。

<ul>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
  ……
</ul>

注意事项：

• ul 标签里面只能包裹 li 标签
• li 标签里面可以包裹任何内容

有序列表

作用：布局排列整齐的需要规定顺序的区域。

标签：ol 嵌套 li，ol 是有序列表，li 是列表条目。

<ol>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
  ……
</ol>

注意事项：

• ol 标签里面只能包裹 li 标签
• li 标签里面可以包裹任何内容

定义列表

标签：dl 嵌套 dt 和 dd，dl 是定义列表，dt 是定义列表的标题，dd 是定义列表的描述 / 详情。

<dl>
  <dt>列表标题</dt>
  <dd>列表描述 / 详情</dd>
   ……
</dl>

注意事项：

• dl 里面只能包含dt 和 dd
• dt 和 dd 里面可以包含任何内容

02-表格

网页中的表格与 Excel 表格类似，用来展示数据。

基本使用

标签：table 嵌套 tr，tr 嵌套 td / th。

提示：在网页中，表格默认没有边框线，使用 border 属性可以为表格添加边框线。

<table border="1">
  <tr>
    <th>姓名</th>
    <th>语文</th>
    <th>数学</th>
    <th>总分</th>
  </tr>
  <tr>