列表标签、表格标签

一、列表标签

1.无序列表

        列表每一项前面都是圆点，<ul>是无序列表的整体；<li>是每一项

    <ul> 
        <li>德玛西亚之力</li>
        <li>德玛西亚之翼</li>
        <li>德邦总管</li>
    </ul>

2.有序列表

        列表每一项前面都是数字序号，<ol>是有序列表的整体；<li>是每一项

    <ol>
        <li>亚托克斯</li>
        <li>拉亚斯特</li>
        <li>维鲁斯</li>
    </ol>

3.自定义列表

        <dl>是自定义列表的整体，<dt>是自定义列表的主题，<dd>是自定义列表的每一项

    <dl>
        <dt>神王</dt>

        <dd>盖伦</dd>
        <dd>诺手</dd>
    </dl>

 二、表格标签

1. 表格基本结构

    <table border="1" width="400" height="200">   //表格整体
        <caption><strong>英雄联盟</strong></caption>   //表格标题  
        <thead>   //表格头部
            <tr>
                <th>皮尔特沃夫</th>
                <th>祖安</th>
                <th>诺克萨斯</th>
            </tr>
        </thead>

        <tbody>   //表格主体
            <tr>
                <td>奥利安娜</td>
                <td>艾克</td>
                <td>列娜塔</td>
            </tr>
        </tbody>

        <tfoot>   //表格底部
            <tr>
                <td>杰斯</td>
                <td>金克斯</td>
                <td>卡特琳娜</td>
            </tr>
        </tfoot>

         <table>为表格整体，包含表格标题<caption>、头部<thead>、主体<tbody>和底部<tfoot>，<tr>为表格的每一行，<th>为表格头部的单元格，<td>为每一行的单元格

2. 表格的相关属性

border：边框的宽度

width/height：表格的宽高

3. 合并单元格 

上下合并：rowspan（如果上下单元格都有内容，则保留上面的）

左右合并：colapan（如果左右单元格都有内容，则保留左边的）

合并单元格无法跨越thead、tbody、tfoot包含的区域

3.1 具体步骤 

代码：

<table border="1" width="200" height="200">
    <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>
    

效果图：

---

 A、B单元格合并，修改代码如下：

<table border="1" width="200" height="200">
    <tr>
        <td colspan="2">A</td>  //第一步：在A单元格中添加 colspan，“2”为合并的单元格数量
                                //第二步：删除B单元格的代码
        <td>C</td>
    </tr>

    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

合并后的效果如下：

---

C、3  两个单元格合并，修改代码如下：

<table border="1" width="200" height="200">
    <tr>
        <td>A</td>
        <td>B</td>
        <td rowspan="2">C</td> //第一步：在C单元格中添加rowspan，“2”为合并的单元格数量
    </tr>

    <tr>
        <td>1</td>
        <td>2</td>
                        //第二步：删除“3”单元格代码
    </tr>
</table>

合并后的效果如下：

表格table标签的一些缺点：

1. 嵌套比较复杂，会导致搜索引擎读取困难，增加冗余代码量。

2. 灵活性差，不能将tr设置border等属性，得通过td

3. 代码臃肿，当在table中套用table的时候，代码会显得混乱

4. 频繁使用colspan与rowspan会造成整个文档顺序混乱。