一、前言
对于教程二,主要学习了文字标签、图像标签和链接标签的使用,教程三主要针对表格、列表、表单标签的使用方法。
二、表格标签
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>