网安第一次作业

最新推荐文章于 2024-06-13 02:48:16 发布

倚琦玉

最新推荐文章于 2024-06-13 02:48:16 发布

阅读量662

点赞数

文章标签：前端后端

本文链接：https://blog.csdn.net/m0_56617933/article/details/132093833

版权

1、理解并总结上课内容

（1）HTML常用标签

字体标签，用于展示效果中修饰文字样式

<font 属性名=”属性值”>文字

size:控制字体大小.最小1 ~ 最大7。如果设置范围不在1~7之间，设置无效

color：控制字体颜色. 使用英文设置（例如：red,blue…）

face：控制字体类型。只能设置系统字库中存在的字体类型

示例：

<body>

东边日出<font color="green" size="50" face="宋体">西边雨</font>

</body>

效果：

HTML源码中换行，浏览器解析时会自动忽略。

换行标签，用于展示效果中换行

示例：

竹枝词二首·其一<br/>

刘禹锡<br/><br/>

杨柳青青江水平，闻郎江上踏歌声。<br/>

东边日出西边雨，道是无晴却有晴。

效果：

段落标签，用于展示效果中划分段落。并且自动在段前和段后自动加空白行

align:段落内容的对齐方式

默认是left，内容居左

Right 右

Center 居中

示例：

<p align="center">黄鹤楼送孟浩然之广陵</p>

<p >故人西辞黄鹤楼，</p><p align="right">烟花三月下扬州。</p>                

<p>孤帆远影碧空尽，</p><p align="right">唯见长江天际流。</p>

效果：

标题标签，用于展示效果中划分标题

其中

最大，

最小

示例：

<h1>念奴娇·赤壁怀古</h1>

<h2>念奴娇·赤壁怀古</h2>

<h3>念奴娇·赤壁怀古</h3>

<h4>念奴娇·赤壁怀古</h4>

<h5>念奴娇·赤壁怀古</h5>

<h6>念奴娇·赤壁怀古</h6>

效果：

HTML源码中的多个空格，效果中最终会合并成一个。

空格符号，用于展示效果中显示一个空白的位置

示例：

php   中文网</br>
php  中文网

HTML注释

用于注释HTML源码，不在HTML效果中展示。

只能在源码中看到，页面展示效果中是没有

格式：

示例：

<!--html标签-->

效果：在HTML效果展示中不会显示，只能在源码中看到

图片标签

用于在页面效果中展示一张图片。

src：指明图片的路径。（必有属性）

图片路径的写法：

①内网路径：

绝对路径：文件在硬盘上的具体位置。【不建议使用】

例如：C:\ JavaWeb001_html\img\c_1.jpg

相对路径：从引入者所在目录出发。【建议使用相对路径】

例如：…/img/c_1.jpg

…/表示上一层目录

./表示当前目录

互联网路径：

必须前面加上http://

例如：http://www.baidu.com/xxx.jpg

width：图片宽度

height：图片的高度

宽度和高度的设置：

默认单位是px，像素。例如：width=”400” 其实设置的是 width=”400px”。固定设置方式

百分比设置。例如：width=”50%”。是父标签的百分比。动态改变的。

示例：

<img src="../c_1.jpg" width="600" height="600"/>

<img src="../c_2.jpg" width="60%"/>

列表标签

无序列表标签，用于在效果中定义一个无序列表

列表条目项标签，用于在效果中定义一个列表的条目

有序列表标签，用于在效果中定义一个有序列表

示例：

<ul>

        <li>古诗</li>

        <li>古词</li>

        <li>诗歌</li>

</ul>

效果：

示例：

<ol>

        <li>古诗</li>

        <li>古词</li>

        <li>诗歌</li>

</ol>

效果：

超链接标签

超链接标签，用于在效果中定义一个可以点击跳转的链接

href：超链接跳转的路径 (必有属性)

内网本机路径：相对路径和绝对路径

互联网路径：http://地址

本页：默认跳转到本页

超链接正常工作：①a标签中必须有内容

②a标签必须有href属性

示例：

<a herf="http://www.baidu.com/">百度</a>

<a herf="demo html">demo</a>

注意：

①a标签内容体，不仅仅是文字，也可以是其他内容，例如图片

②a标签的href属性，不仅仅可以链接到html上，也可以链接到其他文件上，例如图片

示例：

<a herf="demo html">

<img src="../img/c_1.jpg" />

</a>

示例：

<a herf="../img/c_1.jpg" />链接到一张图片</a>

表格标签

表格标签，用于在效果中定义一个表格

border：设置表格的边框粗细

width：设置表格的宽度

表格的行标签，用于在效果中定义一个表格行

表格的单元格标签，用于在效果中定义一个表格行中的单元格

表格的书写顺序：

步骤1：定义一个表格

步骤2：定义表格中的一行

步骤3：在表格一行中定义单元格内容就可以写在单元格中

示例：

<table>

<tr>

<td>姓名</td>

<td>数学</td>

</tr>

<tr>

<td>A</td>

<td>100</td>

</tr>

</table>

效果：

表格的表头单元格标签，用于在效果中定义一个表格行中的表头单元格

和唯一区别：内容居中加粗

示例：

<table boder="1px" width="100%">

<tr>

<th>姓名</th>

<th>数学</th>

</tr>

<tr>

<td>A</td>

<td>100</td>

</tr>

</table>

效果：

单元格合并

或者都有两个单元格合并属性：

colspan：跨列合并单元格

rowspan：跨行合并单元格

合并步骤：

确定合并哪几个单元格，确定是跨列合并还是跨行合并

在第一个出现的单元格上书写合并单元格属性

合并几个单元格，属性值就书写几

被合并的单元格必须删掉

示例：

<tr>

<td conspan="2">1</td>

<td>3</td>

<td>4</td>

</tr>

示例：

<tr><td rowspan="2">6</td>

<td>7</td>

<td>8</td>

</tr>

<tr>

<td>12</td>

<td>15</td>

</tr>

示例：

<tr>

<td conspan="2" rowspan="2">8</td>

<td>11</td>

</tr>

<tr>

<td>16</td>

</tr>

块标签

行级的块标签，用于在效果中一行上定义一个块，进行内容显示。

span有多少内容，就会占用多大空间。

Span不会自动换行

适用于少量数据展示

示例：

<span>哈哈哈哈哈</span>

<span>呵呵呵呵呵</span>

效果：

块级的块标签，用于在效果中定义一块，默认占满一行，进行内容的显示

默认占满一行

会自动换行

适用于大量数据展示

示例：

<div>哈哈哈哈哈</div>

<div>呵呵呵呵呵</div>

框架标签

框架标签：

标签，是多个窗口页面整合在一起的一个集合（框架集）。每一个页面（框架）都是单独文档，需要使用子标签来确定页面的位置。通过列和行来确定整体布局，使用cols确定列数，使用rows确定行数。多个可以嵌套使用。和两个不能共存。

rows属性和cols属性取值：值1,值2,值3,…… 一个值表示一行（列），多值使用逗号分隔，值可以是 10px、10% 等，最后一个值如果不想计算可以使用*匹配剩余量。

框架子标签：

标签，用于设置框架集中的一个页面（框架）。

src属性：确定页面的路径

noresize属性：框架分隔先不能移动

target属性：确定需要显示的页面在何处显示

表单：

HTML 表单用于收集用户输入。

元素定义 HTML 表单：

元素

元素是最重要的表单元素。

元素有很多形态，根据不同的 type 属性。

Username:
Password:

（2）URL编码

url编码是一种浏览器用来打包表单输入的格式。浏览器从表单中获取所有的name和其中的值，将它们以name/value参数编码（移去那些不能传送的字符，将数据排行等等）作为URL的一部分或者分离地发给服务器。

这里给出一些常用url编码的值

space	%20	%20
!	%21	%21
"	%22	%22
#	%23	%23
$	%24	%24
%	%25	%25
&	%26	%26
’	%27	%27
(	%28	%28
)	%29	%29
*	%2A	%2A
+	%2B	%2B
,	%2C	%2C
-	%2D	%2D
.	%2E	%2E
/	%2F	%2F
0	%30	%30
1	%31	%31
2	%32	%32
3	%33	%33
4	%34	%34
5	%35	%35
6	%36	%36
7	%37	%37
8	%38	%38
9	%39	%39
:	%3A	%3A
;	%3B	%3B
<	%3C	%3C
=	%3D	%3D
>	%3E	%3E
?	%3F	%3F
@	%40	%40
A	%41	%41
B	%42	%42
C	%43	%43
D	%44	%44
E	%45	%45
F	%46	%46
G	%47	%47
H	%48	%48
I	%49	%49
J	%4A	%4A
K	%4B	%4B
L	%4C	%4C
M	%4D	%4D
N	%4E	%4E
O	%4F	%4F
P	%50	%50
Q	%51	%51
R	%52	%52
S	%53	%53
T	%54	%54
U	%55	%55
V	%56	%56
W	%57	%57
X	%58	%58
Y	%59	%59
Z	%5A	%5A
[	%5B	%5B
\	%5C	%5C
]	%5D	%5D
^	%5E	%5E
_	%5F	%5F
`	%60	%60
a	%61	%61
b	%62	%62
c	%63	%63
d	%64	%64
e	%65	%65
f	%66	%66
g	%67	%67
h	%68	%68
i	%69	%69
j	%6A	%6A
k	%6B	%6B
l	%6C	%6C
m	%6D	%6D
n	%6E	%6E
o	%6F	%6F
p	%70	%70
q	%71	%71
r	%72	%72
s	%73	%73
t	%74	%74
u	%75	%75
v	%76	%76
w	%77	%77
x	%78	%78
y	%79	%79
z	%7A	%7A
{	%7B	%7B
\|	%7C	%7C
}	%7D	%7D
~	%7E	%7E
	%7F	%7F

防止sql注入

URL编码平时是用不到的，因为IE会自动将输入到地址栏的非数字字母转换为url编码。曾有人提出数据库名字里带上“#”以防止被下载，因为IE遇到#就会忽略后面的字母。破解方法很简单——用url编码%23替换掉#等等。

2、尝试编写form表单到后端

前端代码index.html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="./login.php" method="post">
        <label for="">username</label><input type="text" name="username" id="1">
        <label for="">password</label><input type="password" name="password" id="2">
        <input type="submit" value="submit">
    </form>
</body>
</html>

（1）php代码编写后端login.php

前端代码index.html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="./login.php" method="post">
        <label for="">username</label><input type="text" name="username" id="1">
        <label for="">password</label><input type="password" name="password" id="2">
        <input type="submit" value="submit">
    </form>
</body>
</html>

后端php代码

<?php
$username = $_POST['username'];
$password = $_POST['password'];
echo $username . '+' . $password;

测试结果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EBeOEWnL-1691073622281)(C:\Users\admin\AppData\Roaming\Typora\typora-user-images\image-20230803183958163.png)]

（2）利用node.js写后端提交

前端代码

   <form action="http://localhost:3000/login" method="post">
        <label for="">username</label><input type="text" name="username" id="1">
        <label for="">password</label><input type="password" name="password" id="2">
        <input type="submit" value="submit">
    </form><br>

先配置后node.js所需插件，随后编写后端代码

const express = require('express');
const bodyParse = require('body-parser');
const app = express();
const port = 3000;

app.use(bodyParse.urlencoded({extended:true}));

//处理post数据
app.post('/login',(req,res)=>
{
    const {username,password}=req.body;
    console.log('username:',username);
    console.log('password',password);
    res.send('login sucess');
}
);
app.listen(port,()=>{console.log(`server is running on http://localhost:${port}`)});

启动该js程序，当前端form表单提交请求时，该程序接收到提交的信息

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0TPN6ZRR-1691073622282)(C:\Users\admin\AppData\Roaming\Typora\typora-user-images\image-20230803193929929.png)]

查看3000端口是否部署成功

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1qvVqFVk-1691073622282)(C:\Users\admin\AppData\Roaming\Typora\typora-user-images\image-20230803193952668.png)]

测试

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1OpkLGKF-1691073622282)(C:\Users\admin\AppData\Roaming\Typora\typora-user-images\image-20230803194034954.png)]

（3）利用python的flask写后端

前端代码

python后端代码

from flask import Flask, request

app = Flask(__name__)
#装饰器
@app.route('/login', methods={'GET','POST'})
def login():
    username = request.form.get('username')
    password = request.form.get('password')
    print('username', username)
    print('password', password)
    return 'login successful!!!!'

if __name__ == '__main__':
    app.run(debug=True)

将服务运行起来，当前端表单提交时，后台也显示相应数据

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Yn3IdIiu-1691073622283)(C:\Users\admin\AppData\Roaming\Typora\typora-user-images\image-20230803202440533.png)]

（4）jsp+servlet的方式写后端处理

        //获取form表单提交post数据
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        System.out.println("Username："+ username);
        System.out.println("Password："+ password);

        response.setContentType("text/html;charset=UTF-8");
        response.getWriter().println("Login success!!!!!");

ethods={‘GET’,‘POST’})
def login():
username = request.form.get(‘username’)
password = request.form.get(‘password’)
print(‘username’, username)
print(‘password’, password)
return ‘login successful!!!’

if name == ‘main’:
app.run(debug=True)


将服务运行起来，当前端表单提交时，后台也显示相应数据



[外链图片转存中...(img-Yn3IdIiu-1691073622283)]



### （4）jsp+servlet的方式写后端处理

```java
        //获取form表单提交post数据
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        System.out.println("Username："+ username);
        System.out.println("Password："+ password);

        response.setContentType("text/html;charset=UTF-8");
        response.getWriter().println("Login success!!!!!");

倚琦玉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网安第一次作业

字体标签，用于展示效果中修饰文字样式<font 属性名=”属性值”>文字size:控制字体大小.最小1 ~ 最大7。如果设置范围不在1~7之间，设置无效color：控制字体颜色. 使用英文设置（例如：red,blue…）face：控制字体类型。只能设置系统字库中存在的字体类型</</HTML源码中换行，浏览器解析时会自动忽略。换行标签，用于展示效果中换行段落标签，用于展示效果中划分段落。并且自动在段前和段后自动加空白行align:段落内容的对齐方式默认是left，内容居左Right 右。
复制链接

扫一扫

space	%20	%20
!	%21	%21
"	%22	%22
#	%23	%23
$	%24	%24
%	%25	%25
&	%26	%26
’	%27	%27
(	%28	%28
)	%29	%29
*	%2A	%2A
+	%2B	%2B
,	%2C	%2C
-	%2D	%2D
.	%2E	%2E
/	%2F	%2F
0	%30	%30
1	%31	%31
2	%32	%32
3	%33	%33
4	%34	%34
5	%35	%35
6	%36	%36
7	%37	%37
8	%38	%38
9	%39	%39
:	%3A	%3A
;	%3B	%3B
<	%3C	%3C
=	%3D	%3D
>	%3E	%3E
?	%3F	%3F
@	%40	%40
A	%41	%41
B	%42	%42
C	%43	%43
D	%44	%44
E	%45	%45
F	%46	%46
G	%47	%47
H	%48	%48
I	%49	%49
J	%4A	%4A
K	%4B	%4B
L	%4C	%4C
M	%4D	%4D
N	%4E	%4E
O	%4F	%4F
P	%50	%50
Q	%51	%51
R	%52	%52
S	%53	%53
T	%54	%54
U	%55	%55
V	%56	%56
W	%57	%57
X	%58	%58
Y	%59	%59
Z	%5A	%5A
[	%5B	%5B
\	%5C	%5C
]	%5D	%5D
^	%5E	%5E
_	%5F	%5F
`	%60	%60
a	%61	%61
b	%62	%62
c	%63	%63
d	%64	%64
e	%65	%65
f	%66	%66
g	%67	%67
h	%68	%68
i	%69	%69
j	%6A	%6A
k	%6B	%6B
l	%6C	%6C
m	%6D	%6D
n	%6E	%6E
o	%6F	%6F
p	%70	%70
q	%71	%71
r	%72	%72
s	%73	%73
t	%74	%74
u	%75	%75
v	%76	%76
w	%77	%77
x	%78	%78
y	%79	%79
z	%7A	%7A
{	%7B	%7B
\|	%7C	%7C
}	%7D	%7D
~	%7E	%7E
	%7F	%7F

space	%20	%20
!	%21	%21
"	%22	%22
#	%23	%23
$	%24	%24
%	%25	%25
&	%26	%26
’	%27	%27
(	%28	%28
)	%29	%29
*	%2A	%2A
+	%2B	%2B
,	%2C	%2C
-	%2D	%2D
.	%2E	%2E
/	%2F	%2F
0	%30	%30
1	%31	%31
2	%32	%32
3	%33	%33
4	%34	%34
5	%35	%35
6	%36	%36
7	%37	%37
8	%38	%38
9	%39	%39
:	%3A	%3A
;	%3B	%3B
<	%3C	%3C
=	%3D	%3D
>	%3E	%3E
?	%3F	%3F
@	%40	%40
A	%41	%41
B	%42	%42
C	%43	%43
D	%44	%44
E	%45	%45
F	%46	%46
G	%47	%47
H	%48	%48
I	%49	%49
J	%4A	%4A
K	%4B	%4B
L	%4C	%4C
M	%4D	%4D
N	%4E	%4E
O	%4F	%4F
P	%50	%50
Q	%51	%51
R	%52	%52
S	%53	%53
T	%54	%54
U	%55	%55
V	%56	%56
W	%57	%57
X	%58	%58
Y	%59	%59
Z	%5A	%5A
[	%5B	%5B
\	%5C	%5C
]	%5D	%5D
^	%5E	%5E
_	%5F	%5F
`	%60	%60
a	%61	%61
b	%62	%62
c	%63	%63
d	%64	%64
e	%65	%65
f	%66	%66
g	%67	%67
h	%68	%68
i	%69	%69
j	%6A	%6A
k	%6B	%6B
l	%6C	%6C
m	%6D	%6D
n	%6E	%6E
o	%6F	%6F
p	%70	%70
q	%71	%71
r	%72	%72
s	%73	%73
t	%74	%74
u	%75	%75
v	%76	%76
w	%77	%77
x	%78	%78
y	%79	%79
z	%7A	%7A
{	%7B	%7B
\|	%7C	%7C
}	%7D	%7D
~	%7E	%7E
	%7F	%7F

网安第一次作业

1、理解并总结上课内容

（1）HTML常用标签

最大，

最小

元素

（2）URL编码

防止sql注入

2、尝试编写form表单到后端

（1）php代码编写后端login.php

（2）利用node.js写后端提交

（3）利用python的flask写后端

（4）jsp+servlet的方式写后端处理

“相关推荐”对你有帮助么？

space	%20	%20
!	%21	%21
"	%22	%22
#	%23	%23
$	%24	%24
%	%25	%25
&	%26	%26
’	%27	%27
(	%28	%28
)	%29	%29
*	%2A	%2A
+	%2B	%2B
,	%2C	%2C
-	%2D	%2D
.	%2E	%2E
/	%2F	%2F
0	%30	%30
1	%31	%31
2	%32	%32
3	%33	%33
4	%34	%34
5	%35	%35
6	%36	%36
7	%37	%37
8	%38	%38
9	%39	%39
:	%3A	%3A
;	%3B	%3B
<	%3C	%3C
=	%3D	%3D
>	%3E	%3E
?	%3F	%3F
@	%40	%40
A	%41	%41
B	%42	%42
C	%43	%43
D	%44	%44
E	%45	%45
F	%46	%46
G	%47	%47
H	%48	%48
I	%49	%49
J	%4A	%4A
K	%4B	%4B
L	%4C	%4C
M	%4D	%4D
N	%4E	%4E
O	%4F	%4F
P	%50	%50
Q	%51	%51
R	%52	%52
S	%53	%53
T	%54	%54
U	%55	%55
V	%56	%56
W	%57	%57
X	%58	%58
Y	%59	%59
Z	%5A	%5A
[	%5B	%5B
\	%5C	%5C
]	%5D	%5D
^	%5E	%5E
_	%5F	%5F
`	%60	%60
a	%61	%61
b	%62	%62
c	%63	%63
d	%64	%64
e	%65	%65
f	%66	%66
g	%67	%67
h	%68	%68
i	%69	%69
j	%6A	%6A
k	%6B	%6B
l	%6C	%6C
m	%6D	%6D
n	%6E	%6E
o	%6F	%6F
p	%70	%70
q	%71	%71
r	%72	%72
s	%73	%73
t	%74	%74
u	%75	%75
v	%76	%76
w	%77	%77
x	%78	%78
y	%79	%79
z	%7A	%7A
{	%7B	%7B
\|	%7C	%7C
}	%7D	%7D
~	%7E	%7E
	%7F	%7F