python自動化開發-[第十二天]-前端html

時間 2019-12-02

標籤 python 自動化開發第十二天 2天前端 html 欄目 Python 简体版

原文原文鏈接

今日概要:javascript

　　前端基礎之htmlcss

一、web服務器的本質:　

#!/usr/bin/python
# -*- coding:utf-8 -*-



import socket

def handle_request(client):
    buf = client.recv(1024)
    client.send(b"HTTP/1.1 200 OK\r\n")
    client.send(b"Content-Type:text/html\r\n\r\n")
    client.send(b"<a href='www.baidu.com'> Hello, liujiliang </a>")
def main():
    sock = socket.socket(socket.AF_INET,socket.SOCK_STREAM)
    sock.bind(('127.0.0.1',9999))
    sock.listen(5)

    while True:
        connection, address = sock.accept()
        handle_request(connection)
        connection.close()
if __name__ == '__main__':
    main()

　　用戶使用瀏覽器訪問一個網站的過程:html

二、html的定義:　　　

超文本標記語言（Hypertext Markup Language，HTML）經過標籤語言來標記要顯示的網頁中的各個部分。一套規則，瀏覽器認識的規則
瀏覽器按順序渲染網頁文件，而後根據標記符解釋和顯示內容。但須要注意的是，對於不一樣的瀏覽器，對同一標籤可能會有不徹底相同的解釋（兼容性）主要體如今IE6以前的版本
靜態網頁文件擴展名：.html 或 .htm

　　html是一種標記語言(markup language)前端

　　html調用標記標籤來描述網頁java

三、html結構

<!DOCTYPE html> 告訴瀏覽器使用什麼樣的html或者xhtml來解析html文檔
<html></html>是文檔的開始標記和結束標記。此元素告訴瀏覽器其自身是一個 HTML 文檔，在它們之間是文檔的頭部<head>和主體<body>。
<head></head>元素出如今文檔的開頭部分。<head>與</head>之間的內容不會在瀏覽器的文檔窗口顯示，可是其間的元素有特殊重要的意義。
<title></title>定義網頁標題，在瀏覽器標題欄顯示。
<body></body>之間的文本是可見的網頁主體內容

四、html標籤格式　

　　標籤的語法：python

　　<標籤名屬性1=「屬性值1」屬性2=「屬性值2」……>內容部分</標籤名>
　　<標籤名屬性1=「屬性值1」屬性2=「屬性值2」…… />web

五、經常使用標籤　　　

　　一、<!DOCTYPE> 聲明位於文檔中的最前面的位置，處於 <html> 標籤以前。此標籤可告知瀏覽器文檔使用哪一種 HTML 或 XHTML 規範。編程

　　做用：聲明文檔的解析類型(document.compatMode)，避免瀏覽器的怪異模式。

　　document.compatMode：瀏覽器

1. BackCompat：怪異模式，瀏覽器使用本身的怪異模式解析渲染頁面。
2. CSS1Compat：標準模式，瀏覽器使用W3C的標準解析渲染頁面。

　　這個屬性會被瀏覽器識別並使用，可是若是你的頁面沒有DOCTYPE的聲明，那麼compatMode默認就是BackCompatbash

　　<head>內經常使用標籤

　　<meta標籤>

　　　　meta介紹
　　　　<meta>元素可提供有關頁面的元信息（meta-information），針對搜索引擎和更新頻度的描述和關鍵詞。
　　　　<meta>標籤位於文檔的頭部，不包含任何內容。
　　　　<meta>提供的信息是用戶不可見的

　　　　meta標籤的組成：meta標籤共有兩個屬性，它們分別是http-equiv屬性和name 屬性，不一樣的屬性又有不一樣的參數值，這些不一樣的參數值就實現了不一樣的網頁功能。

　　　　(1)name屬性: 主要用於描述網頁，與之對應的屬性值爲content，content中的內容主要是便於搜索引擎機器人查找信息和分類信息用的。

　　　　(2)http-equiv屬性：至關於http的文件頭做用，它能夠向瀏覽器傳回一些有用的信息，以幫助正確地顯示網頁內容，與之對應的屬性值爲content，content中的內容其實就是各個參數的變量值。

　　<非meta標籤> 　　　

    <title>oldboy</title>
    <link rel="icon" href="http://www.jd.com/favicon.ico">
    <link rel="stylesheet" href="css.css">
    <script src="hello.js"></script>

　　 例子:

<!DOCTYPE html>
<html lang="en">
<head id="1">
    <!--head爲標籤-->
    <!--id=1爲屬性-->
    <meta charset="UTF-8">
    <!--設置跳轉-->
    <!--<meta http-equiv="refresh" content="5;Url = http://www.baidu.com/"/>-->
    <!--描述-->
    <meta name="description" content="京東JD.COM-專業的綜合網上購物商城,銷售家電、數碼通信、電腦、家居百貨、服裝服飾、母嬰、圖書、食品等數萬個品牌優質商品.便捷、誠信的服務，爲您提供愉悅的網上購物體驗!" />
    <!--關鍵字-->
    <meta name="Keywords" content="網上購物,網上商城,手機,筆記本,電腦,MP3,CD,VCD,DV,相機,數碼,配件,手錶,存儲卡,京東" />
    <!--用IE最新的引擎去渲染html-->
    <meta http-equiv="X-UA-COMPATIBLE" content="IE=Edge">
    <!--頭部圖標-->
    <link rel="shortcut icon" href="favicon.ico">
    <!--頭部標題-->
    <title>京東</title>
</head>
<body>

　　body內經常使用標籤

　　　基本標籤(塊級標籤和內聯標籤) --> 塊級標籤獨佔一行,內聯標籤不獨佔一行

<hn>: n的取值範圍是1~6; 從大到小. 用來表示標題.

<p>: 段落標籤. 包裹的內容被換行.而且也上下內容之間有一行空白.

<b> <strong>: 加粗標籤.

<strike>: 爲文字加上一條中線.

<em>: 文字變成斜體.

<sup>和<sub>: 上角標 和 下角表.

<br>:換行.

<hr>:水平線

　　　　特殊字符：< &gt；&quot；©®

　　　　　　　　  對應一個空格,由於若是在html裏添加多個空格也只會顯示一個空格,因此用 &nbsp會佔用多個空格

　　　div和span標籤

　　　　<div></div> ： <div>只是一個塊級元素，並沒有實際的意義。主要經過CSS樣式爲其賦予不一樣的表現.
　　　　<span></span>： <span>表示了內聯行(行內元素),並沒有實際的意義,主要經過CSS樣式爲其賦予不一樣的表現.

　　　　塊級元素與行內元素的區別
　　　　所謂塊元素，是以另起一行開始渲染的元素，行內元素則不需另起一行。若是單獨在網頁中插入這兩個元素，不會對頁面產生任何的影響。
　　　　這兩個元素是專門爲定義CSS樣式而生的。

　　 圖形標籤:<img>

'''
src: 要顯示圖片的路徑.

alt: 圖片沒有加載成功時的提示.

title: 鼠標懸浮時的提示信息.

width: 圖片的寬

height:圖片的高 (寬高兩個屬性只用一個會自動等比縮放.)

'''

　　　例子:　　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>校花</div>
    <img src="xiaohua.jpg" alt="校花" title="最美校花" width="800px" height="800px">
</body>
</html>

　　超連接標籤(錨標籤) <a> <a/>

　　什麼是超級連接？

　　　　所謂的超連接是指從一個網頁指向一個目標的鏈接關係，這個目標能夠是另外一個網頁，也能夠是相同網頁上的不一樣位置，還能夠是一個圖片，一個電子郵件地址，一個文件，甚至是一個應用程序

'''

<a href="" target="_blank" >click</a>

href屬性指定目標網頁地址。該地址能夠有幾種類型：

    絕對 URL - 指向另外一個站點（好比 href="http://www.jd.com）
    相對 URL - 指當前站點中確切的路徑（href="index.htm"）
    錨 URL - 指向頁面中的錨（href="#top"）

'''

　　　　_blank 有的是時候,超連接是在瀏覽器新建立一個窗口訪問連接,沒有的時候就在當前窗口直接跳轉

　　　　a標籤當作錨的狀況:　　　

    <!--a標籤可以跳轉href,錨-->
    <!--不加target會在本身頁面上跳轉,加上_blank會開啓另一個頁面請求-->
    <a href="http://www.oldboyedu.com" target="_blank">老衲海</a>
    <a href="#c1">第一章</a>
    <a href="#c2">第二章</a>
    <a href="#c3">第三章</a>

    <div id="c1" style="height: 700px;background-color: aqua">今天我去買菜了</div>
    <div id="c2" style="height: 700px;background-color: aliceblue">今天我去買菜了</div>
    <div id="c3" style="height: 700px;background-color: blueviolet">今天我去買菜了</div>

　　列表標籤　

<ul>: 無序列表 [type屬性：disc(實心圓點)(默認)、circle(空心圓圈)、square(實心方塊)]

<ol>: 有序列表
         <li>:列表中的每一項.

<dl>  定義列表

         <dt> 列表標題
         <dd> 列表項

　　例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
        <ul>
            <li>1111</li>
            <li>2222</li>
            <li>3333</li>
        </ul>

        <ol>
            <li>1111</li>
            <li>2222</li>
            <li>3333</li>
        </ol>

         <dl>
             <dt>河北省</dt>
             <dd>保定</dd>
             <dd>石家莊</dd>
             <dd>雄安</dd>
         </dl>
</body>
</html>

　　表格標籤(table):

　　　　表格概念
　　　　　　表格是一個二維數據空間，一個表格由若干行組成，一個行又有若干單元格組成，單元格里能夠包含文字、列表、圖案、表單、數字符號、預置文本和其它的表格等內容。
　　　　　　表格最重要的目的是顯示錶格類數據。表格類數據是指最適合組織爲表格格式（即按行和列組織）的數據。
　　　　表格的基本結構：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table border="1" cellpadding="10px" cellspacing="5px">
        <tr>
            <th>標題</th>
            <th>端口</th>
            <th>姓名</th>
            <th>年齡</th>
        </tr>
        <tr>
            <td>111</td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
        </tr>
        <tr>
            <!--佔兩列-->
            <td colspan="2">222</td>
            <td>222</td>
            <!--佔兩行-->
            <td rowspan="2">222</td>
        </tr>
        <tr>
            <td>333</td>
            <td>333</td>
            <td>333</td>
        </tr>
    </table>
</body>
</html>

示例代碼

<tr>: table row

<th>: table head cell

<td>: table data cell

屬性:

    border: 表格邊框.

    cellpadding: 內邊距

    cellspacing: 外邊距.

    width: 像素 百分比.（最好經過css來設置長寬）

    rowspan:  單元格豎跨多少行

    colspan:  單元格橫跨多少列（即合併單元格）

　　練習:

　　1、菜譜

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

    </style>
</head>
<body>
        <table border="1" style="border: 1px solid #F00" cellpadding="0px" cellspacing="0px">
            <tr>
                <td colspan="3" style="text-align: center " >星期一菜譜</td>
            </tr>
            <tr>
                <td rowspan="2">素菜</td>
                <td>青椒茄子</td>
                <td>花椒扁豆</td>
            </tr>
            <tr>

                <td>小蔥豆腐</td>
                <td>炒白菜</td>
            </tr>
            <tr>
                <td rowspan="2">葷菜</td>
                <td>油燜大蝦</td>
                <td>海蔘魚翅</td>
            </tr>
            <tr >
                <td style="width: 400px">鍋包肉
                    <img src="guobaorou.jpg" alt="guobaorou " style="width: 300px;height: 150px">
                </td>
                <td style="width: 150px">烤全羊</td>
            </tr>

        </table>

</body>
</html>

菜譜

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

    </style>
</head>
<body>
        <div style="width: 500px;text-align: center">課程表</div>
        <table border="1" cellspacing="5px" cellpadding="5px" style="border: 1px solid deepskyblue">
            <tr>
                <td>項目</td>
                <td colspan="5" style="text-align: center">上課</td>
                <td colspan="2">休息</td>
            </tr>
            <tr>
                <td>星期</td>
                <td>星期一</td>
                <td>星期二</td>
                <td>星期三</td>
                <td>星期四</td>
                <td>星期五</td>
                <td>星期六</td>
                <td>星期日</td>
            </tr>
            <tr>
               <td rowspan="4">上午</td>
                <td>語文</td>
                <td>數學</td>
                <td>英語</td>
                <td>英語</td>
                <td>物理</td>
                <td>計算機</td>
                <td rowspan="4">休息</td>
            </tr>
            <tr>
                <td>數學</td>
                <td>數學</td>
                <td>地理</td>
                <td>歷史</td>
                <td>化學</td>
                <td>計算機</td>
            </tr>
           <tr>
                <td>化學</td>
                <td>語文</td>
                <td>體育</td>
                <td>計算機</td>
                <td>英語</td>
                <td>計算機</td>
            </tr>
           <tr>
                <td>政治</td>
                <td>英語</td>
                <td>體育</td>
                <td>歷史</td>
                <td>地理</td>
                <td>計算機</td>
            </tr>
            <tr>
               <td rowspan="2">下午</td>
                <td>語文</td>
                <td>數學</td>
                <td>英語</td>
                <td>英語</td>
                <td>物理</td>
                <td>計算機</td>
                <td rowspan="2">休息</td>
            </tr>
            <tr>
                <td>數學</td>
                <td>數學</td>
                <td>地理</td>
                <td>歷史</td>
                <td>化學</td>
                <td>計算機</td>
            </tr>
        </table>

</body>
</html>

課程表

　　　 表單標籤(form)

　　功能：表單用於向服務器傳輸數據，從而實現用戶與Web服務器的交互

　　表單可以包含input系列標籤，好比文本字段、複選框、單選框、提交按鈕等等。

　　表單還能夠包含textarea、select、fieldset和 label標籤。

　　表單屬性

　　action: 表單提交到哪.通常指向服務器端一個程序,程序接收到表單提交過來的數據（即表單元素值）做相應處理，好比https://www.sogou.com/web

　　 method: 表單的提交方式 post/get默認取值就是get

　　表單元素

　　基本概念：
　　　　HTML表單是HTML元素中較爲複雜的部分，表單每每和腳本、動態頁面、數據處理等功能相結合，所以它是製做動態網站很重要的內容。
　　　　表單通常用來收集用戶的輸入信息
　　　　表單工做原理：
　　　　訪問者在瀏覽有表單的網頁時，可填寫必需的信息，而後按某個按鈕提交。這些信息經過Internet傳送到服務器上。
　　　　服務器上專門的程序對這些數據進行處理，若是有錯誤會返回錯誤信息，並要求糾正錯誤。當數據完整無誤後，服務器反饋一個輸入完成的信息

　　　 input系列表單

'''
<1> 表單類型

type:        text 文本輸入框

             password 密碼輸入框

             radio 單選框

             checkbox 多選框  

             submit 提交按鈕            

             button 按鈕(須要配合js使用.) button和submit的區別？

             file 提交文件：form表單須要加上屬性enctype="multipart/form-data" 
            
            上傳文件注意兩點：
請求方式必須是post
enctype="multipart/form-data"

 <2> 表單屬性

 name:    表單提交項的鍵.

           注意和id屬性的區別：name屬性是和服務器通訊時使用的名稱；
           而id屬性是瀏覽器端使用的名稱，該屬性主要是爲了方便客戶端編程，而在css和javascript中使用的

value:    表單提交項的值.對於不一樣的輸入類型，value 屬性的用法也不一樣：

                type="button", "reset", "submit" - 定義按鈕上的顯示的文本
                 
                type="text", "password", "hidden" - 定義輸入字段的初始值
                 
                type="checkbox", "radio", "image" - 定義與輸入相關聯的值


checked:  radio 和 checkbox 默認被選中

readonly: 只讀. text 和 password

disabled: 對所用input都好使.

'''

　　select標籤　

'''
 <select> 下拉選標籤屬性


          name:表單提交項的鍵.

          size：選項個數

          multiple：multiple 
                 <optgroup>爲每一項加上分組

                 <option> 下拉選中的每一項 屬性：

                       value:表單提交項的值.   
                       selected: selected下拉選默認被選中

'''

            <!--單選下拉框-->
            <!--checked設定默認值-->
            <select name="city">
                <option value="bj" checked="checked">北京</option>
                <option value="sh">上海</option>
                <option value="shahe">沙河</option>
            </select>
            <!--多選下拉框-->
            <!--selected默認值-->
            <select name="city2" multiple>
                <option value="bj" selected="selected">北京</option>
                <option value="sh">上海</option>
                <option value="shahe">沙河</option>
            </select>
        </div>

　　textarea 多行文本框

'''

<form id="form1" name="form1" method="post" action="">
        <textarea cols=「寬度」 rows=「高度」 name=「名稱」>
                   默認內容
        </textarea>
</form>

'''

　　label標籤

　　　　定義：<label> 標籤爲 input 元素定義標註（標記）。
　　說明：
　　　　1 label 元素不會向用戶呈現任何特殊效果。
　　　　2 <label> 標籤的 for 屬性值應當與相關元素的 id 屬性值相同。

'''

<form method="post" action="">

        <label for=「username」>用戶名</label>
        <input type=「text」 name=「username」 id=「username」 size=「20」 />
</form>

'''

　　fieldset標籤

'''

<fieldset>
    <legend>登陸吧</legend>
    <input type="text">
</fieldset>

'''

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。