Python：Day41 http、css

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

2、请求协议

请求协议的格式如下：

请求首行；  // 请求方式 请求路径 协议和版本，例如：GET /index.html HTTP/1.1

请求头信息；// 请求头名称:请求头内容，即为key:value格式，例如：Host:localhost

空行；     // 用来与请求体分隔开

请求体。   // GET没有请求体，只有POST有请求体。

2.1　GET请求

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

GET请求常用的操作：
1. 在浏览器的地址栏中直接给出URL，那么就一定是GET请求
2. 点击页面上的超链接也一定是GET请求
3. 提交表单时，表单默认使用GET请求，但可以设置为POST

以下为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、响应协议

3.1响应内容

响应协议的格式如下：

响应首行；

响应头信息；

空行；

响应体。

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

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表示重定向，这说明浏览器需要再发一个新的请求。

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的引入方式：

1、行内式

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

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

2、嵌入式

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

<head>

    <style>

        div{

            color: blue;

            background: red;

        }

    </style>

</head>

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

3、链接式

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

4、导入式

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

    <style>

        @import "css.css";

    </style>

注意：

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

CSS选择器

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

1、基础选择器

（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>

2、组合选择器

（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标签会变红，其它都不变

注意嵌套规则：

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

3、属性选择器

<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;}

4、伪类(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~h6、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文件中写入大量无意义的空标签，又能清除浮动。