前端 HTML
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> 標簽用於為 HTML 文檔定義樣式信息。
<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有效,上下則無效。註意元素範圍是增大了,但是對元素周圍的內容是沒影響的。
特殊字符
< ; >;";©®
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>< > " © ® <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> #關聯文本框 點擊文本框外的文字就有光標到文本框
<label for="www">姓名</label>
<input id="www" type="text">
<fieldset> 文本框被線圈起來
<fieldset>
<legend>登錄吧</legend>
<input type="text">
</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