python基礎14

標籤：bsp   後台   間隔   老男孩   檔案   charset   變化   提交資料   str   

HTML

HTML是英文Hyper Text Mark-up Language(超文字標記語言 (HTML))的縮寫，他是一種製作全球資訊網頁面標準語言（標記）。相當於定義統一的一套規則，大家都來遵守他，這樣就可以讓瀏覽器根據標記語言的規則去解釋它。

瀏覽器負責將標籤翻譯成使用者“看得懂”的格式，呈現給使用者！

Doctype

Doctype告訴瀏覽器使用什麼樣的html或xhtml規範來解析html文檔

有和無的區別

• BackCompat：標準相容模式未開啟（或叫怪異模式[Quirks mode]、混雜模式）
• CSS1Compat：標準相容模式已開啟（或叫strict 模式[Standards mode/Strict mode]）

這個屬性會被瀏覽器識別並使用，但是如果你的頁面沒有DOCTYPE的聲明，那麼compatMode預設就是BackCompat,這也就是惡魔的開始 -- 瀏覽器按照自己的方式解析渲染頁面，那麼，在不同的瀏覽器就會顯示不同的樣式。如果你的頁面添加了那麼，那麼就等同於開啟了標準模式，那麼瀏覽器就得老老實實的按照W3C的標準解析渲染頁面，這樣一來，你的頁面在所有的瀏覽器裡顯示的就都是一個樣子了。

Doctype告訴瀏覽器使用什麼樣的html或xhtml規範來解析html文檔, dtd檔案則包含了標記、attributes 、properties、約束規則。

HeadMeta(metadata information)

提供有關頁面的元資訊，例：頁面編碼、重新整理、跳轉、針對搜尋引擎和更新頻度的描述和關鍵詞

1.頁面編碼（告訴瀏覽器是什麼編碼)

< meta http-equiv=“content-type” content=“text/html;charset=utf-8”>

2.重新整理和跳轉

< meta http-equiv=“Refresh” Content=“30″>

< meta http-equiv=”Refresh“ Content=”5; Url=http://www.autohome.com.cn“ />

3.關鍵詞

< meta name="keywords" content="星際2,星際老男孩,專訪,F91,小色,JOY" >

4.描述

例如：cnblogs

5.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 模式）顯示該網頁

 

Title

網頁頭部資訊

常用標籤

標籤一般分為兩種：塊級標籤 和 行內標籤

• 行內標籤： span（白板）等
• 塊級標籤：div（白板），H系列（加大加粗），p標籤（段落和段落之間有間距）等

p標籤表示段落，預設段落之間是有間隔的！

br 標籤是換行

a標籤

< a href="http://www.autohome.com.cn">

1、target屬性，_black表示在新的頁面開啟

2、錨

H標籤

<h1>最大的標題</h1><h2> . . . </h2><h3> . . . </h3><h4> . . . </h4><h5> . . . </h5><h6>最小的標題</h6>

圖片（Images）

<img src="URL" alt="替換文本" height="42" width="42">

列表

ul ol dl

<ul>    <li>line1</li>    <li>line2</li>    <li>line3</li></ul>

<ol>    <li>line1</li>    <li>line2</li>    <li>line3</li></ol>

<dl>    <dt>河北省</dt>    <!--dt是標籤，dd是標籤裡的內容-->        <dd>石家莊</dd>        <dd>衡水市</dd>    <dt>山東省</dt>    <!--dt是標籤，dd是標籤裡的內容-->        <dd>濟南市</dd>        <dd>煙台市</dd></dl>

表格

table

<table border="1">    <thead>    <!--表頭-->        <tr>            <th>表1</th>            <th>表2</th>            <th>表3</th>        </tr>    </thead>    <tbody>        <tr>            <td>1</td>            <td>2</td>            <td>3</td>        </tr>            <tr>            <td>1</td>            <td>2</td>            <td>3</td>        </tr>            <tr>            <td>1</td>            <td>2</td>            <td>3</td>        </tr>    </tbody></table>

橫向合併儲存格：colspan = ‘‘

縱向合併儲存格：rowspan = ‘‘

select 標籤

單選菜單

<select>    <option value="1">北京</option>    <option value="2">上海</option>    <option value="3" selected="selected">深圳</option>    <!--selected="selected"表示預設選擇深圳--></select>

多選菜單

<select multiple="multiple" size="3">    <option>香港</option>    <option>北京</option>    <option>上海</option>    <option>深圳</option></select>

input 系欄標籤單選框（radio）

radio 標籤只有當 name 值相同時它們才會互斥，才是真正的單選框；

<!--對於input標籤來說只要，radio的name值相同，那麼他們就會互斥--><p>請選擇性別：</p>男：<input type="radio" name="gender" value="1" />女：<input type="radio" name="gender" value="2" />

複選框（checkbox）

<p>請選擇體育愛好：</p>籃球：<input type="checkbox" name="favor" value="1">足球：<input type="checkbox" name="favor" value="1">乒乓球：<input type="checkbox" name="favor" value="1" checked="checked">羽毛球：<input type="checkbox" name="favor" value="1" checked="checked"><!--這裡加一個標識checked="checked，為預設選擇"-->

輸入框（text & password）

<!--標準的輸入框--><input type="text"/><!--密碼的輸入框（輸入的內容是保密的）--><input type="password"/>

提交按鈕（button & submit & reset）

<!--普通的按鈕--><input type="button" value="提交"/><!--帶提交表單功能的按鈕？--><input type="submit" value="提交"/><!--重設按鈕，清空所有輸入的資料--><input type="reset"  value="重設" />

提交檔案（file）

<input type="file" name="fname"/>

多行文字框（textarea）

<textarea style="height: 100px;width: 100px;"></textarea>

form 表單

input系列需要通過form表單才能提交資料

<form action="http://localhost:8888/index" method="get">    <!--這裡action是告訴html提交到那裡-->    <!--method是通過什麼方法去action指定的地址-->    <!--表單會把所有擷取輸入的資料存成一個json提交到後台-->    <input type="text" name="user" />    <input type="text" name="email" />    <input type="password" name="pwd" />    <input type="button" value="button1" />    <input type="submit" value="提交"/>    <!--這裡按提交才有反映，submit是用來提交當前的表單的，當然可以有多個表單-->    <!--但是，這個submit需要寫入表單內，那麼提交的時候是提交的當前表單--></form>

lable 標籤

使用label標籤的時，選擇文字就會進入到相應的框體，他類似一個跳轉

<label for="username">使用者名稱：</label><input id="username" type="text" name="user" /><br /><label for="pwd">密碼：</label><input id="pwd" type="text" name="user" />

各種符號：

http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html

CSS

css是英文Cascading Style Sheets的縮寫,稱為層疊樣式表，用於對頁面進行美化。

存在方式有三種：元素內聯、頁面嵌入和外部引入，比較三種方式的優缺點。

• 在標籤中使用 style=‘xx:xxx;‘
• 在頁面中嵌入 < style type="text/css"> 塊
• 引入外部css檔案

必要性：美工會對頁面的色彩搭配和圖片的美化負責，開發人員則必須知道是如何?的。

標籤選取器

div{ background-color:red; } <div > </div>

class選取器

.bd{ background-color:red; } <div class=‘bd‘> </div>

id選取器

#idselect{ background-color:red; } <div id=‘idselect‘ > </div>

關聯選取器

#idselect p{ background-color:red; } <div id=‘idselect‘ > <p> </p> </div>

組合選取器

input,div,p{ background-color:red; } 

屬性選取器

input[type=‘text‘]{ width:100px; height:200px; } 

css樣式也可以寫在單獨檔案中

 

注釋

/* 內容 */

邊框

寬度，樣式，顏色 (border: 4px dotted(虛線）solid（實線） red)

• height， 高度 可以寫像素或百分比（百分比沒有意義）
• width 寬度 可以寫像素或百分比
• text-align:ceter, 水平方向置中
• line-height，垂直方向根據標籤高度
• color 字型顏色
• font-size 字型大小
• font-weight 字型加粗

float 浮動

• float="left" 向左飄
• float="left" 向右飄
• 當父級管不住： 

display

• display: none; 讓標籤消失
• display: inline; 塊級標籤轉為行內標籤
• display: block; 行內標籤轉為塊級標籤
• display: inline-block; 具有inline,預設自己有多少佔多少，具有block，可以設定無法設定高度，寬度，padding margin
• 行內標籤：無法設定高度，寬度，padding margin
• 塊級標籤：可以設定高度，寬度，padding margin

python基礎14