Python 前端 HTTP HTML標籤

時間 2019-11-30

標籤 python 前端 http html 標籤欄目 Python 简体版

原文原文鏈接

HTTP

1.什麼是http:超文本傳輸協議，規定了瀏覽器與服務端數據的傳輸格式。css

2.http四大特性：html

#1.基於請求響應。前端

#2.基於tcp/ip，做用於應用層的協議。html5

#3.無狀態：服務端沒法保存用戶狀態，一個連接不管來多少次都不會記住web

#4.無鏈接：請求一次響應一次，以後立馬斷開連接。瀏覽器

#ps:web至關於http的一個大補丁，支持常連接。服務器

3.架構

請求數據格式：tcp

#1.請求首行：http協議版本，請求方式（post或get）ide

# 2.請求頭：一大堆k，v鍵值對

# 3. /r/n：空白符

# 4.請求體：一些敏感的信息如密碼，身份證號

響應格式

#1.響應首行：http協議版本，響應狀態碼

#2.響應頭：一大堆 k,v鍵值對

#3./r/n：空白符

#4.響應體：返回給瀏覽器的數據一般是html文件

4.響應狀態碼：用一串簡單的數字來表示一些複雜的狀態或者提示信息

#1. 1xx:服務端成功接收數據正在處理，你能夠繼續提交額外數據。

#2. 2xx:服務端成功響應你要的數據（200請求成功）

#3. 3XX:重定向（當你訪問一個須要登陸的頁面時，自動跳轉到登陸頁面 301 302）

#4. 4xx:請求錯誤（404請求資源不存在，403請求不合法不符合內部規定，權限不夠）

# 5.5XX：服務器內部錯誤（500，502網關錯誤）

5.請求方式：

#1.get

向服務端要數據(好比瀏覽器窗口輸入www.baidu.com)

#2.post

向服務端提交數據（好比用戶登陸提交用戶名和密碼）

6.URL：同一資源定位符（其實就是網址）

前端

1.什麼是前端：直接與用戶交互的頁面均可以稱之爲前端，前端分爲HTML5(內容）、CSS3（外觀樣式）、JavaScript（動態效果）三大部分。

HTML

1.什麼是html5:HTML5就是html語言，數字5是該語言的版本號；html語言開發的文件是以.html爲後綴，製做運行在瀏覽器上展示給用戶使用的前端界面，採用的語言是超文本標記語言(HyperText Mark-up Language)。

一 web服務的本質

瀏覽器中敲入網址回車發送了幾件事?
  1.瀏覽器超服務端發送請求
  2.服務端接收請求
  3.服務端返回相應的響應
  4.瀏覽器接收響應  根據特定的規則渲染頁面展現給用戶看

web服務本質

二 html註釋

1. 文檔指令：<!DOCTYPE html>
    -- 須要出如今一個html文件的最上方，表明該文件採用html5語法進行編寫文件的

2.html註釋

註釋是代碼之母
        <!--單行註釋-->
        <!--
        多行註釋
        多行註釋
        -->
    通常狀況下 html的註釋都會按照下面的方式書寫
    <!--導航條樣式開始-->
    
    <!--導航條樣式結束-->

指令和html註釋

三 html結構

<html>
        <head></head>:head內的標籤 不是用來展現給用戶看的  而是定義一些配置 主要是給瀏覽器看的
        <body></body>:body內的標籤 就是瀏覽器展現給用戶看的內容
</html>

html文檔結構

四 html轉義符

1. 空格：&nbsp;
2. 字符"：&quot;
3. 字符&：&amp;
4. 字符<：&lt;
5. 字符>：&gt;
6.字符￥：&yen;
7.字符©：&copy
8.字符;：&reg

轉義符

五 html基本標籤

標籤分類：

標籤的分類1:
        1.雙標籤(<h1></h1> <a></a>)
        2.單標籤(自閉和標籤 <img/>)
標籤的分類2
        1.塊兒級標籤(獨佔瀏覽器一行)
            div  p  h  
            1.塊兒級標籤能夠修改長寬
            2.塊兒級標籤內部能夠嵌套任意的塊級標籤
                可是p標籤雖然是塊兒級標籤  可是他不可以其餘塊兒級標籤 包括自身
                能夠嵌套行內標籤
            總結:
                只要是塊兒級標籤 均可以嵌套行內標籤
                p標籤只能嵌套行內 其餘塊兒級能夠嵌套任意的塊兒級標籤
        2.行內標籤(自身文本多大就佔多大)
            span b s i u 
        
        div和span一般都是用來構建網頁佈局的

標籤分類

head內經常使用標籤

1. 網頁標題標籤：<title></tile>
2.樣式標籤：<style></style>       用來控制樣式的 內部支持寫css代碼
3.連接標籤：<link />   專門用來引入外部的css文件
4.腳本標籤：<script></script>    內部支持寫js代碼  也支持導入外界的js文件
5.元標籤：<meta />  #1.關鍵字搜索 #2.描述

head內經常使用標籤

body內經常使用標籤

1. 換行標籤：<br />
2. 分割線標籤：<hr />
3. 標題標籤：<h1></h1> ... <h6></h6>
4. 段落標籤：<p></p>
5. 斜體標籤：<i></i>
6. 加粗標籤：<b></b>
7.<u>下劃線</u>
8.<s>刪除</s>
9."架構"標籤：<div></div>  塊級標籤
10.行文本標籤：<span></span> 行內標籤

body內經常使用標籤

body內超連接標籤和錨點

<a href="https://www.baidu.com/" target=""_blank"> 前往百度</a>

#1.href後面存放url的時候  點擊跳轉到該url，若是該連接沒有被點過 那麼默認是藍色,只要點過依次 以後都是紫色
#2.target 默認是_self當前頁面跳轉，_blank新建頁面跳轉

錨點功能(回到頂部或所需位置)
href還能夠寫另外一個a標籤的id值,點擊就會跳到id值所對應的a標籤
#1.
<!-- 種下錨點：該a標籤不能在頁面中顯示文本，用全局屬性name來種下一個叫top的錨點 -->
<a name="top"></a>
<!-- 返回錨點：href中用 #錨點名 來表示要前往的錨點，點擊 "返回top" 會自動回到頁面頂 -->
<a href="#top">返回top</a>

#2.
<a href="" id="d1">頂部</a>
<div style="height: 1000px;background-color: red"></div>
<a href="" id="d2" class="c1">中間</a>
<div style="height: 1000px;background-color: green"></div>
<a href="#d2">會到中間</a>
<div style="height: 1000px;background-color: yellow"></div>
<a href="#d1" username="jason" password="123">點我回到頂部</a>

超連接標籤和錨點

body內圖片連接

<img src="" alt="" title="">

src存放的是圖片的路徑(該路徑能夠是本地的也能夠是網上的)
                    1.也能夠放url(會自動請求該url獲取相應數據)
                    2.也能夠直接放圖片的二進制數據 會自動轉換成圖片
                    
alt當圖片加載不出來的時候 顯示的提示信息
                
title當鼠標懸浮在圖片上 提示的信息
                
#修改圖片大小：height,width 當你只指定一個參數的時候 另一個會等比例縮放

圖片連接

body內列表標籤

<!-- 無序列表 -->
<!--ul>li{列表項}*3-->
<ul type="disc">
    <li>列表項</li>
    <li>列表項</li>
    <li>列表項</li>
</ul>

type屬性：

 disc（實心圓點，默認值）
 circle（空心圓圈）
 square（實心方塊）
 none（無樣式）


<!-- 有序列表 -->
<!--ol>li{第$項}*3-->
<ol type="1" start="2">
    <li>第1項</li>
    <li>第2項</li>
    <li>第3項</li>
</ol>

type屬性：

 1 數字列表，默認值
 A 大寫字母
 a 小寫字母
 Ⅰ大寫羅馬
 ⅰ小寫羅馬

有序和無序

<dl>
    <dt>標題1</dt>
    <dd>內容1</dd>
    <dd>內容2</dd>
    <dt>標題2</dt>
    <dd>內容1</dd>
    <dd>內容2</dd>
    <dt>標題3</dt>
    <dd>內容1</dd>
    <dd>內容2</dd>
</dl>

普通列表標籤

body內表格標籤

<table border="1" cellspacing="0" cellpadding="10">
    <caption>表格標題</caption>
    <thead>
        <tr>
            <th>標題</th>
            <th>標題</th>
            <th>標題</th>
            <th>標題</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="2">單元格</td><!-- 合併2行單元格 -->
            <td colspan="2">單元格</td><!-- 合併2列單元格 -->
            <!-- <td>單元格</td> --><!-- 該列單元格被合併 -->
            <td>單元格</td>
        </tr>
        <tr>
            <!-- <td>單元格</td> --><!-- 該行單元格被合併 -->
            <td>單元格</td>
            <td>單元格</td>
            <td>單元格</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>單元格</td>
            <td>單元格</td>
            <td>單元格</td>
            <td>單元格</td>
        </tr>
    </tfoot>
</table>

<!--
標籤部分：
1. table表格標籤
2. caption表格標題標籤
3. thead表格頭部區域標籤，tbody表格主體區域標籤，tfoot表格尾部區域標籤，都可以省略別寫
4. tr表格行標籤
5. th表格標題單元格標籤，td表格普通單元格標籤

全局屬性部分：
1. border表格的邊框寬度
2. cellspacing單元格直接的間距
3. cellpadding單元格內部的間距
4. rowspan合併行單元格
5. colspan合列行單元格

表格標籤

# colspan表示的水平方向
rowspan表示的豎直方向

body內表單標籤

<form actio="" method="" enctype="">
    <label></label>
     <p><label for="d1">username:<input type="text" id="d1" name="username"></label></p>
    <p><label for="d2">password:<input type="password" id="d2" name="password"></label></p>
    <select name="list">
        <option value="val1">列表項</option>
        <option value="val2">列表項</option>
    </select>
    <textarea></textarea>
    <button type="button">按鈕</button>
    <input type="submit" value="提交">
</form>


標籤部分：
1. from表單標籤
2. 普通文本標籤
3. input輸入標籤，經過全局屬性type的值來肯定具體是什麼類型的輸入標籤
4. select表單中的列表標籤，option列表項標籤
5. textarea文本域標籤
6. button按鈕標籤

#1.form全局屬性
 1. action：提交表單數據給後臺的地址，
         #不寫的狀況下 默認提交到當前頁面所在的路徑
     #寫全路徑(https://www.baidu.com)
     #路徑後綴(/index/)
 2. method：提交數據的方式(get或post)
 3. enctype：提交數據的編碼格式
    #form表單傳文件的時候 須要指定enctype參數
#2.input標籤tpye屬性值與分類
 1. text：普通文本輸入框
 2. password：密文文本輸入框
 3. radio：name的值同樣時單選能夠經過checked控制默認選擇(當屬性值和屬性名相同的狀況下 能夠簡寫 checked)  checked="checked"
4. checkbox：複選框，該類型input標籤也有個全局屬性checke用同單選框，多個複選框用name值來標識屬於同一組複選框，如都表明愛好的複選框的name都應該叫hobby
5. file：文件輸入，該類型input標籤有個全局屬性multiple，屬性值省略，表明同時能夠選取多文件提交給後臺
6. submit：提交表單信息給後臺，用value設置提交按鈕的顯示內容
7.reset:重置表單內容


select標籤
select表單中的列表標籤，option列表項標籤;optgroup分組
默認是單選  能夠經過multiple變成多選，若是想默認選擇  用selected  (selected="selected")
例：
<p>省市1:
        <select name="province" id="">
            <option value="sh">上海市</option>
            <option value="bj">北京市</option>
            <option value="sz">深圳市</option>
        </select>
 </p>


<p>省市1:
        <select name="" id="">
            <optgroup label="上海">
                <option value="">嘉定區</option>
                <option value="" selected>浦東新區</option>
                <option value="">靜安區</option>
            </optgroup>
            <optgroup label="北京">
                <option value="">朝陽區</option>
                <option value="">海淀區</option>
                <option value="">昌平區</option>
            </optgroup>
            <optgroup label="安徽">
                <option value="">蕪湖市</option>
                <option value="">合肥市</option>
                <option value="">安慶市</option>
            </optgroup>
        </select>
 </p>

button標籤tpye屬性值與分類
1. button：不一樣按鈕，默認點擊後無任何操做
2. reset：重置按鈕，默認點擊後會還原表單的全部操做
3. submit：提交按鈕，和type爲submit的input標籤功能同樣，將表單信息提交給後臺


總結
1.form表單默認是get請求 你須要經過method參數 換成post提交
2.form表單中 要想觸發提交動做 
3.只有兩種狀況能夠
  1.input標籤type指定成submit
  2.直接寫button標籤type指定成submit
            
4.獲取用戶輸入(輸入 選擇 上傳...)的標籤 都必須有一個name屬性
 這個name屬性就相似於字典的key,而標籤獲取到的用戶寫入的值就相似於字典的value
5.form表單傳文件的時候 須要指定enctype參數