day44_9_3前端（1）

一。http协议。

　　1.在软件开发架构中有两种模式：1.b/s。2.c/s。

　　其中b/s就是以浏览器作为客户端，所以，需要服务器同一遵循同一规则，向浏览器发送数据，这个规则就是http协议，存在以应用层，会话层，表示层的协议。

　　当我们在浏览页面时，每当有一个对后端的操作时，都会有以下几个步骤：

　　　　1.浏览器向服务端发送请求。

　　　　2.服务点接受请求。

　　　　3.服务端发送响应。

　　　　4.浏览器接受响应。对页面进行渲染。

　　2.http协议中有4种特性：

　　　　1.基于请求响应。

　　　　2.基于tcp/ip之上的作用于应用层的协议。

　　　　3.无状态。每当一个人访问服务器时，都无法保存该用户的信息。

　　　　4.无连接。每有一次请求之后，就会断开连接。两者之间就不在有任何联系。

　　　　　　　　（可以通过websocket来实现长连接的数据传输）

　　3.请求数据格式：

　　　　请求首行（标识HTTP协议版本，当前请求方式）

　　　　请求头(一大堆k,v键值对)

　　　　请求体(携带的是一些敏感信息比如密码,身份证号...)

　　注意，请求头和请求体之间要空一行。

　　4.响应数据格式

　　　　响应首行（标识HTTP协议版本，当前请求方式）

　　　　响应头(一大堆k,v键值对)

　　　　响应体(返回给浏览器页面的数据通常响应体都是html页面)

　　5.响应状态码：

　　　　是一种使用一串简单数字表示一些复杂的状态或者提示信息。

　　　　1XX:服务端已经成功接收了你的数据正在处理你可以继续提交额外的数据

　　　　2XX:服务端成功响应你想要的数据(请求成功200)

　　　　3XX:重定向(当你在访问一个需要登录之后才能访问的页面你会发现窗口会自动调到登录页面 301 ，302)

　　　　4XX:请求错误(请求资源不存在404,请求不合法不符合内部规定会权限不够403)

　　　　5XX:服务器内部错误(500)

　　5.请求方式

　　　　1.get请求

　　　　朝服务端要资源(比如浏览器窗口输入www.baidu.com)

　　　　2.post请求

　　　　朝服务端提交数据(比如用户登录提交用户名和密码)

　　URL:统一资源定位符。就是网址

二。html注释：

　　注释是代码之母

<!--

　　多行注释

　　-->

　　一般情况下 html的注释都会按照下面的方式书写

三。html的标签

　　1.HTML文档结构

　　<html>

　　<head></head>:head内的标签不是用来展示给用户看的而是定义一些配置主要是给浏览器看的　　

　　　　head标签中有meta标签，位于文档的头部，其中的http-equiv属性，相当于htto文件头的作用。

　　　　content中的内容是各个参数的变量值。

　　　　name属性就是描述网页，使搜索引擎更容易搜到。对应的conntent就是用来描述网站的关键字。

　　<body></body>:body内的标签就是浏览器展示给用户看的内容

　　</html>

　　2.打开html的两种方式。

　　　　1.找到文件路径选择浏览器打开

　　　　2.pycharm快捷方式直接打开

　　3.标签分类：

　　　　1.双标签：（<h1></h1>,<a></a>）

　　　　2.单标签：（<img>）

　　4.head内常用标签

　　　　title用来显示网页标题

　　　　style用来控制样式的内部支持写css代码

　　　　script内部支持写js代码也支持导入外界的js文件

　　　　link专门用来引入外部的css文件

　　5.标签的分类2.

　　　　1.。块级标签。

　　　　　　<dir>,<p>,<h>这类的标签，特点时hi独占一行。

　　　　　　1.块儿级标签可以修改长宽

　　　　　　2.块儿级标签内部可以嵌套任意的块级标签，但是p标签虽然是块儿级标签，他不能够其他块儿级标签包括自身可以嵌套行内标签。

　　　　2.行内标签。

　　　　　　自身的文本有多大，就占有多大。

　　　　　　如同：span，b ，s，i，u等标签。

四。body内常用标签。

　　1.基本标签：

　　　　h标签：标题标签。

　　　　p标签：段落标签。

　　2.符号：

　　　　空格： 

　　　　> :>

　　　　<:<

　　　　￥：¥

　　　　& ：&

　　　　®：&reg；

　　　　©：&copy；

　　3.常用标签：

　　　　div 框架搭建。

　　　　span。按钮。

　　　　p：文本

　　　　img：图片。

　　　　img中的属性：

　　　　　　src存放的是图片的路径(该路径可以是本地的也可以是网上的)。

　　　　　　也可以放url(会自动请求该url获取相应数据)。

　　　　　　也可以直接放图片的二进制数据会自动转换成图片

　　　　　　alt：当图片加载不出来时，显示的提示信息。

　　　　　　title：当图片加载不出来的时候，显示的提示信息。

　　　　　　height，width，当你只指定一个参数的时候，另一个会等比缩放。

　　　　a标签：超文本链接：

　　　　a中的一些属性

　　　　　　href后面存放url的时候。点击跳转到该url。

　　　　　　如果该链接没有被点过那么默认是蓝色,只要点过依次之后都是紫色。

　　　　　　target 默认是_self当前页面跳转，_blank新建页面跳转。

　　　　锚点功能(回到顶部)

　　　　　　href还可以写另一个a标签的id值,点击就会跳到id值所对应的a标签。

五：标签的三大属性

　　每一个标签都应该有三个比较重要的属性。

　　1.id值该值就类似于人的身份证号在用一个html文档id应该保证唯一不重复

　　2.class值该值就类似于面向对象里面的继承可以写多个

　　3.style(不是必备) 支持在标签内直接写css代码属于行内样式优先级最高。

　　补充任何标签都支持自定义属性!!!

六。列表标签。

　　无序列表 <ul>

　　　　无序列表中的type，规定样式。

　　　　disc（实心圆点。默认值）

　　　　circle（空心圆圈）

　　　　square（实心方块）

　　　　none（五样式）

　　有序列表 <ol>

　　　　有序列表定义后其列表前会序号，序号需要使用属性type 和start来指定其样式和起始序号。

　　　　type：

　　　　　　1，A，a，I，i

　　标题列表 <dl>

　　　　dl时总的列表。

　　标题<dt>

　　　　dt显示标题

　　内容　　

　　　　<dd>显示内容。

七。表格标签。

　　table:建立一个表格。

　　　　其中，表属性里的cellpadding，表示的数值时表中的字与表内边距的距离。

　　　　cellspacing中的数据指的是表内边距与表外边距之间的距离。

　　thead，建立表格第一行。

　　tbody，建立表格其他内容。

　　tr建立一行表。

　　td建立一行中的一列表。

　　简易在thead内使用th，在tbody中使用td。

　　当需要一个单元格占两行或两列时需要用到以下属性。

　　　　colspan表示水平方向。

　　　　rowspan表示垂直方向。

　　　　border 表格边框

　　　　width像素。

八。表单。

　　表单常常使用于数据的提交。最常用的就是用户名与密码的判断。

　　　form:创建一个表单。

　　　　form中的action属性表示的是数据提交的目的地，1.不写默认提交当前页面所在路径。

　　　　2。写路径需要编写全路径。

　　　　3.编写路径的后缀。

　　input标签，定义一个提交单位。

　　其中的type属性就表示他提交何种属性数据。

　　text:普通文本

　　password:密文不展示明文

　　date:日期

　　submit:触发提交动

　　button:普通按钮没有实际意义但是可以通过js绑定事件实现自定义动作

　　reset:重置表单内容

　　radio:单选可以通过checked控制默认选择(当属性值和属性名相同的情况下可以简写 checked)。checked="checked"

　　checkbox:多选同上可以设置默认值

　　file:获取用户上传的文件。

　　select标签。

　　　　select标签定义了一个下拉选择菜单。默认是单选，可以通过multiple变成多选。

　　　　如果想设置默认选择，用selected（selected = ‘selected'）

　　　　select中需要使用到option标签来设置选项。

　　　　使用optgroup功能可以为option加标题分区，其中label是指定标题名字。

　　<textarea>标签

　　　　获取用户输入的大段文本。

　　　　属性:rows行数。

　　　　　　cols列数

　　<label>标签。

　　　　其中的for属性所只的是一个id值。点击该字段会自动跳转到id对应的input

　　form表单默认的是get请求，可以通过method参数来换成post来提交数据。　　

　　form表单中要想触发提交动作只有两种情况可以

　　form表单需要提交文件时需要设置enctype其中的文件格式。

　　1.input标签type指定成submit

　　2.直接写button标签获取用户输入(输入选择上传...)的标签。都必须有一个name属性。

　　这个name属性就类似于字典的key,而标签获取到的用户写入的值就类似于字典的value。

<input type="text" id="d1" name="username" value="默认值">

　　name就像是字典中的key，而value就像是字典的值。获取的信息都会被放入value中。

表单相关属性：

属性	描述
accept-charset	规定在被提交表单中使用的字符集（默认：页面字符集）。
action	规定向何处提交表单的地址（URL）（提交页面）。
autocomplete	规定浏览器应该自动完成表单（默认：开启）。
enctype	规定被提交数据的编码（默认：url-encoded）。
method	规定在提交表单时所用的 HTTP 方法（默认：GET）。
name	规定识别表单的名称（对于 DOM 使用：document.forms.name）。
novalidate	规定浏览器不验证表单。
target	规定 action 属性中地址的目标（默认：_self）。

　　相关属性说明：

　　　　disabled:禁用。

　　　　value = ’‘定义提交时选项值

　　　　readonle:将该表单设置为不能修改状态。也就是只读状态。

　　　　checked，设置radio和checkbox中的默认选择值

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>test</title>

    <style>

    div form p+select{

        color: blue;

        }

</style>

</head>

<body>

<div>

    <h3>注册界面</h3>

    <form action="http://127.0.0.1:5000/index/" method="post">

        <p><label for="d1">username:</label><input id="d1" name="username" value=""></p>

        <p><label for="d2">password:</label><input id="d2" name="password" value=""></p>

        <p><label for="d3">生日：</label><input id="d3" type="date" name="brith" value=""></p>

        <p>男：<input type="radio" name="sex" value="male" checked>女：<input type="radio" name="sex" value="female"></p>

        <p>爱好：唱<input type="checkbox" name="hobby" value="sing" checked>

            跳<input type="checkbox" name="hobby" value="jump">

            rap<input type="checkbox" name="hobby" value="rap"></p>

        <p>地址：<select name="dz">

                    <option value="sh">上海市</option>

                    <option value="bj" selected>北京市</option>

                    <option value="sz">深圳市</option>

                 </select></p>

        <p>补充：<textarea name="bc" value="" cols="10" rows="3">补充内容</textarea></p>

        <select name="" id="">

            <optgroup label="上海">

                <option value="">嘉定区</option>

                <option value="" selected>浦东新区</option>

                <option value="">静安区</option>

            </optgroup>

            <optgroup label="北京">

                <option value="">朝阳区</option>

                <option value="">海淀区</option>

                <option value="">昌平区</option>

            </optgroup>

            <optgroup label="安徽">

                <option value="">芜湖市</option>

                <option value="">合肥市</option>

                <option value="">安庆市</option>

            </optgroup>

        </select>

        <input type="submit">

    </form>

</div>

</body>

</html>

简易注册。。

补充：flask搭建接受数据：

from flask import Flask,request

app = Flask(__name__)

@app.route('/index/',methods=["GET","POST"])

def index():

    print(request.form)  # 获取前端form表单提交过来的数据

    print(request.files)

    file_obj = request.files.get("avatar")

    file_obj.save('xxx.pdf')

    return '收到了'

app.run()

使用socket模拟返回验证码：

import socket

server = socket.socket()

server.bind(('192.168.12.81',8180))

#192.168.12.81

server.listen(5)

while True:

    conn,addr = server.accept()

    data = conn.recv(1024)

    print(data.decode())

    conn.send(b'HTTP/1.1 200 OK\r\n\r\n')

    with open('a.txt','rb') as f:

        res = f.read()

    conn.send(res)

    conn.close()

day44_9_3前端（1）的更多相关文章

构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案（四）
通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 ja ...
常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案（三）
前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的插件生态可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...
前端极易被误导的css选择器权重计算及css内联样式的妙用技巧
记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...
总结：Mac前端开发环境的搭建（配置）
新年新气象,在2016年的第一天,我入手了人生中第一台自己的电脑(大一时好友赠送的电脑在一次无意中烧坏了主板,此后便不断借用别人的或者网站的).macbook air,身上已无分文...接下来半年的房 ...
Fis3的前端工程化之路[三大特性篇之声明依赖]
Fis3版本:v3.4.22 Fis3的三大特性资源定位:获取任何开发中所使用资源的线上路径内容嵌入:把一个文件的内容(文本)或者base64编码(图片)嵌入到另一个文件中依赖声明:在一个文本文 ...
Fis3的前端工程化之路[三大特性篇之内容嵌入]
Fis3版本:v3.4.22 Fis3的三大特性资源定位:获取任何开发中所使用资源的线上路径内容嵌入:把一个文件的内容(文本)或者base64编码(图片)嵌入到另一个文件中依赖声明:在一个文本文 ...
Fis3的前端模块化之路[基础篇]
Fis3版本:v3.4.22 fis3是一个构建工具解决前端开发中自动化工具.性能优化.模块化框架.开发规范.代码部署.开发流程等问题. 安装 npm install -g fis3 运行 fis3 ...
细说前端自动化打包工具--webpack
背景记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.用过Dreamweaver的都知道,做网页就像用word编辑文档 ...
通过AngularJS实现前端与后台的数据对接（二）——服务（service，$http）篇
什么是服务? 服务提供了一种能在应用的整个生命周期内保持数据的方法,它能够在控制器之间进行通信,并且能保证数据的一致性. 服务是一个单例对象,在每个应用中只会被实例化一次(被$injector实例化) ...

随机推荐

（day55）七、查询优化、MTV和MCV、choices、AJAX、序列化
目录一.ORM查询优化 (一)only与defer (1)only (2)defer (二)select_related与prefatch_related (1)select_related (2) ...
开源规则引擎 drools
java语言开发的开源业务规则引擎 DROOLS(JBOSS RULES )具有一个易于访问企业策略.易于调整以及易于管理的开源业务规则引擎,符合业内标准,速度快.效率高.业务分析师或审核人员可以利用 ...
hasattr、getattr、setattr、delattr、反射
目录 hasattr getattr setattr delattr 反射的应用 __import__(了解) 思考: 在做程序开发中,我们常常会遇到这样的需求:需要执行对象里的某个方法,或需要调用对 ...
django自定义错误处理
要实现自定义错误处理的功能,总共分4步: 1.创建html错误页 2.配置settings ,当DEBUG=True,则不会生效 3.编写视图 4.配置url views.py def page_ ...
A1093 Count PAT's (25 分)
一.技术总结这是一个逻辑题,题目大职意思是可以组成多少个PAT,可以以A为中心计算两边的P和T,然后数量乘积最后相加便是答案. 还有一个注意的是每次相加后记得mod,取余,不要等到最后加完再取余,会 ...
Codechef September Challenge 2019 Division 2
Preface 这确实应该是我打过的比较水的CC了(其实就打过两场) 但由于我太弱了打的都是Div2,所以会认为上一场更简单,其实上一场Div的数据结构是真的毒好了废话不多说快速地讲一下 A Eas ...
Luogu P4341 [BJWC2010]外星联络
题目描述暴力思路: 暴力枚举子串,插入trie树中,按字典序输出大于1的end的值时间复杂度:n3 结果:TLE 0分 ...非常尴尬的一点不剩正解思路经过观察发现,可以只枚举后缀,统计时输出 ...
分布式共识算法 (四) BTF算法（区块链使用）
系列目录分布式共识算法 (一) 背景分布式共识算法 (二) Paxos算法分布式共识算法 (三) Raft算法分布式共识算法 (四) BTF算法一.引子前面介绍的算法,无论是 Paxos ...
【新特性速递】树控件结构由单层 TR 改为 TR-TD-TABLE 层级嵌套
FineUIPro/Mvc/Core的下个版本(v6.1.0),我们对树控件进行了优化,由原来的单层 TR 改为 TR-TD-TABLE 层级嵌套,从而做到表里如一. 上个版本(v6.0.0),我们对 ...
MySQL如果频繁的修改一个表的数据，那么这么表会被锁死。造成假死现象。
MySQL如果频繁的修改一个表的数据,那么这么表会被锁死.造成假死现象. 比如用Navicat等连接工具操作,Navicat会直接未响应,只能强制关闭软件,但是重启后依然无效. 解决办法: 首先执行: ...

day44_9_3前端（1）

day44_9_3前端（1）的更多相关文章

随机推荐

热门专题