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支持标准字符集,可以正确传递中文字符。


学习产出:

1.html的作业

http://t.csdnimg.cn/HCo6G

  • 技术笔记 1遍
  • 有错误请指出,作者会及时改正

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/43072.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

九科bit-Worker RPA 内容学习

简介&#xff1a; 什么是RPA&#xff1f; RPA&#xff08;Robotic Process Automation&#xff0c;机器人流程自动化&#xff09;本质上是一种“AI数字员工”&#xff0c;针对企业中存在的大批量、重复性、机械化人工操作&#xff0c;通过模拟人的工作流程使之实现自动化。 b…

MySQL怎么查询列表重复数据

在 MySQL 中&#xff0c;要查询列表中的重复数据&#xff0c;可以使用以下几种方法&#xff1a; 使用 GROUP BY 和 HAVING 子句&#xff1a; SELECT column_name, COUNT(*) FROM your_table_name GROUP BY column_name HAVING COUNT(*) > 1;其中&#xff0c;column_name …

华为od-C卷200分题目6 - 5G 网络建设

华为od-C卷200分题目6 - 5G 网络建设 题目描述 现需要在某城市进行 5G 网络建设&#xff0c;已经选取 N 个地点设置 5G 基站&#xff0c;编号固定为 1 到 N&#xff0c;接下来需要各个基站之间使用光纤进行连接以确保基站能互联互通&#xff0c;不同基站之间架设光纤的成本各不…

AIGC笔记--Stable Diffusion源码剖析之DDIM

1--前言 以论文《High-Resolution Image Synthesis with Latent Diffusion Models》 开源的项目为例&#xff0c;剖析Stable Diffusion经典组成部分&#xff0c;巩固学习加深印象。 2--DDIM 一个可以debug的小demo&#xff1a;SD_DDIM 以文生图为例&#xff0c;剖析SD中DDIM的…

Chrome 127内置AI大模型攻略

Chrome 127 集成Gemini:本地AI功能 Google将Gemini大模型整合进Chrome浏览器,带来全新免费的本地AI体验: 完全免费、无限制使用支持离线运行,摆脱网络依赖功能涵盖图像识别、自然语言处理、智能推荐等中国大陆需要借助魔法,懂都懂。 安装部署步骤: 1. Chrome V127 dev …

推出PSoC™ 车规级4100S Max系列,(CY8C4147LDE 和 CY8C4147LDS)支持性能更强大的第五代CAPSENSE™技术

推出全新车规级PSoC™ 4100S Max系列。这一微控制器器件系列具有更佳的闪存密度、通用输入输出接口&#xff08;GPIO&#xff09;、CAN-FD和硬件安全性&#xff0c;扩展了采用CAPSENSE™技术的汽车车身/暖通空调&#xff08;HVAC&#xff09;和方向盘应用人机界面&#xff08;H…

Android 10.0 FolderIcon文件夹图标内预览图标超出边距解决方案

1.前言 在10.0的系统rom定制化产品开发中,在进行Launcher3的功能定制化过程中,在实现文件夹功能的时候,由于产品分辨率等原因 在拖拽图标进文件夹的时候,在3*3的布局中,会发现图标出了folder边距,所以就需要分析相关的功能,然后实现解决这个问题 2.FolderIcon文件夹图标…

数据库图形化管理界面应用 Navicat Premium 使用教程

经同学介绍的一个把数据库可视化的软件Navicat Premium&#xff0c;很好用&#xff0c;在这里分享一下&#xff0c;需要的同学可以去了解看看 一&#xff1a;下载并解压 链接&#xff1a;https://pan.baidu.com/s/1ZcDH6m7EAurAp_QmXWx81A 提取码&#xff1a;e5f6 解压到合…

抢拍秒购模式,私域电商营销玩法引流拓客秘籍!

抢拍秒购模式是一种创新的电子商务模式&#xff0c;由微三云平台推出。该模式将传统电商与社交电商的优势相结合&#xff0c;通过限时秒杀的方式&#xff0c;刺激消费者的购买欲望&#xff0c;提升购物效率和销售额。以下是对抢拍秒购模式的详细讲解&#xff0c;包括其优势和玩…

Excel 宏录制与VBA编程 ——VBA编程技巧篇二 (合并内容相同连续单元格、取消合并单元格并在每个单元格中保留内容)

1、合并内容相同的连续单元格 如果需要合并如图所示的工作表中B列中部门相同的连续单元格 VBA代码&#xff1a; Sub Mergerng()Dim IntRow As IntegerDim i As IntegerApplication.DisplayAlerts FalseWith Sheet1IntRow .Range("A65536").End(xlUp).RowFor i In…

运维锅总详解系统设计原则

本文对CAP、BASE、ACID、SOLID 原则、12-Factor 应用方法论等12种系统设计原则进行分析举例&#xff0c;希望对您在进行系统设计、理解系统运行背后遵循的原理有所帮助&#xff01; 一、CAP、BASE、ACID简介 以下是 ACID、CAP 和 BASE 系统设计原则的详细说明及其应用举例&am…

Sleuth--链路追踪

1 链路追踪介绍 在大型系统的微服务化构建中&#xff0c;一个系统被拆分成了许多模块。这些模块负责不同的功能&#xff0c;组合成 系统&#xff0c;最终可以提供丰富的功能。在这种架构中&#xff0c;一次请求往往需要涉及到多个服务。互联网应用构建 在不同的软件模块集上&am…

C++入门基础篇(1)

欢迎大家来到海盗猫鸥的博客—— 断更许久&#xff0c;让我们继续好好学习吧&#xff01; 目录 1.namespace命名空间 命名空间的存在价值&#xff1a; 命名空间的定义&#xff1a; 命名空间的使用&#xff1a; 2.C输入输出函数 使用&#xff1a; 3.缺省参数 4.函数重载…

理解JS与多线程

理解JS与多线程 什么是四核四线程&#xff1f; 一个CPU有几个核它就可以跑多少个线程&#xff0c;四核四线程就说明这个CPU同一时间最多能够运行四个线程&#xff0c;四核八线程是使用了超线程技术&#xff0c;使得单个核像有两个核一样&#xff0c;速度比四核四线程有多提升。…

背包问题转换

如何转换成背包问题呢&#xff0c;我们可以把每个质数当成一个重量 #define _CRT_SECURE_NO_WARNINGS #include<bits/stdc.h> using namespace std;#define int long long int record[1005]; void fun() {//record[2] 1;for (int i 2; i < 1000; i) {if (!record[…

mybatis-plus解决resultType为java.util.Map不返回空值字段

问题&#xff1a;背景使用返回类型为Map的时候 mybatis默认把空值字段不返回属性。 例如&#xff1a; <select id"select" resultType"java.util.Map">select * from user</select> 上面这个样的java.util.Map返回类型&#xff0c;如果其中…

顶会FAST24最佳论文|阿里云块存储架构演进的得与失-5.其他话题分享

4.1 可用性威胁与解决方案 挑战1&#xff1a;BlockServer故障影响众多VD 问题描述&#xff1a;单个BlockServer的故障可能会影响到多个虚拟磁盘&#xff08;VDs&#xff09;的正常运作&#xff0c;这是由于传统架构中BlockServer承担了过多的职责&#xff0c;其稳定性直接关系…

前端vue打印后端对象为[object,object]

今天给自己项目进行编写前端页面时&#xff0c;惊讶的发现&#xff0c;自己进行打印后端传递的对象&#xff0c;一直显示未[object,object]&#xff0c;如下图所示&#xff1a; 感觉很奇怪&#xff0c;于是我猜测是不是自己获取的返回数据的问题&#xff0c;在进行添加了datat…

EMQX 与 MQTT: AI 大模型时代的分布式数据中枢

在以数据为核心的 AI 时代&#xff0c;信息的快速和精确传递已成为构建高效系统的基石。人工智能和机器学习模型的复杂性&#xff0c;让各行业和企业对数据的需求稳步提升&#xff0c;同时&#xff0c;物联网设备数量也在经历爆炸式的增⻓。在这样的背景下&#xff0c;MQTT Bro…

这几类人,千万不要买纯电车

文 | AUTO芯球 作者 | 响铃 纯电车的冤大头真是太多了&#xff0c; 我之前劝过&#xff0c;有些人不适合买纯电车&#xff0c; 你们看&#xff0c;果然吧&#xff0c;麦卡锡最近的一份报告就披露了 去年啊&#xff0c;22%的人在买了电车后后悔了&#xff0c; 这些人说了&a…