一。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.符号:

    空格:&nbsp;

    > :&gt;

    <:&lt;

    ¥:&yen;

    & :&amp;

    ®:&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)的更多相关文章

  1. 构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案(四)

    通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 ja ...

  2. 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案(三)

    前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...

  3. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

  4. 总结:Mac前端开发环境的搭建(配置)

    新年新气象,在2016年的第一天,我入手了人生中第一台自己的电脑(大一时好友赠送的电脑在一次无意中烧坏了主板,此后便不断借用别人的或者网站的).macbook air,身上已无分文...接下来半年的房 ...

  5. Fis3的前端工程化之路[三大特性篇之声明依赖]

    Fis3版本:v3.4.22 Fis3的三大特性 资源定位:获取任何开发中所使用资源的线上路径 内容嵌入:把一个文件的内容(文本)或者base64编码(图片)嵌入到另一个文件中 依赖声明:在一个文本文 ...

  6. Fis3的前端工程化之路[三大特性篇之内容嵌入]

    Fis3版本:v3.4.22 Fis3的三大特性 资源定位:获取任何开发中所使用资源的线上路径 内容嵌入:把一个文件的内容(文本)或者base64编码(图片)嵌入到另一个文件中 依赖声明:在一个文本文 ...

  7. Fis3的前端模块化之路[基础篇]

    Fis3版本:v3.4.22 fis3是一个构建工具 解决前端开发中自动化工具.性能优化.模块化框架.开发规范.代码部署.开发流程等问题. 安装 npm install -g fis3 运行 fis3 ...

  8. 细说前端自动化打包工具--webpack

    背景 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.用过Dreamweaver的都知道,做网页就像用word编辑文档 ...

  9. 通过AngularJS实现前端与后台的数据对接(二)——服务(service,$http)篇

    什么是服务? 服务提供了一种能在应用的整个生命周期内保持数据的方法,它能够在控制器之间进行通信,并且能保证数据的一致性. 服务是一个单例对象,在每个应用中只会被实例化一次(被$injector实例化) ...

随机推荐

  1. 鲜贝7.3--python安装

    方法一:google 搜索 anaconda 进入官网下载64位最新版本 勾选加入环境变量 +默认3.7 打开cmd pip 发现已经完成安装 右键此电脑 属性 高级属性 环境变量 ’ 已经被加入 方 ...

  2. mysql里的insert

    insert不跟where 比如 insert into table (name) value('******')where id =1 肯定不行的 insert 语句 是插入语句,不跟条件的. 如果 ...

  3. MNIST-神经网络的经典实践

    MNIST手写体数字识别是神经网络的一个经典的入门案例,堪称深度学习界的”Hello Word任务”. 本博客基于python语言,在TensorFlow框架上对其进行了复现,并作了详细的注释,希望有 ...

  4. H5开发 连接蓝牙打印机 打印标签(斑马ZR628)

    1.连接蓝牙打印机(先用手机自带蓝牙进行配对),然后绑定出已配对的蓝牙设备(用来选择/切换打印机之用),代码如下 已配对蓝牙设备,中显示的就是已连接的,点击一下即可 代码: <!DOCTYPE ...

  5. c#菜单动态合并 z

    说明 在程序中经常使用弹出菜单,并且一个窗体中可以存在多个弹出菜单.开发过MDI窗体的读者可能都知道,当MDI子窗体最大化时,子窗体和主窗体的菜单能够自动的合并.这是如何实现的呢?本例实现了将两个弹出 ...

  6. 解决 cannot find reference 'LSHForest' in '__init__.py'

    from sklearn.neighbors import LSHForest cannot find reference 'LSHForest' in '__init__.py'报错 pip3 li ...

  7. 大话设计模式Python实现-工厂方法模式

    工厂方法模式(Factory Method Pattern):定义一个用于创建对象的接口,让子类决定实例化哪一个类,工厂方法使一个类的实例化延时到其子类. #!/usr/bin/env python ...

  8. 【shell脚本】批量修改扩展名===modifyExtension.sh

    前提:需切换到需要批量修改扩展名的目录下,运行脚本 [root@VM_0_10_centos shellScript]# cat modifyExtension.sh #!/bin/bash # 编写 ...

  9. Java代理类Proxy的用法

    代理(proxy) 利用代理可以在运行时创建一个实现了一组给定接口的新类.这种功能只有在编译时无法确定需要实现哪个接口时才有必要使用. 何时使用代理 假设有一个表示接口的Class对象(有可能只包含一 ...

  10. locally weighted regression - CS229

    欠拟合和过拟合 看下方的三张图 第一幅拟合为了 y=θ0+θ1xy=θ0+θ1x 的一次函数 第二幅拟合为了y=θ0+θ1x+θ2x2y=θ0+θ1x+θ2x2 的二次函数 第三幅拟合为了 y=∑5j ...