跟著楊中科學習asp.net之html

最後更新：2014-06-19 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：winform style class blog java http

第一節課

ＨＴＭＬ基礎加強班

l 什麼是瀏覽器？

1. 瀏覽器就是接受瀏覽者的操作（開啟一個網址、點擊一個連結、點擊一個按鈕），然後幫瀏覽者去ｗｅｂ伺服器請求網頁的內容（ｈｔｍｌ格式返回），然後展現成人眼能夠看得懂的可視化的頁面的軟體。

l ＩＥ＝瀏覽器？這個說法是錯誤的。IE是瀏覽器的一種，還有FireFox、Opera、Charome等，注意遨遊（Maxthon）、世界之窗、搜狗瀏覽器、３６０瀏覽器等並不是一種獨立於IE的瀏覽器，其核心還是IE的核心，只不過是換了一個外殼而已，所以用遨遊的不能嘲笑用IE的，否則就露怯了，試著用WeBrowse空間自己開發一個瀏覽器。

l WebBrowser控制項

雙擊按鈕：

方法如下：

webBrowser1.Navigate(textBox1.Text);

htm檔案代碼如下：

<html>

<head>

</head>

<body>

<font color="red">hello</font>

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

</body>

</html>

運行結果：

l 所謂的Trident引擎就是WebBrosder空間，現在很多非IE核心的瀏覽器用的是Webkit引擎，比如遨遊３或搜狗的雙核、Chrome、Safari。搞瀏覽器開發挺簡單的。

l HTML就是描述網頁長什麼樣子、有什麼內容的一個文本。在查看網頁的描述內容的方式：使用IE瀏覽器的話，在網頁上點擊右鍵，選擇“查看源檔案”

l 瀏覽器安全色性問題：描述檔案是一個統一的，但是就像口語翻譯一樣，不同翻譯翻譯出來的東西也是有差異的，所以同一個網頁在IE上和Firefox上看起來就可能長得不一樣，最明顯的就是以前qq空間上的頁面在Firefox上線時就有問題，甚至有的網頁在IE6、IE7、IE8上的也不一樣。因此web開發過程中的一個重要也是最頭疼的問題就是瀏覽器的相容，測試Firefox（簡稱FF）、Chrome等瀏覽器安裝各自的軟體就可以，測試不同版本的IE可以用IETester。

l 只要能跑IE和firefox就ok了。

小知識：

瀏覽器安全色性測試：Acid。測試標準：對給定幾個網頁來測試，Google的Firefox１００分，IE的９８分。

瀏覽器開發引擎Webkit、Trident、Gecko。

QQ、暴風、千千靜聽等彈出的新聞中心是網頁，是嵌在瀏覽器架構中的。用visual studio 就可以開發。

靜態頁面、動態網頁面

l 網站頁面分為靜態頁面和動態網頁面兩種

n 靜態頁面：有一個html分頁檔儲存在伺服器上，瀏覽器要這個頁面的時候伺服器就把這個分頁檔發給瀏覽器；

n 東莞台頁面：伺服器上沒有臉攔著要看的頁面，而是伺服器動態產生的html頁面發給瀏覽器，動態語言的服務端也易用C#，vb.net、 php、java、c等編寫。

l 編寫普通的html頁面和任何後台語言無關的，可以使用dreamweaver、expression web等工具寫，這些工具是給頁面美工用的，開發人員用visual studio寫html就夠了，不要把精力放到怎麼把頁面好看上，正規公司都有專門的頁面美工，不正規的公司都是偷別人的美工頁面，無論是偷別人的頁面，還是使用美工公司開發出來的頁面，對於開發人員要做的“填模板”工作都是一樣的。

第二課

課前說明：

l 內容：html、css

l 目標：掌握手寫html實現一般難度的web頁面的能力（如網站註冊表單），為asp.net學習打基礎。堅持手寫html，可視化設計知識一種自學的手段。

l 參考書：張孝祥《javascript網頁開發——體驗式學習教程》

第一個網頁

主流編程人員所用的為visual studio 2008，可以去官網下載。有點大，3.7個G。

l 建立web項目（建立→asp.netweb應用程式），建立html頁面（添加→建立項→web→html頁）

l 查看頁面方式

n 切換到“設計”視圖，可以在這裡查看初步的預覽效果，不是很准，可以再“設計”試圖工具箱中拖放空間可視化的設計，設計複雜頁面的時候很少直接可視化設計

n 右鍵，選擇“在瀏覽器中查看”。無法進行調試。

n 將要查看的頁面設為起始頁（在檔案上點擊右鍵“設為起始頁”），然後點擊“啟動調試”，即可調試。

l 學沒有js、c#代碼的時候用“在瀏覽器中查看”。修改頁面不用關閉瀏覽器再開啟，重新整理就可以。

第三課

Html頁結構說明

l 所有內容都在<html></html>標籤之內：<head></head>記憶體放的是頭部資訊，是對頁面的描述，不會直接顯示在頁面中，<head>內的<title>中設定的是頁面的標題，<title>只能放在<head>中；<body>是頁面的主題，大部分顯示內容都定義在這裡。

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

顏色體系

l Body標籤中的bgcolor屬性可以設定網頁的背景顏色，<body bgcolor=“#006699”>

l #006699就是html中表示顏色的方式，每兩個是一組，三組就分別表示R、G、B的值，是16進位表示。關於RGB見備忘

l 可以使用vs內建的顏色選擇對話方塊產生RGB值，也可以用色彩選擇工具（比如DEBUG內建的色彩選擇工具；開啟IE，開啟debugbar工具列，點擊吸管表徵圖）；html海域定義了一些顏色：red、black、white等，比如bgcolor=“black”。

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

Html和xml的聯絡、區別

l Xhtml

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

l 注釋：html使用和xml一樣的<!—注釋內容-->來做注釋。

l 特殊字元：html中<、>是有特殊含義的、空格不會被顯示的（輸入一個帶空格的字串試試），所以需要特殊符號，相當於c#中的“\n”轉義符。&lt；（小於符號）；&gt；（大於符號）；&nbsp；（空格）；工具 + 生產力，免除記憶。

l 格式標籤<p></p>建立段落；<br/>斷行符號，也可以寫成<br>，在html中有一些標籤可以不關閉，<br>就是一個，這是和xml不同的地方，但是為了遵循xhtml規範，推薦像xml一樣嚴格關閉。<br/><img=s.gif/>

l Html不把“ ”當成空格，因為html中經常有縮排，如果把縮排的空格在瀏覽器中以空格形式展現的話，排版會很麻煩。“ ”表示空格。

l <pre>不是萬能的。功能有限。

文字格式

l <br>只是斷行符號(即換行)，<p>是分段，<p>前後會有比較大的空白，而<br>則沒有。

l <center>網路創新小組</center>置中顯示

l h標籤，html定義了<h1></h1>到<h6></h6>六個h標籤，分別表示不同大小的字型。

l <b>網路創新小組</b>粗體

l <font></font>字型標籤，<font color=“red”>紅色</font> <font size=“30” color=“red”>紅色</font>

url、超連結

l url：表示資源在網路中的地址，比如

http://127.0.0.1/a.html、ftp://192.168.88.128/b.zip。還有uri的概念，比url大，有的可以使用uri之中說法，可以暫時看成和url一樣大就行。

l 超連結：<a href="http://www.hao123.com">好123</a>

點擊，直接進入“好123”網站

l <a>中還可以嵌套圖片，這樣就是點擊圖片開啟串連<a href=www.hebiace.edu.cn ><img src=”http://www.hebiace.edu.cn/images/newindex1104_03.gif” /></a>

超連結深入

l 相對url：相對url表示相對於當前文檔的資源，“/”表示網站根目錄，“../”表示父目錄，“../../”表示父目錄的父目錄，”../”或者不寫任何斜線表示相對於當前路徑的目錄。站內引用最好用相對url，這樣網域名稱改變了，目錄改變了都不受影響。

l 將<a>的target屬性設定為“_blank”就可以在新的視窗中開啟超連結。國內的網站都預設是在新視窗中開啟。

l 超連結：<a href=”http://www.baidu.com”>baidu</a>

l 用<a>的target屬性為<a>起名字：<a name=”last”>這就是最後</a>

這樣可以通過<a href=”#last”>跳到平台</a>來跳轉到超連結的部分。

l 案例：去評論、回到本文。多敲幾個斷行符號

圖片

l <img src=”a.jpg”/>注意圖片是串連的，不是插入的，所以如果src指向的檔案不存在了，就看不了了。Alt屬性為圖片無法顯示使得顯示文本，滑鼠方式也會有懸浮提示“點擊查看大圖”；border屬性指定邊框，border=“0”不顯示邊框；width、height屬性指定圖片的顯示大小，如果不指定則是原始大小。

l 最好指定width、height，哪怕是原始大小大小，因為如果不指定大小，圖片不佔位置，圖片下載後才調整大小，會造成頁面很亂。如果知道那個了width、height哪怕圖片沒有載入完成，也會先把位置占上。

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

列表、表格

列表：<ul><li>灌水區</li><li>版務區</li><li>原創貼圖</li></ul>

l （unordered list）

l 還有有序列表<ol></ol>，很少用。Ordered list

l 表格：<table></table>為表格，在內部用過<tr>建立行，<tr>內部通過<td>建立儲存格。可以講table的border屬性設為0來隱藏表格線

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

n <td>也有align和valign。<tr align=”right”><td>tom</td><td align=”left”>20</td><td>男</td>：子標籤預設則繼承父標籤的屬性，如果自己單組設定了屬性，則會覆蓋父標籤的屬性。

n 還可以使rowspan、colspan來進行儲存格的合并，vs可視化的功能來做就行。

n 表頭的td可以用th代替，這樣就會表示粗體、置中顯示。

n 建議將表頭用<><thead>代替<tr>

表單

l 網站表單于填單

l <form>標籤為表單標籤。如果要把資料提交到伺服器，則需要將<input>、<textarea>、<select>等表單元素放到form中。

l <input>是主要的表單元素，type的可選值：submit（提交按鈕）、button（普通按鈕）、checkbox（複選框）file（檔案選擇框）、hidden（隱藏欄位）、img（圖片按鈕）、password（密碼框）、radio（選項按鈕）、reset（重設按鈕）、text（文字框）

input表單詳解

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

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

checkbox：checked屬性工作表示是否被選中，<input type="checkbox" checked />或者<input type="checkbox" checked="checked" />(推薦)checked、readonly等這種一個可選值的屬性都可以省略屬性值。

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

</br>

<input type="radio" name="gender" />男

<br>

<input type="radio" name="gender"/>女

</br

<br>

<input type="radio" name="gender"/>保密

</br>

<input type="radio" name="habit" />籃球

<br>

<input type="radio" name="habit"/>足球

</br

<br>

<input type="radio" name="habit"/>排球

</br>

file：使用file，則form的enctype必須設定為multipart/form-data、method屬性為POST（*）

image：使用src屬性指定圖片的地址，用來實現美化的“登入按鈕”。用圖片實現的submit按鈕，同時提交了使用者點擊圖片的座標。

<select>標籤

用來建立類似於WinForm中的ComboBox或者ListBox

如果size屬性大於1就是ListBox（size的值為顯示出來的列表數量），否則就是ComboBox。<select multiple>或者<select multiple="multiple">（推薦）multiple有且只有一個值，那麼就是可以多選的ListBox。

</select>

</select>

Size控制同時顯示多少個值

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

將一個option設定為選中：<option selected>333</option>或者<option selected="selected">333</option>(推薦)就可以將這個項設定為選擇項

如何?“不選擇”，添加一個<option value="-1">--不選擇--<option>，然後編程判斷select選中的值如果是-1就認為是不選擇。

select分組選項，可以使用optgroup對資料進行分組，分組本身不會被選擇，無論對於下拉式清單還是列表框都適用。見備忘。

<form>

</optgroup>

</optgroup>

</optgroup>

</select>

</form>

其他標籤

l <textarea>多行文本（也是表單元素）：<textarea>文本</textarea>，cols=“50”、rows=“15”屬性工作表示行數和列數。

l <textarea cols="10" rows="10">

l <label>：在<input type=“text”>前可以寫普通的文本來修飾，但是單擊修飾文本的時候input並不會得到焦點，而用label則可以，for屬性指定要修飾的控制項的id，<label for=“txt1” >asdfad</label>；”txt1”為被修飾的控制項設定一個唯一的id。(label的accesskey=“r”屬性指定快速鍵，FF不支援)

l 姓名：<input type="text"/>

l 婚否：<input type="checkbox"/>

l </br>

l <label for="name">姓名：</label><input id="name" type="text"/>

l <label for="ma">婚否：</label><input id="ma" type="checkbox"/>

用label主要是點擊“姓名”、“婚否”，滑鼠就會在該方框裡面。

l <label for="ma">婚否</label> <input id="ma" type="checkbox" />

l fieldset：GroupBox效果，將控制項劃分一個地區，看起來更規整

</fieldset>

</fieldset>

l submit(提交)、reset(恢複為預設值)

l *滾動文字 <marquee>

l *播放聲音（dw中添加媒體→外掛程式）、顯示flash，見備忘。

練習

練習1：實現登入介面，有使用者名稱、密碼、驗證碼（使用普通圖片代替）、“記住密碼”複選框、登入按鈕、重設按鈕。使用Table進行布局。使用label來寫修飾文本。

<tr><td><label for="username">使用者名稱：</label></td><td><input id="username" type="text" /></td ></tr>

</table>

練習2：實現註冊頁面，分為兩個頁面，第一個頁面是協議顯示頁面，點擊“我同意”超連結進入第二個註冊頁面，填寫內容：使用者名稱、密碼、重複密碼、省份（下拉式清單）、性別（男、女、保密三個Radio）、職業（學生、公司職員、其他三個Radio）、愛好（登山、籃球、足球、讀書、遊泳五個CheckBox）。使用label來寫修飾文本。將愛好幾個CheckBox放到一個fieldset(GroupBox)中

樣式表、CSS

CSS（層疊樣式表，Cascading Style Sheets）是用來美化頁面用的，可以對頁面元素進行更精細的設定，樣式主要描述元素的字型顏色、背景顏色、邊框等。CSS是描述元素的皮膚。

使用CSS的好處：

外觀美化布局、定位

樣式表能實現內容與樣式的分離，方便團隊開發

方便統一定義格式,修改也方便.

HTML標籤的外觀樣式比較單一

頁面色彩不生動

樣式修改不方便

樣式表的作用：為網頁設定外觀，相當於華麗的衣服。

例如：背景顏色：

邊框顏色：

使用CSS的三種方式

CSS主要有元素內聯、頁面嵌入和外部參考三種使用方式。CSS是描述元素的皮膚！

元素內聯(行內樣式表)，直接將樣式寫入元素的style屬性中，<input type="text" readonly="readonly" style="background-color: #FF00FF" />，適用於樣式沒有可複用性的場合。

頁面嵌入（內嵌樣式表）：在head中加入

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

</style>

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

外部參考（外部樣式表），將css內容寫入css尾碼的檔案

textarea{background:yellow}

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

適合於多個頁面共用css。

一列全部顯示顏色：

層(DIV)

文本顏色：

文法：

<style>

p{}

</style>

<p></p>

把CSS申明在一個檔案裡面

Div層（區塊層級元素）、Span(行內元素)

div：<div></div>將內容放到層中，就以將這些內容當成一個整體進行處理，比如整體隱藏、整體移動等。div非常強大和常用。類似於WinForm的Panel。

span：div是將內容放到一個矩形的區塊中，會影響布局（兩端會換行），而span只是把一段內容定義成一個整體進行操作，但不影響布局、顯示（兩端沒有換行）。示範：一行文字用span與div截取部分文字的區別。

Div在網頁布局中使用非常多。

Span一般用來圈住一小段文字，設定不同的樣式。為什麼不用<font>標籤，因為用<span>可以通過CSS來設樣式。

html這些標籤去哪裡查？Msdn目錄→ web開發 → HTML and CSS → HTML and DHTML Reference → Objects

常見CSS樣式

Css樣式的屬性的索引值對之間用“：”（冒號）隔開，而不同的屬性之間用”;”（分號）隔開。

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

background-color:Red;背景顏色；

color：文本顏色

border-style:solid;邊框風格，實線（預設是沒有），還有dotted(點)等值；

border-color：邊框顏色；

border-width：邊框寬度(預設是0)。

例子：style="border-color:Red;border-width:1px;border-style:dotted;"

display：元素是否顯示，可選值none（不顯示）、block （顯示為區塊層級元素，此元素前後會帶有分行符號。）、inline（顯示為內嵌元素，元素前後沒有分行符號 ,為div增加display:inline;樣式後與span顯示效果一致。注意：【

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> 】）等。

cursor，style cursor:滑鼠在元素上時顯示的游標表徵圖，可選值：cursor（預設游標）、pointer（超連結上的手）、text（輸入Bean）、wait（忙沙漏）、help（協助）等。還可以通過cursor:url(dinosau2.ani)使用ani、cur格式的自訂游標圖片。

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

設定游標（格式必須是ani或者cur）

margin(與表格的cellspacing屬性類似)、padding(與表格的cellpadding類似。)

margin:值1; //上右下左都是值1。

margin:值1 值2; //上下為值1，左右為值2.

margin:值1 值2 值3; //上為值1 左右為值2 下為值3;

margin:值1 值2 值3 值4; //每個值分別是：上右下左;(順時針方向)

例如：

風格是inline

樣式選取器

對於非元素內聯的樣式需要定義樣式選取器，通俗的說就是這個樣式適合於哪些元素，三種：標籤選取器、class選取器和id選取器。

標籤選取器 input{border-color:Yellow;color:Red;}，對於指定的標籤採用統一的樣式

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

樣式名稱開頭加“.”

.warning{background:Yellow;}

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

同一個標籤可以應用多個類別選取器（空格隔開）。如果樣式表中

style="background-color:Green"的權優先於

<style>

.warning{background:Yellow;}

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

</style>

的class, 所以背景變為綠色，原先class設定為黃色。

標籤+class選取器

class選取器也可以針對不同的標籤，實現同樣的樣式名對於不同的標籤有不同的樣式，只要在樣式名前加標籤名即可。

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

label.accountno{font-style:italic;}

執行：

id選取器

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

#username

{

font-size:10px;

}

style、class可以同時組合使用

更多選取器(*)

包含選取器：

P strong{ background-color:Yellow}

表示P標籤內的strong標籤內的內容使用的樣式

<strong>fadsfasdfads</strong>

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

組合選取器，同時為多個標籤設定一個樣式

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

<h1>nihao</h1>

(*)其他CSS選取器：div > p(子選取器)、div + p（相鄰選取器）、…。IE7以下不支援。在jQuery中還會學習。

偽選取器

偽選取器：為標籤的不同狀態設定不同的樣式：

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表示超連結不顯示底線。

不是所有的元素都支援偽選取器。（不同瀏覽器支援情況不一樣,IE7以下不支援input:hover等標籤。），目前大多數只在A標籤時使用。

注意瀏覽器緩衝問題。

思考：頁面上部分超連結預設是紅色、部分超連結預設是白色。怎麼實現？（.myAnchor:link）

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More