前端与后端概念
# 前端
任何与用户直接打交道的操作界面 ，都能被称为前端。
# 后端、
主要负责内部真正的业务逻辑的执行
# 前端必学的三个基础
1.HTML 网页的骨架
2.CSS 网页的样式
3.JAVAScript 网页的动态
HTTP超文本传输协议
""" 浏览器的一些协议: HTTP协议、FTP协议、HTTPS协议 """
"""
http超文本传输协议:
通过浏览器和服务器进行交互bs，进行超文本传输的规定。规定了超文本传输要遵守的规则
"""
# 1.HTTP协议的四大特性
-1.基于请求响应
客户端发送请求，服务端回应响应
-2.基于TCP，IP作用于应用层之上的协议
该协议属于应用层
-3.无状态
服务端不会保存客户端状态。每次连接都和第一次连接一样
-4.无\短连接
客户端与服务端不会长久保持连接
# 2.数据格式
-1.请求格式
请求首行 (请求方式有很多种,协议名称及版本)
请求头 (一大堆K:V键值对)
换行
请求体 (携带一些敏感的数据,不是所有请求都有)
-2.响应格式
响应首行 (响应状态码)
响应头 (一大堆K:V键值对)
换行
响应体 (一般情况下就是浏览器要展示给用户看的数据)
# 3.响应状态码
-1.用数字来表达一些文字意义
1XX : 服务端已经接收了你的请求正在处理，客户端可以继续发送或者继续等待
2XX : 200 OK 请求成功，服务端发送了对应的响应
3XX : 302(临时) 304(永久) 重定向(想访问网页A，但是自动跳到了网页B)
4XX ：403访问权限不够，404请求资源不存在
5XX ：服务端内部出现的错误
"""
在公司中我们会自定义一些其他的响应状态码，通常都在10000以上
"""
HTML介绍
# 1.HTML是所有留恋其页面必备的
# 2.浏览器展示的界面一般称为HTML页面，存储HTML语言的文件后缀名一般是.html
# 3.HTML没有逻辑，也没有要求缩进
# 4.HTML注释语法是
<!--注释内容-->
# 5.HTML文件结构
<html> # 所有的html代码都必须在html标签内部
<head></head> # head内的数据一般都是配置文件,不给用户展示
<body></body> # body内的数据就是浏览器展示给用户看的
</html>
# 6.HTML标签的分类
第一种分类：
</img> 单标签(插入图片的标签)
<h1></h1> 双标签(插入标题的标签)
第二种分类：
- 1.块儿级标签(h1~h6,p,hr,br)
一个标签独占一行
- 2.行内标签(u,i,s,b)
内部文本多大自身就占多大
常见的HTML标签
#1.head内常见的标签
<title>Title</title> <!--控制标签页小标题-->
<style></style> <!--内部支持编写css-->
<link rel="stylesheet" href=""> <!--引入外部css文件-->
<script></script> <!--内部支持编写js代码，还能通过src属性引入外部JS文件-->
<meta charset="UTF-8"> <!--通过内部属性的不同可以有很多功能-->
<!--<meta name="keywords" content="填写一些关键字 提升网页被搜索的概率">-->
<!--<meta name="description" content="填写一些网页的简介">-->
# 2.body内的基本标签
<h1></h1> <!--标题标签h后面是1-6的数，是几就是几级标题-->
<p></p> <!--段落标签-->
<hr> <!--水平分割线-->
<br> <!--换行符-->
<u></u> <!--下划线-->
<i></i> <!--斜体-->
<s></s> <!--删除线-->
<b></b> <!--加粗-->
<!--body内有很多样式,可能存在多种标签可以实现-->
# 3.常见的符号
1. 空格
2.> 大于
3.< 小于
4.& &符
5.¥ ¥
6.© ©
7.® ®
# 4.body内布局标签
<div></div> <!--块儿级标签-->
<span></span> <!--行内标签-->
<!--
1.块儿级标签可以通过css调整为不独占一行
2.标签之间也可以嵌套，p标签除外，注意(行内标签不能嵌套块儿级标签使用)
3.p标签虽然是块儿级标签，但是不能嵌套p标签和块级标签
-->
# 5.body内常用标签
-1.a标签(链接标签)
href
"""
1.填写网址 具备跳转功能 href='url'
2.填写其他标签的id值 具备锚点功能 href='#id'
"""
target
"""
1. _self 原网页跳转(默认)
2. _blank 新建网页跳转
"""
-2.img标签(图片标签)
src
"""
1.填写图片地址
2.其他更多特性
"""
title
鼠标悬浮在图片上自动展示的文本
alt
图片加载失败提示的信息
width/height
图片的尺寸，调整一个等比例缩放
HTML常见的表相关的标签
# 1.列表标签
-1.无序列表
<ul>
<li>python</li>
<li>golang</li>
<li>linux</li>
</ul>
-2.有序列表
<ol type="I" start="10">
<li>第一项</li>
<li>第二项</li>
<li>第二项</li>
</ol>
-3.标题列表
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>
# 2.表格标签
<table>
<thead>
<tr>
<th>序号</th>
<th>用户名</th>
<th>密码</th>
</tr>
</thead>
<!--thead内放的是表头-->
<tbody>
<tr>
<td>1</td>
<td>jason</td>
<td>123</td>
</tr>
</tbody>
<!--tbody内放的是表单-->
</table>
# 3.表单标签
<!--表单标签可以获取用户输入(输入、选择、上传)的数据并发送给后端服务器--!>
-1.表单的标签
1). form标签
<form action="" method="">表单数据</form>
<!--action属性用于控制数据的提交地址，不写默认朝当前页面所在地址提交--!>
<!--method属性用于控制请求的方式(get/post)--!>
2). input标签
-1.获取用户输入的标签两大重要属性
<!--from表单在往后端发送数据的时候，标签必需要有name，否则不会发送该标签的值--!>
name属性 ： 类似于字典键
value属性： 类似于字典的值
-2.获取用户输入的input标签理论上需要配合label使用
<label for="某个input标签的id值"><label>
-3.获取用户输入的input标签可以添加背景提示
<input type="text" name="password" placeholder="密码">
-4.获取用户输入的标签是选择值的，则需要自己写value值
<input type="radio" name="gender" value="male">男
<input type="checkbox" name="hobby" value="basketball">篮球
<select name="province" id="">
<option value="shanghai">上海</option>
</select>
-5.默认选中，针对单选radio和多选checkbox
<input type="radio" name="gender" value="male" checked="checked">男 <input type="radio" name="gender" value="female" >女
3). select标签:
- oprion标签
-6.默认选中，针对于下拉框option
<select name="province" id="">
<option value="shanghai" >上海</option>
<option value="guangzhou" selected="selected">广州</option>
</select>
4). textarea标签
# 4.实操案例
<form action="" method="post">
<p>username:<input type="text"></p> <!--text普通文本-->
<p>password:<input type="password"></p> <!--password不可见文本-->
<p>birthday:<input type="date"></p> <!--date时间文本，生成一个日历-->
<p>email:<input type="email"></p> <!--email邮箱文本，规定了必须要有@-->
<p>gender:
<input type="radio" name="gender">男
<input type="radio" name="gender">女
<input type="radio" name="gender">其他
</p> <!--radio生成单选选项-->
<p>hobby:
<input type="checkbox" name="hobby">篮球
<input type="checkbox" name="hobby">足球
<input type="checkbox" name="hobby">双色球
</p> <!--checkbox生成多选选项-->
<p>file:
<input type="file">
</p> <!--file可以上传单个文件-->
<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> <!--该标签加了multiple可以生成供选择的滑轮选项多选-->
</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标签应该有name属性：
name属性相当于字典的键，input标签获取到的用户数据相当于字典的值
点击发送会组织成字典的形式发送给服务端，这样才具有意义
"""
浙公网安备 33010602011771号