前端基础学习1
一、前端与后端的概念
1.前端后端的名词解释?
前端:类似于接待员
直接与用户打交道到操作界面
后端:类似于幕后操作
主要负责内的部核心业务逻辑
3.前端具体学什么?
具备一定前的端基础
能够编写简易的页面
甚至有资本能转前端
4.前端三剑客是什么?
HTML 网页的骨架
CSS 网页的样式
JavaScript 网页的动态
二、超文本传输协议(HTTP)
1.前端概览
1.编写服务端
2.浏览器充当客户端访问服务端
3.浏览器无法正常浏览展示服务端内容 其原因是服务端没有遵循标准
4.HTTP协议>>>:规定了浏览器与服务端之间的数据交互的格式
2.HTTP协议
1、HTTP协议之四大特性
1.基于请求相应
2.基于TCP、IP作用于应用层的协议
3.无状态
4.无\短连接
2、服务端代码
server = socket.socket() # 调出套接字
server.bind(('127.0.0.1', 8080)) # 绑定网址
server.listen(5) # 半连接池
while True:
conn, address = server.accept() #
data = conn.recv(1024) # 接受信息
server.send(b'HTTP/1.1 200 OK\r\n\r\n') # HTTP协议规定的格式
with open(r'a.txt', 'rb') as f: # 文件打开
conn.send(f.read()) # 发送
3、数据格式
(1).请求格式
1.请求首行:请求方式有很多种 协议版本
2.请求头:一大堆K:V键值对
3.换行
4.请求体:存放敏感信息不是所有的请求方式都有请求体
(2).响应格式
1.响应首行:状态码 协议版本
2.响应头:一大堆K:V键值对
3.换行
4.响应体:存放给浏览器展示的数据
(3).响应状态码
# 响应状态码是指用数字表达一些文字意义类似于暗号
1XX: 服务端已经接收到了 请求正在处理 客户端可以继续发送或者等待
2XX: 200 OK 请求成功 服务端发送了对应的响应
3XX: 320(临时) 304(永久) 重定向(想访问网页A但是自动调到了网页B)
4XX: 403访问权限不够 404请求资源不存在
5XX: 服务端内部出错
'在公司中我们还会自定义更多响应状态码 通常以10000起步>>>:聚合数据'
三、超文本标记语言(HTML)
1.HTML简介
1.直接发送手写的数据
2.转为发送文件里面的数据
3.编写HTML出现特殊的现象
2.HTML概览
1.HTML注释语法
<!--注释内容-->
2.HTML文档结构
<!DOCTYPE html>
<html lang="en"> # 固定格式html包裹
<head> # 主要存放跟浏览器交互的配置
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
3.预备知识
1.网页信息数据一般也会存放于文件中>>>: .html
2.pycharm支持前端所有类型的文件编写>>>: 内置有自动补全的功能
3.html文件的打开>>>:内置有自动调用浏览器的功能
4.head内常见标签
1.title网页小标题
2.meta定义网页资源信息
3.style内部支持编写css代码
4.link引入外部css文件
5.script支持内部编写js代码也可以引入外部js文件
5.body内基本标签
1.标题系列
h1~h6 对应六个标题
2.段落系列
p
3.其他系列
u 下划线
i 斜体
s 删除线
b 加粗
4.换行于分割线
br 换行
hr 分割线
6.常见符号
1. 空格
2.> 大于
3.< 小于
4.& &
5.¥ ¥
6.© ©
7.® ®
7.body内部标签
1.div 块级标签
2.span 行内标签
"""
1.标签之间可以相互嵌套 并且理论上可以无限嵌套
2.块级标签内可以套块级标签和行内标签
3.p虽然是块级标签 但是它内部也不能套块级标签
4.行内标签内只能嵌套行内标签
"""
8.body内常用标签
"""
1.标签括号内填写的 什么=什么 称之为标签的属性
2.默认属性:标签自带的 编写的时候自动提示
3.自定义属性:用户自定义的 编写不会提示甚至会飘颜色
"""
1.a标签 连接标签
href
1.填写网址 具备跳转功能
href='url'
2.填写其他标签的id值 具备锚点功能
href='#id'
target
默认_self原网页跳转
_blank新建网页跳转
2.img标签 图片标签
src
1.填写图片地址
2.还有更多特性 目前没法讲
title
鼠标悬浮在图片上自动展示的文本
alt
图片加载失败提示的信息
width\height
图片的尺寸 两者调整一个即可 等比例缩放*
9.列表标签
无序列表
<ul>
<li>手机</li>
<li>衣物</li>
<li>电子</li>
</ul>
ps:页面上所有有规则排列的横向或者竖向的数据 一般使用的都是无序列表
有序列表
<ol type="I">
<li>111</li>
<li>222</li>
<li>333</li>
</ol>
ps:还可以通过type竖向切换数字
标题列表
<dl>
<dt>大标题</dt>
<dd>小标题1</dd>
<dd>小标题2</dd>
<dt>大标题</dt>
<dd>小标题1</dd>
<dd>小标题2</dd>
<dd>小标题3</dd>
</dl>
10.表格标签
1.先写基本骨架
<table>
<thead></thead>
<tbody></tbody>
</table>
2.再写表头及表单数据
<tr> 一个tr标签就表示一行
<th>编号</th> th主要用于表头字段中 用来加粗显示
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>1</td> td主要用于表达数据中
<td>jason</td>
<td>18</td>
</tr>
<table>
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>jason</td>
<td>18</td>
</tr>
</tbody>
</table>
11.表单标签
可以获取到用户的数据并发送给服务端
form标签
action 控制数据的提交地址
method 控制数据的提交方法
input标签(类似于前端的变形金刚)
type属性
text 普通文本
password 密文展示
date 日期选项
email 邮箱格式
radio 单选
checkbox 多选
file 文件
submit 触发提交动作
reset 重置表单内容
button 暂无任何功能
select标签 下拉框
option标签 一个个选项
textarea标签 获取大段文本
input标签应该有name属性
name属性相当于字典的键 input标签获取到的用户数据相当于字典的值
点击发送就会组织成字典的形式发送给服务端 这样才具有明确意义
