python自動華 （十四）

Python自動化 【第十四篇】：HTML介紹

本節內容：

1. 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、h一、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）