学习HTML第四课总结

最新推荐文章于 2024-05-14 20:08:50 发布

对月亮动过心

最新推荐文章于 2024-05-14 20:08:50 发布

阅读量26

点赞数

文章标签： html 学习前端

本文链接：https://blog.csdn.net/qq_45255560/article/details/128874462

版权

thead标签

tbody标签

tfoot标签

注：改变三者编写顺序，不会改变编译后的效果

<!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>
    <style>
        thead {
            background-color: aqua;
        }

        tbody {
            background-color: aquamarine;
        }

        tfoot {
            background-color: bisque;
        }
    </style>
</head>

<body>
    <table>
        <tfoot>
            <tr>
                <td>我是尾巴</td>
                <td>我是尾巴</td>
                <td>我是尾巴</td>
            </tr>
            <tr>
                <td>我是尾巴</td>
                <td>我是尾巴</td>
                <td>我是尾巴</td>
            </tr>
            <tr>
                <td>我是尾巴</td>
                <td>我是尾巴</td>
                <td>我是尾巴</td>
            </tr>

        </tfoot>
        <thead>
            <tr>
                <td>第1个</td>
                <td>第2个</td>
                <td>第3个</td>
            </tr>
            <tr>
                <td>第1个</td>
                <td>第2个</td>
                <td>第3个</td>
            </tr>
            <tr>
                <td>第1个</td>
                <td>第2个</td>
                <td>第3个</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>我是第1个主体</td>
                <td>我是第2个主体</td>
                <td>我是第3个主体</td>
            </tr>
            <tr>
                <td>我是第1个主体</td>
                <td>我是第2个主体</td>
                <td>我是第3个主体</td>
            </tr>
            <tr>
                <td>我是第1个主体</td>
                <td>我是第2个主体</td>
                <td>我是第3个主体</td>
            </tr>
            <tr>
                <td>我是第1个主体</td>
                <td>我是第2个主体</td>
                <td>我是第3个主体</td>
            </tr>
            <tr>
                <td>我是第1个主体</td>
                <td>我是第2个主体</td>
                <td>我是第3个主体</td>
            </tr>
            <tr>
                <td>我是第1个主体</td>
                <td>我是第2个主体</td>
                <td>我是第3个主体</td>
            </tr>
            <tr>
                <td>我是第1个主体</td>
                <td>我是第2个主体</td>
                <td>我是第3个主体</td>
            </tr>
            <tr>
                <td>我是第1个主体</td>
                <td>我是第2个主体</td>
                <td>我是第3个主体</td>
            </tr>
            <tr>
                <td>我是第1个主体</td>
                <td>我是第2个主体</td>
                <td>我是第3个主体</td>
            </tr>
            <tr>
                <td>我是第1个主体</td>
                <td>我是第2个主体</td>
                <td>我是第3个主体</td>
            </tr>
        </tbody>

    </table>
</body>

</html>

input标签

输入框，行内块元素

属性：

type:设置input的数据类型

可选值：

text：文本

password：密码

radio：单元按钮=》需要用name来划分组别，相同的name值为一组

checkbox：多选框，可以同时选择多个，也可以点击取消

email：邮箱，有默认的格式

date：日期，可以通过value设置默认日期，格式value="2000-01-01"

file：长传文件，默认只能长传一个，可以通过multiple设置一次可以选多个

button：普通按钮

submit：提交按钮，将数据提交到浏览器

reset：重置

下拉框：select，默认的显示内容为第一个option

下拉选项：option,可以通过selected属性设置默认选项

文本区域：textarea

属性： cols:设置一行显示的宽度

rows:设置默认由多少行

<!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>表单元素</title>
</head>

<body>
    <form action="https://www.mi.com/" target="_blank" method="post" autocomplete="off" novalidate>
        账号：<input type="text" placeholder="请输入6-8位包含字母、特殊符号、数字的账户" name="name" autofocus autocomplete="off"><br>
        密码：<input type="password" placeholder="请输入6-8位包含字母、特殊符号、数字的密码" name="password" required maxlength="8" minlength="6"><br>
        性别：<input type="radio" name="sex" checked id="man">
        <label for="man">男</label>
        <label for="woman">
            <input type="radio" name="sex" id="woman">女
        </label><br>
        <!-- shift+alt+向下=》复制 -->
        <!-- <input type="radio" name="sex1">男1
    <input type="radio" name="sex1">女1 -->
        喜好：<input type="checkbox" checked>IT
        <input type="checkbox">娱乐
        <input type="checkbox">读书<br>
        邮箱：<input type="email"><br>
        日期：<input type="date" value="2023-01-06"><br>
        上传文件：<input type="file" multiple><br>
        数字：<input type="number" max="4" min="1">
        按钮： <input type="button" value="按钮">
        <input type="submit" value="提交">
        <input type="reset" value="重置"><br>
        <select name="" id="">
            <option value="">合肥</option>
            <option value="" selected>南京</option>
            <option value="">六安</option>
        </select>
        <textarea name="" id="" cols="30" rows="10">
            到合肥跨境电商父科室kg发v开发时间 是开发的手机号vfkshvkfshfiwuaoua
        </textarea>
        <button type="button"><a href="./复习.html">按钮</a></button>
        <button type="reset"><a href="./复习.html">重置</a></button>
        <button type="submit"><a href="./复习.html">提交</a></button><br>
        <input type="text" value="只读" readonly>
        <input type="text" value="禁用" disabled>
       
    </form>
</body>

</html>

对月亮动过心

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习HTML第四课总结

date：日期，可以通过value设置默认日期，格式value="2000-01-01"file：长传文件，默认只能长传一个，可以通过multiple设置一次可以选多个。radio：单元按钮=》需要用name来划分组别，相同的name值为一组。checkbox：多选框，可以同时选择多个，也可以点击取消。属性： cols:设置一行显示的宽度。email：邮箱，有默认的格式。下拉选项：option,可以通过selected属性设置默认选项。下拉框：select，默认的显示内容为第一个option。
复制链接

扫一扫