HTML基础笔记详解（列表、表格、表单相关标签）

1.列表标签

无序列表
有序列表
自定义列表

<!-- 无序列表 -->
    <ul>
        <li>榴莲</li>
        <li>香蕉</li>
        <li>苹果</li>
        <li>火龙果</li>
    </ul>

    <!-- 有序列表 -->
    <ol>
        <li>榴莲</li>
        <li>香蕉</li>
        <li>苹果</li>
        <li>火龙果</li>
    </ol>

    <!-- 自定义列表 -->
    <dl>
        <dt>帮助中心</dt>
        <dd>账户管理</dd>
        <dd>购物指南</dd>
        <dd>订单操作</dd>
        
        <dt>帮助中心</dt>
        <dd>账户管理</dd>
        <dd>购物指南</dd>
        <dd>订单操作</dd>
    </dl>

2.表格相关标签

    <!-- 基础表格(实际开发过程中针对样式设计推荐使用css设置) -->
    <table border="1" width = "200" height = "100">
        <tr>
            <td>姓名</td>
            <td>学号</td>
            <td>年龄</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>1901</td>
            <td>20</td>
        </tr>
    </table>

<!-- 表格-->
<table border="1">
        <caption><strong>学生成绩单</strong></caption>
        <!-- 表格头部 -->
        <thead>
            <tr>
                <th>姓名</th>
                <th>成绩</th>
                <th>评语</th>
            </tr>
        </thead>
        <!-- 表格主体 -->
        <!-- 
            合并单元格：
                1.明确合并哪几个单元格
                2.根据左上原则，确定保留谁，删除谁
                    上下合并：只保留最上面的，删除其它
                    左右合并：只保留最左边的，删除其它
                3.给保留的单元格设置：跨行合并(rowspan)、跨列合并(colspan)

                同一个结构标签的单元格才能合并、不能跨结构标签合并(不能跨：thead、tbody、tfoot)
         -->
        <tbody>
            <tr>
                <td>李四</td>
                <td rowspan="2">100</td>
                <td>不错呀！</td>
            </tr>
            <tr>
                <td>王五</td>
                <td>很好！</td>
            </tr>
        </tbody>
        <!-- 表格底部 -->
        <tfoot>
            <tr>
                <td>总结</td>
                <td colspan="2">222</td>
            </tr>
        </tfoot>
    </table>

3.表单相关标签

    文本框：<input type="text" placeholder="请输入用户名">
    <br>
    <br>
    密码框：<input type="password" placeholder="请输入密码">
    <br>
    <br>
    <!-- name属性对于单选框有分组功能，有相同name属性值的单选框为一组，一组中同时只能有一个被选中 -->
    <!-- checked默认选中 -->
    单选框：性别：<input type="radio" name="gender">男 <input type="radio" name="gender" checked>女
    <br>
    <br>
    多选框：<input type="checkbox" name="" id="">
    <br>
    <br>
    <!-- 上传多个文件multiple -->
    上传文件：<input type="file" multiple>
    <br>
    <br>
    <br>
    <br>


    <form action="">
        <input type="text" placeholder="请输入用户名">
        <br>
        <br>
        <input type="password" placeholder="请输入密码">
        <br>
        <br>
        <!-- 按钮 -->
        <input type="submit">
        <input type="submit" value="免费注册">
        <!-- 重置功能，需要配合form表单使用 -->
        <input type="reset">
        <!-- 普通按钮、默认无功能、配合js添加功能 -->
        <input type="button" value="普通按钮">
        <br>
        <br>

        <!-- button标签 -->
        <button>我是按钮</button>
        <button type="submit">提交按钮</button>
        <button type="reset">重置按钮</button>
        <button type="button">普通按钮、没有任何功能</button>
    </form>
    <br>
    <br>


    <!-- 下拉菜单 默认选中select -->
    <select>
        <option>北京</option>
        <option>上海</option>
        <option>广州</option>
        <option selected>深圳</option>
    </select>
    <br>
    <br>


    <!-- 文本域标签 -->
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <br>
    <br>


    <!-- label标签：用于绑定内容和表单标签的关系 两种方法-->
    性别：
    <input type="radio" name="gender" id="nan"><label for="nan">男</label>
    <label><input type="radio" name="gender">女</label>

4.综合案例

①学生信息表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1" width="500" height="400">
        <caption><strong>优秀学生信息表格</strong></caption>
        <thead>
        <tr>
            <th>年级</th>
            <th>姓名</th>
            <th>学号</th>
            <th>班级</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td rowspan="2">高三</td>
            <td>张三</td>
            <td>110</td>
            <td>三年二班</td>
        </tr>
        <tr>
            <td>赵四</td>
            <td>120</td>
            <td>三年三班</td>
        </tr>
        </tbody>
        <tfoot>
            <td>评语</td>
            <td colspan="3">你们都很优秀</td>
        </tfoot>
    </table>

</body>
</html>

②表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>青春不常在，抓紧谈恋爱</h1>
    昵称：<input type="text" placeholder="请输入昵称"><br><br>
    性别：
    <label><input type="radio" name="gender">男</label>
    <label><input type="radio" name="gender">女</label>
    <br>
    <br>
    所在城市：
    <select>
        <option>北京</option>
        <option selected>上海</option>
        <option>广州</option>
        <option>深圳</option>
    </select>
    <br>
    <br>
    婚姻状况：
    <label><input type="radio" name="1">未婚</label>
    <label><input type="radio" name="1">已婚</label>
    <label><input type="radio" name="1">保密</label>
    <br>
    <br>
    喜欢的类型：
    <label><input type="checkbox" name="like">可爱</label>
    <label><input type="checkbox" name="like">性感</label>
    <label><input type="checkbox" name="like">御姐</label>
    <label><input type="checkbox" name="like">萝莉</label>
    <label><input type="checkbox" name="like">小鲜肉</label>
    <label><input type="checkbox" name="like">大叔</label>
    <br>
    <br>
    个人介绍：
    <br>
    <br>
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <br>
    <br>
    <h3>我承诺</h3>
    <ul>
        <li>年满18岁、单身</li>
        <li>抱着严肃的态度</li>
        <li>真诚寻找另一半</li>
    </ul>
    <label><input type="radio">我同意以上条款</label><br>
    <br>
    <button type="submit">免费注册</button>
    <button type="reset">重置</button>
</body>
</html>

HTML基础笔记详解（列表、表格、表单相关标签）

1.列表标签

2.表格相关标签

3.表单相关标签

4.综合案例

①学生信息表

②表单

猜你喜欢