嘘~ 正在从服务器偷取页面 . . .

django

django
python
发布日期:   2021-11-18
文章字数:   4.2k
阅读次数:  

Django

Django官方文档

B站教学视频

刘江的博客教程

url

统一资源定位符

请求和相应

请求是指浏览器端通过Http协议发送给服务器端的数据

响应是指服务器端接收到请求后做相应的处理后再回复给浏览器

请求

在Django中就是视图函数中的第一个参数,Django接收到http协议的请求后,会根据请求数据报文创建HttpRequest对象,该对象通过属性描述了请求的所有相关信息

  • path_info:URL字符串
  • method:字符串，表示HTTP请求方法，常用值: ‘GET’、’POST’
  • GET:QueryDict查询字典的对象，包含get请求方式的所有数据
  • POST: QueryDict查询字典的对象，包含post请求方式的所有数据
  • FILES:类似于字典的对象,包含所有的上传文件信息
  • COOKIES: Python字典,包含所有的cookie,键和值都为字符串
  • session:似于字典的对象,表示当前的会话
  • body:字符串,请求体的内容(POST或PUT).
  • scheme:请求协议(‘http’/‘https’)
  • request.get_full_path():请求的完整路径
  • request.META:请求中的元数据(消息头),request.META['REMOTE_ADDR']:客户端IP地址

响应

HTTP状态码的英文为HTTP Status Code,常见的响应状态码有:

  • 200-请求成功 2开头是成功
  • 301-永久重定向-资源(网页等)被永久转移到其它URL-
  • 302-临时重定向 3开头是重定向
  • 404-请求的资源(网页等)不存在 4开头是客户端错误
  • 500-内部服务器错误 5开头是服务端错误
# 向客户端返回响应,同时返回响应内容
# 比如响应数据类型是html,浏览器就按照html解析
HttpResponse(content=响应体,
             content_type=响应体数据类型,
             status=状态码)

常见的content type:

  • 'text/html’(默认的，html文件)
  • 'text/plain’(纯文本)
  • 'text/css'(css文件)
  • 'text/javascript’(js文件)
  • 'multipart/form-data’(文件提交)
  • 'application/json'(json传输)
  • 'application/xml’(xml文件)

GET和POST

# Django处理GET请求,查询字符串–少量数据传递
if request.method == 'GET':
    pass
# Django处理POST请求,专用于浏览器提交数据
elif request.method == 'POST':
    pass

什么是模板

HTML

Bilibili视频,讲得很好

基础知识

什么是网页

网站是指在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合。
网页是网站中的一“页”，通常是HTML格式的文件，它要通过浏览器来阅读。
网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页常见以.htm 或.html后缀结尾的文件，因此将其俗称为HTML文件。

什么是HTML

HTML指的是超文本标记语言(Hyper Text MarkupLanguage)**，它是用来描述网页的一种语言。HTML不是一种编程语言，而是一种标记语言(markuplanguage). 标记语言是一套标记标签(markup tag).
**所谓超文本，有2层含义∶
1.它可以加入图片、声音、动画、多媒体等内容（超越了文本限制)。
2.它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本)。

浏览器内核

浏览器内核（渲染引擎)︰负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。

浏览器 内核 备注
IE Trident IE、猎豹安全、360极速浏览器、百度浏览器
firefox Gecko 火狐浏览器内核
Safari Webkit 苹果浏览器内核
chrome/Opera Blink chrome / opera浏览器内核。Blink其实是 WebKit的分支。

Web标准

Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合。W3C(万维网联盟）是国际最著名的标准化组织。
遵循Web标准除了可以让不同的开发人员写出的页面更标准、更统一。

Web标准主要包括**结构(Structure )、表现( Presentation )和行为(Behavior )**三个方面:

  • 结构用于对网页元素进行整理和分类，现阶段主要学的是HTML。
  • 表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS
  • 行为是指网页模型的定义及交互的编写，现阶段主要学的是Javascript

Web标准提出的最佳体验方案:结构、样式、行为相分离。简单理解∶结构写到HTML文件中，表现写到CSS文件中，行为写到JavaScript文件中。

双标签:<html></html>

单标签:<br />

基本标签

<!--标题标签,从h1-h6-->
<h1></h1>
<h6></h6>
<!--段落标签,paragraph-->
<p></p>
<!--换行标签,break-->
<!--<br />标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。-->
<br />
# 文本格式化
# 加粗
<strong></strong>
<b></b>
# 倾斜
<em></em>
<i></i>
# 删除线
<del></del>
<s></s>
# 下划线
<ins></ins>
<u></u>
# 盒子,无语义,用来装内容 division分割,分区 span跨度,跨距
<div></div> # 是一个大盒子,一个独占一行
<span></span># 小盒子,一行可以放多个span
# 图像标签,属性之间部分先后顺序,空格分隔,
# alt:图片显示不出来时显示的文字,title:鼠标放到图片上时显示出来的文字 
# width:设定宽度 height:设定高度 border:设定边框粗细
<img src="图像URL" alt="" title="" width="400" height="500" border="15"/>
<!--超链接标签 anchor-->
# 1.外部链接:"http://www.baidu.com"
# _self:当前窗口打开 _blank:新窗口打开
# 2.内部链接:"a.html"
# 3.空链接:"#"
# 4.下载链接:"img.zip" "img.exe"
# 5.网页元素链接:<a href="http://www.baidu.com"><img src="img.jpg"/></a>
# 6.锚点链接,快速定位到页面中的某个位置,<a href="#two">第二集</a> <h3 id="two">第二集</h3>
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
# 空格,No-Break Space
&nbsp;
# 列表标签,用来布局,列表最大的特点就是整齐、整洁、有序，它作为布局会更加自由和方便。
# 无序列表
<ul>
    <li>列表项1,li之间相当于一个容器,可以放任何元素</li>
    <li>列表项2</li>
    <li>列表项3</li>
    ...
</ul>
# 有序列表
<ol>
    <li>列表项1,li之间相当于一个容器,可以放任何元素</li>
    <li>列表项2</li>
    <li>列表项3</li>
    ...
</ol>
# 自定义列表
<dl>
    <dt>名词1</dt>
    <dd>名词1解释1</dd>
    <dd>名词1解释2</dd>
</dl>
# 表单标签,使用表单的目的是为了收集用户信息
# 在HTML中,一个完整的表单通常由表单域、表单控件(也称为表单元素)和提示信息3个部分构成。
image-20211120165652952 
# 表单域,<form>会把它范围内的表单元素信息提交给服务器
<form>action="用于指定接收并处理表单数据的服务器程序的url地址" method="提交方式,get或post" name="表单域名称"</form>
# 表单标签
# 输入标签
<input type="text/password/radio单选框,可以多选/checkbox复选框/submit提交按钮,表单域的信息发送给服务器/reset重置按钮/button点击按钮,用于通过js启动脚本/file文件域,上传文件使用" name="表单名字,比如radio必须有相同的名字才能实现单选,复选框要有相同的值" value="默认值" checked="单选框和复选框默认打√" maxlength="正整数,规定输入字符长度的最大值" accet="只能与<input type="file">配合使用。它规定能够通过文件上传进行提交的文件类型。image/gif,image/jpeg,如果不限制图像的格式，可以写为:image/*" >
# label标签,经常与表单标签搭配使用
# <label>标签用于绑定一个表单元素当点击<label>标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验.
# for和id必须对应
<label for="sex">男</ label>
<input type="radio" name="sex"id="sek" />
# 下拉表单
<select>
    <option selected="selected">山东</option>
    <option>北京</option>
    <option>天津</option>
    <option>火星</option>
</select>
# 文本域,定义多行文本输入
<textarea cols="一行多少字" rows="有几行,实际上不会使用,都是用CSS来改变大小">pink老师,我知道这个反馈留言是textarea来做的</textarea>

CSS3

Bilibili视频,讲得很好

Cascading Style Sheets,层叠样式表

基础知识

CSS主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式边距等)以及版面的布局和外观显示样式。CSS让我们的网页更加丰富多彩,布局更加灵活自如。简单理解:CSS可以美化HTML,让HTML更漂亮让页面布局更简单。

CSS 规则由两个主要的部分构成:选择器以及一条或多条声明。

image-20211122102343607

# 在<head></head>里写
<style>
    /*选择器{样式]*/
    /*给谁改样式{改什么样式}*/
    p {
        color: red;/*虽然大写COLOR: RED也行,但提倡小写*/
        font-size: 12px;/*文字大小为12像素*/
    }
</style>

CSS选择器的作用

选择器(选择符)就是根据不同需求把不同的标签选出来这就是选择器的作用。简单来说，就是选择标签用的。

CSS做了两件事:

  1. 找到所有的h1标签。选择器(选对人)。
  2. 设置这些标签的样式,比如颜色为红色(做对事)。

选择器分为基础选择器和复合选择器两个大类，我们这里先讲解一下基础选择器。
基础选择器是由单个选择器组成的,基础选择器又包括:标签选择器、类选择器、id选择器和通配符选择器。

# 标签选择器(元素选择器)是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。
# 能快速为页面中同类型的标签统一设置样式。
# 不能设计差异化样式,只能选择全部的当前标签。
<style>
    p {
        color: red;/*虽然大写COLOR: RED也行,但提倡小写*/
        font-size: 12px;/*文字大小为12像素*/
    }
</style>
# 类选择器,如果想要差异化选择不同的标签,单独选一个或者某几个标签,可以使用类选择器。
.类名{
    属性1:属性值1;
    ...
}
<style>
    .red {
        color: red;
    }
</style>
<div class= 'red'>变红色</div>
# 多类名,(1)在标签class属性中写多个类名(2)多个类名中间必须用空格分开
# 可以调用公共的类,也可以调用自己独有的类
<div class="red font20">亚瑟<ldiv>
# id选择器,只能调用一次,别人切勿使用
<style>
    #pink {
        color: pink;
    }
</style>
<div id="pink">迈克尔·杰克逊</div>
# 通配符选择器,在CSS中,通配符选择器使用“*”定义,它表示选取页面中所有元素（标签)。
# 通配符选择器不需要调用,自动就给所有的元素使用样式
<style>
    * {
        color:red;
    }
</style>

CSS的引入方式

按照CSS样式书写的位置(或者引入的方式),CSS样式表可以分为三大类:

  1. 行内样式表(行内式)
  2. 内部样式表(嵌入式)
  3. 外部样式表(链接式）

内部样式表

内部样式表(内嵌样式表)是写到html页面内部。是将所有的CSS代码抽取出来,单独放到一个<style>标签中。

<style>标签理论上可以放在HTML文档的任何地方，但一般会放在文档的<head>标签中。通过此种方式,可以方便控制当前整个页面中的元素样式设置。

代码结构清晰,但是并没有实现结构与样式完全分离。使用内部样式表设定CSS，通常也被称为嵌入式引入，这种方式是我们练习时常用的方式。

行内样式表

行内样式表(内联样式表)是在元素标签内部的style属性中设定CSS样式,适合于修改简单样式。

<div style="color: red; font-size: 12px;">青春不常在，抓紧谈恋爱</div>

外部样式表

实际开发都是外部样式表。适合于样式比较多的情况,核心是:样式单独写到CSS文件中,之后把CSS文件引入到HTML页面中使用。

引入外部样式表分为两步:
1.新建一个后缀名为.css 的样式文件,把所有CSS代码都放入此文件中。

2.在HTML页面中,使用<link>标签引入这个文件。<link rel="定义当前文档与被链接文档之间的关系,stylesheet" href="定义所链接外部样式表文件的URL,css文件路径">

Chrome调试工具

打开Chrome浏览器，按下F12键或者右击页面空白处→检查。

调试工具太强了~

JavaScript

MDN文档

基础知识

WebAPIs

Js 基础学习ECMAScript基础语法为后面作铺垫,Web APIs 是 Js 的应用,大量使用js基础语法做交互效果.

Web API是浏览器提供的一套操作浏览器功能和页面元素的API( BOM和DOM)。

现阶段我们主要针对于浏览器讲解常用的API,主要针对浏览器做交互效果。比如我们想要浏览器弹出一个警示框,直接使用alert(弹出’)

什么是DOM

文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标记语言(HTML或者XML )的标准编程接口。W3C已经定义了一系列的DOM接口,通过这些DOM接口可以改变网页的内容、结构和样式。

DOM树

image-20211122153608301

  • 文档:一个页面就是一个文档,DOM中使用document表示
  • 元素:页面中的所有标签都是元素,DOM中使用element表示
  • 节点∶网页中的所有内容都是节点(标签、属性、文本、注释等),DOM中使用node表示

获取元素

// 使用getElementByld()方法可以获取带有ID的元素对象。
<script>
    // 1.因为我们文档页面从上往下加载，所以先得有标签所以我们script写到标签的下面
    // 2.驼峰命名法
    // 3.参数id是大小写敏感的字符串
    // 4.返回的是一个对象
    var timer = document.getElementById('time');
    console.log(timer);
    console.log(typeof timer);
    // 5.查看里面的属性和方法
    console.log(dir(timer))

</script>

<script>
    // 1.返回的是获取过来元素对象的集合以伪数组的形式存储的
    var lis = document.getElementsByTagName('li');
    console.log(lis);
    for (var i = o; i< lis.length;i++)
        console.log(lis[i]);
    }
    // 2.如果页面中只有一个li返回的还是伪数组的形式
    // 3.如果页面中没有这个元素返回的空的伪数组的形式
    // 5. element.getElementsByTagName('标签名');
    var ol = document.getElementsByTagName('ol');// [ol]
    console.log(ol[0].getElementsByTagName('li'));
</script>

# 获取body和html元素
<script>
    //1.获取body元素
    var bodyEle = document.body;
    console.log(bodyEle);
    console.dir(bodyEle);//2.获取html元素
    var htmlEle = document.documentElement;
    console.log(htmlEle);
</script>

事件基础

JavaScript使我们有能力创建动态页面,而事件是可以被JavaScript侦测到的行为。简单理解∶触发—响应机制。网页中的每个元素都可以产生某些可以触发JavaScript的事件,例如,我们可以在用户点击某按钮时产生一个事件,然后去执行某些操作。

<body>
    <button id="btn">唐伯虎</button>
    <script>
    //点击一个按钮，弹出对话框
    //1．事件是有三部分组成Ⅰ事件源﹑事件类型事件处理程序―我们也称为事件三要素1/(1）事件源事件被触发的对象谁按钮
    var btn = document.getElementById( ' btn " );
    //(2）事件类型﹑如何触发什么事件比如鼠标点击(onclick)还是鼠标经过还是键盘按下
    //(3）事件处理程序通过一个函数赋值的方式完成
    btn.onclick = function()i
    alert('点秋香');
    </script>
</ body>

节点操作

文章作者: dch
文章链接: http://chenghaoDong666.github.io/django/
版权声明: 本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 dch !
django
赏
评论
  目录