一、前端简介
# 1.前端与后端
# 前端
'''
前端就是与用户打交道的界面 用户能够直接操作的界面都可以称之为前端
eg: 淘宝页面、支付宝界面、游戏界面'''
# 后端
'''
后端就是不跟用户打交道的界面 真正执行核心业务逻辑的代码程序
eg:python代码、java代码'''
# 2.前端的学习
html、css、javascript、jquery、bootstrap
前面三个是页面内容 后面两个是框架
# 3.简单简绍
html: 网页的骨架
可以比喻成一个没有穿衣服的人
css: 网页的样式
可以比喻成一个穿了一件好看的衣服
javascript: 网页的动态
可以比喻成一个人 的动作
二、HTML前戏
# HTTP协议又称为 超文本传输协议
'''
我们可以手动敲一个服务端和客户端
但是我们之前所学的 b/s和c/s架构让我们知道了浏览器其实也是一个客户端
所以我们只需要自己手敲一个服务端 让浏览器充当我们的客户端
'''
# 问题
现在我们编写的服务端 浏览器无法直接展示服务端的响应数据
IP:127.0.0.1 端口号:8080 发送的数据: b'hello world'(因为是基于网络发送所以是二进制)
# 解决
因为浏览器需要兼容多个服务端软件 而服务端又有很多数据格 所以为了实现无障碍沟通交流 规定了一些协议
eg:HTTP协议、FTP协议、HTTPS协议
# HTTP协议
HTTP协议指定了客户端可能发送给服务器什么样的消息以及得到什么样的响应
三、HTTP协议
# 1.四大特性
1.基于请求响应
服务端永远不会主动向客户端发送信息 都是客户端向服务端发送请求别动响应
2.基于TCP/IP之上作用于应用层的协议
3.无状态
HTTP 协议自身不对请求和响应之间的通信状态进行保存，任何两次请求之间都没有依赖关系。直观地说，就是每个请求都是独立的，与前面的请求和后面的请求都是没有直接联系的。协议本身并不保留之前一切的请求或响应报文的信息
4.无/短连接
无连接的含义是对于连接加以限制，每次连接都只会对一个请求进行处理，当服务器对客户的请求处理完毕并收到客户的应答后，就会直接断开连接。HTTP协议采用这种方式可以大大节省传输时间，提高传输效率
# 2.数据格式
1.请求数据格式
请求首行
请求方式:有很多种 协议版本
请求头
很多个K:V键值对
换行(重要)
请求体
携带一些敏感数据 不是所有的请求都有请求体
2.响应数据格式
响应首行
响应状态码
响应头
也是很多个K:V键值对
换行
响应体
一般情况下就是浏览器展示给用户的数据
# 3.响应状态码
1xx:服务端接收到了你的请求正在处理 可以等待也可以继续提交
2xx:200 OK服务端给出了相应响应
3xx:重定向 就是跳转到了另一个页面
4xx:403请求不符合条件 404请求资源不存在
5xx:服务端内部出现错误 就是后端代码出bug
PS:以后在公司中还可以自定义状态码 一般从10000开始
四、HTML简介
'''
超文本标记语言
是所有浏览器展示页面必备的
浏览器页面我们一般也称之为HTML页面 存储HTML语言的文件后缀是.html
我们可以在桌面上创建文本编写HTML代码后缀改成.html也可以
html没有任何逻辑可言 所见即所得
'''
# html注释语法
<!--注释内容 -->
# HTML语法结构
<html> 所有的HTML代码都必须写在html标签里面
<head></head> head里面的数据一般都不是给用户看的
<body></body> body里面的数据就是浏览器展示给用户看的
</html>
# HTML标签的分类
1.单标签(自闭标签)
<img/> 就是只有一个标签就可以展示
2.双标签
<a></a>
<h1></h1> 就是成双成对的
'''HTML代码不讲究缩进你可以把所有的代码写在一行 但是我们写python的时候写习惯了'''
五、head内常见的标签
title 控制标签页小标题
style 内部支持编写css代码
link 可以外部css文件
script 内部支持编写js代码 还可以通过src属性引进外部js文件
meta 通过内部属性的不同可以有很多功能
<meta name="keywords" content="填写一些关键字 提升网页被搜索的概率">
<meta name="description" content="填写一些网页的简介">
六、body内常见的标签
<h1></h1> 标题标签 范围:h1~h6
<p></p> 段落标签
<hr></hr> 水平分割线
<br></br> 换行符
<u></u> 下划线
<i></i> 斜体
<s></s> 删除线
<b></b> 加粗
ps:存在很多样式 可能存在多种标签实现
七、快儿级标签和行内标签
1.块儿级标签 p hr br h1~h6
就是一块内容占一行 不管有没有占满
2.行内标签
就是里面有什么内容 这个内容有多大就占多大
八、body内基本符号
如果想要在页面展示一些特殊符号那么HTML有一些基本符号规定了一些符号
空格
> 大于号
< 小于号
& &
¥ ￥
® 注册
© 版权
想要在页面上展示必须使用基本符号
九、body内常见标签
# 1.body内布局标签
页面布局都是通过div标签个span标签布局
div
块儿级标签
span
行内标签
'''
1.块儿级标签可以通过css调整为不独占一行的
2.标签之间很多时候可以嵌套
块儿级标签可以嵌套任何标签
P标签虽然是块儿级标签 但是它不能嵌套其他块儿级标签 只能嵌套行内标签
行内标签只能嵌套行内标签
'''
# 2.body内常见的标签
1.a标签:a标签中有很多属性
herf:里面填写网址 在浏览器上点击就可以跳转到该网址
还可以填写其他标签的ID值 实现描点功能
target: 可以控制是否页面跳转
_self:默认在当前页面跳转
_blank:在另一个页面跳转
2.img标签:图片标签 也有很多属性
src:填写图片地址 可以是网络地址也可以是本地地址
title:鼠标悬浮到图片上时显示的信息
alt:图片没有加载出来的时候显示的信息
height:图片的高度
width:图片的宽度
# height和width只要调整一个即可 另一个会等比例缩放
十、两大重要属性
1.id属性(一对一管理)
相当于一个标签的身份证号 在同一个HTML页面上 id值不能重复
2.class属性(一对多管理)
相当于把多个标签分组 多个标签可以有同一个class属性
# 上面两个属性都是快速定位需要操作的标签的
十一、列表标签
# 1.无序列表
<ul>
<li>python</li>
<li>django</li>
<li>linux</li>
</ul>
'''
就是跟typro中的无序列表差不多 只不过前面的圆点选不中
页面上的有序横向或竖向有序排列的的元素 基本都是用无序列表做的
'''
# 2.有序列表
<ol>
<li>python</li>
<li>djaong</li>
<li>linux</li>
</ol>
# 就是在三个元素前面加上了有序标题
# 3.标题列表
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容2<dd>
</dl>
# 无序列表是使用频率最高的列表
十二、表格标签
就是相当于一个表格
<table>
<thead>
<tr>
<th>序号</th>
<th>用户名</th>
<th>密码</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>jason</td>
<td>123</td>
</tr>
<tr>
<td>2</td>
<td>kevin</td>
<td>321</td>
</tr>
</tbody>
</table>
想要写出表格必须使用<table></table>
在<thead></thead>中编写相当于在MySQL中编写字段名
在<tbody></tbody>中编写相当于在字段名中插入数据
<tr></tr>就是在一行中写数据
<th></th>和<td></td>其实没有区别都是计入数据 只不过样式不一样th的字体会粗点所以习惯用作字段名
十三、表单标签
能够获取用户的输入(输入、选择、上传)数据并发送到后端服务器
<form action="" method="" ></form>
action属性
用于控制数据的提交地址 不写的话就是朝当前页面所在的地址提交
method属性
用于控制请求的方式(get\post)
<form action="" method="post">
<p>username:<input type="text"></p>
<p>password:<input type="password"></p>
<p>birthday:<input type="date"></p>
<p>email:<input type="email"></p>
<p>gender:
<input type="radio" name="gender">男
<input type="radio" name="gender">女
<input type="radio" name="gender">其他
</p>
<p>hobby:
<input type="checkbox" name="hobby">篮球
<input type="checkbox" name="hobby">足球
<input type="checkbox" name="hobby">双色球
</p>
<p>file:
<input type="file">
</p>
<p>files:
<input type="file" multiple>
</p>
<p>province:
<select name="" id="">
<option value="">上海</option>
<option value="">北京</option>
<option value="">深圳</option>
</select>
</p>
<p>GF:
<select name="" id="" multiple>
<option value="">小明</option>
<option value="">小波</option>
<option value="">小冲</option>
<option value="">小黄</option>
</select>
</p>
<p>info:
<textarea name="" id="" cols="30" rows="10"></textarea>
</p>
<input type="submit" value="用户注册">
<input type="reset" value="重置内容">
<input type="button" value="普通按钮">
</form>
<!--
input中的type是控制用户输入是按什么输入的
text:就是普通文本
password: 就是加密文本输入的数据是看不到的
date: 就是日期属性 传入到后端的时候就是日期类型
email: 就是输入的时候必须按照邮箱地址输入
radio: 就是选择框(单选) name: 就是选择的时候赋值给gender可以重复选择
checkbox: 就是多选框 name: 就是选择的时候赋值给hooby可以重复选择
file: 就是可以传入文件 只能传入一个文件
multiple: 就是可以传入多个文件
select: 就是可以有一个下拉框 option可以供用户选择的数据(单选)
textarea: 就是多行文本
submit: 就是按钮 但是在不同的浏览器显示的文字是不同的 所以在后面加上value就是固定了它显示什么文字
reset:重置按钮 就是点击页面就会立刻刷新
button:就是普通按钮 什么功能都没有 但是我们后续可以添加功能-->
浙公网安备 33010602011771号