初识HTML(二）

目录

• HTML表格
• HTML列表

HTML表格

• 表格主要显示、展示数据。
• 表格基本语法:<table>定义一个表格,<tr>定义表格中的一行,<td>定义一行中的某一个单元格，其中<tr>和<td>都要嵌套在<table>中。

<table>
    <tr><td>姓名</td><td>年龄</td><td>性别</td></tr>
    <tr><td>a   </td><td>  1</td><td>  男</td></tr>
    <tr><td>b   </td><td>  2</td><td>  女</td></tr>
    <tr><td>c   </td><td>  3</td><td>  男</td></tr>
</table>

姓名	年龄	性别
a	1	男
b	2	女
c	3	男

• <th>标签代表HTML表格中的表头部分（table head），一般表头位于表格第一行或第一列，表头中的内容会加粗居中

<table>
    <tr><th>姓名</th><th>年龄</th><th>性别</th></tr>
    <tr><td>a   </td><td>  1</td><td>  男</td></tr>
    <tr><td>b   </td><td>  2</td><td>  女</td></tr>
    <tr><td>c   </td><td>  3</td><td>  男</td></tr>
</table>

姓名	年龄	性别
a	1	男
b	2	女
c	3	男

• 表格属性:可以通过设置表格属性来定义表格的显示,不过主要通过CSS来设定。

<table align="center" border="1" >
    <tr><th>姓名</th><th>年龄</th><th>性别</th></tr>
    <tr><td>a   </td><td>  1</td><td>  男</td></tr>
    <tr><td>b   </td><td>  2</td><td>  女</td></tr>
    <tr><td>c   </td><td>  3</td><td>  男</td></tr>
</table>

姓名	年龄	性别
a	1	男
b	2	女
c	3	男

• 单元格划分:由于有的表格可能很长，为了更好定义表格语义，可以将表格划分为表格头部和表格主体两个部分，使用<thead>和<tbody>标签来进行划分

<table align="center" border="1" >
    <thead><!--头部-->
    <tr><th>姓名</th><th>年龄</th><th>性别</th></tr>
    </thead>
    <tbody><!--主体-->
    <tr><td>a   </td><td>  1</td><td>  男</td></tr>
    <tr><td>b   </td><td>  2</td><td>  女</td></tr>
    <tr><td>c   </td><td>  3</td><td>  男</td></tr>
    </tbody>
</table>

• 单元格合并:可以将多个单元格合并为一个单元格，利用rowspan="合并单元格个数"来进行跨行合并，利用colspan="合并单元格个数"来进行跨列合并.若为跨行合并，目标单元格为最上侧单元格，若为跨列合并，目标单元格为最左侧单元格

<table border="1" width="300" height="150">
    <tr>
        <td></td>
        <td colspan="2"></td>
        <!--<td>此单元格被合并</td>-->
    </td>
    <tr>
        <td rowspan="2"></td>
        <td></td>
        <td></td>
    </td>
    <tr>
        <!--<td>此单元格被合并</td>-->
        <td></td>
        <td></td>
    </td>
</table>

HTML列表

• 列表是用来布局的。
• 列表分为三类，分别为无序列表，有序列表和自定义列表

1. 无序列表

• 无序列表利用<ul>标签，列表项用<li>标签，基本语法如下:

<ul>
    <li>11</li>
    <li>22</li>
    <li>33</li>
</ul>

• 11
• 22
• 33

• <ul>标签中只能包含<li>标签，但是<li>标签中可以包含任意的元素

2. 有序列表

• 有序列表利用<ol>标签，列表项用<li>标签，基本语法如下:

<ol>
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ol>

1. a
2. b
3. c

3. 自定义列表

• 自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。
• 自定义列表利用<dl>标签，该标签与<dt>（定义项目、名字）和<dd>（描述每一个项目、名字）一起使用,一个<dt>一般对应多个<dd>。

<dl>
    <dt>项目1</dt>
    <dd>项目1描述1</dd>
    <dd>项目1描述2</dd>
    <dd>项目1描述3</dd>
    <dt>项目2</dt>
    <dd>项目2描述1</dd>
    <dd>项目2描述2</dd>
    <dd>项目2描述3</dd>
</dl>

项目1

项目1描述1

项目1描述2

项目1描述3

项目2

项目2描述1

项目2描述2

项目2描述3