前端 HTML

阿新 • • 發佈：2017-08-30

需要接收 ron 雲南一行文字 http 有序列表 .cn

web sockent 實例

模擬 Servert端，瀏覽器為Client

import socket
def handle_request(client):
    buf = client.recv(1024)
    client.sendall(bytes("HTTP/1.1 201 OK\r\n\r\n","utf8"))#頭部信息

    client.sendall(bytes("<h1 style=‘color:red‘>Hello, python</h1>","utf8"))#標簽

def main():
    sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
    sock.bind(( 
‘localhost‘,8082))
    sock.listen(5)

    while True:
        connection, address = sock.accept()
        handle_request(connection)
        connection.close()

if __name__ == ‘__main__‘:
    main()

Hello, python

一、簡介

HTML 是什麽？

HTML(Hyper Text Markup lauguage,超文本標記語言)超級文本標記語言是標準通用標記語言下的一個應用，也是一種規範，一種標準，它通過標記符號來標記要顯示的網頁中的各個部分。

htyper text markup language 即超文本標記語言

超文本: 就是指頁面內可以包含圖片、鏈接，甚至音樂、程序等非文字元素。

標記語言: 標記（標簽）構成的語言.

HTML 參考手冊： http://www.w3school.com.cn/tags/html_ref_byfunc.asp

網頁==HTML文檔，由瀏覽器解析，用來展示的

靜態網頁：靜態的資源，如xxx.html

動態網頁：html代碼是由某種開發語言根據用戶請求動態生成的

二、標簽

<!DOCTYPE html>

如果你的頁面添加了<!DOCTYPE html>那麽，那麽就等同於開啟了標準模式，那麽瀏覽器就得老老實實的按照W3C的標準解析渲染頁面

，這樣一來，你的頁面在所有的瀏覽器裏顯示的就都是一個樣子了。

這就是<!DOCTYPE html>的作用。

html文檔樹形結構圖

技術分享

什麽是標簽:

是由一對尖括號包裹的單詞構成例如: <html> *所有標簽中的單詞不可能以數字開頭.
標簽不區分大小寫.<html> 和 <HTML>. 推薦使用小寫.
標簽分為兩部分: 開始標簽<a> 和結束標簽</a>. 兩個標簽之間的部分我們叫做標簽體.
有些標簽功能比較簡單.使用一個標簽即可.這種標簽叫做自閉和標簽.例如: <br/> <hr/> <input /> <img />
標簽可以嵌套.但是不能交叉嵌套. <a><b></a></b>

標簽的屬性:

通常是以鍵值對形式出現的. 例如 name="alex"
屬性只能出現在開始標簽或自閉和標簽中.
屬性名字全部小寫. *屬性值必須使用雙引號或單引號包裹例如 name="alex"
如果屬性值和屬性名完全一樣.直接寫屬性名即可. 例如 readonly（input標簽，屬性只能讀和看，不能添加）

<head>

1 <meta>

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

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

<meta name="keywords" content="描述內容">
<meta name="description" content="描述內容">

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

  <meta http-equiv="Refresh"content="2;URL=https://www.baidu.com"> //(註意後面的引號，分別在秒數的前面和網址的後面 每隔幾秒刷新到後面的網址)

  <meta http-equiv="content-Type"content="text/html;charset=UTF8">#全寫UTF-8的模式

  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

2 <title>

定義文檔的標題。當用戶將網頁收藏到收藏夾後，title將作為文檔鏈接的默認名稱。

title>hello world</title>

3 <link>

rel 屬性規定當前文檔與被鏈接文檔之間的關系。

<link rel="icon" href="http://www.jd.com/favicon.ico">　　　　//與標題名稱同一位置的圖標
<link rel="stylesheet" type="text/css" href="theme.css" />　　//rel來說明被鏈接的文檔是一個樣式表

4 <script>

src屬性，引用javaScript腳本文件。

<script src="hello.js"></script>

在 HTML 頁面中插入一段 JavaScript：

<script type="text/javascript">
document.write("Hello World!")
</script>

5 <style>

<style type="text/css">
h1 {color:red}
p {color:blue}
</style>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"><!簡寫utf-8>
    <!Refresh：刷新，content="2;URL=https://www.baidu.com "先是body屬性再，隔2秒後跳轉到百度上去,
    沒有分號後面的內容就會每隔2秒刷新body屬性
    >
    <meta http-equiv="Refresh"content="2">

    <title>老男孩</title>
    <link rel="icon" href="http://www.jd.com/favicon.ico"><! logo與標題名稱同一位置的圖標>

</head>
<body>
<h1 id="alex">hello</h1>
<h1 id="">hello</h1>
</body>
</html>

基本HTML 頭部標簽屬性

<body>

 1 <hn>: n的取值範圍是1~6; 從大到小. 用來表示標題.
 2  
 3 <p>: 段落標簽. 包裹的內容被換行.並且也上下內容之間有一行空白.
 4  
 5 <b> <strong>: 加粗標簽.
 6  
 7 <strike>: 為文字加上一條中線.
 8  
 9 <em>: 文字變成斜體.
10  
11 <sup>和<sub>: 上角標 和 下角表.
12  
13 <br>:換行.
14  
15 <hr>:水平線
16  
17 <div>  #HTML中沒有任何效果是配合 CSS使用的 充起一個盒子方便我們點位和布局
18  
19 <span>

塊級標簽：<p><h1><table><ol><ul><form><div> #寫在一行中的任何位置，都占一行，要寫別的類容需要另起一行

內聯標簽：<a><input><img><sub><sup><textarea><span> #只控制自己文本的長度範圍，要寫別的類容不需要另起一行

block（塊）元素的特點

① 總是在新行上開始；
② 高度，行高以及外邊距和內邊距都可控制；
③ 寬度缺省是它的容器的100%，除非設定一個寬度。
④ 它可以容納內聯元素和其他塊元素

inline元素的特點

① 和其他元素都在一行上；
② 高，行高及外邊距和內邊距不可改變；
③ 寬度就是它的文字或圖片的寬度，不可改變
④ 內聯元素只能容納文本或者其他內聯元素

對行內元素，需要註意如下
設置寬度width 無效。
設置高度height 無效，可以通過line-height來設置。
設置margin 只有左右margin有效，上下無效。
設置padding 只有左右padding有效，上下則無效。註意元素範圍是增大了，但是對元素周圍的內容是沒影響的。

特殊字符

&lt ; &gt；&quot；©®

Html 特殊符號：http://www.cnblogs.com/knowledgesea/archive/2013/07/24/3210703.html

一、<p>標簽

p標簽用來定義一個段落。

<p>p元素會自動在其前後創建一些空白。瀏覽器會自動添加這些空間，您也可以在樣式表中規定。</p>

二、超鏈接標簽（錨標簽） <a>

<a>標簽用於定義超鏈接，從一個頁面鏈接到另一個頁面。

<a href="www.baidu.com">百度</a>

屬性：

1.href：鏈接指向頁面的URL。

2.target：在何處打開鏈接。框架名稱: 在指定框架中打開連接內容.

_blank　　 # 在新窗口打開鏈接
_parent
_self
_top
framename

3.name：定義一個頁面的書簽.

規定錨的名稱。

<p>
<a href="#C4">查看 Chapter 4。</a>
</p>
<h2><a name="C4">Chapter 4</a></h2>

用於跳轉 href : #書簽名稱.

<a href="2.jpg" target="_blank" name="韓立火焰谷">韓立火焰谷</a>

錨定 id  #號
<a href="#form">第二章</a>

id="form"

1 <a href="#abcd">第五章</a> <! #告訴瀏覽器找到名為abcd標簽>
2 <a href="abc.html">第二章</a> <! 沒有# 跳轉地址>
3 
4 <div id="abcd">22222第五章</div>    #1與4 一起唯一對應

#與id唯一對應的 <a>標簽 跳轉到什麽位置取決於有沒有 " # "號
               有# ：找到當前頁面為form標簽 用於找標簽
               無# ： 跳轉頁面路徑

三、圖形標簽 <img>

<hr>

<img src="1.jpg" alt="韓立魔化" title="韓立魔嬰" width="600" height="519">

<hr>

屬性：

src：圖片路徑

alt：圖片加載失敗時的提示文字

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

width: 圖片的寬

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"><!簡寫utf-8>
    <!Refresh：刷新，content="2;URL=https://www.baidu.com "先是body屬性再，隔2秒後跳轉到百度上去,
    沒有分號後面的內容就會每隔2秒刷新body屬性>
    <meta http-equiv="Refresh"content="2">

    <title>老男孩</title>
    <link rel="icon" href="http://www.jd.com/favicon.ico"><! logo與標題名稱同一位置的圖標>

</head>
<body>
<a>第一章</a>
<a>第二章</a>
<a>第三章</a>
<a>第四章</a>
<a href="#abcd">第五章</a> <! #告訴瀏覽器找到名為abcd標簽>
<a href="abc.html">第二章</a> <! 沒有# 跳轉地址>

<h1 style="background-color:yellow ">liufei</h1>
<a style="background-color:red">huafeiwu</a>
<h2>流氓高手</h2>
<h3>鬥羅大陸</h3>
<h4>聖墓</h4>
<h5>楚喬傳</h5>
<h6>黑道教父</h6>

uuuuuuuu<br>     rrrrrrrrrrrr

<p>uuuuuuuu</p>       <p>bbbbbbbbbb</p>

<strike>doubi</strike>
騾子<em>騾子</em>


<hr>黑刀<hr>

G<sup>2</sup>
5<sub>2</sub>

 <br>&lt &gt  &quot  &copy   &reg;


<br><img src="焰靈姬.png" height="300px" width="300px" alt="出錯"title="美女">
<!  圖形標簽 title="美女" 鼠標在圖片上就會顯示名字，alt="出錯"：路徑不對就會出現圖片沒加載成功提示>

<! 超鏈接標簽>
<br><a href="http://baidu.com" target="_blank" name="liufei">百度</a>

<div id="abcd">22222第五章</div>


<h1 id="alex">hello</h1>
<h1 id="">hello</h1>
</body>
</html>

一到三標簽屬性練習

四、列表標簽

<ul>: 無序列表

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

<dl>  定義列表

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

無序列表示例：

<ul>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>

有序列表示例：

<ol start="50">
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>

   <ol>
        <li>aaa</li>
        <li>bbb</li>
        <li>vvv</li>
        <li>ddd</li>
    </ol>



    <ul>
        <li>aaa</li>
        <li>bbb</li>
        <li>vvv</li>
        <li>ddd</li>
    </ul>

    <dl>
        <dt>河北</dt>
            <dd>衡水</dd>
            <dd>邯鄲</dd>
        <dt>雲南</dt>
            <dd>昆明</dd>
            <dd>大理</dd>
        <dt>重慶</dt>
            <dd>重慶</dd>
    </dl>

View Code

五、表格標簽: <table>:

 1 border: 表格邊框.
 2  
 3 cellpadding: 內邊距
 4  
 5 cellspacing: 外邊距.
 6  
 7 width: 像素 百分比.（最好通過css來設置長寬）
 8  
 9 <tr>: table row
10  
11          <th>: table head cell
12  
13          <td>: table data cell
14  
15 rowspan:  單元格豎跨多少行
16  
17 colspan:  單元格橫跨多少列（即合並單元格）
18  
19 <th>: table header <tbody>(不常用): 為表格進行分區.

  <table border="1" cellpadding="1" cellspacing="1" width="300">
        <thead>
            <tr>
                <td>第一列</td>
                <td>第二列</td>
                <td>第三列</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td colspan="2">1,2</td>
                <td rowspan="2">3,33</td>
            </tr>
                <tr>
                <td>11</td>
                <td>22</td>
            </tr>
        </tbody>
    </table>

E.g

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>京東</title>
</head>
<body>

<table border="1" cellpadding="1" cellspacing="1" style="width:500px; heigth: 500px">
    <thead>
           <tr>
               <td>第一列</td>
               <td>第二列</td>
               <td>第三列</td>
           </tr>
    </thead>
    <tbody>
           <tr>
               <td colspan="2">1,2</td>

               <td>3</td>
           </tr>
           <tr>
               <td>4</td>
               <td>5</td>
               <td rowspan="2">6,9</td>
           </tr>
             <tr>
               <td>7</td>
               <td>8</td>

           </tr>
    </tbody>
    
</table>

</body>
</html>

練習

六表單標簽（django）<form>:

表單用於向服務器傳輸數據。

表單能夠包含 input 元素，比如文本字段、復選框、單選框（互斥標簽）、提交按鈕等等。

表單還可以包含textarea、select、fieldset和 label 元素。

1.表單屬性

　　HTML 表單用於接收不同類型的用戶輸入，用戶提交表單時向服務器傳輸數據，從而實現用戶與Web服務器的交互。表單標簽, 要提交的所有內容都應該在該標簽中.

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

form表單的action的 url結尾也需要加/

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

get: 1.提交的鍵值對.放在地址欄中url後面. 2.安全性相對較差. 3.對提交內容的長度有限制.

post:1.提交的鍵值對不在地址欄. 2.安全性相對較高. 3.對提交內容的長度理論上無限制.

get/post是常見的兩種請求方式.

提交name的值到百度

  <form id="form" action="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=0&rsv_idx=1&tn=baidu&">
        <p>username : <input type="text" name="wd"></p>
        <p>password :<input type="password" name="pwd"></p>
        <p>man<input type="radio" value="1" name="sex"> woman<input type="radio" value="2" name="sex"></p>
        <p><input type="submit" value="提交"></p>
        <p><input type="button" value="按鈕button"></p>
    </form>

2.表單元素

詳細解釋：http://www.cnblogs.com/xiaohuochai/p/5179909.html

<input> type: text 文本輸入框

password 密碼輸入框

radio 單選框

checkbox 多選框

submit 提交按鈕

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

button-普通按鈕，submit-提交按鈕；submit按鈕一般出現在網頁上需要提交信息到服務器是才使用，而button按鈕是創建一個按鈕，對於實現按鈕將會發生什麽事這個不一定。

submit和button,二者都以按鈕的形式展現,看起來都是按鈕，所不同的是type屬性和處發響應的事件上，submit會提交表單，button不會提交表單.
兩者主要區別在於：
submit默認為form提交，可以提交表單（form）.
button則響應用戶自定義的事件,如果不指定onclick等事件處理函數，它是不做任何事情.當然，button也可以完成表單提交的工作.
INPUT type=submit 即發送表單,按回車提交表單
INPUT type=button 就是單純的按鈕功能,提交的是innerTEXT

更詳細的表單元素：http://blog.csdn.net/x_fledgling/article/details/53842684

file 提交文件：form表單需要加上屬性enctype="multipart/form-data"

<p><input type="file" name="file_name" ></p>

def index(request):
    print request.POST
    print request.GET
    print request.FILES
    for item in request.FILES:
        fileObj = request.FILES.get(item)
        f = open(fileObj.name, ‘wb‘)
        iter_file = fileObj.chunks()
        for line in iter_file:
            f.write(line)
        f.close()
    return HttpResponse(‘ok‘)

django處理文件的後端代碼

name: 表單提交項的鍵.註意和id屬性的區別：name屬性是和服務器（服務端）通信時使用的名稱；而id屬性是瀏覽器端（前端）使用的名稱，該屬性主要是為了方便客戶端編程，而在css和javascript中使用的。

value: 表單提交項的值.

對於不同的輸入類型，value 屬性的用法也不同：

type="button", "reset", "submit" - 定義按鈕上的顯示的文本（按鈕上起名字）

type="text", "password", "hidden" - 定義輸入字段的初始值（默認值）

type="checkbox", "radio", "image" - 定義與輸入相關聯的值

<p>籃球<input type="checkbox" name="hobby" value="1"></p>
    <p>足球<input type="checkbox" name="hobby" value="2"></p>
    <p>乒乓球<input type="checkbox" name="hobby" value="3"></p>
                   checked: radio 和 checkbox 默認被選中

                   readonly: 只讀. text 和 password

                   disabled: 對所用input都好使.

　　[註意1]type="checkbox"或"radio"必須設置value屬性

　　[註意2]value屬性無法與type="file"的input元素一起使用

<select> 下拉選標簽屬性：

name:表單提交項的鍵.

size：選項個數

multiple：multiple

<option> 下拉選中的每一項屬性：value:表單提交項的值. selected: selected下拉選默認被選中

<optgroup>為每一項加上分組

<textarea> 文本域

　　name:表單提交項的鍵.

　　cols:文本域默認有多少列

　　rows:文本域默認有多少行

<label> #關聯文本框點擊文本框外的文字就有光標到文本框

<fieldset> 文本框被線圈起來

<!DOCTYPE html> <!--這個網頁的文檔類型，這個是html5的寫法-->
<html lang="en"><!--lang 屬性可以指定標簽範圍內的元素的語言種類。
                   英語lang="en",中文lang="zh"，日文lang="ja"。-->
<head>
    <meta charset="UTF-8">
    <title>本人網</title>
</head>
<body>
<form action="https://www.sogou.com/web " method="post" enctype="multipart/form-data">
    <!--action空相當於跳轉到當前頁面（刷新）有地址就跳轉到該地址上。
     上傳文件時 必須要添加 enctype="multipart/form-data"參數，（要聲明下分段發送）-->
    用戶名<input type="text"  name="query" value="殷超"> <!--鍵值對  name作用：發到client端作為一個鍵用的-->
    <p>密碼<input type="password" name="pwd" value="123456"></p> <!--value起到默認值作用-->
    <p>郵箱<input type="text" name="email" value="[email protected]"></p>
       <input type="button" value="不提交">
       <input type="submit" value="提交">
    <p></p>

    <br>男<input type="radio" name="sex" value="1"> <!--radio 互斥即單選 一定要有value-->
    <br>女<input type="radio" name="sex" value="2">
    <p></p>

    小說<input type="checkbox" name="愛好" value="1"><!-- type="checkbox"或"radio"必須設置value屬性-->
    電影<input type="checkbox" name="愛好" value="2">
    電視劇<input type="checkbox" name="愛好" value="3">
    <p></p>
    <input type="submit" value="提交"> <!--value作用是 在按鈕上起名字-->
    <input type="button" value="不提交">
    <input type="reset" value="重置">
    <p></p>

    <p>文件<input type="file" value="123"></p>
     <p></p>

    <select name="language" multiple="multiple">
        <!--如果屬性值和屬性名完全一樣.直接寫屬性名即可-->
        <optgroup label="湖北省">
           <option value="1">一、武漢市</option>
           <option value="2">二、荊州市</option>
           <option value="3">三、荊門市</option>
             <option value="4" selected="selected">邯鄲</option>
        </optgroup>
        <optgroup label="湖南省">
            <option value="1">4、長沙</option>
           <option value="2">5、嶽陽</option>
           <option value="3">6、張家界</option>
             <option value="4" selected="selected">邯鄲</option>
        </optgroup>
    </select>

    <p></p>
    備註<textarea name="qq"  rows="2" cols="5" value="123">
    </textarea>

    <p 關聯文本框></p>
    <label for="殷超">姓名</label>
    <input id="殷超" type="text">

     <p></p>
    <fieldset>
        <happend>發生</happend>
        <input type="text" rows="2" cols="5">
    </fieldset>
</form> <!--form相當一個盒子，提交盒子裏的內容,在form外的元素，頁面上有；
            但提交的時候只會是盒子裏面的類容-->
</body>
</html>

form元素的練習

練習的顯示

技術分享

HTML 對比學習類容：http://www.cnblogs.com/lianzhilei/p/6038646.html

前端 HTML

前端 HTML

web sockent 實例

Hello, python

一、簡介

HTML 是什麽？

HTML 參考手冊： http://www.w3school.com.cn/tags/html_ref_byfunc.asp

二、標簽

<!DOCTYPE html>

html文檔樹形結構圖

什麽是標簽:

標簽的屬性:

<head>

<body>

一、<p>標簽

二、超鏈接標簽（錨標簽） <a>

四、列表標簽

五、表格標簽: <table>:

六 表單標簽（django）<form>:

1.表單屬性

form表單的action的 url結尾也需要加/

2.表單元素

<select> 下拉選標簽屬性：

<textarea> 文本域

<label> #關聯文本框 點擊文本框外的文字就有光標到文本框

<fieldset> 文本框被線圈起來

相關推薦

六表單標簽（django）<form>:

<label> #關聯文本框點擊文本框外的文字就有光標到文本框