表格标签、表单标签1

160 阅读2分钟

这是我参与11月更文挑战的第2天,活动详情查看:2021最后一次更文挑战

三、表格标签

<table>
<thead>/*表格头部*/
 <tr>/*这是行*/
 <th>这是表头,单元格内的文字</th>
 </tr>
 </thead>
 
 <tbody>/*表格主体*/
 <tr>
 <td>单元格内的文字</td>
 ...
 </tr>
 </tbody>
</table>

1.<table>是用于定义表格的标签。

2.<tr> 标签用于定义表格中的行,必须嵌套在标签中。

3.<td>用于定义表格中的单元格,必须嵌套在标签中。 字母 td 指表格数据(table data),即数据单元格的内容。

4.<th> 标签表示 HTML 表格的表头部分(table head 的缩写)。

1636040865544.png 四、合并单元格

  1. 跨行合并:rowspan="合并单元格的个数" ,最上侧单元格为目标单元格, 写合并代码

    跨列合并:colspan="合并单元格的个数",最左侧单元格为目标单元格, 写合并代码

2.合并单元格三步曲:

1)先确定是跨行还是跨列合并。

2)找到目标单元格. 写上合并方式 = 合并的单元格数量。比如:

 /*这是跨列的*/
<tr>
                <th>姓名</th>
                <th colspan="2">性别</th>
                <!-- <th>年龄</th> 这个要删了-->
            </tr>

3)删除多余的单元格(如上)。

五、三种列表

1636728889532.png

<h4>今天吃什么。这是无序列表</h4>
    <ul>
        <li>苹果</li>
        <li>西瓜</li>
        <li>西红柿</li>
    </ul>
​
    <h4>粉丝排行榜。这是有序列表</h4>
    <ol>
        <li>杨幂</li>
        <li>易烊千玺</li>
        <li>刘德华</li>
    </ol>
​
    <h4>这是自定义列表,大哥跟小弟的关系,不是父与子关系</h4>
    <dl>
        <dt>我是大哥</dt>
        <dd>我是二弟</dd>
        <dd>我是三弟</dd>
        <dd>我是四弟</dd>
    </dl>

六、表单标签

1.表单域是一个包含表单元素的区域。

在 HTML 标签中,

标签用于定义表单域,以实现用户信息的收集和传递。<form>会把它范围内的表单元素信息提交给服务器。

<form action=“url地址,如hhh.php” method=“提交方式,如GET” name=“表单域名称,随便一个英文名">
<!--name名称用于指定表单的名称,以区分同一个页面中的多个表单域--!>
 中间各种表单元素控件
</form>

2.一个完整的表单通常由表单域、表单控件(也称为表单元素)和 提示信息3个部分构成。