HTML基础-列表标签和表格标签

二、列表标签

2. 列表的应用场景

Ø 场景：在网页中按照行展示关联性的内容，如：新闻列表、排行榜、账单等

Ø 特点：按照行的方式，整齐显示内容

Ø 种类：无序列表、有序列表、自定义列表

小结：

Ø 无序列表由几个标签组成？分别表示什么？
• ul标签：表示无序列表的整体
• li标签：表示无序列表的每一项
Ø 无序列表标签的嵌套规范是什么？
• ul标签中只允许嵌套li标签
• li标签中可以嵌套任意内容

2.1 无序列表

3.1 有序列表

小结

Ø 有序列表由几个标签组成？分别表示什么？
	• ol标签：表示无序列表的整体
	• li标签：表示无序列表的每一项
Ø 有序列表标签的嵌套规范是什么？
	• ol标签中只允许嵌套li标签
	• li标签中可以嵌套任意内容

4.1 自定义列表

小结:

Ø 自定义列表由几个标签组成？分别表示什么？
	• dl标签：表示自定义列表的整体
	• dt标签：表示自定义列表的主题
	• dd标签：表示对于主题的每一项内容
Ø 自定义列表标签的嵌套规范是什么？
	• dl标签中只允许嵌套dt/dd标签
	• dt/dd标签中可以嵌套任意内容

上述的三种列表中使用场景

测试如下：

二：表格标签

1.1 表格的基本标签

小结：

Ø 完成一个简单的表格，需要由几个标签组成？分别表示什么？
	• table标签：表格整体
	• tr标签：表格每行
	• td标签：对于主题的每一项内容
Ø 表格基本标签的嵌套规范是什么？
	• table > tr > td

2.1 表格相关属性

小结：

Ø 完成一个简单的表格，需要由几个标签组成？分别表示什么？
	• table标签：表格整体
	• tr标签：表格每行
	• td标签：对于主题的每一项内容
Ø 表格基本标签的嵌套规范是什么？
	• table > tr > td

小结：

Ø 给表格添加边框，可以使用什么属性完成？
	• border属性
Ø 设置表格整体的宽高，可以使用什么属性完成？
• width属性：表格整体的宽度
• height属性：表格整体的高度

3.1 表格标题和表头单元格标签

小结：

Ø 表示表格整体大标题，使用什么标签完成？书写在什么位置？
	• 表格整体大标题：caption标签
	• 书写在table标签内部
Ø 在表格第一行设置一列的小标题，使用什么标签完成？书写在什么位置？
	• 表头单元格：th标签
	• 书写在tr标签内部（用于替换td标签）

4.1 表格的结构标签（了解）

小结：

Ø 表格的结构标签分别有哪些？表示什么含义？
	• thead：表格头部
	• tbody：表格主体
	• tfoot：表格底部
Ø 表格结构标签书写在什么位置？
	• 表格结构标签写在table标签内部
	• 表格标签内部用于包裹tr标签

测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>测试表格的基本标签</h2>
    <table>
        <tr>
            <td>姓名</td>
            <td>成绩</td>
            <td>评语</td>
        </tr>
        <tr>
            <td>小哥哥</td>
            <td>100分</td>
            <td>小哥哥真帅气</td>
        </tr>
        <tr>
            <td>小姐姐</td>
            <td>100分</td>
            <td>小姐姐真帅气</td>
        </tr>
        <tr>
            <td>总结</td>
            <td>郎才女貌</td>
            <td>可以可以</td>
        </tr>
    </table>
    <h2>测试表格的相关属性：</h2>
    <table border="1" width="600" height="400">
        <tr>
            <td>姓名</td>
            <td>成绩</td>
            <td>评语</td>
        </tr>
        <tr>
            <td>小哥哥</td>
            <td>100分</td>
            <td>小哥哥真帅气</td>
        </tr>
        <tr>
            <td>小姐姐</td>
            <td>100分</td>
            <td>小姐姐真帅气</td>
        </tr>
        <tr>
            <td>总结</td>
            <td>郎才女貌</td>
            <td>可以可以</td>
        </tr>
    </table>
    <h2>测试表格标题和表头单元格：</h2>
    <table border="1" width="600" height="400">
        <caption>学生成绩单</caption>
        <tr>
            <th>姓名</th>
            <th>成绩</th>
            <th>评语</th>
        </tr>
        <tr>
            <td>小哥哥</td>
            <td>100分</td>
            <td>小哥哥真帅气</td>
        </tr>
        <tr>
            <td>小姐姐</td>
            <td>100分</td>
            <td>小姐姐真帅气</td>
        </tr>
        <tr>
            <td>总结</td>
            <td>郎才女貌</td>
            <td>可以可以</td>
        </tr>
    </table>
    <h2>测试表格的结构标签</h2>
    <table border="1" width="600" height="400">
        <caption>学生成绩单</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>成绩</th>
                <th>评语</th>
            </tr>
        </thead>
       <tbody>
        <tr>
            <td>小哥哥</td>
            <td>100分</td>
            <td>小哥哥真帅气</td>
        </tr>
        <tr>
            <td>小姐姐</td>
            <td>100分</td>
            <td>小姐姐真帅气</td>
        </tr>
       </tbody>
       <tfoot>
        <tr>
            <td>总结</td>
            <td>郎才女貌</td>
            <td>可以可以</td>
        </tr>
       </tfoot>
    </table>
</body>
</html>

测试结果如下：

5.1 合并单元格-思路

5.2 合并单元格-代码实现

测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>跨行合并：</h2>
    <table border="1" width="600" height="400">
        <caption>学生成绩单</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>成绩</th>
                <th>评语</th>
            </tr>
        </thead>
       <tbody>
        <tr>
            <td>小哥哥</td>
            <td rowspan="2">100分</td>
            <td>小哥哥真帅气</td>
        </tr>
        <tr>
            <td>小姐姐</td>
            <td>小姐姐真帅气</td>
        </tr>
       </tbody>
       <tfoot>
        <tr>
            <td>总结</td>
            <td>郎才女貌</td>
            <td>可以可以</td>
        </tr>
       </tfoot>
    </table>
    <h2>跨行合并：</h2>
    <table border="1" width="600" height="400">
        <caption>学生成绩单</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>成绩</th>
                <th>评语</th>
            </tr>
        </thead>
       <tbody>
        <tr>
            <td>小哥哥</td>
            <td >100分</td>
            <td>小哥哥真帅气</td>
        </tr>
        <tr>
            <td>小姐姐</td>
            <td >100分</td>
            <td>小姐姐真帅气</td>
        </tr>
       </tbody>
       <tfoot>
        <tr>
            <td>总结</td>
            <td colspan="2">郎才女貌</td>
        </tr>
       </tfoot>
    </table>
</body>
</html>

测试结果：

关于表格的大结：

Ø 合并单元格的步骤分哪几步？
	1. 明确合并哪几个单元格
	2. 通过左上原则，确定保留谁删除谁
		• 上下合并→只保留最上的，删除其他
		• 左右合并→只保留最左的，删除其他
	3. 给保留的单元格设置：跨行合并（rowspan）或者跨列合并（colspan）
		• rowspan：跨行合并→垂直方向合并
		• colspan：跨列合并→水平方向合并
Ø 可以跨结构标签合并单元格吗？
	• 不能

原文地址：http://www.cnblogs.com/atao-BigData/p/16931026.html

1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！ 2. 分享目的仅供大家学习和交流，请务用于商业用途! 3. 如果你也有好源码或者教程，可以到用户中心发布，分享有积分奖励和额外收入！ 4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！ 5. 如有链接无法下载、失效或广告，请联系管理员处理！ 6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！ 7. 如遇到加密压缩包，默认解压密码为"gltf",如遇到无法解压的请联系管理员！ 8. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载 声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性