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实例化) ...

随机推荐

剑指Offer-12.数值的整数次方(C++/Java)
题目: 给定一个double类型的浮点数base和int类型的整数exponent.求base的exponent次方. 保证base和exponent不同时为0 分析: 注意base为0和expo ...
github 入门教程之 github 访问速度太慢怎么办
github 是全世界最流行的开源项目托管平台,其代表的开源文化从根本上改变了软件开发的方式. 基本上所有的需求都能从 github 上或多或少找到现成的实现方案,再也不用重头开始造轮子而是自定义轮子 ...
Python socket & socket server
socket 网络上的两个程序通过一个双向的通信连接实现数据的交换,这个连接的一端称为一个socket(套接字). 建立网络通信连接至少要一对socket.socket是对TCP/IP的封装使用方法 ...
stm32按键配置
前言:我们都知道开发板上除了有经典的流水灯之外,还有一个必备的练习硬件--按键(key),下面继续来完成按键的配置. 1.通过查看原理图,找出按键(key)的管脚名字和对应芯片上的I/O口,四个I/O ...
MySQL实战45讲学习笔记：第三十四讲
一.本节概述在实际生产中,关于 join 语句使用的问题,一般会集中在以下两类: 1. 我们 DBA 不让使用 join,使用 join 有什么问题呢?2. 如果有两个大小不同的表做 join,应该 ...
win10 配置python3虚拟环境
1.安装virtualenv pip install virtaulenv 2.创建虚拟环境 env03 virtualenv env03 3.切换到进入虚拟换环境脚本目录(activate) cd ...
H5 背景图片自适应屏幕问题解决办法
今天也是偶然遇到这个问题的,平成很少用到关于css的内容,就在网上找了很多个方法,最后总结以下几种很实用的方法方法1: <style> body{ background:url(beij ...
spring 注解aop调用invoke()
public static void main(String[] args) { ClassPathXmlApplicationContext context = new ClassPathXmlAp ...
js通过值获取数组对象对应下标
var nn = [ { a: 'ss' },{ a: 'aa' },{ a : '11'},{ a: '33' },{ a: '88' } ] 我要怎么获取 a = 33的下标 var index ...
LeetCode 1291. Sequential Digits
题目 class Solution { public: int ans[10005]; vector<int> sequentialDigits(int low, int high) { ...

day44_9_3前端（1）

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

随机推荐

热门专题