form表单,写政府网页

一.form表单

1.提交方式:post
格式: 协议名://目标ip:端口/请求资源路径?参数=值;参数=值;
2.端口范围:1-65535
常见协议的端口号:
ssh——-22
http——22
https——443
smb——–445
3.全球共有13台dns根服务器
图片.png
4.pc机与设备进行交互优先级向下递减
5.post提交方式原理图
图片.png

6.下图两个name=gender一样运行出来就是单选框,不一样是多选框
单选
Image.png

Image.png

​ 多选
Image.png

Image.png

7.Bootstrap5框架:Bootstrap是一个流行的开源CSS框架,它提供了一套用于构建响应式、移动设备优先的网页界面的工具和样式。Bootstrap 5是Bootstrap框架的最新版本,它在前几个版本的基础上进行了重大改进和更新。
8.web开发分为前端和后端,前端为html+css,后端主要为java,c#,node,go

图片.png

二.写政府网页

1.打开vscode,新建一个1.html文件
2.仿照湖南政府网页http://www.hunan.gov.cn/,编写代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>省政府</title>
<link rel="stylesheet" href="style.css">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
}

header {
background-color: #003366;
color: #fff;
padding: 20px;
background-image: url(../img/x1.png);
background-repeat: no-repeat;
background-position: center;
text-align: center;
height: 250px;


}

nav ul {
list-style: none;
margin: 0;
padding: 0;
}

nav li {
display: inline-block;
margin-right: 20px;
}

nav a {
color: #fff;
text-decoration: none;
}

main {
max-width: 960px;
margin: 0 auto;
padding: 20px;
}

#box1 {
margin-bottom: 30px;
background-image: url(../img/x2.jpg);
background-repeat: no-repeat;
height: 400px;
position: relative;
}
#bottom {
position: absolute;
bottom: 0;
margin: 0;
}

h2 {
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
}

ul {
list-style: none;
margin: 0;
padding: 0;
}

li {
margin-bottom: 10px;
}

a img {
display: block;
max-width: 100%;
height: auto;
margin-bottom: 5px;
}

footer {
background-color: #003366;
color: #fff;
text-align: center;
padding: 10px;
}

</style>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">省政府</a></li>
<li><a href="#">政务要闻</a></li>
<li><a href="#">政务公开</a></li>
<li><a href="#">一件事一次办</a></li>
<li><a href="#">互动交流</a></li>
<li><a href="#">政府数据</a></li>
<li><a href="#">锦绣潇湘</a></li>
</ul>
</nav>
</header>

<main>
<div id="box1">
<strong><a href="#" id="bottom">习近平:中欧有责任共同为世界提供更多稳定性 为发展提供更多推动力</a></strong>

</div>

<div id="box2">
<h2>政策法规</h2>
<ul>
<li><img src="../img/x3.jpg" alt=""></li>
<li><img src="../img/x4.jpg" alt=""></li>
<li><img src="../img/x5.jpg" alt="图片"><img src="../img/x3.jpg" alt=""><img src="../img/x4.jpg" alt=""></li>
</ul>
</div>

<section>
<h2>服务指南</h2>
<ul>
<li><a href="#">服务1</a></li>
<li><a href="#">服务2</a></li>
<li><a href="#">服务3</a></li>
</ul>
</section>
</main>

<footer>
<p>版权所有 © 湖南省政府</p>
</footer>
</body>
</html>

图片.png

Contents
  1. 1. 一.form表单
  2. 2.
  3. 3. 二.写政府网页
|