HTML
HTML是英文Hyper Text Mark-up Language(超文本標記語言)的縮寫，他是一種制作萬維網頁面標准語言（標記）。相當於定義統一的一套規則，大家都來遵守他，這樣就可以讓瀏覽器根據標記語言的規則去解釋它。
瀏覽器負責將標簽翻譯成用戶“看得懂”的格式，呈現給用戶！(例：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文檔
有和無的區別
- BackCompat：標准兼容模式未開啟（或叫怪異模式[Quirks mode]、混雜模式）
- CSS1Compat：標准兼容模式已開啟（或叫嚴格模式[Standards mode/Strict mode]）
這個屬性會被瀏覽器識別並使用，但是如果你的頁面沒有DOCTYPE的聲明，那么compatMode默認就是BackCompat,這也就是惡魔的開始 -- 瀏覽器按照自己的方式解析渲染頁面，那么，在不同的瀏覽器就會顯示不同的樣式。如果你的頁面添加了那么，那么就等同於開啟了標准模式，那么瀏覽器就得老老實實的按照W3C的標准解析渲染頁面，這樣一來，你的頁面在所有的瀏覽器里顯示的就都是一個樣子了
有，用什么？
- Doctype告訴瀏覽器使用什么樣的html或xhtml規范來解析html文檔, dtd文件則包含了標記、attributes 、properties、約束規則
<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>頁面主體
標簽一般分為兩種：塊級標簽 和 行內標簽
- a、span、select 等
- div、h1、p 等
特殊符號
更多-》》http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html
p和br 標簽
<p>段落</p> <!--p表示段落，默認段落之間是有間隔的！--> <br/> <!--br是換行-->
a 標簽
超鏈接：
<a href="http://www.baidu.com" target="_blank">點我</a> href表示跳轉的地址，target="_blank"表示新窗口打開，默認為當前頁
錨：
<body>
<a href="#1">第一章</a><br/>
<a href="#2">第二章</a><br/>
<a href="#3">第三章</a><br/>
<a href="#4">第四章</a><br/>
<div id="1" style="height: 600px;">第一章的內容</div>
<div id="2" style="height: 600px;">第二章的內容</div>
<div id="3" style="height: 600px;">第三章的內容</div>
<div id="4" style="height: 600px;">第四章的內容</div>
</body>
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 系列標簽
text、password 用戶輸入框
<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-Lian import tornado.ioloop import tornado.web class 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()
頁面效果：
點擊提交后tornado腳本顯示效果如下：
post lianzhilei James@123.com 123123
radio、checkbox 單選與多選
<body>
<form action="http://localhost:8888/index" method="post">
<div>
<p>性別：</p>
男： <input type="radio" name="gender" value="1" />
女： <input type="radio" name="gender" value="2" />
<p>愛好：</p>
籃球： <input type="checkbox" name="favor" value="1" />
足球： <input type="checkbox" name="favor" value="2" />
排球： <input type="checkbox" name="favor" value="3" />
</div>
<input type="submit" value="提交" />
<input type="reset" value="重置" />
</form>
name表示提交字典里的key值，value為值，type=reset可以重置選項
顯示效果：
file 上傳文件
<form enctype="multipart/form-data">
<div>
<p>上傳文件：</p>
<input type="file" name="fname">
</div>
<input type="submit" value="提交" />
<input type="reset" value="重置" />
</form>
上傳文件時要添加enctype="multipart/form-data"參數
textarea 多行輸入
<form action="http://localhost:8888/index" method="post">
<textarea name="linearea">默認數據</textarea>
<input type="submit" value="提交" />
<input type="reset" value="重置" />
</form>
name指定key值，默認數據寫中間即可
select 下拉框
<form action="http://localhost:8888/index" method="post">
<select name="city" size="2" multiple="multiple">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">南京</option>
<option value="4" selected="selected">邯鄲</option>
</select>
<br />
<input type="submit" value="提交" />
<input type="reset" value="重置" />
</form>
city為提交表單的key值，value是提交值，size指定顯示的個數，mothod表示可以多選
img 圖片標簽
<a href="https://www.baidu.com">
<img src="i.png" title="大帥鍋" style="height: 300px;width: 220px;" alt="索隆">
</a>
和a標簽結合點擊圖片直接跳轉，title指定鼠標放到圖片后顯示的內容，style定義寬高，alt指定圖片不存在時的顯示信息
ul、ol、dl 列表標簽
<ul>
<li>qwe</li>
<li>qwe</li>
<li>qwe</li>
</ul>
<ol>
<li>qwe</li>
<li>qwe</li>
<li>qwe</li>
</ol>
<dl>
<dt>qwe</dt>
<dd>qwe</dd>
<dd>qwe</dd>
<dt>qwe</dt>
</dl>
顯示效果：
table 列表
簡單單元格
<table border="1"> <thead> <tr> <td>主機名</td> <td>IP</td> <td>詳情</td> </tr> </thead> <tbody> <tr> <td>localhost</td> <td>127.0.0.1</td> <td> <a href="test3.html">點擊</a> </td> </tr> <tr> <td>localhost</td> <td>127.0.0.1</td> <td>點擊</td> </tr> </tbody>
合並單元格
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table border="1"> <thead> <tr> <td>表頭1</td> <td>表頭2</td> <td>表頭3</td> <td>表頭4</td> </tr> </thead> <tbody> <tr> <td colspan="2">1</td> <!--<td>2</td>--> <td>3</td> <td>4</td> </tr> <tr> <td>1</td> <td>2</td> <td rowspan="2">3</td> <td>4</td> </tr> <tr> <!--<td>1</td>--> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> </tbody> </table> </body> </html>
label 標簽
<label for="username">用戶名</label>
<input id="username" type="text" name="user" />
點擊文字使其關聯的標簽獲取光標
Python開發【前端】：CSS--》》http://www.cnblogs.com/lianzhilei/p/6046131.html
Python開發【前端】：JavaScript--》》http://www.cnblogs.com/lianzhilei/p/6071530.html
Python開發【前端】：DOM--》》http://www.cnblogs.com/lianzhilei/p/6072367.html