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教程