html中表格,列表和表单标签

本文详细介绍了HTML中的表格(table)、无序列表(ul)、有序列表(ol)和自定义列表(dl)的使用方法,包括合并单元格、表单元素如input、select和textarea的示例,以及表单标签form的布局。适合初学者理解HTML布局与交互元素。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.表格标签table

基本语法

table是定义表格的标签
tr定义表格中的一行 必须嵌套在table标签内
td定义表格中的单元格 必须嵌套在tr标签内
th定义表格中的表头 其内文字会加粗居中

  <table border="1">    
        <tr> <th>姓名</th> <th>姓别</th> <th>年龄</th> </tr>
        <tr> <td>张三</td> <td></td> <td>18</td> </tr>
        <tr> <td>李四</td> <td></td> <td>18</td> </tr>
    </table>

运行结果:
运行结果
表格属性基本通过css设置

表格结构标签

thead为表格头部区域标签
tbody为表格主体区域标签

合并单元格

跨列合并

colspan=“要合并的单元格数”
目标单元格为要合并的最侧单元格,在其内写代码
最后删除多余单元格

跨行合并

rowspan=“要合并的单元格数”
目标单元格为要合并的最侧单元格,在其内写代码
最后删除多余单元格


    <table border="1" width="300" height="300" cellspacing="0"> 

        <tr> <td></td> <td colspan="2"></td> </tr>
        <tr> <td rowspan="2"></td> <td></td> <td></td> </tr>
        <tr>  <td></td> <td></td> </tr>

    </table>

效果如下:

在这里插入图片描述


2.列表标签

2.1无序列表ul

    <!--<ul>表示无序列表  列表项用<li>定义-->
	<ul>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
        <li>ddd</li>
    </ul>
    <!--<ul>里只能出现<li>标签  <li>标签里可以放任何元素-->

结果如下:
在这里插入图片描述

2.2有序列表ol

<!--<ol>表示无序列表  列表项用<li>定义-->
	<ol>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
        <li>ddd</li>
    </ol>
    <!--<ol>里只能出现<li>标签  <li>标签里可以放任何元素-->

结果如下:
在这里插入图片描述

2.3自定义列表dl

	<dl>
        <dt>名词1</dt>
        <dd>名词1的解释1</dd>
        <dd>名词1的解释2</dd>
    </dl>
    <!--<dl>中只能放<dt>和<dd>-->

结果如下:
在这里插入图片描述

3.表单标签form

表单由form定义 所有内容都在form标签内

<form action="demo.php" method="POST" name="test01"></form>

3.1input

输入表单元素 用于收集用户信息

<input type="属性值" />

type可选的属性值如下:
在这里插入图片描述
input的其他常用属性:
在这里插入图片描述



插入以下代码:


    <form action="demo.php" method="POST" name="test01"> 

        用户名:<input type="text" name="username" value="输入用户名" maxlength="12" /> <br />
        密码:<input type="password" name="password"/><br />
        <!--name中属性值必须一致时才能实现多选一-->
        <!--checked属性可以让框默认被勾选-->
        性别: 男<input type="radio" name="sex" value="" checked><input type="radio" name="sex"  value=""> <br />

        爱好: 打游戏<input type="checkbox" name="hobby">
        吃饭<input type="checkbox" name="hobby">
        敲代码<input type="checkbox" name="hobby">
        <br />

        <input type="submit" value="注册">
        <input type="reset">

    </form>

可以看到如下页面:
在这里插入图片描述

label标签

将性别部分代码修改为:

性别: <label for="boy"></label><input type="radio" name="sex" value="" id="boy" checked>   
        <label for="girl"></label><input type="radio" name="sex"  value="" id="girl" > <br />

即可在光标放在 男/女 时选中单选框 增加用户体验

3.2select

下拉表单元素

选择: <select>
            <option >1</option>
            <option >2</option>
            <option >3</option>
            <option >4</option>
            <option >5</option>
            <option >6</option>
             <!--selected属性可以让选项默认被选择-->
            <option selected>7</option>
        </select>

结果如下:
在这里插入图片描述

3.3textarea

文本域元素 当用户要输入的文本较多时使用

        <!--cols属性规定一行初始能显示多少字 rows属性规定初始能显示几行-->
       建议: <textarea cols="30" rows="10"></textarea>

效果:
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

KeeeepReal

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值