Web前端开发：前端简介与HTML协议
前端
一、前端与后端的概念
1.前端的概念
任何直接与用户打交道的交互界面都可以称之为前端、前端界面、页面
2.后端的概念
不直接与用户打交道，主要负责内部真正的业务逻辑的执行，称之为后端
3.了解前端的目的
（1）简单了解前端的业务
（2）能编写简易的页面
（3）在前端方向更加深入学习
二、Web前端开发三大技术组成部分
Web前端开发三剑客就是HTML、CSS、JavaScript，通过三种技术的融合产生了各式各样的网站。
| 名称 | 作用 |
|---|---|
| HTML | 网页的骨架 |
| CSS | 网页的样式 |
| JavaScript | 网页的动态 |
1.HTML超文本标记语言
HTML是超文本标记语言，是一个网站页面的主要内容和主体框架。
主要用来实现静态页面，目前我们看到的文字、图片、动画、声音、表格、超链接等网页元素都是通过HTML实现的。
HTML是由各种标签组成的，所以学习HTML就是在了解HTML主体框架的结构基础上学习各种标签的使用方法。
2.CSS是层叠样式表
CSS是层叠样式表，主要用来控制调整网页的样式，它与网页的结构和内容没有关系，仅仅是通过不同语义的标签来调整网页内容的不同表现样式。
在网页上实现CSS样式调整一般有两种方式：
-
内嵌式
将CSS代码集中写到HTML文档的头部标签中，并用style标记定义，一般位于head标记中的title标记之后，简而言之就是直接在THML文件中直接添加CSS样式的方式；
-
嵌入式
是将所有的样式放在一个或多个以CSS为拓展名的外部样式表文件中，通过标记将外部样式表文件链接到HTML文件中，简而言之就是HTML文件域CSS文件单独存在，再通过Link的方式将CSS所写的样式添加到HTML中。
3.JavaScript网页脚本语言
JavaScript是一种完整的网页脚本语言，有自己独立的语法，可以完成复杂的程序逻辑，而HTML和CSS仅仅是标记语言，不具备编程语言的程序逻辑。
-
JavaScript的作用
JavaScript主要负责网页的各式各样的动态功能，因此可以为用户提供更流畅美观的页面浏览效果，以及添加页面交互行为，给用户更好的视觉和使用体验。
-
JavaScript的工作原理
JavaScript的工作原理是通过在HTML网页中直接嵌入JS脚本，可以实现相应浏览器时间，读写HTML元素内容，更改HTML元素样式等功能。
三、Web前端开发与HTTP协议
在软件开发架构中，Web前端开发在软件开发架构中属于C/S中的C客户端，大部分的网络通信协议底层都是基于sokect套接字实现的，使用的大部分是TCP协议，Web前端开发中使用的HTTP协议也是如此，因此缔造了特殊的C/S架构，B/S架构。
0.知识回顾socket套接字与TCP
HTTP协议位于应用层而TCP位于传输层，当消息传递到传输层时使用了socket这样一个中介，然后再基于TCP协议发送请求与获得响应。
socket是应用层 与 传输层 中间的软件抽象层，是一组接口。在设计模式中，Socket其实就是一个门面模式，它把复杂的TCP/IP协议族隐藏在Socket接口后面。
对用户来说，一组简单的接口就是全部，让Socket去组织数据，以符合指定的协议。
1.编写服务器
编写web前端的服务端
import socket
server = socket.socket()
server.bind(('127.0.0.1', 8090))
server.listen(5)
while True:
# 等待客户端连接 现在是由浏览器brower充当
conn, address = server.accept()
data = conn.recv(1024) # 会有黏包现象出现，回顾黏包处理
print(data)
conn.send(b'nihao!!')
2.浏览器充当客户端访问服务端
当在python中写一个服务端，打开浏览器输入服务端的地址，连接的时显示无响应，因为想要没有支持HTTP协议。
HTTP就是Hyper Text Transfer Protocol（超文本传输协议）是用于从（WWW：World Wide Web，简万维网 ）服务器传输超文本到本地浏览器的传送协议。
HTTP用来规定服务端和浏览器之间的数据交互的格式
3.编写符合HTTP协议的服务端
（1）HTTP传输的格式
HTTP/1.1 200 OK
Content-Type: text/html;charset=utf-8
k1:v1
k2:v2
k3:v3
Hello
Text 代表了固定的内容
html 代表文件
（2）符合HTTP协议的服务端
import socket
server = socket.socket()
server.bind(('127.0.0.1', 8080))
server.listen(5)
while True:
# 等待客户端连接 现在是由浏览器brower充当
conn, address = server.accept()
data = conn.recv(1024) # 会有黏包现象出现，回顾黏包处理
print(data)
conn.send(b'HTTP/1.1 200 OK\r\n\r\n') # http协议规定的格式
conn.send(b'hello!!') # 固定的真实数据
符合HTTP协议即可传输成功
4.HTTP协议是如何传递数据的
HTTP基于TCP/IP通信协议来传递数据
四、HTTP协议
1.四大特性
（1）基于请求响应
客户端发送消息：请求
服务端回应：响应
基于http协议，服务端不会主动发消息，客户端发送什么请求，服务端才会返回什么响应
（2）基于TCP、IP作用于应用层之上的协议
HTTP协议属于应用层
（3）无状态
服务端不会保存客户端的状态
（4）无、短连接
客户端与服务端之间不会保持连接
websocket协议可以保持客户端与服务端保持联系，并且可以让服务端给客户端发送消息
2.数据格式
（1）请求格式
- 请求首行（协议版本、协议方式）
- 请求头（一大堆
K:V键值对） - 换行
- 请求体（存放隐私敏感信息，并不是所有的请求方式都有请求体）
（2）响应格式
- 响应首行（状态码、协议版本）
- 响应头（一大堆
K:V键值对） - 换行
- 响应体（存放给浏览器展示的数据）
3.响应状态码
用数字来表达一些文字意义，效率更高，方便管理
响应状态码由3位数字组成，第一个数字定义了响应的类别，
| 类别 | 状态 | 描述 |
|---|---|---|
| 1XX | 信息 | 表示服务端已经接受到请求，客户端(请求者)可以继续发送或者等待 |
| 2XX | 成功 | 服务端发送了对应的响应（这个响应可能是客户端想要的或者不想要的，但是响应了） |
| 3XX | 重定向 | 需要进一步的操作以完成请求 |
| 4XX | 客户端错误 | 请求包含语法错误或无法完成请求 |
| 5XX | 服务端错误 | 服务器在处理请求的过程中发生了错误，服务端内部错误 |
- 1XX ：表示服务端已经接受到了你的请求，客户端可以继续发送或者等待
- 2XX：200 OK 表示请求成功，服务端发送了对应的响应（这个响应可能是客户端想要的或者不想要的，但是响应了）
- 3XX：302 临时重定向 ，304 永久重定向
重定向：想访问网页A，但是自动跳到了网页B
- 4XX：403访问权限不够 ，404请求资源不存在
- 5XX：服务端内部错误
在公司中，一般会自定义更多的响应状态码，通常以10000起步
聚合数据网站可以看到html的一些比较标准格式的html文件
五、HTML协议
1.简介
- HTML传输的数据类别
（1）直接发送的固定的数据
（2）转为发送文件里面的数据
（3）编写HTML出现特殊的现象
HTML超文本标记语言的特点：所见即所得（没有任何逻辑，写什么就是什么）
- 服务端
import socket
server = socket.socket()
server.bind(('127.0.0.1', 8080))
server.listen(5)
while True:
# 等待客户端连接 现在是由浏览器brower充当
conn, address = server.accept()
data = conn.recv(1024) # 会有黏包现象出现，回顾黏包处理
print(data)
conn.send(b'HTTP/1.1 200 OK\r\n\r\n') # http协议规定的格式
# conn.send(b'hello!!') # 固定的真实数据
# 可以写成文件
with open(r'a.txt','rb') as f:
conn.send(f.read())
- a.txt
<h1>hello world</h1>
<a href="https://www.4399.com/">hello world</a>
<img src="https://ddsg-1314792441.cos.ap-shanghai.myqcloud.ora/2022-11-30-015241.png" alt="image-20221130095240748" style="zoom:77%;" />
2.HTML概览
（1）注释语法
<!--注释的内容-->
（2）HTML文档结构
<html> 固定格式 html包裹
<head>主要放给浏览器交互的配置</head>
<body>主要给用户查看的内容</body>
</html>
- 例子
<!DOCTYPE html> <!--声明这是一个html文档-->
<html lang="en"> <!--声明语言 ，这样才能写中文-->
<head>
<meta charset="UTF-8">
<title>共享单车战士</title>
<style>
h1{
color: red;
}
</style>
</head>
<body>
<h1>周日打羽毛球</h1>
</body>
</html>
（3）HTML标签分类1
<>称为标签
1）单标签（自闭和 标签）
<img/>
2）双标签
<h1></h1>
3.HTML补充
（1）网页信息数据一般也会存放在文件中，以.html结尾
（2）pycharm支持前端所有类型的文件编写，内置有自动补全的功能，只需要专注于补全标签名的编写
（3）pycharm内有通过浏览器打开html文件的功能
六、head内容常见标签
1.title网页小标题
2.meta定义网页源信息(配置)
<meta name="keywords" content="查询关键字">
<meta name="description" content="网页简介">
3.style内部支持编写CSS代码
- 例：改变颜色
<style>
h1{
color: red;
}
</style>
4.link引入外部CSS文件
可以支持本地css文件，也可以连接外部css文件
- html文件内
<link rel="stylesheet" href="mycss.css">
- mycss.css
h1 {
color: cornflowerblue;
}
这样可以通过外部链接css文件，来为html文件中的内容更改样式
5.script
可以支持内部编写js代码，也可以引入外部js文件
-
prompt
制作动态弹窗
<script>
prompt('今天好冷','注意添加衣服')
</script>
- script
js有自己独特的语法
console.log('hello world')
alert('冬天总会过去')
七、body内基本标签
1.标题内基本标签h1至h6
<body>
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
</body>
2.段落标签
| 标签 | 作用 |
|---|---|
<p> |
包裹段落内容 |
<body>
<p>三体</p>
<p>三体</p>
<p>三体</p>
<p>三体</p>
<p>三体</p>
</body>
3.其他标签
| 标签 | 内容 |
|---|---|
<u>下划线</u> |
下划线 |
<i>斜体</i> |
斜体 |
<s>删除线</s> |
删除线 |
<b>加粗</b> |
加粗 |
<body>
<u>下划线</u>
<i>斜体</i>
<s>删除线</s>
<b>加粗</b>
</body>
相同的效果可能是不同的标签来实现的，标签不是固定的
4.换行与分割线
| 标签 | 内容 |
|---|---|
<br> |
换行 |
<hr> |
分割线 |
<br>
<p>三体</p>
<p>三体</p>
<hr>
<p>三体</p>
<p>三体</p>
5.HTML标签分类2
（1）行内标签
内部文本多大，就占多大
u i s b
（2）块级标签
一个文本占一行，没有内容不占行，有内容则独占一行
h系列、 p
七、常见符号
| 代码 | 对应内容 |
|---|---|
|
空格 |
> |
> |
< |
< |
& |
& |
¥ |
¥ |
© |
版权 |
® |
注册 |
Non-breaking Space-nbsp
八、页面body内布局标签
div
块级标签
span
行内标签
标签之间可以相互嵌套，并且理论上可以无限嵌套 nested
块级标签内部可以嵌套块级标签和行内标签
行内标签内部只能嵌套行内标签
p标签虽然是块级标签，但是它的内部也不能嵌套块级标签
九、body内常用标签
标签括号内填写的 XXX=XXX是标签的属性
- 属性的类型
（1）默认属性：标签自带
（2）自定义属性：用户自定义，编写不会有提示甚至会飘颜色
a标签 链接标签
1.href=""
（1）填写网址 有跳转功能
（2）填写页面内id值 具备锚点功能
2.target
默认是_self原网页跳转
-blank新建网页跳转
img标签
1.src=""
（1）图片地址（本地地址/网页地址）
（2）填写路由
2.title
鼠标悬浮图片上，显示title数据
3.alt
图片加载失败
4.width与height
图片的尺寸 两者调整一个即可 等比例缩放
十、body内其他标签
1.无序列表
ul 套 li
页面上所有的规则排列的横向或者竖向的
<body>
<ul>
<li>上午</li>
<li>中午</li>
<li>下午</li>
</ul>
</body>
2.有序列表
ol 套 li
<body>
<ol type="A">
<li>111</li>
<li>222</li>
<li>333</li>
</ol>
</body>
3.标题列表
d1 套 dt-大标题 套 dd-小标题
<dl>
<dt>大标题</dt>
<dd>小标题1</dd>
<dd>小标题2</dd>
</dl>
4.表格标签
<table border="4">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>jason</td>
<td>18</td>
<tr>
</tbody>
</table>
5.表单标签
可以获取用户的数据，并发送给服务端
1.表单标签简介
<body>
<h2>用户注册页面</h2>
<form action=""><!--action 中填写服务端地址(网址 或者 127.0.0.1:8080)-->
<!--<label for="用户名"></label>-->
<!--input需要和label一起使用-->
<p>用户名：
<input type="text" name="username">
</p>
<p>密 码：
<input type="password">
</p>
<p>生 日：
<input type="date">
</p>
<p>邮 箱：
<input type="email">
</p>
<p>性 别：
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
<input type="radio" name="gender" value="other">其他
</p>
<p>爱 好：
<input type="checkbox">唱歌
<input type="checkbox">跳舞
<input type="checkbox">喝水
<input type="checkbox">吃饭
</p>
<p>文 件：
<input type="file">
</p>
<p>多文件：
<input type="file" multiple>
</p>
<p>省 份：
<select name="" id="">
<option value="">北京</option>
<option value="">广州</option>
<option value="">上海</option>
</select>
</p>
<p>pre_GF：
<select name="" id="" multiple="multiple">
<option value="">北京</option>
<option value="">广州</option>
<option value="">上海</option>
</select>
</p>
<p>大段文本：
<textarea name="" id="" cols="30" rows="10">
</textarea>
</p>
<p>
<input type="submit" value="注册">
<input type="reset" value="刷新重置">
<input type="button" value="自定义按钮">
</p>
</form>
</body>
</html>
input标签应该有name属性
这样，在接受数据的时候，name属性相当于字典的键，input标签获得到用户数据相当于字典的值。
这样点击发送就会组织成字典的形式发送给服务端，这样的数据在传递给后端的时候才有明确的意义，便于对数据的进一步处理
2.基于form表单发送数据
（1）用于获取用户数据的标签应含有name属性，name属性相当于字典的键
--如
<p>用户名：
<input type="text" name="username">
</p>
用户输入的的数据会保存到标签的value属性中，value相当于字典的值
（2）如果用户仅需要选择，不需要填写数据，那么我们需要自己先在选择的标签中填写value值
如果标签中没有name属性，form表单会直接忽略，不会发送
<input type="radio" name="gender" value="male">男
当用户选择性别后会保存
"gender" : "male"
（3）input标签理论上应该搭配label标签使用，但是也可以不写
如：b站的投诉表单中
- input标签放在 label标签内使用
<label for="d1">用户名：
<input type="text" id="d1" placeholder="请输入用户名" maxlength="30" name="username">
</label>
- input标签紧贴着label标签使用
<label for="d1">用户名：</label>
<input type="text" id="d1" placeholder="请输入用户名" maxlength="30" name="username">
（4）标签的属性如果和值相等，可以不写值
<input type="file" multiple="multiple">
等价于
<input type="file" multiple>
（5）针对选择类型的标签可以提前设置默认选项
input中checked="checked"
例：默认性别为女
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female" checked>女
<input type="radio" name="gender" value="other">其他
option中select
例：默认多选中选择上广州
<select name="" id="" multiple>
<option value="">北京</option>
<option value="" selected>广州</option>
<option value="">上海</option>
</select>
（6）一些选择性的标签可以用multiple属性从单选改为复选
- 下拉框复选
<select name="" id="" multiple>
<option value="">北京</option>
<option value="" selected>广州</option>
<option value="">上海</option>
</select>
- 文件上传可以复选
<input type="file" multiple name="file">
