首页 > 其他分享> 文章详细

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

2021-11-23 20:30:55 阅读：136 来源： 互联网

标签：Css3 必看表格标签单元格合并列表 Html5 儿子

一、前言

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

二、表格标签

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9