Day02HTML表单及两个实例

最新推荐文章于 2024-08-27 16:35:39 发布

瑜～

最新推荐文章于 2024-08-27 16:35:39 发布

阅读量36

点赞数

分类专栏：前端技术学习h5+css 文章标签： html html5 css

本文链接：https://blog.csdn.net/weixin_52284271/article/details/130353541

版权

前端技术学习h5+css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

在这里插入图片描述

只有同一个结构标签中的单元格才能合并，不能跨结构标签合并。（不能跨thead,tbody,tfoot）

multiple:上传文件时可选择多个文件

value可以在按钮后添加提示文字

下拉菜单

文本域

label标签
方法1较为复杂，方法2较简单
在这里插入图片描述
alt shift +下箭头：向下复制一行
语义化标签

做手机端网页需要用到由语义的布局标签

字符实体：在网页中显示特殊符号

主要是空格：&nbsp；

表单综合案例-学生信息表

<!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="400" height="300">
        <caption><strong>优秀学生信息表格</strong></caption>
        <!-- 表头单元格 -->
        <tr>
        <th>年级</th>
        <th>姓名</th>
        <th>学号</th>
        <th>班级</th>
        </tr>
        <tr>
            <!-- 跨行 -->
            <td rowspan="2">高三</td>
            <td>迪丽热巴</td>
            <td>110</td>
            <td>三年二班</td>
        </tr>
        <tr>
            <td>古力娜扎</td>
            <td>120</td>
            <td>三年三班</td>
        </tr>
        <tr>
            <td>评语</td>
            <!-- 跨列 -->
            <td colspan="3">你们都很优秀</td>
        </tr>
    </table>
</body>
</html>

表单综合练习2源码

<!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>
    <hr>
    <form action="">
    昵称：
    <input type="text" placeholder="请输入昵称">
    <br>
    <br>
    <label>性别：<input type="radio" name="sex" checked>男</label>
    <label><input type="radio" name="sex">女</label>
        <br>
        <br>
        所在城市：
        <select>
            <option>上海</option>
            <option>北京</option>
            <option>杭州</option>
        </select>
        <br>
        <br>
        婚姻状况：
        <label><input type="radio" name="situtation">未婚</label>
        <label><input type="radio" name="situtation">已婚</label>
        <label><input type="radio" name="situtation">保密</label>
        <br>
        <br>
        喜欢的类型：
        <label><input type="checkbox" checked>可爱</label>
        <label><input type="checkbox" checked>性感</label>
        <label><input type="checkbox">御姐</label>
        <label><input type="checkbox">萝莉</label>
        <label><input type="checkbox">小鲜肉</label>
        <label><input type="checkbox">大叔</label>
        <br>
        <br>
        个人介绍：<br>
        <textarea name="" id="" cols="50" rows="10"></textarea>
        <br>
        <br>
        <h3>我承诺</h1>
        <ul>
            <li>年满18岁、单身</li>
            <li>抱着严肃的态度</li>
            <li>真诚寻找另一半</li>
        </ul>
        <input type="checkbox">我同意所有条款
        <br>
        <br>
        <input type="submit" value="免费注册">
        <button type="reset">重置</button>
    </form>
</body>
</html>

瑜～

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Day02HTML表单及两个实例

只有同一个结构标签中的单元格才能合并，不能跨结构标签合并。（不能跨thead,tbody,tfoot）multiple:上传文件时可选择多个文件。做手机端网页需要用到由语义的布局标签。value可以在按钮后添加提示文字。字符实体：在网页中显示特殊符号。方法1较为复杂，方法2较简单。表单综合案例-学生信息表。
复制链接

扫一扫

专栏目录