2.作业2

1.作业题目

A图

B代码

2.css盒子模型

0.css盒子模型

1.外边距（margin）

2.边框（border）

3.内边距（padding）

编辑

3.GET方法与POST方法的区别

学习产出：

html的作业

1.作业题目

A图

B代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>导航栏</title>
    <style>
        div{
            width: 1000px;
            height: 50px;
            background-color:rgb(6, 73, 87);
            border-radius: 20px;
            text-align:center;
            box-shadow: 10px 10px 10px grey;
            }
            li{
                color: white;
                font-weight:700;
                font-size: 20px;
                list-style-type: none;
                display:inline;
                line-height: 50px;
                }
            li:hover{
                background-color: brown;
                font-size:x-large;
            }
    </style>
</head>
<body>
    <div>
        <ul>
            <li>游戏1</li>
            <li>游戏2</li>
            <li>游戏3</li>
            <li>游戏4</li>
            <li>游戏5</li>
            <li>游戏6</li>
            <li>游戏7</li>
            <li>游戏8</li>
            <li>游戏9</li>
        </ul>
    </div>
</body>
</html>

2.css盒子模型

CSS盒子模型是CSS的基础之一，它规定了如何显示网页上的元素。每个元素都可以看作一个盒子

0.css盒子模型

包括：外边距（Margin）、边框（Border）、内边距（Padding）和实际内容（Content）。

在CSS中，盒子模型的每个部分可以通过不同的属性进行设置：

width 和 height 指定内容区的宽度和高度。

padding 设置内边距，在内容区和边框之间。

border 设置边框宽度、样式和颜色。

margin 设置外边距，边框外部的空间。

1.外边距（margin）

外边距通常指的是两个盒子之间的距离，用来有效控制两个盒子的距离，同时达到页面的美观；同border和padding一样，可以对任意四个方向进行设置外边距：margin-top、margin-bottom、margin-left、margin-right [同样margin的写法有很多种，规则同padding！]

2.边框（border）

边框基本属性：

边框粗细: border-width

边框样式: border-style, 默认没边框；--solid：实线边框、--dashed：虚线边框、--dotted：点线边框

边框颜色: border-color

设置的边框会撑大盒子，即文本内容的大小不会影响，设置了边框大小就会在原有的基础上进行扩大；上述代码将边框的大小设置为5px，此时整个盒子的大小就不再是500px X 250px，而是变成510px X 260px（因为四个方向的都设置了边框大小），如果不想让边框撑大盒子，可以通过box-sizing属性修改浏览器行为，使边框不再撑大盒子：

3.内边距（padding）

padding 设置内容和边框之间的距离，在没有设置内边距的情况下，默认内容是顶着边框的，所以此时可以使用padding来控制内容和边框之间的距离，padding同border一样，也可以对任意四个方向进行设置内边距：padding-top、padding-bottom、padding-left、padding-right

注意：

padding同border一样，会撑大盒子，如果不想撑大盒子，同样需要修改box-sizing属性

padding的写法有很多种：

padding: 5px; 表示四个方向都是 5px

padding: 5px 10px; 表示上下内边距 5px, 左右内边距为 10px

padding: 5px 10px 20px; 表示上边距 5px, 左右内边距为 10px, 下内边距为 20px

padding: 5px 10px 20px 30px; 表示上5px, 右10px, 下20px, 左30px (顺时针)

3.GET方法与POST方法的区别

GET与POST是HTTP协议中两种常用的请求方法，它们在多个方面存在显著的区别。以下是它们的主要区别：

1.请求目的：

GET请求通常用于从服务器获取数据，如浏览网页、查询信息等。它不应该有副作用，即多次执行GET请求应得到相同的结果。
POST请求主要用于向服务器提交数据，如提交表单、文件上传等。它通常会有副作用，如创建或修改资源。

2.参数传递：

GET请求的参数直接附加在URL中，以查询字符串的形式传递。由于URL长度有限制，因此GET请求不适合传输大量数据。
POST请求的参数则放在请求正文中发送，不会显示在URL中。因此，POST请求更适合传输大量数据，且数据安全性较高。

3.缓存处理：

GET请求的响应通常会被浏览器缓存，因为它们只是获取数据，不会改变服务器状态。
POST请求默认不被缓存，因为每次请求都可能改变服务器上的资源状态。

4.安全性：

GET请求的参数直接暴露在URL中，可能存在安全风险，如敏感信息泄露。
POST请求的参数不显示在URL中，相对更安全。

幂等性：

GET请求通常是幂等的，即多次执行相同请求应得到相同结果。
POST请求通常不是幂等的，因为它们可能改变服务器状态。

总结来说，GET和POST的选择取决于具体的应用场景和需求。GET适合用于获取数据或查询操作，而POST适合用于需要修改服务器状态的操作。在实际开发中，应严格遵循HTTP规范使用这两种请求方法，以确保系统的正确性和安全性。

区别一：
get重点在从服务器上获取资源，post重点在向服务器发送数据；

区别二：
get(问号传值)---传输数据是通过URL请求，以field（字段）= value的形式，置于URL后，并用"？"连接，多个请求数据间用"&"连接，如http://127.0.0.1/Test/login.action？name=admin&password=admin，这个过程用户是可见的；post传输数据通过Http的post机制，将字段与对应值封存在请求实体中发送给服务器，这个过程对用户是不可见的；

区别三：

get:url发生变化，post:url不变

区别四：
Get传输的数据量小，因为受URL长度限制，但效率较高；Post可以传输大量数据，所以上传文件时只能用Post方式；

区别五：
get是不安全的，因为URL是可见的，可能会泄露私密信息，如密码等；post较get安全性较高；

区别六：
get方式只能支持ASCII字符，向服务器传的中文字符可能会乱码。
post支持标准字符集，可以正确传递中文字符。