Python自動化 【第十四篇】：HTML介紹
本節內容：
- Html
-
- 概述
- HTML文檔
- 常用標簽
2. CSS
-
- 概述
- CSS選擇器
- CSS常用屬性
1.HTML
1.1概述
HTML是英文Hyper Text Mark-up Language(超文本標記語言)的縮寫，他是一種制作萬維網頁面標準語言（標記）。相當于定義統一的一套規則，大家都來遵守他，這樣就可以讓瀏覽器根據標記語言的規則去解釋它。
瀏覽器負責將標簽翻譯成用戶“看得懂”的格式，呈現給用戶！(例：djangomoan模版引擎)
1.2 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、約束規則。
Meta(metadata information)
提供有關頁面的元信息，例：頁面編碼、刷新、跳轉、針對搜索引擎和更新頻度的描述和關鍵詞
a)頁面編碼（告訴瀏覽器是什么編碼）
< meta http-equiv=“content-type” content=“text/html;charset=utf-8”>
b) 刷新和跳轉
< meta http-equiv=“Refresh” Content=“30″>
< meta http-equiv=”Refresh“ Content=”5; Url=http://www.autohome.com.cn“ />
c) 關鍵詞
< meta name="keywords" content="星際2,星際老男孩,專訪,F91,小色,JOY" >
d) 描述
例如：cnblogs
e) X-UA-Compatible
微軟的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 模式）顯示該網頁。
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
Title
網頁頭部信息
Link
a)css
< link rel="stylesheet" type="text/css" href="css/common.css" >
b)icon
< link rel="shortcut icon" href="image/favicon.ico">
Style
在頁面中寫樣式，例如：
< style type="text/css" >
.bb{
}
< /style>
Script
a) 引進文件
<script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"> </script >
b) 寫js代碼
< script type="text/javascript" > ... </script >
1.3 常用標簽
標簽一般分為兩種：
- 行內標簽: a、span、select 等
- 塊級標簽: div、h1、p 等
p 和 br
p 表示段落，默認段落之間是有間隔的！
br 是換行
a標簽
< a href="http://www.autohome.com.cn"> </a>
-
- target屬性，_black表示在新的頁面打開
- 錨
H標簽
H1~h6 字體由大到小排列
select 標簽
設置下拉菜單樣式
Checkbox
redio
Password
button
file
提交文件時： enctype='multipart/form-data' method='POST'
textarea
可以多行輸入文本
label
用于點擊文字，使得關聯的標簽獲取光標
<label for="username">用戶名：</label>
<input id="username" type="text" name="user" />
列表（ul ol dl）
ul
- ul.li
- ul.li
- ul.li
ol
- ol.li
- ol.li
- ol.li
dl
table
thead
tr
th
tbody
tr
td
colspan = ''
rowspan = ''
2.CSS
2.1 概述
css是英文Cascading Style Sheets的縮寫,稱為層疊樣式表，用于對頁面進行美化。
存在方式有三種：元素內聯、頁面嵌入和外部引入，比較三種方式的優缺點。
語法：style = 'key1:value1;key2:value2;'
- 在標簽中使用 style='xx:xxx;'
- 在頁面中嵌入 < style type="text/css"> </style > 塊
- 引入外部css文件
必要性：美工會對頁面的色彩搭配和圖片的美化負責，開發人員則必須知道是如何實現的
2.2 CSS選擇器
標簽選擇器
div{ }
<div > </div>
class選擇器
.bd{ }
<div class='bd'> </div>
id選擇器
#idselect{ }
<div id='idselect' > </div>
關聯選擇器
#idselect p{ }
<div id='idselect' > <p> </p> </div>
組合選擇器
input,div,p{ }
屬性選擇器
input[type='text']{ width:100px; height:200px; }
css樣式也可以寫在單獨文件中
<link rel="stylesheet" href="commons.css" />
2.3 CSS常用屬性
設置標簽樣式
height， 高度 百分比
width， 寬度 像素，百分比
text-align:center, 水平方向居中
line-height， 垂直方向根據標簽高度
color、 字體顏色
font-size、 字體大小
font-weight 字體加粗
background 背景
border 邊框
寬度，樣式，顏色 (border: 4px dotted red;)
border-left （邊框作用域）
float
讓標簽浮動起來，塊級標簽也可以堆疊
<div style="clear: both;"></div>
display 標簽之間轉換
display: none; -- 讓標簽消失
display: inline; 塊標簽變成行內標簽
display: block; 行內標簽變成塊標簽
display: inline-block;
具有inline,默認自己有多少占多少
具有block，可以設置無法設置高度，寬度
行內標簽：無法設置高度，寬度，padding margin
塊級標簽：可以設置高度，寬度，padding margin
padding margin(0,auto) 邊距
內邊距 （padding）
外邊距 （margin）
文章列表
留言列表
