目录
前端必备知识
软件开发架构
- C/S
- B/S
- B/S本质也是C/S
电脑端:
- 使用浏览器较多, 更多使用B/S架构
手机端:
- 看似客户端软件居多, 但实际像支付宝, 微信软多个小程序件都会内嵌多个小程序
- 目的: 统一接口, 用户下载一个软件后能满足大部分功能需求, 可以增加用户流量
- 所以手机端正在逐渐向B/S架构方向发展
互联网特点
- 需要快速开发上线占有第一手市场, 后期再改进项目
- python优势: 开发速度快, 例如博彩相关网站开发用python较多, 被封损失也不多
web服务的本质---请求, 响应
浏览器输入网址:
- 域名解析-->IP + 端口, 朝着指定服务器地址发送请求
- 服务端接收请求并处理
- 服务端返回相应的响应
- 浏览器接收并渲染出好看的页面给用户看
请求方式
- get请求: 朝服务器要资源, 例如输入www.baidu.com
- post: 朝服务器提交数据, 例如登录功能
服务端
- 要有固定的IP和PORT
- 24小时不间断提供服务
- 能够支持并发(看上去同时运行), 并发包含并行, 服务器端口建议绑定8000之后
HTTP协议
sql语句的作用: 规定不同的客户端与mysql进行交互必须使用统一的语句
HTTP协议---超文本传输协议
- 规定了服务端与客户端传输数据传输的协议, 如果不遵循协议, B/S架构下数据无法正常传输,
- 也可以在C/S架构下开发独立的服务端与客户端, 让用户使用时下载客户端
四大特性---(重要)
- 基于TCP/IP作用于应用层之上的协议
- 基于请求响应: 一次请求对应一次响应
- 无状态: 不保存客户端状态, 无论来多少次, 都当你如初见
- 保存用户状态: cookie, session
- 无连接: 只在发送一次请求与响应一次请求时存在连接, 不同于TCP协议的藕断丝连状态
- 长连接: websocket, 聊天室(钉钉, ...)
数据格式
-
请求格式---一次性发送但是分为三部分
- 请求首行 (请求方式, 协议版本)
- 请求头 (一大堆 k : v 键值对) , 存放一些想让服务端提前知道的信息, 类似于TCP协议中的报头
- 请求体 (敏感信息, 如: 身份证号, 密码等)
-
响应格式---一次性发送但是分为三部分
- 响应首行 (响应方式, 协议版本)
- 响应头 (一大堆 k : v 键值对) , 存放一些想让客户端提前知道的信息, 类似于TCP协议中的报头
- 响应体 (给用户卡的的数据)
-
响应状态
用数字来表示一串文字需要表达的意思,
- 1xx: 服务端已经成功接收到了请求, 正在处理, 你可以继续提交其他数据
- 2xx: 服务端成功响应了相应的数据(例如: 200)
- 3xx: 重定向, 访问一个页面时跳转到另一个页面
- 4xx: (404: 请求资源不存在), (403: 你当前不符合某一些条件, 无法正常访问)
- 5xx: 服务器内部错误(500)
HTML简介
HTML---超文本标记语言
文件的后缀名
- 文件的后缀名是给人看的, 对于计算机来说, 全都是二进制,
- 对于不同的后缀名有不同的功能, 是程序员自己人为定制的,
- 在text中也可以写python代码和html语句, 但是比较麻烦
注释是代码之母
-
HTML的注释:
<!--单行注释--> <!-- 多行注释1 多行注释2 --> -
通常会利用注释来划分区域
<!--导航条开始--> <!--导航条前端代码--> <!--导航条结束-->
HTML的文档结构
<html>
<head></head> <!--给浏览器看的-->
<body></body> <!--界面上人能看到的所有内容对应的代码-->
</html>
head内常用标签
标签的分类1
- 双标签 (h1, a)
- 自闭合标签 (img)
head内常用标签
-
ctrl + /: 注释
-
标签关键字 + tab: 插件语法, 自动补全
-
title: 定义网页标题
-
style: 内部支持写css代码
<!--...--> <title>我的第一次</title> <style> body { color: red; } </style> <!--...--> -
link: 引入外部css样式文件
-
script: 内部可以直接写js代码, 也可以引用外部js文件
<!--link标签引用外部css样式文件--> <link rel="stylesheet" href="我的第一个CSS文件.css"> <!--方式一: 直接在script标签内写代码--> <script> alert('网址有风险') </script> <!--方式二: 引用外的js文件--> <script src="我的第一个js文件.js"></script> -
meta: 定义网页源信息
<!--定义网页源能被搜索到的关键字--> <meta name = "keywords" content = "虹桥第一帅"> <!--定义网页源被搜索到后展示的摘要描述信息--> <meta name = "description" content = "上海的一个帅出天际的人">
body内常用标签
浏览器上所能看到的花里胡哨的页面, 背后都是HTML代码而已
- h1~h6: 标题标签
- p: 段落标签
- s: 删除线
- b: 加粗
- u: 下划线
- i: 斜体
- br: 换行
- hr: 一条水平分割线
<s>what the fuck!</s>
<u>what the fuck!</u>
<i>what the fuck!</i>
<b>what the fuck!</b>
<p>
what the fuck! 空格 空格
</p>
<br>
<hr>
body内特殊符号
<!--" ", 空格-->
& <!--"&", 与-->
¥ <!--"¥", 钱符-->
© <!--"©" 版权符-->
> <!--">", 大于-->
< <!--"<", 小于-->
® <!--"®", 注册商标符"-->
body内重要标签
标签的分类2
- 块级标签:
- 独占一行
- h1~h6, p, br, hr, div
- 块级标签内可以嵌套其他块级标签和行内标签
- 注意: p标签虽然是块级标签, 但是只能嵌套行内标签不能嵌套块级标签
- 行内标签: 内部文本多大, 就占多大
- s, i, u, b, span
- 行内标签不能嵌套行内标签和块级标签
- 标签的两个常用属性
- id: 类似于身份证, 每一个标签都应该有id值, 并且在同一个html文档中标签的id不能重复
- class: 类属性, 类似于面向对象中的继承,
class = 'c1 c2 c3', 则该标签拥有c1, c2, c3的所有样式
body内重要标签
-
div和span是前期构建网页的基本骨架
-
a: 链接标签:
-
跳转功能
- href参数: 控制跳转的地址
- target参数: 控制在当前窗口打开
__self, 控制新建窗口打开__blank - 只要点过一次地址, 该地址之后颜色都是紫色的
-
锚点功能:
- 给标签加上对应的id属性,
- 在其他位置书写一个a标签, 在该a标签内使用参数href引用对应的id值
<a href="" id=1>文章开头</a> <div style="background-color: black; height: 1000px"></div> <div style="background-color: green; height: 1000px"></div> <a href="#1" id=2>回到顶部</a>
-
-
img: 图片标签
-
src参数
- 图片地址(网上地址或本地地址),
- url(网址), 自动朝该网址发送get请求, 获取图片资源
-
alt参数: 当图片加载不出来时, 展示的提示信息
-
title: 当鼠标悬浮在图片上时, 展示的提示信息
-
width和height: 默认设置其中一个就会等比例缩放, 两个都调整会使图片失真
-