搬马

导航

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

 

注意嵌套规则：

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

 

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

 

 

 

 

 

 

 

 

 
posted on 2018-04-02 20:41  搬马  阅读(220)  评论(0)  编辑  收藏  举报
 
Powered by:
博客园
Copyright © 2024 搬马
Powered by .NET 9.0 on Kubernetes