|
|
前端
1.什么是前端
只要是跟用户打交道的界面都称为前端
# eg: 电脑界面 手机界面 平板界面....
2.什么时候后端
# eg:python Java php go
不跟用户直接打交道的都可以称之为后端为什么学前端
1.为了成为全栈工程师
前端 后端 数据库 linux
但是，前端不会学的特别深，要求看得懂别人写的一些简单页面和自己搭建一些简单的页面就可以了前端的学习历程
# 前端三剑客
1.HTML =============> 网页的骨架,没有任何样式
2.CSS =============> 美化网页的，给网页骨架添加样式的
3.JavaScript========> 就是让网页动起来 简称 js软件开发架构
c/s架构
b/s架构在浏览器地址上输入网址，回车发生了什么事
"""
1.浏览器向服务端发起请求
2.服务器接收客户端请求
3.服务端处理客户端的请求，并且返回给浏览器
4.浏览器根据特定的规则渲染页面
"""
import socket
server = socket.socket()
server.bind(('127.0.0.1',8080))
server.listen(5)
while True:
conn,addr = server.accept()
datd = conn.recv(1024)
print(data) # 二进制数据 bytes类型
# 构造出符合HTTP协议格式的数据 无需掌握
conn.send(b'HTTP/1.1 200 ok\r\n\r\n')
conn.send(b&#39;<h1>helle baby</h1>&#39;)
with open(&#39;a.txt&#39;,&#39;rb&#39;) as f
conn.send(f.read())
conn.close()
# 要想让浏览器跟很多个服务器进行交互，那么，就要遵循一定规则HTTP协议
&#34;&#34;&#34;
超文本传输协议，用来规定服务器和客户端之间的数据传输格式
&#34;&#34;&#34;
# 四大特征：
1.基于请求响应
2.基于TCP/IP协议之上的应用层的协议
3.无状态
# 不能保存用户的信息
保存用户信息的一些技术：cookie seesion token...
4.短链接(无连接)
## 请求数据格式
1.情求首行 (请求方式，路径，版本号)
2.请求头 (一大堆k:v键值)
3.换行符 (\r\n)
4.请求体 (get请求没有请求体，post请求有请求体)
# get请求参数传递格式：
k：v& k1:v1
## 响应数据格式
1.响应首行 (响应方式，路径，版本号)
2.响应头 (一大堆k:v键值)
3.换行符 (\r\n)
4.响应体 (返回给浏览器展示给用户看的数据)
## 响应状态码
其实就是用一些数字来表示一些复杂的信息
1xx: 服务端以及成功接收到了你的数据正在处理，你可以继续提交额外的数据
2xx: 服务端成功响应了你想要的数据(200 ok请求成功)
3xx: 重定向(当你在访问一个需要登录之后才能看的页面，你就会发现自动登录页面)
4xx: 请求错误
404: 请求资源不存在
403：当前请求不合法或者不符合访问资源的条件
5xx: 服务器内部错误(500)
# 请求方式：
1.get请求方式
跟服务端要数据的 eg：baidu.com
2.post请求方式
跟服务端提交数据的 eg：登录账号和密码HTML简介
<!DOCTYPE html>
<html lang=&#34;en&#34;>
<head>
<meta charset=&#34;UTF-8&#34;>
<title>Title</title>
</head>
<body>
</body>
</html>
标签的分类：
1.双标签
2.单标签HTML书写位置
1.在pycharm中新建html文件
2.新建文本文档，然后修改后缀名为.htmlHTML的文档结构
<!DOCTYPE html> # 告诉浏览器这个文件是html文件
<html lang=&#34;en&#34;> # language, english
<head> # head标签中的代码不是给用户看的
<meta charset=&#34;UTF-8&#34;>
<title>Title</title>
</head>
<body> # body中的内容写什么就显示什么
</body>
</html>
注意：HTML代码是没有格式的，可以全部都写在一行都没有问题，只不过我们习惯了缩进表示代码head中常用标签
在书写HTML代码的时候，你只需要写标签名，然后tab就能自动补全
# html文件打开的方式
1.在pycharm中点击右上角的图片
2.双点击选择浏览器打开html
# <script>
<title>我的第一个HTML文件</title>
<script>-->
//*这里是写js代码-->
</script>-->
<link rel=&#34;stylesheet&#34; href=&#34;mycss.css&#34;>-->
<script src=&#34;myjs.js&#34;></script>-->
标签 意义
<title></title> 定义网页标题
<style></style> 定义内部样式表（内部用来写css代码）
<script></script> 定义JS代码或引入外部JS文件（内部用来写js代码）
<link/> 引入外部样式表文件或网站图标
<meta/> 定义网页原信息
<meta name=&#34;keywords&#34; content=&#34;meta总结,html meta,meta属性,meta跳转&#34;> （关键词）
<meta name=&#34;description&#34; content=&#34;老男孩教育Python学院&#34;> （网页描述）body常用标签
&#34;&#34;&#34;
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>
<p>段落标签</p>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<!--换行-->
<br>
<!--水平线--><hr>
&#34;&#34;&#34;
特殊的标签
&#34;&#34;&#34;
内容 对应代码
空格 &nbsp;
> &gt;
< &lt;
& &amp;
¥ &yen;
版权 &copy;
注册 &reg;
&#34;&#34;&#34;标签的分类
1.块儿级元素
#独自占一行
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<p>段落标签</p>
<div></div>
div标签用来定义一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。
2.行内元素
# 自身文本有多大就占多大
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>
<span></span>
span标签用来定义内联(行内)元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。标签的嵌套
### 块儿级元素可以套所有的块儿级元素与行内元素
# p标签虽然是块儿级元素，但是不能嵌套块儿级元素（HTML书写规范）
### 行内元素只能嵌套行内元素，不能嵌套块儿级元素img标签
<img src=&#34;图片的路径&#34; alt=&#34;图片未加载成功时的提示&#34; title=&#34;鼠标悬浮时提示信息&#34; width=&#34;宽&#34; height=&#34;高(宽高两个属性只用一个会自动等比缩放)&#34;>
src:
1.外链地址
2.本地地址
title
1.鼠标悬浮时提示信息
2.他是所有标签都有的
width
图片宽度，和高度等比例缩放
alt
当图片加载失败的时候，显示信息a标签
<a href=&#34;https://www.baidu.com/&#34; target=&#34;_blank&#34; title=&#34;点我跳转&#34;></a>
target：
默认a标签是当前页面完成跳转 _self
你也可以修改为新建页面跳转。 _blank
href:
跳转的链接列表
1.无序列表
<ul type=&#34;disc&#34;>
<li>第一项</li>
<li>第二项</li>
</ul>
type属性：
disc（实心圆点，默认值）
circle（空心圆圈）
square（实心方块）
none（无样式）
2.有序列表
<ol type=&#34;1&#34; start=&#34;2&#34;>
<li>第一项</li>
<li>第二项</li>
</ol>
type属性：
1 数字列表，默认值
A 大写字母
a 小写字母
Ⅰ大写罗马
ⅰ小写罗马
3.标题列表
复制代码
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容2</dd>
</dl>
复制代码表格
id name age gender time
ID 姓名 年龄 性别 时间
&#34;&#34;&#34;
表格是一个二维数据空间，一个表格由若干行组成，一个行又有若干单元格组成，单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。
表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式（即按行和列组织）的数据。
表格的基本结构：
<table>
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>egon</td>
<td>18</td>
</tr>
</tbody>
<tbody>
<tr>
<td>2</td>
<td>josn</td>
<td>19</td>
</tr>
</tbody>
<tbody>
<tr>
<td>3</td>
<td>ly</td>
<td>20</td>
</tr>
</tbody>
</table>
&#34;&#34;&#34;
属性:
border: 表格边框.
cellpadding: 内边距
cellspacing: 外边距.
width: 像素 百分比.（最好通过css来设置长宽）
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列（即合并单元格）form表单
# 就是可以把用户输入的数据提交给服务端
form action=&#34;&#34;>
<p>
<label for=&#34;d1&#34;>
用户名：
</label>
<input type=&#34;text&#34; id=&#34;d1&#34; >
</p>
<p>
密码：<input type=&#34;password&#34; username=&#34;egon&#34;>
</p>
<p>
<input type=&#34;data&#34;>
</p>
<p>
<input type=&#34;radio&#34; name=&#34;gender&#34;>男
<input type=&#34;radio&#34; name=&#34;gender&#34;>女
<input type=&#34;radio&#34; name=&#34;gender&#34;>其他
</p>
<p>
<input type=&#34;checkbox&#34; name=&#34;&#34;>搞钱
<input type=&#34;checkbox&#34;>洗脚
<input type=&#34;checkbox&#34;>撩妹
<input type=&#34;checkbox&#34;>按摩
</p>
<p>
<input type=&#34;checkbox&#34; name=&#34;&#34;>搞钱
<input type=&#34;checkbox&#34;>洗脚
<input type=&#34;checkbox&#34;>撩妹
<input type=&#34;checkbox&#34;>按摩
</p>
<p>
<select name=&#34;&#34; id=&#34;&#34;>
<option value=&#34;&#34;>上海</option>
<option value=&#34;&#34;>北京</option>
<option value=&#34;&#34; selected>深圳</option>
</select>
</p>
<p>
<input type=&#34;file&#34;>
</p>
<p>
<textarea name=&#34;&#34; id=&#34;&#34; cols=&#34;30&#34; rows=&#34;10&#34;>我爱你大宝贝</textarea>
</p>
<p>
<input type=&#34;hidden&#34; value=&#34;123&#34;>
</p>
<p>
<input type=&#34;submit&#34; value=&#34;登录&#34;>
<input type=&#34;button&#34; value=&#34;登录&#34;>
<button>登录</button>
<input type=&#34;reset&#34;>
</p>
</form>
### action ：指定向那个后端提交数据
1. 什么都不写，默认提交到当前地址
2. 全写，http://127.0.0.1:5000/index/
3. /index/
ip:port/index/
## 上传文件必须满足两个条件：
1.请求方式必须是post
2.编码方式必须改为：enctype=&#39;multipart/form-data&#39;
## 三种编码方式：
1. urlencoded
2. form-data
3. json
######################################################
功能：
表单用于向服务器传输数据，从而实现用户与Web服务器的交互
表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含textarea、select、fieldset和 label标签。
表单属性
属性 描述
accept-charset 规定在被提交表单中使用的字符集（默认：页面字符集）。
action 规定向何处提交表单的地址（URL）（提交页面）。
autocomplete 规定浏览器应该自动完成表单（默认：开启）。
enctype 规定被提交数据的编码（默认：url-encoded）。
method 规定在提交表单时所用的 HTTP 方法（默认：GET）。
name 规定识别表单的名称（对于 DOM 使用：document.forms.name）。
novalidate 规定浏览器不验证表单。
target 规定 action 属性中地址的目标（默认：_self）。
表单元素
基本概念：
HTML表单是HTML元素中较为复杂的部分，表单往往和脚本、动态页面、数据处理等功能相结合，因此它是制作动态网站很重要的内容。
表单一般用来收集用户的输入信息
表单工作原理：
访问者在浏览有表单的网页时，可填写必需的信息，然后按某个按钮提交。这些信息通过Internet传送到服务器上。
服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误。当数据完整无误后，服务器反馈一个输入完成的信息。
from django.conf.urls import url
from django.shortcuts import HttpResponse
def upload(request):
print(&#34;request.GET:&#34;, request.GET)
print(&#34;request.POST:&#34;, request.POST)
if request.FILES:
filename = request.FILES[&#34;file&#34;].name
with open(filename, &#39;wb&#39;) as f:
for chunk in request.FILES[&#39;file&#39;].chunks():
f.write(chunk)
return HttpResponse(&#39;上传成功&#39;)
return HttpResponse(&#34;收到了！&#34;)
urlpatterns = [
url(r&#39;^upload/&#39;, upload),
]
##### input
<input> 元素会根据不同的 type 属性，变化为多种形态。
type属性值 表现形式 对应代码
text 单行输入文本 <input type=text&#34; />
password 密码输入框 <input type=&#34;password&#34; />
date 日期输入框 <input type=&#34;date&#34; />
checkbox 复选框 <input type=&#34;checkbox&#34; checked=&#34;checked&#34; />
radio 单选框 <input type=&#34;radio&#34; />
submit 提交按钮 <input type=&#34;submit&#34; value=&#34;提交&#34; />
reset 重置按钮 <input type=&#34;reset&#34; value=&#34;重置&#34; />
button 普通按钮 <input type=&#34;button&#34; value=&#34;普通按钮&#34; />
hidden 隐藏输入框 <input type=&#34;hidden&#34; />
file 文本选择框 <input type=&#34;file&#34; />
属性说明:
name：表单提交时的“键”，注意和id的区别
value：表单提交时对应项的值
type=&#34;button&#34;, &#34;reset&#34;, &#34;submit&#34;时，为按钮上显示的文本年内容
type=&#34;text&#34;,&#34;password&#34;,&#34;hidden&#34;时，为输入框的初始值
type=&#34;checkbox&#34;, &#34;radio&#34;, &#34;file&#34;，为输入相关联的值
checked：radio和checkbox默认被选中的项
readonly：text和password设置只读
disabled：所有input均适用
#### select标签
<form action=&#34;&#34; method=&#34;post&#34;>
<select name=&#34;city&#34; id=&#34;city&#34;>
<option value=&#34;1&#34;>北京</option>
<option selected=&#34;selected&#34; value=&#34;2&#34;>上海</option>
<option value=&#34;3&#34;>广州</option>
<option value=&#34;4&#34;>深圳</option>
</select>
</form>
属性说明：
multiple：布尔属性，设置后为多选，否则默认单选
disabled：禁用
selected：默认选中该项
value：定义提交时的选项值
#### label标签
定义：<label> 标签为 input 元素定义标注（标记）。
说明：
label 元素不会向用户呈现任何特殊效果。
<label> 标签的 for 属性值应当与相关元素的 id 属性值相同。
<form action=&#34;&#34;>
<label for=&#34;username&#34;>用户名</label>
<input type=&#34;text&#34; id=&#34;username&#34; name=&#34;username&#34;>
</form>
### textarea多行文本
<textarea name=&#34;memo&#34; id=&#34;memo&#34; cols=&#34;30&#34; rows=&#34;10&#34;>
默认内容
</textarea>
属性说明：
name：名称
rows：行数
cols：列数
disabled：禁用
################################################################标签的两个重要属性值
&#34;&#34;&#34;
## id: 单独的唯一的，不能重复
<label for=&#34;d1&#34;>
### class:可以重复
<input type=&#34;password&#34; class=&#34;c1,c2&#34;>
### 自定义属性
<input type=&#34;password&#34; username=&#34;egon&#34;>
&#34;&#34;&#34;总结：学习前端就是死记硬背 |
|
发表于 2023-3-4 01:46:59