Python：Day41 http、css

时间  2019-11-20
标签 python day41 day http css 栏目 Python 繁體版
原文   原文链接

HTTP（hypertext transport protocol），即超文本传输协议。这个协议详细规定了浏览器和万维网服务器之间互相通讯的规则。css

 

二、请求协议

请求协议的格式以下：html

请求首行；  // 请求方式 请求路径 协议和版本，例如：GET /index.html HTTP/1.1
请求头信息；// 请求头名称:请求头内容，即为key:value格式，例如：Host:localhost
空行；     // 用来与请求体分隔开
请求体。   // GET没有请求体，只有POST有请求体。

2.1　GET请求

HTTP默认的请求方法就是GET
     * 没有请求体
     * 数据必须在1K以内！
     * GET请求数据会暴露在浏览器的地址栏中web

GET请求经常使用的操做：
       1. 在浏览器的地址栏中直接给出URL，那么就必定是GET请求
       2. 点击页面上的超连接也必定是GET请求
       3. 提交表单时，表单默认使用GET请求，但能够设置为POSTapi

 

如下为GET的请求对信息：浏览器

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9
Connection: keep-alive
Cookie: BAIDUID=A676F216BF22E587870969A2914CE94C:FG=1; PSTM=1522585972; BIDUPSID=EBB41921E0F3A4CC440C8BC7414826EF; BD_UPN=12314353
Host: www.baidu.com
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36

 

2.2 POST请求

(1). 数据不会出如今地址栏中
(2). 数据的大小没有上限
(3). 有请求体
(4). 请求体中若是存在中文，会使用URL编码！缓存

Request Headers
Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Accept-Encoding:gzip, deflate
Accept-Language:zh-CN,zh;q=0.8
Cache-Control:no-cache
Connection:keep-alive
Content-Length:13
Content-Type:application/x-www-form-urlencoded
Cookie:csrftoken=z5H43ZwARx7AIJ82OEizBOWbsAQA2LPk
Host:127.0.0.1:8090
Origin:http://127.0.0.1:8090
Pragma:no-cache
Referer:http://127.0.0.1:8090/login/
Upgrade-Insecure-Requests:1
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_1) 
           AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.89 Safari/537.36

Form Data
username:yuan
  • Referer: http://localhost:8080/hello/index.jsp：请求来自哪一个页面，例如你在百度上点击连接到了这里，那么Referer:http://www.baidu.com；若是你是在浏览器的地址栏中直接输入的地址，那么就没有Referer这个请求头了；这个属性属于请求头，因此GET方式也有。
  • Content-Type: application/x-www-form-urlencoded：表单的数据类型，说明会使用url格式编码数据；url编码的数据都是以“%”为前缀，后面跟随两位的16进制。
  • Content-Length:13：请求体的长度，这里表示13个字节。
  • keyword=hello：请求体内容！hello是在表单中输入的数据，keyword是表单字段的名字。

 

三、响应协议

3.1响应内容服务器

响应协议的格式以下：app

响应首行；
响应头信息；
空行；
响应体。

响应内容是由服务器发送给浏览器的内容，浏览器会根据响应内容来显示。遇到<img src=''>会开一个新的线程加载，因此有时图片多的话，内容会先显示出来，而后图片才一张张加载出来。jsp

Request URL:http://127.0.0.1:8090/login/
Request Method:GET
Status Code:200 OK
Remote Address:127.0.0.1:8090

Response Headers
Content-Type:text/html; charset=utf-8
Date:Wed, 26 Oct 2016 06:48:50 GMT
Server:WSGIServer/0.2 CPython/3.5.2
X-Frame-Options:SAMEORIGIN

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="/login/" method="post">
  用户名：<input type="text" name="username"/>
  <input type="submit" value="提交"/>
</form>    
</body>
</html>

 

3.2　状态码

响应头对浏览器来讲很重要，它说明了响应的真正含义。例如200表示响应成功了，302表示重定向，这说明浏览器须要再发一个新的请求。post

  • 200：请求成功，浏览器会把响应体内容（一般是html）显示在浏览器中；
  • 404：请求的资源没有找到，说明客户端错误的请求了不存在的资源；
  • 500：请求资源找到了，但服务器内部出现了错误；
  • 302：重定向，当响应码为302时，表示服务器要求浏览器从新再发一个请求，服务器会发送一个响应头Location，它指定了新请求的URL地址；
  • 304：当用户第一次请求index.html时，服务器会添加一个名为Last-Modified响应头，这个头说明了index.html的最后修改时间，浏览器会把index.html内容，以及最后响应时间缓存下来。当用户第二次请求index.html时，在请求中包含一个名为If-Modified-Since请求头，它的值就是第一次请求时服务器经过Last-Modified响应头发送给浏览器的值，即index.html最后的修改时间，If-Modified-Since请求头就是在告诉服务器，我这里浏览器缓存的index.html最后修改时间是这个,您看看如今的index.html最后修改时间是否是这个，若是仍是，那么您就不用再响应这个index.html内容了，我会把缓存的内容直接显示出来。而服务器端会获取If-Modified-Since值，与index.html的当前最后修改时间比对，若是相同，服务器会发响应码304，表示index.html与浏览器上次缓存的相同，无需再次发送，浏览器能够显示本身的缓存页面，若是比对不一样，那么说明index.html已经作了修改，服务器会响应200。

 

 

 

 

 

 

CSS的引入方式：

一、行内式

<p style="color: red;background: aqua">hello p</p>

两个键值对之间用分号隔开

 

二、嵌入式

      嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。

<head>
    <style>
        div{
            color: blue;
            background: red;
        }
    </style>
</head>

div是属性，color属性名，blue是属性值

 

三、连接式

    <link rel="stylesheet" href="css.css" type="text/css">

 

四、导入式

 将一个独立的.css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，<style>标记也是写在<head>标记中

    <style>
        @import "css.css";
    </style>

注意：

      导入式会在整个网页装载完后再装载CSS文件，所以这就致使了一个问题，若是网页比较大则会儿出现先显示无样式的页面，闪烁一下以后，再出现网页的样式。这是导入式固有的一个缺陷。使用连接式时与导入式不一样的是它会以网页文件主体装载前装载CSS文件，所以显示出来的网页从一开始就是带样式的效果的，它不会象导入式那样先显示无样式的网页，而后再显示有样式的网页，这是连接式的优势。

 

 

CSS选择器

“选择器”指明了{}中的“样式”的做用对象，也就是“样式”做用于网页中的哪些元素

一、基础选择器

（1）通用选择器

<head>
    <style>
        *{
            font-size: 40px;
        }
    </style>
</head>

不管嵌套几层，这个通用选择器都能选到。

 

（2）标签选择器

<head>
    <style>
        div{
            font-size: 100px;
        }
    </style>
</head>

找到全部div标签，不论嵌套几层，都能找出来。

<head>
    <style>
        div {
            color: red;
        }
    </style>
</head>

<body>
<p class="c1">hello p</p>
<div>hello div
    <p id="p1">hello p2......</p>
    <p class="c1">hello p3.....</p>
    <div class="c2">
        <p class="c1">p4.....</p>
    </div>
</div>
</body>

div下的全部内容都变，包括嵌套的全部标签都变

 

(3)id选择器

<head>
    <style>
        #p1{
            background: yellow;
        }
    </style>
</head>

<body>
<p class="c1">hello p</p>

<div id="outer">hello div
    <p id="p1">hello p2......</p>
    <p class="c1">hello p3.....</p>
</div>

 

 

（3）class选择器

<head>
    <style>
        #p1{
            background: yellow;
        }
        .c1{
            color: green;
        }
    </style>
</head>

<body>
<p class="c1">hello p</p>

<div id="outer">hello div
    <p id="p1">hello p2......</p>
    <p class="c1">hello p3.....</p>
</div>

 

 

（4）后代选择器（日后不论套多少层都变）

<head>
    <style>
        div p{
            color: red;
        }
    </style>
</head>

<body>
<div>hello div
    <p id="p1">hello p2......</p>
    <p class="c1">hello p3.....</p>
</div>
</body>

 

<head>
    <style>
        div .c1{
            color: red;
        }
    </style>
</head>

<body>
<p class="c1">hello p</p>

<div>hello div
    <p id="p1">hello p2......</p>
    <p class="c1">hello p3.....</p>
</div>
</body>

 

 

<head>
    <style>
        #outer .c1 {
            color: red;
        }
    </style>
</head>

<body>
<p class="c1">hello p</p>
<div id="outer">hello div
    <p id="p1">hello p2......</p>
    <p class="c1">hello p3.....</p>
    <div class="c2">
        <p class="c1">p4.....</p>
    </div>
</div>
</body>

结果是p3p4都变红。

<head>
    <style>
        div c2 .c1{
            color: red;
        }
    </style>
</head>

<body>
<p class="c1">hello p</p>
<div>hello div
    <p id="p1">hello p2......</p>
    <p class="c1">hello p3.....</p>
    <div class="c2">
        <p class="c1">p4.....</p>
    </div>
</div>
</body>

将上面的c2换成div效果同样。

 

（5）子代选择器（只有下一层变化，日后孙子层就不影响了）

<head>
    <style>
        #outer>.c1 {
            color: red;
        }
    </style>
</head>

<body>
<p class="c1">hello p</p>
<div id="outer">hello div
    <p id="p1">hello p2......</p>
    <p class="c1">hello p3.....</p>
    <div class="c2">
        <p class="c1">p4.....</p>
    </div>
</div>
</body>

 

 

二、组合选择器

（1）多元素选择器

<head>
    <style>
        #p,#p1,.c1{
            color: red;
        }
    </style>
</head>

<body>
<p id="p">hello p</p>
<div id="outer">hello div
    <p id="p1">hello p2......</p>
    <p class="c1">hello p3.....</p>
    <div class="c2">
        <p class="c1">p4.....</p>
    </div>
</div>
</body>

 

（2）毗邻选择器

<head>
    <style>
        #outer+p{
            color: red;
        }
    </style>
</head>

<body>
<p id="p">hello p</p>
<div id="outer">hello div
    <p id="p1">hello p2......</p>
    <p class="c1">hello p3.....</p>
    <div class="c2">
        <p class="c1">p4.....</p>
    </div>
</div>

<p>------P--------</p>
<p>_____p______</p>
</body>

只有下一个P标签会变红，其它都不变

 

注意嵌套规则：

  1. 块级元素能够包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。
  2. 有几个特殊的块级元素只能包含内联元素，不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dt
  3. li内能够包含div
  4. 块级元素与块级元素并列、内联元素与内联元素并列。

 

三、属性选择器

<head>
    <style>
        [class]{
            color:red;
        }
        [id]{
            color: green
        }
        [class="div1"]{
            background: yellow;
        }
    </style>
</head>
<body>

<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
<div id="ddd">ididid</div>

</body>

 

自定义属性

<head>
    <style>
        [alex]{
            color: red;
        }
    </style>
</head>
<body>

<div class="div1" alex="sb">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
<div id="ddd">ididid</div>

</body>
</html>

 

<head>
    <style>
        p[class="div1"]{
            color:red;
        }
    </style>
</head>
<body>

<div class="div1" alex="sb">div1</div>
<p class="div1">div2</p>
<div class="div3">div3</div>
<div id="ddd">ididid</div>

</body>
</html>

 

E[att]         匹配全部具备att属性的E元素，不考虑它的值。（注意：E在此处能够省略，好比“[cheacked]”。如下同。）   p[title] { color:#f00; }

 
 E[att=val]     匹配全部att属性等于“val”的E元素                                 div[class=”error”] { color:#f00; }

 
 E[att~=val]    匹配全部att属性具备多个空格分隔的值、其中一个值等于“val”的E元素      td[class~=”name”] { color:#f00; }

 E[attr^=val]    匹配属性值以指定值开头的每一个元素                     div[class^="test"]{background:#ffff00;}

 E[attr$=val]    匹配属性值以指定值结尾的每一个元素                     div[class$="test"]{background:#ffff00;}

 E[attr*=val]    匹配属性值中包含指定值的每一个元素                     div[class*="test"]{background:#ffff00;}

 

 

四、伪类(Pseudo-classes)

CSS伪类是用来给选择器添加一些特殊效果。

anchor伪类：专用于控制连接的显示效果

<head>
    <mate></mate>
    <style>
        a:link{
            color: red;
        }
        a:hover{
            color:yellow;
        }
        a:visited{
            color:purple;
        }
        a:active{
            color: green;
        }
        p:before{
            content:'pp';
            color:red;
        }
        div p:after{
            content:'success'
        }
    </style>
</head>
<body>
<a href="http://www.baidu.com">百度1</a>
<p>hello p</p>
<div>
    <p>test</p>
</div>
</body>

 

 

CSS属性

 颜色属性 
<div style="color:blue">ppppp</div>

<div style="color:#fe3">ppppp</div>      http://www.114la.com/other/rgb.htm，
#后面若是相连两个字母为相同的，能够简写，如ffee33能够简写为fe3

<div style="color:rgb(255,0,0)">ppppp</div>

<div style="color:rgba(255,0,0,0.5)">ppppp</div>    后面一个参数为透明度

 

字体属性

font-size: 20px/50%/larger
 
font-family:'Lucida Bright'
 
font-weight: lighter/bold/border/
 
<h1 style="font-style: oblique">老男孩</h1>

 

 背景属性

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .back{
            border:1px solid red;
            width:1200px;
            height:500px;
            background-image: url('meinv.png');
            background-repeat: no-repeat;
            background-position: 0 center;
            background-size:200px 100px;
        }
    </style>
</head>
<body>

<div class="back"></div>

</body>

 

属性里面的值都是以键值对的形式出现的，另外背景图片后面接的关键字是url，而且里面的内容用括号括起来，而且用引号引发来

 

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span{
            display: inline-block;
            width: 18px;
            height: 20px;
            background-image:url(http://dig.chouti.com/images/icon_18_118.png?v=2.13);
            background-repeat: no-repeat;
            background-position: 0 0;
        }
    </style>
</head>
<body>

<span></span>

</body>

 

文本属性

font-size: 10px;

text-align: center;   横向排列

line-height: 200px;   文本行高 通俗的讲，文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比

vertical-align:－4px  设置元素内容的垂直对齐方式 ,只对行内元素有效，对块级元素无效

text-indent: 150px;   首行缩进
letter-spacing: 10px;
word-spacing: 20px;
text-transform: capitalize;

 

外边距和内边距：

咱们一般对元素设置高度和宽度指的是设置内容的宽度和高度，整个元素的大小须要加上内边距和边框。因此设置内边距和边框会改变整个元素的大小，在视觉上和总体上都会变大。

 

 

 

 https://blog.csdn.net/huoshendawo_mo/article/details/49667869

 

 

float属性

block元素能够设置width、height、margin、padding属性

inline元素能够设置width、height，可是不生效，也能够设置margin、padding，可是只有水生平效，垂直不生效。

常见的block元素有：div、h1~h六、p、dl、ol、ul、form、table

常见的inline元素有：span、a、input、select、lable、textarea、br、image、em、strong

 

浮动框能够向左向右移动，直接他的外边缘碰到包含框或另外一个浮动框的边框为止。

现象1：

 假如某个div元素A是浮动的，若是A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(若是一行放不下这两个元素，那么A元素会被挤到下一行)；若是A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部老是和上一个元素的底部对齐。此外，浮动的框以后的block元素元素会认为这个框不存在，但其中的文本依然会为这个元素让出位置。 浮动的框以后的inline元素，会为这个框空出位置，另起一行，而后按顺序排列。

 

清除浮动：

.clearfix:after {             <----在类名为“clearfix”的元素内最后面加入内容； 
content: ".";                 <----内容为“.”就是一个英文的句号而已。也能够不写。 
display: block;               <----加入的这个元素转换为块级元素。 
clear: both;                  <----清除左右两边浮动。 
visibility: hidden;           <----可见度设为隐藏。注意它和display:none;是有区别的。visibility:hidden;仍然占据空间，只是看不到而已； 
line-height: 0;               <----行高为0； 
height: 0;                    <----高度为0； 
font-size:0;                  <----字体大小为0； 
} 
.clearfix { *zoom:1;}         <----这是针对于IE6的，由于IE6不支持:after伪类，这个神奇的zoom:1让IE6的元素能够清除浮动来包裹内部元素。

整段代码就至关于在浮动元素后面跟了个宽高为0的空div，而后设定它clear:both来达到清除浮动的效果。 之因此用它，是由于，你没必要在html文件中写入大量无心义的空标签，又能清除浮动。 

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程