HTML中的列表和表单

最新推荐文章于 2024-10-16 20:49:18 发布

王937

最新推荐文章于 2024-10-16 20:49:18 发布

阅读量93

点赞数 2

文章标签： html 前端

本文链接：https://blog.csdn.net/weixin_63449105/article/details/131687647

版权

本文展示了HTML中创建不同类型的列表（有序、无序和自定义）的方法，以及如何构建表格，包括合并单元格和调整列宽。此外，还详细介绍了表单元素，如text、password、number、radio、checkbox、select和textarea，以及它们的属性和用途。

摘要由CSDN通过智能技术生成

列表

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表</title>
</head>
<body>
    <!-- 有序列表
        type: 1 A a I i
        reversed:倒序顺序
        start：设置初始值
     -->
    <ol type="1"  >
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
    </ol> 
     <!-- 无序列表
        type:disc 实心圆 默认
             circle 空心圆
             sqart 实心方框
     -->
    <ul type="disc">
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
    </ul>
     <!-- 自定义列表 -->
     <dl>
        <dt>列表标题</dt>
        <dd>自定义列表</dd>
        <dd>自定义列表</dd>
        <dd>自定义列表</dd>
     </dl>
     <!-- 注意：ul/ol下只用li li可以套任意标签 -->
     <!-- 表格
         table>自定义表格
         tr   >自定义行
         th   >自定义标题
         td   >自定义列 
        rowspan:合并行  使用时：值为几，就把对应几行的td删掉
        colspan:合并列  使用时：值为几，就删除本行后的几个td
        bgcolor:背景颜色
        border：表格线
        

        给一行中任意一列加高（height）属性，整行都是一个高，如果有冲突，按最大值撑开；
        给一行中任意一列加宽（width）属性，整行都是一个宽，如果有冲突，按最大值撑开；
    -->
    <table border="1" width="600" align="center">
        <tr>
            <th bgcolor="red">第一行第一列</th>
            <th>第一行第一列</th>
            <th>3第一行第一列</th>
        </tr>
        <tr align="center">
            <td rowspan="3">第二行第一列</td>
            <td colspan="2">第二行第二列</td>
            <!-- <td>3</td> -->
        </tr>
        <tr align="center">
            <!-- <td>1</td> -->
            <td>第二行第二列</td>
            <td>第二行第三列</td>
        </tr>
        <tr align="center">
            <!-- <td>1</td> -->
            <td>第三行第二列</td>
            <td>第三行第三列</td>
        </tr>
    </table>
</body>
</html>

表单

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
</head>
<body>
    <form action="demo.html">
        <!-- <label for=""></label> -->

        <!-- type
            text: 任意字符 文本框
            password：输入密码：显示为 ···
            number: 只能输入数字

            radio: 单选 
                name属性 name属性相同时，为同一组单选选项组
                checked 默认选中，选多个时，选中最后拥有该属性的那个
            checkbox：复选
                name属性 name属性相同时，为同一组复选选项组
                checked 默认选中，选多个时，就是多个都选中

                name属性：传数据时，让接收方知道我们传的是谁的数据。值是什么。
                value属性：值。
            submit：提交按钮

            form:action: 提交地址


        -->
        姓名 ：
        <label for="bbb">姓名</label>
        <label for="ccc">密码
            <input type="password" id="ccc" name="password">
        </label>
        
        <input type="text" id="bbb" name="username" value="大漂亮">
        密码 ：
        数字 ：<input type="number" name="number">
        单选按钮 ：
        
                <input type="radio" name="sex" value="nan">男
                <input type="radio" name="sex" value="nv">女
                <input type="radio" name="sex" checked value="qita">其他
        多选按钮 ：
                <input type="checkbox" name="a" value="chi">吃
                <input type="checkbox" name="a" value="he" checked>喝
                <input type="checkbox" name="a" value="shui" checked>睡
                <input type="checkbox" name="a" value="wan">玩
                <input type="checkbox" name="a" value="xue" checked>学习
                <br>
            <!-- select 下拉框
                select - option--选项
                       - value：选项值
            -->
        下拉框：
            <select name="地区" id="">
                <option value="" selected></option>
                <option value="1">北京</option>
                <option value="3">上海</option>
                <option value="2">深圳</option>
                <option value="4">太原</option>
            </select>
        文本域：
            <textarea name="备注" id="" cols="80" rows="10"></textarea>
            
        提交：
            <input type="submit">

            <input type="file">
    </form>

</body>
</html>