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

一、前言 

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

二、表格标签

1.主体表格

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

 2.表头表格

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

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

 3.表格标签的属性

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

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

cellspacing:表格两条线中的距离

4.合并单元格

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

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

 将上面的表格按照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>

三、列表标签

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

1.无序列表(重点)

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

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

2.有序列表

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

3.自定义列表零基础必看的Html5+Css3+移动端前端视频教程(三)

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

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

代码段:

 <!-- 无序列表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>

四、表单标签

上一篇:HTML5学习(一)


下一篇:当动态桌面遇上 HTML5