黑馬程式員——HTML學習筆記

---------------------- Windows Phone 7手機開發、.Net教育訓練、期待與您交流！ ----------------------

什麼是浏覽器？

1.浏覽器就是接收浏覽者的操作（打開一個網址、點選一個連結、點選一個按鈕），然後幫浏覽者去Web伺服器請求網頁内容（HTML格式傳回），然後展現成人眼能看得懂的可視化頁面的軟體。

2.IE==浏覽器？IE是浏覽器的一種，還有FireFox、Opera、Chrome等，注意遨遊（Maxthon）、世界之窗、搜狗浏覽器、360浏覽器等并不是一種獨立于IE的浏覽器，其核心還是IE的核心，隻不過換了一個外殼而已。

3.所謂的Trident引擎就是IE的WebBrowser控件，現在很多非IE核心的浏覽器用的是WebKit引擎，比如遨遊3和搜狗的雙核、Chrome、Safari。

HTML:

1.HTML(HyperText Markup Language)就是描述網頁長什麼樣子、有什麼内容的一個文本。檢視網頁的描述内容（HTML）的方式：使用IE浏覽器的話，在網頁上點選右鍵，選擇“檢視源檔案”。

2.B/S(Browser / Server) : html + css + js。

3.浏覽器相容性問題：描述檔案是一個統一的，但是就像口語翻譯一樣，不同的翻譯翻譯出來的東西也是不一樣的。不同浏覽器品牌對HTML的支援是有差異的，是以同一個網頁在IE上和FireFox上看起來可能長得不一樣，最明顯的就是以前QQ空間上的頁面在FireFox上顯示就有問題，甚至有的頁面在IE6、IE7、IE8上長的也不一樣。是以Web開發過程中的一個重要的也是最頭疼的問題就是浏覽器的相容。測試FireFox、Chrome等浏覽器安裝各自的軟體就可以，測試不同版本的IE可以用IETester。

靜态頁面、動态頁面:

1.網站頁面分為靜态頁面和動态頁面兩種。

2.靜态頁面：有一個html頁面檔案儲存在伺服器上，浏覽器要這個頁面的時候就把這個頁面檔案發給浏覽器。

3.動态頁面：伺服器上沒有浏覽者要看的頁面，而是伺服器動态生成的HTML頁面發給浏覽器，動态語言的伺服器端可以用C#、VB.Net、PHP、Java、C等編寫。

4.編寫普通的HTML頁面是和任何背景語言無關的，可以使用Dreamweaver、Expression Web（FrontPage的改頭換面版）等工具寫，這些工具是給頁面美工用的，開發人員用Visual Studio寫html就夠了，不要把精力放到怎麼把界面做好看上，正規公司都有專門的頁面美工，不正規公司都是偷别人的的美工頁面，無論是偷别人的頁面，還是使用公司美工開發出來的頁面，對于開發人員要做的“填模闆”工作都是一樣的。

第一個網頁:

1.建立Web項目（建立→ASP.NetWeb應用程式），建立html頁面（添加→建立項→Web→HTML）。

2.檢視頁面的方式：

3.切換到“設計”視圖，可以在這裡檢視初步的預覽效果，不是很準，可以在“設計”從工具箱中拖放控件可視化設計，設計複雜頁面的時候很少直接可視化設計。

4.在編輯器上點右鍵，選擇“在浏覽器中檢視”。無法進行調試。

5.将要檢視的頁面設為起始頁（在檔案上點選右鍵“設為起始頁”），然後點選“啟動調試”。可以調試。

6.學沒有JS、C#代碼的時候用“在浏覽器中檢視”。修改頁面不用關閉浏覽器再打開，重新整理就可以。

HTML頁結構說明:

1.所有内容都在<html></html>标簽之内；<head></head>内放的是頭部資訊，是對頁面的描述，不會直接顯示在頁面中，<head>内<title>中設定的是頁面的标題，<title>隻能放在<head>中；<body>是頁面的主體，大部分顯示的内容都定義在這裡。

2.所有頁面都應該至少包含這些部分，由于浏覽器容錯性強，是以即使不包含也能正常顯示，但是最好還是寫完全了。

顔色體系:

1.body标簽的bgcolor屬性可以設定網頁的背景顔色，<body bgcolor=#"006699">。

2.#006699這就是HTML中表示顔色的方式，每兩個是一組，三組分别就表示R、G、B的值，是16進制表示。

3.可以使用VS内置的顔色選擇對話框生成RBG值，也可以用取色器（比如DebugBar内置的取色器：打開DebugBar工具欄，點選吸管圖示）；HTML還預定義了一些顔色：red、black、white等，比如bgcolor="black"。

4.配色不是一個專業開發人員考慮的，是美工的事情，是以對于顔色的取值不用太操心，知道有這麼一回事就行了。

HTML和XML的聯系、差別:

1.格式标簽：<p></p>建立段落；<br/>回車，也可以寫成<br>，在HTML中有一些标簽可以不關閉，<br>就是一個，這是和XML不同的地方（常考），但是為了遵循XHTML規範，推薦想XML一樣嚴格關閉。<br/><img src="1.gif"/>。

2.屬性值：HTML中屬性值即可以用單引号括起來、也可以用雙引号括起來、甚至不用引号都可以（不推薦），單雙要配對。

3.注釋：HTML使用和XML一樣的<--注釋内容-->來做注釋。

4.特殊字元：HTML中<、>是有特殊含義的、空格是不會被顯示的（輸入一個帶空格的字元串看看），是以需要特殊符号，相當于C#中的'\n'轉義符。<（小于号，less than）；>（大于号，greater than）； （空格，no-break space）。使用工具、免除記憶。

HTML不把" "當成空格，因為HTML中經常有縮進，如果把縮進的空格在浏覽器中以空格形式展現的話，排版會很麻煩。" "表示空格。

為什麼<>要用<>代替？就是因為<>有特殊含義：标簽的定義。

文字格式:

1.<br />隻是回車，<p>是分段。<p>前後會有比較大的空白，而<br/>則沒有。

2.<center>傳智播客</center>居中顯示。

3.h标簽，HTML定義了<h1></h1>到<h6></h6>六個h标簽，分别表示不同大小的字型。

4.<b>a</b>粗體，<i>b</i>斜體。

5.<font></font>字型标簽，<font color="red">紅色</font> <font size="30" color="red">紅色</font> color size face。

URL、超連結:

1.URL：是Uniform ResourceLocation的縮寫，譯為“統一資源定位符”。URL表示資源在網絡中的位址，比如http://127.0.0.1/a.htm、ftp://192.168.88.128/b.zip。還有URI的概念，比URL大，有的類中使用URI這種說法，可以按時看成和URL一樣就行。

2.超級連結：<a href="http://www.rupeng.com" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >如鵬網</a>。

3.<a>中還可以嵌套圖檔，這樣就是點選圖檔打開連接配接<a href="http://www.rupeng.com" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ><imgsrc="http://www.rupeng.com/forum/templates/uchome/images/logo.gif"/></a>。

超連結深入:

1.相對URL：相對URL表示相對于目前文檔的資源，"/"表示網站根目錄，"../"表示父目錄，"../../"表示父目錄的父目錄，"./"或者不寫任何斜線表示相對于目前路徑的目錄。站内引用最好用相對URL，這樣域名改變了、目錄改變了都不受影響。<ahref="a.htm" target="_blank" rel="external nofollow" ><img src="a.jpg"/></a>

2.<img src="../images/csharp1.jpg" />

3.<img src="/images/csharp1.jpg" />

4.将<a>的target屬性設定為"_blank"就可以在新視窗中打開超連結。國情：國内的網站很多都是預設在新視窗中打開。

5.用name屬性為<a>起名字：<a name="Last">這裡是最後</a>。這樣可以通過<ahref="#Last" target="_blank" rel="external nofollow" >轉到平台</a>來跳轉到超連結的部分。

圖檔:

1.<img src="a.jpg"/>注意圖檔是連結的，不是插入的，是以如果Src指向的檔案不存在了，就看不了了。alt屬性為圖檔無法顯示時的顯示文本，滑鼠放上去也會有懸浮提示“點選檢視大圖”；border屬性指定邊框，不顯示邊框；width、height屬性指定圖檔的顯示大小，如果不指定則是圖檔的原始大小。

2.最好指定width、height，哪怕是原始尺寸大小，因為如果不指定大小，圖檔會不占位置，圖檔下載下傳後才調整大小，會造成頁面很亂。如果指定了width、height哪怕圖檔沒有加載完成，也會先把位置占上。

3.如果網頁上要顯示小圖（比如縮略圖），不要僅僅是把大圖設定一下width、height來縮小，因為仍然會下載下傳大圖，會使得加載速度很慢。

4.易錯，不要以為把bmp字尾改為jpg就是改檔案格式了！

清單、表格

1.清單：<ul><li>灌水區</li><li>版務區</li><li>原創貼圖</li></ul>。unordered list。

2.（*）還有有序的清單<ol></ol>，用的很少。ordered list。

3.表格：<table></table>為表格，在内部通過<tr>建立行，<tr>内部通過<td>建立單元格。可以将table的border屬性設為0來隐藏表格線。

4.填充、間距Cellpadding内容和表格邊線之間的距離cellspacing單元格之間的間距。

5.<tr>的屬性：align，水準對齊，可選值left、right、center；valign，垂直對齊，可選值top、middle、bottom。

6.<td>也有align和valign。<tr align="right"><td>tom</td><tdalign="left">20</td><td>男</td></tr>：子标簽預設繼承父标簽的屬性，如果自己單獨指定了屬性，則會覆寫父标簽的屬性。

7.（*）還可以使用rowspan、colspan進行單元格的合并，用VS可視化功能來做就行。

8.（*）表頭的td可以用th代替，這樣就會表頭粗體、居中顯示。

9.建議将表頭用<thead>代替<tr>。

表單

1.網站表單與填表。

2.<form>标簽為表單标簽。如果要把資料送出到伺服器，則需要将<input>、<textarea>、<select>等表單元素放到form中。

3.<input>是主要的表單元素，type的可選值：submit（送出按鈕）、button（普通按鈕）、checkbox（複選框）、file（檔案選擇框）、hidden（隐藏字段）、image（圖檔按鈕）、password（密碼框）、radio（單選按鈕）、reset（重置按鈕）、text（文本框）。<input type="file" />。

input表單詳解

1.submit：點選submit按鈕表單就會被送出給伺服器，中文IE下預設按鈕文本為“送出查詢”，可以設定value屬性修改按鈕的顯示文本。

2.text：size屬性為寬度，value為值，maxlength為可以輸入的最大長度，readonly為隻讀。<inputtype="text" readonly />（隻寫屬性名，不寫屬性值）或者<input type="text" readonly="readonly" />（推薦）。

3.checkbox：checkbox屬性表示是否被選中，<input type="checkbox" checked />或者<input type="checkbox" checked="checked"/>（推薦）。checked、readonly這種隻有一個可選值的屬性都可以省略屬性值。

4.radio：相同name屬性的為一組，不同radio設定不同的value值，這樣通過取指定name的值就可以知道誰被選中了，不用單獨的判斷。

5.file：使用file，則form的enctype必須設定為multipart/form-data、method屬性為POST。

6.image：使用src屬性指定圖檔的位址，用來實作美化的“登入按鈕”。

select标簽：

1.用來建立類似于WinForm中的ComboBox或者ListBox。

2.如果size屬性大于1就是ListBox（size的值為顯示出來的清單數量），否則就是ComboBox。<selectmultiple>或者<select multiple="multiple">（推薦），那麼就是可以多選的ListBox。

3.select中的項是<option>，<option >北京</option>還可以設定項的值<optionvalue="1">北京</option>。

4.将一個option設定為選中：<option selected>333</option>或者<option selected="selected">333</option>（推薦）就可以将這個項設定為選擇項。

5.如何實作“不選擇”，添加一個<option value="-1">--不選擇</option >，然後程式設計判斷select選中的值如果是-1就認為是不選擇。

6.select分組選項，可以使用optgroup對資料進行分組，分組本身不會被選擇，無論對于下拉清單還是清單框都适用。

其它标簽:

1.<textarea>多行文本（也是表單元素）：<textarea>文本</textarea>，cols、rows屬性表示行數和列數。

2.<label>：在<inputtype="text" />前可以寫普通的文本來修飾，但是單擊修飾文本的時候input并不會得到焦點，而用label則可以，for屬性指定要修飾的控件的id，<label for="txt1">asdfad</label>。

3.為被修飾的控件設定一個唯一的id。

4.<label for="ma">婚否</label>< input id="ma" type="checkbox"/>。

5.fieldset：GroupBox效果，将控件劃分一個區域，看起來更規整。

6.<fieldset>

</fieldset>

層（Div）、塊（Span）:

1.層：<div></div>将内容放到層中，就以将這些内容當成一個整體進行處理，比如整體隐藏、整體移動。Div非常強大和常用。類似于WinForm的Panel。

2.span：div是将内容放到一個矩形的區塊中，會影響布局，而span隻是把一段内容定義成一個整體進行操作，但不影響布局、顯示。

3.層内文字連續英文不換行的問題：wordbreak。

4.溢出處理。overflow:scroll；overflow:hide。

樣式、CSS:

1.CSS（層疊樣式表）是用來美化頁面的，可以對頁面元素進行更精細的設定，樣式主要描述元素的字型顔色、背景顔色、邊框等。CSS主要有元素内聯、頁面嵌入和外部引用三種使用方式。CSS是描述元素的皮膚！

2.元素内聯：直接将樣式寫入元素的style屬性中，

适用于樣式沒有可複用性的場合。

3.頁面嵌入：在head中加入

input{border-color:Yellow;color:Red;}

</style>

表示頁面中所有input都是采用指定的樣式。适合于樣式複用，減小頁面體積。

4.外部引用：将css内容寫入css字尾的檔案，

textarea{background:Yellow}

然後在頁面中引用，在head中加入：

适合于多個頁面共享css。

5.推薦把盡可能多的樣式寫到單獨的css檔案中，這樣可以複用，美勞工員和開發人員很好的分工。

6.隻有頁面特有的樣式才寫到<style>中。

7.隻有元素特有的樣式才寫到元素的style屬性中。

8.如果不同級别的樣式有沖突，詳細級别、子元素的會覆寫更進階别、父元素的。

常見樣式:

1.css計量機關：css中表示寬度、距離時有多種計量機關：px（像素）、30%（百分比）、em（相對機關）等。width:20px。

2.background-color:Red;背景顔色；color：文本顔色。

3.border-style:solid;邊框風格，實線（預設是沒有），還有dotted(點)等值；border-color：邊框顔色；border-width：邊框寬度(預設是0)。例子：style="border-color:Red;border-width:1px;border-style:dotted;"。

4.display：元素是否顯示，可選值none（不顯示）、block （顯示為塊級元素，此元素前後會帶有換行符。）、inline（顯示為内聯元素，元素前後沒有換行符）等。

5.cursor，滑鼠在元素上時顯示的光标圖示，可選值：cursor（預設光标）、pointer（超連結上的手）、text（輸入Bean）、wait（忙沙漏）、help（幫助）等。還可以通過cursor:url(dinosau2.ani)使用ani、cur格式的自定義光标圖檔。

6.LI不顯示圓點：LIST-STYLE-TYPE: none;一般設在li或者ul上。

樣式選擇器:

1.對于非元素内聯的樣式需要定義樣式選擇器，通俗的說就是這個樣式适合于哪些元素，三種：标簽選擇器、class選擇器和id選擇器。

2.标簽選擇器 input{border-color:Yellow;color:Red;}，對于指定的标簽采用統一的樣式。

3.class選擇器，以定義一個命名的樣式，然後在用到它的時候設定元素的class屬性為樣式的名稱，還可以同時設定多個class，名稱之間加空格。

4.樣式名稱開頭加“.”

　.warning{background:Yellow;}

　.highlight{font-size:xx-large;cursor:help;}

5.<table><tr><tdclass="highlight">aaa</td><tdclass="warning">bb</td><td class="highlightwarning">ccc</td></tr></table>

标簽+class選擇器:

1.class選擇器也可以針對不同的标簽，實作同樣的樣式名對于不同的标簽有不同的樣式，隻要在樣式名前加标簽名即可。

2.input.accountno{text-align:right;color:Red;}

3.label.accountno{font-style:italic;}

4.<input class="accountno" type="text"value="111111111111111" />

5.<labelclass="accountno">333333333333333333</label>

id選擇器:

1.為指定id的元素設定樣式，id前加#

#username

{

font-size:xx-large;

}

2.style、class可以同時組合使用

更多選擇器:

1.關聯選擇器：

P strong{ background-color:Yellow}

表示P标簽内的strong标簽内的内容使用的樣式

<strong>fadsfasdfads</strong>

<p><strong>adfasfd</strong></p>

2.組合選擇器，同時為多個标簽設定一個樣式

H1,H2,input{background-color:Green}

<h1>nihao</h1>

僞選擇器:

1.僞選擇器：為标簽的不同狀态設定不同的樣式：

A:visited：超連結點選過的樣式；A:active：選中超連結時的樣式；A:link：超連結未被通路時的狀态；A:hover：滑鼠移到超連結時的狀态。

A:visited {TEXT-DECORATION: none}

A:active {TEXT-DECORATION: none}

A:link {TEXT-DECORATION: none}

A:hover {TEXT-DECORATION: underline}

說明：TEXT-DECORATION: none表示超連結不顯示下劃線。

---------------------- Windows Phone 7手機開發、.Net教育訓練、期待與您交流！ ----------------------詳細請檢視：http://net.itheima.com/

黑馬程式員——HTML學習筆記

繼續閱讀

趕工心得（一）

（C# 程式設計指南）

一個小小的移動web版音樂播放器

Docker - Dockerfile之ADD、COPY、WORKDIR、USER、EXPOSE指令詳解

Compile workrave under windows &ndash; My exprience 在Windows上編譯Workrave

門戶通專訪草根站長九天狼：做站貴在堅持

tabpanel 使用問題

基于XOR的加密程式

為什麼把CSS放頭部，script放下面

C#多線程——前台線程和背景線程

CSS之折疊菜單

web開發之前後端渲染

Android – ListView 中添加按鈕，動态删除添加ItemView的操作

IE8 CSS設定DIV居中，添加“margin:0 auto”

Small tricks

403 Forbidden，You don't have permission to access / on this server.Forbidden