python--第十三天總結（html ，css 語法）

概述

HTML是英文Hyper Text Mark-up Language(超文本標記語言)的縮寫，他是一種製做萬維網頁面標準語言（標記）。至關於定義統一的一套規則，你們都來遵照他，這樣就可讓瀏覽器根據標記語言的規則去解釋它。

瀏覽器負責將標籤翻譯成用戶「看得懂」的格式，呈現給用戶！(例：djangomoan模版引擎)

HTML文檔

文檔樹

Doctype

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

有和無的區別

1. BackCompat：標準兼容模式未開啓（或叫怪異模式[Quirks mode]、混雜模式）
2. CSS1Compat：標準兼容模式已開啓（或叫嚴格模式[Standards mode/Strict mode]）

這個屬性會被瀏覽器識別並使用，可是若是你的頁面沒有DOCTYPE的聲明，那麼compatMode默認就是BackCompat,這也就是惡魔的開始 -- 瀏覽器按照本身的方式解析渲染頁面，那麼，在不一樣的瀏覽器就會顯示不一樣的樣式。若是你的頁面添加了那麼，那麼就等同於開啓了標準模式，那麼瀏覽器就得老老 實實的按照W3C的標準解析渲染頁面，這樣一來，你的頁面在全部的瀏覽器裏顯示的就都是一個樣子了。

有，用什麼？

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

Meta(metadata information)

提供有關頁面的元信息，例：頁面編碼、刷新、跳轉、針對搜索引擎和更新頻度的描述和關鍵詞

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

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

1. 刷新和跳轉

< meta http-equiv=「Refresh」 Content=「30″>

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

1. 關鍵詞

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

1. 描述

例如：cnblogs

1. 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

1. css

< link rel="stylesheet" type="text/css" href="css/common.css" >

1. icon

< link rel="shortcut icon" href="image/favicon.ico">

Style

在頁面中寫樣式

例如：
< style type="text/css" >
.bb{
      background-color: red;
   }
< /style>

Script

1. 引進文件

　　　　　　< script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"> </script >

1. 寫js代碼

　　　　　　< script type="text/javascript" > ... </script >

經常使用標籤

標籤通常分爲兩種：塊級標籤 和 行內標籤

• a、span、select 等
• div、h一、p 等

各類符號

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

 

標籤

p 和 br

p表示段落，默認段落之間是有間隔的！

br 是換行

a標籤（錨文本超連接標籤）

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

一、target屬性，_black表示在新的頁面打開

二、錨

A標籤內經常使用屬性：

1）、href：打開目標地址（網址），通常填寫將要轉到目標地址。如href="http://www.xxx.com/"這樣瀏覽者在網頁中鼠標點擊對應此錨文本將打開到網頁http://www.xxx.com/

2）、target：打開目標方式
若是a標籤內沒有此元素，默認是在瀏覽網頁中從新載入對應連接網頁
_blank ：新建標籤窗口頁，設置此屬性，點擊錨文本後對應新建標籤網頁窗口卡打開對應地址
_parent：父級打開網頁，此屬性能夠理解爲本頁網頁重新載入錨文本的網頁，針對html框架iframe網頁中，整個網頁將從新載入打開目標網址地址

經常使用就此兩種打開目標方式，一個是新建窗口、一個不設置target將本頁從新載入錨文本地址指向URL、一個是整個網頁父級從新載入（相似於沒有設置target）相同效果。

二、錨（同頁面內上下轉到指定位置）
使用語法：

一、須要轉到地方添加，<a href="#top">文字</a>，注意href值是#開頭+英文字母命名
二、須要在被轉到位置添加，<span id="top" name="top"></span>，注意id和name值相同而且與a命名相同

跳轉到頂部例子：
一、首先咱們在網頁body內最上面添加一個<span id="top" name="top"></span>
二、咱們再到body內，須要出現點擊後轉到頂部位置添加，<a href="#top">回到頂部</a>

這樣就可實現點擊「回到頂部」便可本頁內快速瀏覽到網頁頂部位置。

H 標籤

在沒有賦予H1 H2 H3 H4標籤任何CSS樣式時候，字體大小h1大於h2大於h3大於h4...

select 標籤(下拉菜單)

select 我下拉列表菜單標籤
Option爲下拉列表數據標籤
Value 爲Option的數據值（用於數據的傳值）

#顯示選中的屬性
<select>
    <option value='1'>上海</option>
    <option value='2'>北京</option>
    <option value='3' selected='selected'>廣州</option>
</select>

#下拉菜單大小爲2
<select size='2'>
    <option>上海</option>
    <option>北京</option>
    <option>廣州</option>
    <option>廣州</option>
</select>

#下拉菜單多選
<select multiple="multiple" size='2'>
    <option>上海</option>
    <option>北京</option>
    <option>廣州</option>
    <option>廣州</option>
</select>

#某些值不可選
<select>
    <optgroup label='河北省'>
        <option>石家莊</option>
        <option>邯鄲</option>
    </optgroup>
    <optgroup label='山西省'>
        <option>太原</option>
        <option>平遙</option>
    </optgroup>
</select>

View Code

 input  標籤

屬性值

值	描述
button	定義可點擊的按鈕（大多與 JavaScript 使用來啓動腳本）
checkbox	定義複選框。
color	定義拾色器。
date	定義日期字段（帶有 calendar 控件）
datetime	定義日期字段（帶有 calendar 和 time 控件）
datetime-local	定義日期字段（帶有 calendar 和 time 控件）
month	定義日期字段的月（帶有 calendar 控件）
week	定義日期字段的周（帶有 calendar 控件）
time	定義日期字段的時、分、秒（帶有 time 控件）
email	定義用於 e-mail 地址的文本字段
file	定義輸入字段和 "瀏覽..." 按鈕，供文件上傳
hidden	定義隱藏輸入字段
image	定義圖像做爲提交按鈕
number	定義帶有 spinner 控件的數字字段
password	定義密碼字段。字段中的字符會被遮蔽。
radio	定義單選按鈕。
range	定義帶有 slider 控件的數字字段。
reset	定義重置按鈕。重置按鈕會將全部表單字段重置爲初始值。
search	定義用於搜索的文本字段。
submit	定義提交按鈕。提交按鈕向服務器發送數據。
tel	定義用於電話號碼的文本字段。
text	默認。定義單行輸入字段，用戶可在其中輸入文本。默認是 20 個字符。
url	定義用於 URL 的文本字段。

Checkbox（多選複選框）

<input name="Fruit" type="checkbox" value="" />

使用html input標籤，name爲自定義，type類型爲「checkbox」的表單

<input type='checkbox'/>
<input type='checkbox' checked/>
<input type='checkbox' checked='checked'/>

eg：

 

redio(單選框)

<input name="Fruit" type="radio" value="" />

使用html input標籤，name爲自定義，type類型爲「radio」的表單，

 

注意對比如下兩組，要實現單選，必須name 名稱相同

男<input type="radio" value="man">
女<input type="radio" value="male">
保密<input type="radio" value="no">

男<input type="radio"  name="gender" value="man">
女<input type="radio"  name="gender" value="male">
保密<input type="radio" checked="checked" name="gender" value="no">

View Code

----按鈕

button標籤

<button> 標籤訂義一個按鈕。
<button type="button">Click Me!</button>

重要事項：若是在 HTML 表單中使用 button 元素，不一樣的瀏覽器會提交不一樣的值。Internet Explorer 將提交 <button> 與 <button/> 之間的文本，而其餘瀏覽器將提交 value 屬性的內容。請在 HTML 表單中使用 input 元素來建立按鈕。

<input type="button" /> 定義可點擊的按鈕，但沒有任何行爲。button 類型經常使用於在用戶點擊按鈕時啓動 JavaScript 程序。

在 button 元素內部，您能夠放置內容，好比文本或圖像。這是該元素與使用 input 元素建立的按鈕之間的不一樣之處。

<button> 控件 與 <input type="button"> 相比，提供了更爲強大的功能和更豐富的內容。<button> 與 </button> 標籤之間的全部內容都是按鈕的內容，其中包括任何可接受的正文內容，好比文本或多媒體內容。例如，咱們能夠在按鈕中包括一個圖像和相關的文本，用它們在按 鈕中建立一個吸引人的標記圖像。

Submit

<input type="submit" /> 定義提交按鈕。提交按鈕用於向服務器發送表單數據。數據會發送到表單的 action 屬性中指定的頁面。

 

submit和button,兩者都以按鈕的形式展示,看起來都是按鈕，所不一樣的是type屬性和處發響應的事件上，submit會提交表單，button不會提交表單.

submit是button的一個特例，也是button的一種，它把提交這個動做自動集成了。
若是表單在點擊提交按鈕後須要用JS進行處理（包括輸入驗證）後再提交的話，一般都必須把submit改爲button，即取消其自動提交的行爲，不然，將會形成提交兩次的效果，對於動態網頁來講，也就是對數據庫操做兩次。或者在使用submit時驗證時加return true或false。

File

<input type="file" /> 用於文件上傳。

提交文件時： enctype='multipart/form-data' method='POST'

textarea

<textarea rows="3" cols="20">
在w3school，你能夠找到你所須要的全部的網站建設教程。
</textarea>

標籤內屬性說明
Name 爲傳值命名
Cols 爲字符寬度（每行輸入文字多少寬度），跟具體數字
Rows 爲行數，默認輸入框區域顯示高度，跟具體數字


文本區中可容納無限數量的文本，其中的文本的默認字體是等寬字體（一般是 Courier）。

能夠經過 cols 和 rows 屬性來規定 textarea 的尺寸，不過更好的辦法是使用 CSS 的 height 和 width 屬性。

註釋：在文本輸入區內的文本行間，用 "%OD%OA" （回車/換行）進行分隔。

label 標籤

定義和用法

<label> 標籤爲 input 元素定義標註（標記）。

label 元素不會向用戶呈現任何特殊效果。不過，它爲鼠標用戶改進了可用性。若是您在 label 元素內點擊文本，就會觸發此控件。就是說，當用戶選擇該標籤時，瀏覽器就會自動將焦點轉到和標籤相關的表單控件上。

<label> 標籤的 for 屬性應當與相關元素的 id 屬性相同。

效果以下：(實現點擊單選按鈕框文字 或 多選按鈕框文字對應選擇按鈕被選擇)

ul ol

• 有序列表（ol li）
• 無序列表(ul li)

   

dl dt dd

<dl>
<dt>列表標題</dt>
<dd>列表內容</dd>
<dd>列表內容</dd>
...
</dl>

語法解釋：
首先dt和dd是放於dl標籤內，標籤dt與dd處於dl下相同級。也就是dt不能放入dd內，dd不能放入dt內。在dl下，dt與dd處於同級標籤。DD標籤能夠若干。同時不能不加dl地單獨使用dt標籤或dd標籤。
同時dd內能夠放置<ul>標籤使用(放在<ol> 中無序號，效果同ul)。

table

<table> 標籤訂義 HTML 表格。

簡單的 HTML 表格由 table 元素以及一個或多個 tr、th 或 td 元素組成。

tr 元素定義表格行，th 元素定義表頭，td 元素定義表格單元。

更復雜的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。

<thead> 標籤訂義表格的表頭。該標籤用於組合 HTML 表格的表頭內容。

thead 元素應該與 tbody 和 tfoot 元素結合起來使用。

tbody 元素用於對 HTML 表格中的主體內容進行分組，而 tfoot 元素用於對 HTML 表格中的表注（頁腳）內容進行分組。

註釋：若是您使用 thead、tfoot 以及 tbody 元素，您就必須使用所有的元素。它們的出現次序是：thead、tfoot、tbody，這樣瀏覽器就能夠在收到全部數據前呈現頁腳了。您必須在 table 元素內部使用這些標籤。

無邊框表格
若是在定義表格時，沒有指定border屬性，那麼表格就沒有邊框

table表格語法與結構
    <table border="1"> 
        <tr> 
            <td>&nbsp;</td> 
            <td>&nbsp;</td> 
            <td>&nbsp;</td> 
        </tr> 
    </table> 
--------------------------------
<table>
<thead>
    <tr><th colspan='3'>1</th></tr>   #合併列
    <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>
    <tr><td rowspan='3'>1</td><td>3</td><td>3</td></tr>  #合併行
    <tr><td>3</td><td>3</td></tr>
    <tr><td>3</td><td>3</td></tr>
    <tr><td>3</td><td>3</td><td>3</td></tr>
</tbody>
</table>

fieldset

<fieldset>
    <legend>登陸</legend>
    <p>用戶名：</p>
    <p>密碼：</p>
</fieldset>

 

登陸

用戶名：

密碼：

form 表單

下面的表單擁有兩個輸入字段以及一個提交按鈕，當提交表單時，表單數據會提交到名爲 "form_action.asp" 的頁面：

<form action="form_action.asp" method="get">
  <p>First name: <input type="text" name="fname" /></p>
  <p>Last name: <input type="text" name="lname" /></p>
  <input type="submit" value="Submit" />
</form>

CSS

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

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

語法：style = 'key1:value1;key2:value2;'

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

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

規則定義
id方法：      #new{  }
class方法： .web{  }
標籤方法：    div{  }

標籤選擇器

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; }

background

• background-color
• background-image
• background-repeat（no-repeat;repeat-x;repeat-y）
• background-position

border（邊框）

一、四個邊框
border-left 設置左邊框，通常單獨設置左邊框樣式使用
border-right 設置右邊框，通常單獨設置右邊框樣式使用
border-top 設置上邊框，通常單獨設置上邊框樣式使用
border-bottom 設置下邊框，通常單獨設置下邊框樣式使用,有時可將下邊框樣式做爲css下劃線效果應用。

二、四邊相同邊框border簡寫
#divcss5{border:1px solid #00F}
設置了divcss5對象盒子1px像素藍色實線邊框

三、邊框三個樣式
一般咱們能夠對邊框設置寬度（厚度）、邊框樣式、邊框顏色這三個屬性與參數。

1）、邊框顏色：border-color:#000

2）、邊框厚度（寬度）：border-width:1px
使用數字+單位設置邊框厚度寬度，如1px(邊框厚度寬度爲1像素)，邊框必須爲正數字，大於0的數值。不然設置邊框border樣式無效。

3）、border邊框樣式：border-style:solid

邊框樣式值以下：
none : 　無邊框。與任何指定的border-width值無關
hidden : 　隱藏邊框。IE不支持
dotted : 　在MAC平臺上IE4+與WINDOWS和UNIX平臺上IE5.5+爲點線。不然爲實線（經常使用）
dashed : 　在MAC平臺上IE4+與WINDOWS和UNIX平臺上IE5.5+爲虛線。不然爲實線（經常使用）
solid : 　實線邊框（經常使用）
double : 　雙線邊框。兩條單線與其間隔的和等於指定的border-width值
groove : 　根據border-color的值畫3D凹槽
ridge : 　根據border-color的值畫菱形邊框
inset : 　根據border-color的值畫3D凹邊
outset : 　根據border-color的值畫3D凸邊eg：<div style='border:1px solid red; height: 10px;'></div><br/><div style='border:1px dotted red; height: 10px;'></div><br/><div style='border:1px dashed red; height: 10px;'></div>