web前端 常用的三大主流框架：
Angular、React、Vue，
一、前端：
1、什么是前端？
任何与用户直接打交道的操作界面都可以称之为是一个前端
2、为什么要学前端？
全栈开发工程师，需要前后端都会
3、如何学前端？
软件开发架构：
c/s 客户端/服务器
b/s 浏览器/服务端。本质就是c/s
web服务的本质：
浏览器窗口输入一个网址敲回车发生了哪些事？
01、朝着指定的服务端发送请求
02、服务端接收相应的请求
03、服务端返回相应的响应
04、浏览器接收响应，按照特定的规则渲染页面展示给用户看
4、前端的三大组成：
HTML、CSS、JS
二、HTTP协议（web前端）：超文本传输协议，规定了浏览器与服务端之间数据传输的格式
1、四大特性：
01、基于请求响应：一次请求对应一次响应
02、基于TCP/IP作用于应用层之上的协议
03、无状态：不保留客户的状态，无论你来多少次，我都待你入如初见
弥补：cookie session token
04、无连接：向服务端发送请求后，服务端回应后，立马断开。
补充：长链接：websocket(类似于http协议的大补丁) 聊天室相关
2、数据格式
01、请求格式：
请求首行（请求方式（get/post）、协议版本）
请求头（一大堆K、V键值对）
空格
请求体（携带的数据 并不是一直都有 有时候可能是空的 取决于你的请求方式）
02、请求方式：
1.get请求：朝服务端要资源（获取数据）。类似于浏览器窗口输入www.baidu.com获取百度首页。请求格式中没有请求体
2.post请求：朝服务端提交数据（提交数据）。类似于登录注册功能
03、响应格式：
响应首行（响应状态码）
响应头（一大堆K、V键值对）
空格
响应体（浏览器展示给用户看的数据）
04、响应状态码：用数字来表示一堆提示信息
1xx：服务端已经成功接收到客户端的数据，正在处理，你也可以继续提交。
2xx：200表示请求成功，服务端已经返回了你想要的数据
3xx：重定向（原本想访问A但是内部自动给你转到了B上面）
4xx：404表示请求的资源不存在。403表示你当前不具备请求该资源的资格
5xx：500表示服务端内部错误。比如：机房着火了、宕机、爆炸了
注意：公司内部可以自己定制自己的响应状态码。
例子：
三、HTML：超文本标记语言
注意：XML也可以书写前端页面 主要用于odoo框架中 书写企业内部管理软件（ERP）
1、HTML注释： 注释是代码之母
单行注释：<!--单行-->
多行注释：<!--
多行注释1
多行注释2
-->
注意：由于html页面结构比较复杂，内容比较多，不便于后期的维护和修改。通常在写页面的时候 习惯用下面的方式来人为的划分代码区域
<!--顶部导航条样式开始-->
内容
<!--顶部导航条样式结束-->
<!--左侧菜单栏样式开始-->
内容
<!--左侧菜单栏样式结束-->
2、HTML文档结构
<html>
<head></head>:head内放的内容不是给用户看的，是给浏览器去识别做相应操作的
<body></body>:body内放的内容就是浏览器展示给用户看到的花里胡哨的页面
</html>
3、HTML文档打开方式：
01、pycharm自动调用浏览器打开（推荐）
02、手动查到路径后选择浏览器打开
四、标签的分类：
注意：书写标签的时候 你只需要写标签的名字 之后tab键就可以自动补全。这是emmet插件帮你做的
1、 标签的分类1：
01、双标签
02、自闭和标签
2、标签的分类2：
01、块儿级标签：独占一行。 h1~h6 p br hr div
特点：块儿级标签内部可以嵌套任意的块儿级标签和行内标签
特例：p 虽然是块儿级标签。但是它的内部只能嵌套行内标签，不能嵌套块儿级标签。如果嵌套了 没有问题 只是不符合html语法规范
02、行内标签：自身文本多大就占多大。u s i b span a img
特点：行内标签内部不能嵌套块儿级标签和行内标签
3、head内常用的标签
title：定义网页标题
style：内部支持直接写css代码
link：引入外部的css文件
script：内部可以直接编写js代码。也可以通过src属性引用外部js代码
meta：里面有name属性：keywords、description
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>哈哈，最大的网站</title> <meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com"> </head> <body> </body> </html>
4、body内常用的标签
注意：你所看到的花里胡哨的页面 其实内部都是html代码 很丑很乱
01、基本标签：
h1~h6：标题标签
s：删除线
b：加粗
u：下划线
i：斜体
p：独占一行。段落标签
br：换行
hr：分割线
02、特殊符号：
 ； 空格
>； 大于
<； 小于
&； 与（&）
©； 版权标识
¥； 人民币
®； 注册商标
03、常用标签：
001、div 块儿级标签
002、span 行内标签
注意：本身没有任何特殊意义，但是这两个确实使用最多的 这两个标签是用来做前期的页面布局的
003、img 图片标签
0001、src 属性里：
可以写一个网站图片地址（远程地址）
可以写本地的图片地址（本地地址）
可以写一个url (自动朝该url发送get请求要数据)
0002、alt 属性里： 表示当图片加载不出来的时候 默认展示的提示信息
0003、title 属性里：当鼠标悬浮在图片上的时候 展示的提示信息
0004、width/height 属性里：填大小。注意：修改一个 另外一个会自动等比例缩放，如果两个都修改图片就会失真
004、a 链接标签
0001、href 属性里：放一个url。表示：点击就会跳转到该url所对应的资源
href不单单可以写url 也可以写另外一个标签id值。表示：点击就会跳转到该id值所对应的标签所在的位置
0002、target 属性里：填__self。表示：默认是在当前页面跳转。
填__blank。表示：新建页面跳转。
0003、锚点功能：href不单单可以写url 也可以写另外一个标签id值。点击就会跳转到该id值所对应的标签所在的位置
04、标签应该具备的属性：
001、id属性：类似于身份证号，用来唯一标识当前html页面中的某一个标签。在同一个html页面中，id值不能重复
002、class属性：类似于面向对象的继承。直接引用别的类的样式
05、列表标签：
001、无序列表（用的比较多）
ul
li
只要页面上出现了比较有规则排列的文本 基本上都可以用无序列表来实现
<p>无序列表</p> <ul> <li>111</li> <li>222</li> <li>333</li> </ul>
002、有序列表
ol
li
<p>有序列表</p> <!--type="" 引号里的可写i(小写罗马)、I（大写罗马）、A、a 不写时 默认是 点--> <ol type="i"> <li>哈哈哈</li> <li>呵呵呵</li> <li>嘿嘿嘿</li> </ol>
003、标题列表
dl
dt 标题
dd 内容
<p>标题列表</p> <dl> <dt>标题1</dt> <dd>内容1</dd> <dd>内容2</dd> <dt>标题2</dt> <dd>内容1</dd> <dd>内容2</dd> <dt>标题3</dt> <dd>内容1</dd> <dd>内容2</dd> </dl>
06、表格标签：展示网站数据的时候，一般情况下可以使用表格标签
<table>
<thead>
<tr> # tr表示的是一行
<th></th> # th表示加粗
</tr>
</thead>
<tbody>
<tr>
<td></td> # td表示不加粗
</tr>
</tbody>
</table>
注意：通常情况下表头用th,表单内容用td
07、表单标签：
001、form标签：获取用户输入（输入、选择、上传文件.......），并且将数据打包发送给后端
action 参数：用来控制数据提交的路径（到底朝哪个后端服务器提交数据）
三种写法：
1、不写。默认就是朝当前该页面所在的地址提交数据
2、写 全路径（https://www.baidu.com）
3、只写 路径后缀（/index/）
method 参数：用来控制提交方式。form表单默认是get请求（method='get'）。你可以指定成post请求（method='post'）
get请求和post请求都能够携带数据。区别：
【因为get请求能够携带参数 但是参数的携带方式是直接跟在url后面的。如：url?xxx=ooo&yyy=bbb&lll=ccc
特点: 1.数据全是明文 2.数据大小有限制 大概应该可能在4KB左右吧... 3.get请求不应该携带隐私信息】
【post请求携带的数据存在html文件中的body中，数据大小没有限制】
ps:向服务端提交 form表单时，method必须是post请求。enctype必须是form-data
enctype 参数：用来控制数据提交的编码格式。默认情况下form表单是不能够直接发送文件的。
如果你要发送文件，必须将该参数有默认的form-urlencode改为form-data。如果不改，则服务端只能收到文件的名字。不能收到真 实的文件
002、label标签：不会向用户展示任何特殊内容,它的作用是把自己与其他标签"绑定"起来. 通常是写在表单(form)内，与input标签一起使用
参数：for 表示要绑定的标签是谁
<label> 用户名</label> 里面写的是 要聚集的东西，就是你点它 就会触发绑定的标签。
#label与input 结合：方法一 <form action=""> <p> <label for="d1">用户名:<input type="text" id="d1" name="username"></label> </p> </form> #label与input 结合：方法二 <form action=""> <p> <label for="d2">用户名:</label> <input type="text" id="d2"> </p>
</form>
002、input标签：获取用户输入。该标签是一个行内标签
type 属性里：
text 表示普通文本
password 表示密文
date 表示日期
radio 表示多选一
checkbox 表示多选多
checked 表示默认选中某某
reset 表示重置
submit 表示触发form表单提交动作
file 表示获取文件
button 表示普通按钮
name 属性里：
类似字典里的key
value 属性里：
类似字典的value值
注意事项：1.获取用户输入的标签，都是用value属性来存放用户的输入，类似于字典的value。获取用户输入的标签都应该有name属性，类似于字典的key
2.如何给input框设置默认值：可以直接给input标签加value属性
3.input框如何设置提示信息：可以直接给input标签加 placeholder属性
例子：username:<input type="text" value="jason" placeholder="用户名">
<p>爱好: 运动<input type="checkbox" name="hobby"> 看小说<input type="checkbox" checked > 英雄联盟<input type="checkbox"> 打人<input type="checkbox" checked> </p>
003、select 标签：表示下拉框。一个个选项就是一个个option标签。默认是单选的
加一个multiple 该成多选
<select name="" id="" multiple>
<option value="">新垣结衣</option>
<option value="">明老师</option>
<option value="">嫖老师</option>
<option value="">波老师</option>
</select>
加selected="selected" 让option标签默认选中
<select name="" id="" multiple>
<option value="" selected="selected">新垣结衣</option>
<option value="">明老师</option>
<option value="" selected>嫖老师</option>
<option value="">波老师</option>
</select>
004、textarea标签 ： 获取大段文本
<p>个人简介: <textarea name="" id="" cols="10" rows="5"></textarea> </p>
例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- 标题显示在打开的页面的最上面--> <title>最大的网站</title> </head> <body> <h1>hello big big baby~</h1> <a href="https://www.mzitu.com">click me</a> <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=276938278,2845396192&fm=26&gp=0.jpg"/> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>body内常用</title> </head> <body> <h1>001</h1> <h2>002</h2> <h3>003</h3> <h4>004</h4> <h5>005</h5> <h6>006</h6> 我是普通文本 <s>我是s</s> <u>我是u</u> <b>我是b</b> <i>我是i</i> <p>何处望神州 满眼风光 北固楼</p> <br> <p>何处望神州 满眼风光北固楼</p> <hr> <p>何处望神州 满眼风光北固楼</p> <p>何处望神州 满眼风光北固楼</p> <p>a大于b a > b</p> <p>a小于b a < b</p> <p>a&b a & b</p> <p>人民币 ¥10000000000</p> <p>版权标识 © </p> <p>注册商标 ® </p> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>常用标签</title> </head> <body> <div> <div> <div> <p> <a href=""></a> <s>999</s> </p> </div> </div> </div> <p> <a href="">下大雨了</a> </p> <!--111 222在一行,点击111就会链接到 href中的链接--> <a href="http://www.baidu.com">111 <a href="">222</a> </a> <span></span> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>常用标签2</title> </head> <body> <a href="" id="d1">页首</a> <div style="height: 100px;background-color: red"></div> <a href="" id="d2">中间</a> <div style="height: 100px;background-color: green"></div> <a href="#d1">回到顶部</a> <a href="#d2">回到中间</a> </body> </html> <img src="https://i.meizitu.net/thumbs/2019/12/202139_10a19_236.jpg" alt="这是一张美女图片" title="这个妹纸姿势还行" width="100px"> <!--src="download.jpg 不存在时，图片是裂的--> <img src="download.jpg" alt="这个葫芦娃" title="这是七娃" width="200px"> <a href="https://www.mzitu.com" target="_self" id="" class="">点我有你好看哟~</a> <a href="https://www.mzitu.com" target="_blank">点我有你好看哟~</a>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p>无序列表</p> <ul> <li>111</li> <li>222</li> <li>333</li> </ul> <p>有序列表</p> <!--type="" 引号里的可写i(小写罗马)、I（大写罗马）、A、a 不写时 默认是 点--> <ol type="i"> <li>哈哈哈</li> <li>呵呵呵</li> <li>嘿嘿嘿</li> </ol> <p>标题列表</p> <dl> <dt>标题1</dt> <dd>内容1</dd> <dd>内容2</dd> <dt>标题2</dt> <dd>内容1</dd> <dd>内容2</dd> <dt>标题3</dt> <dd>内容1</dd> <dd>内容2</dd> </dl> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table border="10"> <thead> <tr> <th>用户名</th> <th>年龄</th> <th>爱好</th> </tr> </thead> <tbody> <tr> <td>jason</td> <td>18</td> <td>study</td> </tr> <tr> <td>tank</td> <td>73</td> <td colspan="2">帅</td> <!-- <td colspan="2">DBJ</td> 中的colspan="2" 表示横着合并2个格子。 rowspan="2"表示竖着合并2个格子--> </tr> <tr> <td>sean</td> <td>80</td> <td>CNM</td> </tr> </tbody> </table> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p>用户注册功能</p> <form action=""> <p> <label for="d1">用户名:<input type="text" id="d1" name="username"></label> </p> <!-- <p>--> <!-- <label for="d2">用户名:</label>--> <!-- <input type="text" id="d2"></p>--> <p>密码:<input type="password" name="password"></p> <p>生日: <input type="date"></p> <p>性别: 男<input type="radio" name="gender"> 女<input type="radio" name="gender" checked> <!-- checked 是默认选择性别女--> </p> <p>爱好: 运动<input type="checkbox" name="hobby"> 看小说<input type="checkbox" checked > 英雄联盟<input type="checkbox"> 打人<input type="checkbox" checked> </p> <p>省份: <select name="province" id=""> <option value="">河南</option> <option value="">上海</option> <option value="">南京</option> <option value="">深圳</option> </select> </p> <p>前男友: <select name="" id="" multiple> <option value="" selected="selected">李现</option> <option value="">鹿晗</option> <option value="" selected>胡一天</option> <option value="">帅哥</option> </select> </p> <p>个人简介: <textarea name="" id="" cols="10" rows="5"></textarea> </p> <p>个人简历: <input type="file"> </p> <p> <input type="submit" value="注册"> <input type="reset" value="重置"> <input type="button" value="按钮"> <button>按我</button> </p>
五、什么是URL？
URL:统一资源定位符