前端学习详细知识点讲解-HTML(第二天)

最新推荐文章于 2024-11-05 11:58:24 发布

华丽的臻丶

最新推荐文章于 2024-11-05 11:58:24 发布

阅读量111

点赞数 2

分类专栏： HTML讲解文章标签： html

本文链接：https://blog.csdn.net/hualidezhen/article/details/115446366

版权

HTML讲解专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了HTML表格的基本属性，包括width、height、border等，以及表单的重要属性action和method，详细讲解了GET与POST的区别。同时，提供了表格和表单的代码示例，包括行合并、列合并、输入控件等，展示了如何创建和使用HTML表格和表单。此外，还列举了一些常见的HTTP状态码，如200、404等。

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

## 表格和表单

表格（作用:展示数据）

表格的基本属性：
	1.width 宽度
	2.height 高度
	3.border 边框
	4.cellspacing 单元格之间的距离
	5.cellpadding 单元格与内容之间的距离
	6.bgcolor 背景色
	7.rowspan 行合并
    8.colspan 列合并

表单

表单的作用:给用户填写数据，并且将数据发送给后台
1）属性
	action 用户将数据提交给后台的地址
	method 表单发送数据给后台时所用的提交方式
	post 
    get
 前端面试可能出现的面试题：
 get和post的区别 :
 一、功能不同
    	1、get是从服务器上获取数据。2、post是向服务器传送数据。 
二、过程不同
    1、get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。
    2、post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。 
三、获取值不同
    1、对于get方式，服务器端用Request.QueryString获取变量的值。
    2、对于post方式，服务器端用Request.Form获取提交的数据。 
四、传送数据量不同
    1、get传送的数据量较小，不能大于2KB。
    2、post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4中最大量为80KB，IIS5中为100KB。 
五、安全性不同
    1、get安全性非常低。
    2、post安全性较高。 
    如果没有加密，他们安全级别都是一样的，随便一个监听器都可以把所有的数据监听到。
        
        常见的状态码有哪些 200，404，403，401，500
        
 2）表单控件
	input 输入框
    type
        text：单行文本框
        submit：提交表单
        password：密码框
        radio：单选框
        checkbox：复选框

3.表格案例代码（附带注释详解）

<!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>
   <!-- 
       width 表格的宽度
       border 表格的边框
       cellspacing 单元格之间的距离
       cellpadding 单元格边框与内容的距离
    -->
    <table width='500' border="1" cellspacing='0' cellpadding='5'>
         <!-- 表头 -->
        <thead>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>

            </tr>
        </thead>
        <!-- 表体 -->
        <!--
            tr 一行
            th 表头的单元格
            td 表体的单元格
            align='center' 文字水平居中
            colspan 列合并
            rowspan 行合并
        -->
        <tbody align="center">
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>21</td>
                <td>男</td>
            </tr>
            <tr>
                <td colspan="2">2</td>
                <td>李四</td>
                <td>22</td>
                
            </tr>
            <tr>
                <td>3</td>
                <td rowspan="2">王五</td>
                <td>22</td>
                <td>男</td>
            </tr>
            <tr>
                <td>4</td>
                <td>赵六</td>
                <td>22</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

在这里插入图片描述表格案例代码展示图

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>表单</title>
</head>
<body>
    <form action="http://39.105.67.242:5588/address/findAll" target="_blank">
    <input type="submit" value="查询">
    </form>

    <form action="http://39.105.67.242:5588/address/findByCustomerId" target="_blank">
        <input type="text" name='id'>
        <input type="submit" value="根据顾客id查询地址">
    </form>

    <form action="http://39.105.67.242:5588/user/login" enctype="application/json" method="POST" target="_blank">
       <input type="text" name="username">
       <input type="text" name="password">
       <input type="text" name="type">
        <input type="submit" value="登录">
    </form>
</body>
</html>