标签：浏览器 请求 标签 前端 HTML 服务端
前端（一）
什么是前端
# 前端通俗来说就是和用户打交道的界面
eg: 网页就是前端
# 不跟用户直接打交道的就是后端，后端是真正实现具体功能的东西，也就是一堆看不见的代码
如： Java，Python，C，C++，C#
为什么学前端
# 只学Python，是后端开发工程师，学了前端变成全栈开发工程师
# 虽然学，但要求不高，不需要精通，只是为了在公司中和前端工作人员更好灵活的沟通
前端学习的内容
1. HTML: 网页的框架，空有架子没有样子
2. CSS: 样式格式，
3. JavaScript: 网页的动态效果
前端框架：
jQuery bootstrap Vue（作者：尤雨溪） react angluar
软件开发架构
c/s架构 client------server
b/s架构 browser-----server
# 前端实际上就是bs架构。页面就在浏览器中显示，推荐使用谷歌浏览器(涉及到兼容性问题)因为兼容性好，前端最难解决的就是兼容性问题
在浏览器中输入一个网址，到返回浏览器，渲染成页面，这个过程发生了那些事情
"""
1. 浏览器向服务端发起请求
2. 服务端被动接收请求
3. 服务端开始处理，并且响应请求
4. 数据返回给浏览器，浏览器接收后开始渲染，展示给用户
"""
# 浏览器就是万能的客户端，所以，浏览器有了，相当于客户端有了，我们就可以通过socket写一个服务端
# 浏览器通过HTTP协议识别不同的服务端
HTTP协议
# 超文本传输协议，就是超链接加文本的意思，作用是规定了服务端和浏览器之间数据的交互
1. 四大特点
# 基于请求和响应----------->浏览器发起请求-------->服务端做出响应
# 基于TCP/IP协议之上的应用层协议
# 无状态
"""
早期的网站不需要登陆，如同新闻网，后面演变出了需要登陆的网站如京东淘宝等
能够记录用户信息的技术有：cookie、session、token...
"""
# 短链接
"""
客户端和服务端建立链接之后，客户端发送一些请求，服务端响应一次，然后断开
长链接：一旦建立链接，不会立马断开，中间有间隔
客服系统就是长链接
"""
2. 请求数据格式
# 请求首行(HTTP协议的版本号，请求方式)
# 请求头(一堆k:v键值对)
# \r\n(换行不能省略)
# 请求体
3. 响应数据格式
# 响应首行(HTTP协议的版本号，响应状态码)
# 响应头(一堆k:v键值对)
# \r\n(换行不能省略)
# 响应体
4. 响应状态码
# 通过一些串简单的数字代码描述一段复杂的文字信息
1XX:服务端接收到消息正在处理
2XX:代表请求成功(200 OK)
3XX:重定向(向直接进入到A页面，但是内部自动跳转了B页面)
4XX:
404：请求资源不存在
403：没有权限
5XX:500 服务器内部错误
5. 补充：请求方式
# get：从服务端获取数据
eg：在网址栏输入baidu.com
# 没有请求体数据直接跟在网址后面
https://www.baidu.com/s?k=v&k1=v1&k2=v2
https://www.baidu.com/s?wd=美女&ie=utf-8&
# post：想服务端提交数据
eg：在登陆网站的时候输入用户名和密码，并将其提交给服务端验证
HTML简介
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>神里绫华</title>
</head>
<body>
<h1>神里绫华</h1>
<a href="https://zh.moegirl.org.cn/%E7%A5%9E%E9%87%8C%E7%BB%AB%E5%8D%8E">
<img src="https://img.moegirl.org.cn/common/thumb/7/79/Genshin_ayaka_intro.jpg/1024px-Genshin_ayaka_intro.jpg">
</a>
</body>
</html>
"""
h1，a，img这些标签就是HTML
如果你想让你的浏览器识别你的网站，你就必须遵循HTML语法
HTML的标签名字不能改正，必须记忆， xml---->标签是自定义的
"""
创建HTML文件的方式
1. 在pycharm中新建HTML文件
# html文件的后缀名是：.html
pycharm创建html文件默认代码解释
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
HTML文档介绍
<head>
<meta charset="UTF-8"> # 指定字符编码的
<title>Title</title> # 打开后网页的名字
</head> # head标签内写的东西不是让用户看的
<body></body> # body标签内写的东西都是让用户看的，在body中写什么，浏览器中就能看到什么
打开html的方式
1. 打开文件所在的位置，使用浏览器打开
2. 在pycharm中打开
HTML如何使用
1. 注释
<!-- 这是注释--> # 快捷键 ctrl + ?
标签的分类
<h1></h1>
<a></a>
<img />
# 双标签
<h1></h1>
<a></a>
# 单标签
<img />
head标签内常用标签
<style>
/*style里面一般写CSS样式*/
h1 {
color: red;
}
</style>
<script>
// 写js代码
alert(123)
</script>
<link rel="stylesheet" href="../css.css"> #引入外部css文件
<script src="js.js"></script> # 引入外部js文件
# 当文件在上层目录中，则在前面加../
body中常用标签
常用标签
<h1>一级标题</h1> # 标题标签，h1最大，h6最小
<h2>二级标题</h2>
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>
标签的分类2
1. 块级标签
# 独自占一行
h1~h6 p div
2. 行内标签(内联标签)
# 自身文本有多大，就占多大
b i u s标签 span
特殊字符
<h1>空 格</h1>
<h2>大于></h2>
<b>小于<</b>
<i>与&</i>
<u>中文元¥</u>
<s>版权©注册®</s>
div标签和span标签
div
span
'''
标签嵌套：
块级标签可以嵌套所有的块级元素和行内元素，p标签也是块级元素，但是它不能嵌套块级标签，可以嵌套行内元素. 如果你就嵌套了，也没有问题，只不过是浏览器会自动把标签解开，不会轻易报错，是因为，它直接与用户打交道的，所以，就算有错，一般也不会报出来.
行内元素只能嵌套行内标签
'''
# 这两个标签一般在刚开始构建页面的时候用，主要用来占位置的.
# span占的是文本位置
'''这两个标签没有实际的意义'''
img标签
<img src="" alt="">
1. src
2. alt
# 这两个都叫标签的属性
src:
里面放图片的地址
1. 可以放外部的图片地址
2. 还可以放本地的地址
alt: # 如果图片加载不出来显示这个
title # 是对这个图片的解释
width="100px" height="500"
# 宽和高是等比例缩放的，px是像素，
a标签
# 超链接标签
<a href=""></a>
href:
写跳转地址
target:
target="_blank" # 新打开一个标签页跳转
title:
鼠标放上去显示的内容
标签：浏览器,
请求,
标签,
前端,
HTML,
服务端
From： https://www.cnblogs.com/juzixiong/p/17307394.html