零基础必看的Html5+Css3+移动端前端视频教程(三)

一、前言 

        对于教程二，主要学习了文字标签、图像标签和链接标签的使用，教程三主要针对表格、列表、表单标签的使用方法。

二、表格标签

1.主体表格

 2.表头表格

表头表格就是上面表格中的第一行，它和下面几行主要区别就是有加粗和居中显示。

 3.表格标签的属性

 cellpadding:文字距离左侧表格线的距离

cellspacing：表格两条线中的距离

4.合并单元格

就像excel中一样，html也有合并单元格这个功能，只不过需要特定的代码。

 将上面的表格按照1~9编号，以跨列合并为例，colspan="2"表示合并2个单元格，起始位置就是第二列，其中第三列被合并了，所以就不需要了，删除。

上面图中具体代码实现为：

    <!-- 为表格设置居中、边框、文字与表格相距5、表格与表格相距0、宽度（宽高设置一个会自动调节） -->
    <table align="center" border="1"  cellpadding="5" cellspacing="0" width="250">
        <!-- 下图中的thead和tbody只是把表头和主体做一个分类，没什么特殊作用 -->
        <thead>
            <tr>
                <!-- 将2和3按照列来合并，确定合并的起始点，删除多余的单元格 -->
                <th>1</th>
                <th colspan="2">2</th>
                <!-- <th>3</th>删除这一个 -->
            </tr>
        </thead>
        <tbody>
            <!-- 将4和7按照行来合并，确定合并的起始点，删除多余的单元格 -->
            <tr>
                <td rowspan="2">4</td>
                <td>5</td>
                <td>6</td>
            </tr>
            <tr>
                <!-- <td>7</td>删除这个多余的 -->
                <td>8</td>
                <td>9</td>
            </tr>
        </tbody>
    </table>

三、列表标签

1.无序列表（重点）

 特点可以简单理解成<ul>只有<li>这一个儿子，假如p标签也行冒充儿子，那不行。对于<li>这个儿子来讲，他也会有儿子而且不限量，所以<ul>有一个儿子，无限个孙子。

2.有序列表

3.自定义列表

 自定义列表就是<dt>创建的一个名词，剩下的<dd>用来描述和它相关的内容，具体关系如下图：

代码段：

 <!-- 无序列表ul中间不能嵌套别的标签，li可以 -->
    <ul>
        <li>甄嬛</li>
        <li>宜秀</li>
        <li>年世兰</li>
    </ul>
    <!-- 有序列表 -->
    <ol>
        <li>甄嬛</li>
        <li>苹果</li>
        <li>西瓜</li>
    </ol>
    <!-- 自定义列表 -->
    <dl>
        <dt>雍正</dt>
        <dd>甄嬛</dd>
        <dd>宜秀</dd>
        <dd>年世兰</dd>
    </dl>

四、表单标签

标签：Css3,必看,表格,标签,单元格,合并,列表,Html5,儿子
来源： https://blog.csdn.net/qq_53673551/article/details/121500734