Python開發【前端】：HTML，python開發前端
HTML
HTML是英文Hyper Text Mark-up Language(超文字標記語言 (HTML))的縮寫，他是一種製作全球資訊網頁面標準語言（標記）。相當於定義統一的一套規則，大家都來遵守他，這樣就可以讓瀏覽器根據標記語言的規則去解釋它。
瀏覽器負責將標籤翻譯成使用者“看得懂”的格式，呈現給使用者！(例：djangomoan模版引擎)
標準模板：
<!DOCTYPE html> #標準規範<html lang="en"><head> #html頭 <meta charset="UTF-8"> #字元編碼 <title>Title</title> #頁面頭部顯示內容</head><body> <p>主體內容</p> #頁面內容主體</body></html>
Doctype標準
Doctype告訴瀏覽器使用什麼樣的html或xhtml規範來解析html文檔
有和無的區別
這個屬性會被瀏覽器識別並使用，但是如果你的頁面沒有DOCTYPE的聲明，那麼compatMode預設就是BackCompat,這也就是惡魔的開始 -- 瀏覽器按照自己的方式解析渲染頁面，那麼，在不同的瀏覽器就會顯示不同的樣式。如果你的頁面添加了那麼，那麼就等同於開啟了標準模式，那麼瀏覽器就得老老實實的按照W3C的標準解析渲染頁面，這樣一來，你的頁面在所有的瀏覽器裡顯示的就都是一個樣子了
有，用什嗎？
<head>頁面頭部
meta(metadata information)
提供有關頁面的元資訊，例：頁面編碼、重新整理、跳轉、針對搜尋引擎和更新頻度的描述和關鍵詞
頁面編碼（告訴瀏覽器是什麼編碼）
< meta http-equiv=“content-type” content=“text/html;charset=utf-8”>
重新整理和跳轉
< meta http-equiv=“Refresh” Content=“30″> 30秒重新整理< meta http-equiv=”Refresh“ Content=”5; Url=http://www.autohome.com.cn“ />
關鍵詞
< meta name="keywords" content="星際2,星際老男孩,專訪,F91,小色,JOY" >
描述
例如：cnblogs
X-UA-Compatible
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
微軟的IE6是通過XP、Win2003等作業系統發布出來，作為占統治地位的案頭作業系統，也使得IE佔據了通知地位，許多的網站開發的時候，就按照IE6的標準去開發，而IE6自身的標準也是微軟公司內部定義的。到了IE7出來的時候，採用了微軟公司內部標準以及部分W3C的標準，這個時候許多網站升級到IE7的時候，就比較痛苦，很多代碼必須調整後，才能夠正常的運行。而到了微軟的IE8這個版本，基本上把微軟內部自己定義的標準拋棄了，而全面的支援W3C的標準，由於基於對標準徹底的變化了，使得原先在早期IE8版本上能夠訪問的網站，在IE8中無法正常的訪問，會出現一些排版錯亂、文字重疊，顯示不全等各種相容性錯誤。
與任何早期瀏覽器版本相比，Internet Explorer 8 對行業標準提供了更加緊密的支援。 因此，針對舊版本的瀏覽器設計的網站可能不會按預期顯示。 為了協助減輕任何問題，Internet Explorer 8 引入了文檔相容性的概念，從而允許您指定網站所支援的 Internet Explorer 版本。 文檔相容性在 Internet Explorer 8 中添加了新的模式；這些模式將告訴瀏覽器如何解釋和呈現網站。 如果您的網站在 Internet Explorer 8 中無法正確顯示，則可以更新該網站以支援最新的 Web 標準（首選方式），也可以強制 Internet Explorer 8 按照在舊版本的瀏覽器中查看網站的方式來顯示內容。 通過使用 meta 元素將 X-UA-Compatible 標題添加到網頁中，可以實現這一點。
當 Internet Explorer 8 遇到未包含 X-UA-Compatible 標題的網頁時，它將使用 指令來確定如何顯示該網頁。 如果該指令丟失或未指定基於標準的文件類型，則 Internet Explorer 8 將以 IE5 模式（Quirks 模式）顯示該網頁
title 標籤
網頁頭部資訊
link 標籤
<!--css-->< link rel="stylesheet" type="text/css" href="css/common.css" ><!--icon-->< link rel="shortcut icon" href="image/favicon.ico">
style 標籤
在頁面中寫樣式
例如：< style type="text/css" > .bb{ background-color: red; } < /style>
script 標籤
<!--引進檔案-->< script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"> </script ><!--寫js代碼-->< script type="text/javascript" > ... </script >
<body>頁面主體
標籤一般分為兩種：塊級標籤 和 行內標籤
特殊符號
更多-》》http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html
p和br 標籤
<p>段落</p> <!--p表示段落，預設段落之間是有間隔的！--><br/> <!--br是換行-->
a 標籤
<a href="http://www.autohome.com.cn"> </a>1、target屬性，_black表示在新的頁面開啟2、錨
h 標籤
標題h1、h2、h3、h4、h5、h6、h7表示不同的大小
span 標籤
行內標籤-白板
div 標籤
塊級標籤-白板，可以加屬性然後可以變身
form 標籤
form相當於一個表單，配合input標籤submit可以把表單的內容提交到指定位置，提交內容以字典的形式提交{‘user’：xx,'email':xx,'pwd':xx},key值為name屬性值
<form action="http://localhost:8888/index" method="post" ></form>
action表示提交動作，把資料提交到指定的路徑，methon指定提交類型，預設為get
post與get的區別：
method預設為get類型，資料會包含在html的頭部進行提交，表現形式是點擊提交後會在外部url路徑上查看提交到的資料表單內容，效果如下
http://localhost:8888/index?user=lianzhilei&email=James%40123.com&pwd=123123
method如果指定為post類型的話，資料會包含在html的body內進行提交，從外部看不出來裡面的資訊
兩者 沒有誰安全之說，因為抓包都能抓到
input 系欄標籤
input與form聯合使用
<body> <form action="http://localhost:8888/index" method="post" > <span>使用者：</span><input type="text" name="user"><br /> <span>郵箱：</span><input type="text" name="email"><br /> <span>密碼：</span><input type="password" name="pwd"><br /> <input type="button" value="不能提交"> <input type="submit" value="提交"> </form></body>
配合使用的tornado指令碼（資料提交地址）
#!/usr/bin/env python# -*- coding:utf-8 -*-#-Author-Lianimport tornado.ioloopimport tornado.webclass MainHandler(tornado.web.RequestHandler): def get(self): print("get") u = self.get_argument("user") e = self.get_argument("email") p = self.get_argument("pwd") print(u,e,p) def post(self,*args,**kwargs): print("post") u = self.get_argument("user") e = self.get_argument("email") p = self.get_argument("pwd") print(u,e,p)application = tornado.web.Application([ (r"/index", MainHandler),])if __name__ == "__main__": application.listen(8888) tornado.ioloop.IOLoop.instance().start()表單資料接收端.py
頁面效果：
點擊提交後tornado指令碼顯示效果如下：
postlianzhilei James@123.com 123123
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
