前端
什么是前端
只要是跟用户打交道的界面都可以称之为前端
什么是后端？
eg：python， java，php，go,
不跟用户直接打交道的都可以称为后端
为什么学前端
为了成为全栈工程师
前端，后端， 数据库，Linux
但是，前端不会学的特别深， 要求看得懂别人写的一些简单页面和自己搭建一些简单的页面就可以了
前端的学习历程
1. HTML：网页的骨架，没有任何的样式
2. CSS：美化网页，给网页骨架添加样式的
3. JavaScript：就是让网页动起来， 简称js
软件开发架构
C/S架构
B/S架构
在浏览器地址栏输入网址，回车发生了什么事？
1. 浏览器向服务端发起请求
2. 服务器接收客户端的请求
3. 服务端处理客户端的请求，并且返回给浏览器
4. 浏览器根据特定的规则渲染页面
HTTP协议
"""
超文本传输协议，用来规定服务端和客户端之间的数据传输格式
"""
1、基于请求响应
2、基于TCP/IP协议之上的应用层协议
3、无状态
保存用户信息的一些技术：cookie， session，token。。。。
4、 短连接/无连接
长连接
请求首行 （请求方式，路径，版本号）
请求头 （一大堆kv键值对）
\r\n
请求体 （get请求没有请求体，post请求有请求体）
?k=v&k1=v1&k2=v2...
响应首行 （响应方式）
响应头 （一大堆kv键值对）
\r\n
响应体
其实就是用一些数字来表示一些复杂的信息
1xx: 数据提交成功，正在处理，你还可以进行提交
2xx：200 OK 请求成功
3xx：重定向
4xx：404 请求资源不存在， 403:请求的资源没有权限
5xx：500：服务器内部错误
1. get请求
跟服务要数据的
eg：baidu.com
2. post请求
提交数据， 比如登录，用户名和密码
HTML简介
<h1>hello baby</h1>
<a href='http://www.baidu.com'>click me</a>
<img class="index-logo-src" src="//www.baidu.com/img/flexible/logo/pc/result.png" alt="到百度首页" title="到百度首页">
标签的分类：
1. 双标签
2.单标签
HTML的书写位置
1. 在pycharm中新建html文件
2. 新建文本文档，然后修改后缀名为.html
HTML的文档结构
<!DOCTYPE html>
head中常用标签
body内常用标签
<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>
标签的分类
1. 块儿级元素
标签的嵌套
img标签
<img src="123.png" alt="这是小姐姐丢失了" title="很好看哦" width="423px" height="500px">src: 1. 外链地址 2. 本地地址title： 鼠标悬浮时候的提示， 他是所有标签都有的width： 图片的宽度，和高度等比例缩放， 宽高只需要写一个alt： 当图片加载失败的时候，显示的信息
a标签
<a href="http://www.baidu.com" target="_blank" title="点我跳转">点我跳转</a>target:
列表标签
<ul type="square"> <li>第一项</li> <li>第二项</li> <li>第二项</li> <li>第二项</li> <li>第二项</li> <li>第二项</li> <li>第二项</li> <li>第二项</li></ul>
表格
<table border="2px"> <thead> <tr> <th>ID</th> <th>name</th> <th>age</th> <th>gender</th> <th>hobbies</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>张</td> <td>18</td> <td>男</td> <td>睡觉</td> </tr> <tr> <td>2</td> <td>孟</td> <td colspan="2">30</td> <td>男</td> <td>吃奥利给</td> </tr> <tr> <td>3</td> <td>华</td> <td>19</td> <td>女</td> <td>消消乐</td> </tr> </tbody></table>
from
<form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data"> <p> <label for="d2"> 用户名：<input type="text" disabled id="d1" value="username" placeholder="手机号/邮箱" class="c1 c2 c3" name="username" > </label> </p> <p> 密码： <input type="password" class="c1" value="password" id="d2" name="password"> </p> <p> <input type="date" name="date"> </p> <p> <input type="radio" name="gender" value="1">男 <input type="radio" name="gender" value="2" checked="checked">女 <input type="radio" name="gender" value="3">其他 </p> <p> <input type="checkbox" name="hobby" value="1">搞钱 <input type="checkbox" name="hobby" checked value="2"> 洗脚 <input type="checkbox" name="hobby" checked value="3">撩妹 <input type="checkbox" name="hobby" value="4">按摩 </p> <p> <select name="city" id=""> <option value="1">上海</option> <option value="2">北京</option> <option value="3" selected>河南</option> </select> </p> <p> <input type="file" name="myfile"> </p> <p> <textarea name="text" id="" cols="30" rows="10">textarea</textarea> </p> <p> <input type="hidden" value="123" name="hidden"> </p> <p> <input type="submit" value="登录"> <input type="button" value="登录"> <button>登录</button> <input type="reset"> </p></form>
|