HTML-框架标签+表格与表单

和蔼的阿木木o

已于 2022-07-19 09:51:36 修改

阅读量1.5k

点赞数 1

分类专栏： html 文章标签： html 前端 css

于 2022-06-17 11:24:55 首次发布

本文链接：https://blog.csdn.net/m0_59642141/article/details/125329648

版权

html 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

框架标签可以实现在一个html文档中显示其他html文档的功能

<body>
    <!-- 行内框架 -->
    <!-- src中放入引入的页面网址也可以是图片 -->
    <!-- 属于行内块元素   frameborder框架边框 1是有边框 0是无边框-->
    <!-- scrolling 滚动条  yes有滚动条 no无滚动条 -->
    <iframe src="https://cf.qq.com/main.shtml" frameborder="0" width="40%" height="800"
     scrolling="yes" frameborder="0"></iframe>
     <iframe src="https://cf.qq.com/main.shtml" frameborder="0" width="50%" height="800"
     scrolling="yes" frameborder="0"></iframe>
</body>

框架集（不能用在body中，使用时body中的内容将不显示）

    cols 列，rows 行
    <!-- cols/rows=“”       
    pixels         px
    %              百分比
    *              剩下的所有空间
    Frameborder    1(有边框) 、0（无边框）
    Noresize       框架大小不允许改变等     -->
    <frameset cols/rows="40%,30%,*" noresize>        
        <frame src="https://cf.qq.com/main.shtml">
        <frame src="http://www.bilibili.com">
    </frameset>

<iframe> 标签：iframe 是个内联框架，是在页面里生成个内部框架。
<frameset> 标签：frameset 定义一个框架集，包含多个子框架，每个框架都有独立的文档。

表格

1 .表格的基本结构
2. 合并单元格
3. 完整的表格标记

表格的基本结构+基本属性对齐方式

1. <table></table>

定义表格的基本框架
2. <tr></tr>
定义表格的行
3. <td></td>
定义表格中行内的单元格
4. <th></th>
定义表格中行内的单元格（标题），自动将文本加粗，居中对齐

<body>
    <table border="2" cellspacing="0" cellpadding="20" width="200" align="center" rules="all">
        <!-- border 表格边框 -->
        <!-- bordercolor  表格边框颜色 -->
        <!-- bgcolor 背景色 -->
        <!-- cellspacing  单元格与单元格之间的距离 -->
        <!-- cellpadding  内容与单元格四周的距离 -->
        <!-- width 宽度   height 高度 -->
        <!-- align  水平方向对齐方式
             left   左对齐
             center 居中对齐
            right   右对齐-->
        <!-- 事例  3行四列的表格，有边框，单元格与单元格之间的距离0，内容与单元格四周的距,20 -->
        <!-- 事例  3行四列的表格快捷键：table>tr*3>td*4{单元格} -->
        <!-- rules  规定内侧边框哪部分可见
        none   均不可见
        rows   位于行之间的线条可见
        cols   位于列之间的线条可见
        all    位于行列之间的线条均可见 -->
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td valign="top">单元格</td>
            <td align="right" valign="botttom">单元格</td>
            <!-- valign  垂直方向对齐方式
                 middle  垂直居中对齐
                 top     垂直居上对齐
                 bottom  垂直居下对齐 -->
        </tr>
    </table>
</body>

其他类型快捷键

    <!-- div>p*3>a*3 -->
    <div>
        <p><a href=""></a><a href=""></a></p>
        <p><a href=""></a><a href=""></a></p>
        <p><a href=""></a><a href=""></a></p>
    </div>
    <!-- p*3{段落} -->
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>

表格练习

    <table border="1" width="600" height="500" cellspacing="0" bordercolor="red">
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>成绩</th>
        </tr>
        <tr>
            <td align="left" valign="top">张小三</td>
            <td align="right" valign="bottom">男</td>
            <td align="center">30</td>
            <td align="right">880</td>
        </tr>
        <tr>
            <td align="left" valign="bottom">李二丫</td>
            <td align="left" valign="top">女</td>
            <td align="center" valign="middle">26</td>
            <td>1200</td>
        </tr>
    </table>

合并单元格

1. 使用colspan属性：从左往右水平合并单元格 <td colspan="2" align="center">单元格3</td> 引号里写占几个单元格
2. 使用rowspan属性：从上往下垂直合并单元格

左右合并单元格示例

<table border="1">
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
        <td colspan="2" align="center">单元格3</td>
        
    </tr>
    <tr>
        <td>单元格</td>
        <td>单元格</td>
        <td>单元格</td>
        <td>单元格</td>
    </tr>
    <tr>
        <td colspan="4" align="center">单元格</td>
        
    </tr>
</table>

垂直合并单元格示例

    <table border="1">
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td rowspan="3">单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td rowspan="2">单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格1</td>
            <td >单元格2</td>
            <td >单元格3</td>

        </tr>
    </table>

练习1

<body>
    <table border="1" cellspacing="0" width="200" height="200">
        <tr>
            <td></td>
            <td rowspan="2"></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td rowspan="2"></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
<br><br><br><br><br><br>
    <table border="1" cellspacing="0" width="200" height="200">
        <tr>
            <td rowspan="3"></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td ></td>
            <td colspan="3"></td>
        </tr>
    </table>
</body>

完整的表格标记

<thead></thead>
定义表头部分
<tfoot></tfoot>
定义表格脚注
<tbody></tbody>
定义表格主体
注意：<thead>和<tfoot>的内容要用<tr><td>要表示，不推荐直接表示

表单

1. 表单的概念及作用（重点、难点）
2. Post和Get概述（了解）

什么是表单

表单是用来采集用户的输入数据，然后将数据提交给服务器

表单的组成

一个表单有三个基本组成部分：
（1）：表单标签：这里面包含了处理表单数据所用程序的URL以及数据提交到服务器的方法。
（2）：表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
（3）：表单按钮：包括提交按钮、复位按钮和一般按钮。

表单标签＜form＞＜/form＞

功能：用于申明表单，定义采集数据的范围，也就是＜form＞和＜/form＞里面包含的数据将被提交到服务器
语法：<form action="url" method="get" ></form>
action=“” 服务器地址
method=“” get / post

表单域对象

表单域包含了文本框、多行文本框、密码框、隐藏域、复选框、单选框和下拉选择框等，用于采集用户的输入或选择的数据

文本框

文本框是一种让访问者自己输入内容的表单对象，通常被用来填写单个字或者简短的回答，如姓名、地址等。
代码格式：＜input type="text" name="..." size="..." maxlength="..." value="..."＞

Method 属性

post：指的是 HTTP POST 方法，表单数据会包含在表单体内然后发送给服务器，用于提交敏感数据，如用户名与密码等。

get：默认值，指的是 HTTP GET 方法，表单数据会附加在 action 属性的 URL 中，并以 ?作为分隔符，一般用于不敏感信息，如分页等。

关于 GET 的注意事项：

以名称/值对的形式将表单数据追加到 URL
永远不要使用 GET 发送敏感数据！（提交的表单数据在 URL 中可见！）
URL 的长度受到限制（2048 个字符）
对于用户希望将结果添加为书签的表单提交很有用
GET 适用于非安全数据，例如 Google 中的查询字符串

关于 POST 的注意事项：

将表单数据附加在 HTTP 请求的正文中（不在 URL 中显示提交的表单数据）
POST 没有大小限制，可用于发送大量数据。
带有 POST 的表单提交无法添加书签
提示：如果表单数据包含敏感信息或个人信息，请务必使用 POST！

placeholder属性

placeholder 属性提供可描述输入字段预期值的提示信息（hint）。
该提示会在输入字段为空时显示，并会在字段获得焦点时消失。
注释：placeholder 属性适用于以下的 <input> 类型：text, search, url, telephone, email 以及 password。

<body>
    <!-- action  行为 动作 数据提交的路径 -->
    <!-- method       方式，方法，数据提交的方式
         get  获取
         post                       -->
         <!-- input  输入
              type=""text" 文本框
              name   名字 
              value  初始值-->
        <!--  placeholder  输入域的提示文本 -->
    <form action="" method="">
        <input type="text" name="username" value=""  placeholder="用户名/手机号">
        <input type="text" name="username" value=""  placeholder="验证码">
        <input type="submit" value="登录">
    </form>
</body>

密码输入框以及提交按钮/重置按钮/普通按钮/图片提交按钮

<body>
        <form action="">
            <!-- maxlength   输入的最大长度（最多输入的字符数） -->
        用户名：<input type="text" name="unanme" maxlength="10"><br>
        &emsp;密码：<input type="password" name="psd" placeholder="请输入密码"><br>
        <input type="submit" value="登录">
        <input type="reset" value="重置">
        <input type="button" value="普通按钮">   
        <input type="image" src="../6.18/images/bj.png" alt="提交按钮" style="width:100px ;"> 
        </form>
</body>

修改提示文字大小

.main .delu .one:placeholder-shown {
  font-size: 3.467vw;
}

<button> 元素定义可点击的按钮：

<body>
    <button type="button" onclick="alert('Hello World!')">Click Me!
    </button>
</body>

单选按钮（Radio Buttons）

    <form action="">
        <h3>请选择你的性别</h3>
        <!-- name值需保持一致 -->
        <!-- 默认也可用checked -->
        <label> <input type="radio" name="sex" value="male">男 </label>
        <!--label标签可以通过点击文字选中单选框，方案1使用label包围-->
        <!-- 方案2  for中的属性值必须和id属性值保持一致-->
        <input type="radio" name="sex" value="female" id="mm">
        <label for="mm">女</label>
        <input type="radio" name="sex" >保密
    </form>

修改单选框按钮的大小

            input[type="radio"]{
                width: 34 * @width;
                height: 34 * @width;
                margin-top: -1vw;
                vertical-align: middle;
                    }

复选框checkbox/label（双标记标签）

<body>
    <form action="">
        <h2>请选择你喜欢的明星</h2>
        <label >
        <input type="checkbox" name="str1" value="蔡徐坤">蔡徐坤<br>
        </label>  <!--label标签可以通过点击文字选中复选框，方案1使用label包围-->
       <!-- 方案2  for中的属性值必须和id属性值保持一致-->
        <input type="checkbox" name="str2" value="刘德华" id="str2">
        <label for="str2">刘德华</label>
        <br>
        <input type="checkbox" name="str3" value="周星驰" >周星驰<br>
        <!-- checked  复选框默认被选中 -->
        <input type="checkbox" name="str4" value="王心凌" checked>王心凌<br>
        <input type="submit" value="提交">
    </form>
</body>

修改复选框按钮的大小

            input[type="checkbox"] {
            margin-left: 4.267vw;
            margin-top: 3.733vw;
            margin-right: 2.6vw;
            cursor: pointer;
            width: 5.867vw;
            height: 5.867vw;
            color: #57b450;
            background-color: #57b450;
            border: 3px solid #57b450;
            }

多行文本框

也是一种让访问者自己输入内容的表单对象，只不过能让访问者填写较长的内容。

<body>
    <textarea name="username" cols="30" rows="10" >
中国
    </textarea>
</body>

加上了固定宽度

     <!-- column  lie -->
     <!-- resize 是否重置大小（是否调整大小） -->
    <textarea name="msg" id="msg" style="width:200px; height:100px; resize:none;" placeholder="请留言..." >
    中国
    </textarea>

隐藏域

隐藏域是用来收集或发送信息的不可见元素，对于网页的访问者来说，隐藏域是看不见的。当表单被提交时，隐藏域就会将信息用你设置时定义的名称和值发送到服务器上。

<body>
    <input type="hidden" name="username" value="nan">
</body>

文件上传框

有时候，需要用户上传自己的文件，文件上传框看上去和其它文本域差不多，只是它还包含了一个浏览按钮。访问者可以通过输入需要上传的文件的路径或者点击浏览按钮选择需要上传的文件。

<body>
    <input type="file" name="username" size="15" maxlength="100">
</body>

下拉选择框

下拉选择框允许你在一个有限的空间设置多种选项。

<form action="">
    <h3>请选择你的省份</h3>
    <select name="pro" id="">
        <!-- selected  下拉选择框默认选项  -->
       <option value="henna">河南省</option>
       <option value="hunan">湖南省</option>
       <option value="sanxi">陕西省</option>
       <option value="gansu" selected>甘肃省</option>
    </select>
    <br>
    <input type="submit" value="提交">
</select>
</form>

<form action="">
    <h3>请选择你的省份</h3>
        <!-- multiple   可多个选中 -->
    <select name="pro" id="" multiple>

表单练习

<!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>
        .btn{
      color: blue;
        }
    </style>
</head>
<body>
<form action="" method="post" align="center">
    账号：<input type="text" maxlength="10" placeholder="请输入账号">
    <span style="color: red;">账号输入不能超过10个字符</span><br>
    密码：<input type="password" name="pwd" placeholder="请输入密码" required>
    <span style="color: red;">密码必须填写</span>
    <br>
    性别：<label><input type="radio" name="sex" value="mal" checked>男</label>
    <label><input type="radio" name="sex" value="femal">女</label>
    <br>
    出生日期:<select>
        <option value="nian" selected>1995</option>
        <option value="nian">1996</option>
        <option value="nian">1997</option>
        <option value="nian">1998</option>
        <option value="nian">1999</option>
    </select>年
    <select name="" id="">
        <option value="yue" selected>1</option>
        <option value="yue">2</option>
        <option value="yue">3</option>
        <option value="yue">4</option>
        <option value="yue">5</option>
        <option value="yue">6</option>
        <option value="yue">7</option>
    </select>月
    <select name="r" id="">
        <option value="r" selected>1</option>
        <option value="r">2</option>
        <option value="r">3</option>
        <option value="r">4</option>
        <option value="r">5</option>
    </select>日
    <br>
    兴趣爱好：<label><input type="checkbox" name="bc" value="编程" checked>编程</label>
    <label><input type="checkbox" name="bc" value="跳舞">跳舞</label>
    <label><input type="checkbox" name="bc" value="跑步">跑步</label>
    <label><input type="checkbox" name="bc" value="围棋">围棋</label>
    <label><input type="checkbox" name="bc" value="旅游">旅游</label><br>
    <label><input type="checkbox" name="bc" value="玩游戏">玩游戏</label>
    <label><input type="checkbox" name="bc" value="阅读">阅读</label>
    <label><input type="checkbox" name="bc" value="跆拳道">跆拳道</label>
    <label><input type="checkbox" name="bc" value="演讲">演讲</label><br>
    个人介绍：<textarea name="username" cols="30" rows="5">

    </textarea>
    <br>
    <input type="submit" value="提交注册" id="btn">
    <input type="reset" value="擦掉重写">


</form>
</body>
</html>