跟着杨中科学习asp.net之html
第一節課
ＨＴＭＬ基礎加強班
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。測試標準：對給定幾個網頁來測試，谷歌的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”轉義符。<；（小于號）；>；（大于號）； ；（空格）；實用工具，免除記憶。
l 格式標簽<p></p>創建段落；<br/>回車，也可以寫成<br>，在html中有一些標簽可以不關閉，<br>就是一個，這是和xml不同的地方，但是為了遵循xhtml規范，推薦像xml一樣嚴格關閉。<br/><img=s.gif/>
l Html不把“ ”當成空格，因為html中經常有縮進，如果把縮進的空格在瀏覽器中以空格形式展現的話，排版會很麻煩?！?amp;nbsp;”表示空格。
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，這樣域名改變了，目錄改變了都不受影響。
<a href=”a.htm”><img src=”a.jpg”></a>
<img src=”../images/csharp1.jpg”/>
<img src=”./images/csharp2.jpg” />
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哪怕圖片沒有加載完成，也會先把位置占上。
<a href="../images/00.jpg"><img src="../images/00.jpg" width="50" height="50"/></a>
l 如果網頁上要顯示小圖（比如縮略圖），不要僅僅是把大圖設定一下width、height來縮小，因為仍然會下載大圖，使得加載速度很慢。
列表、表格
列表：<ul><li>灌水區</li><li>版務區</li><li>原創貼圖</li></ul>
l （unordered list）
l
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的值就可以知道誰被選中了，不用單獨的判斷。
<input type="text"/>
<input type="checkbox"/>
<input type="button" value="注冊"/>
<input type="submit" value="注冊一下下"/>
<input type="checkbox" checked="checked"/>
</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 >
<option>北京</option>
<option>上海</option>
<option>南京</option>
</select>
<select size="2">
<option>1</option>
<option>2</option>
<option>3</option>
</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>
<select name="城市" size=9>
<optgroup label="直轄市">
<option>北京</option>
<option>上海</option>
<option>天津</option>
</optgroup>
<optgroup label="廣東">
<option>深圳</option>
<option>佛山</option>
<option>廣州</option>
</optgroup>
<optgroup label="經濟特區">
<option>廈門</option>
<option>珠海</option>
<option>海南</option>
</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
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 style=“設置樣式”>
<legend>常用</legend>
<input type="text" />
</fieldset>
<fieldset>
<legend>常?ê用??</legend>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
</fieldset>
l submit(提交)、reset(恢復為默認值)
l *滾動文字 <marquee>
l *播放聲音（dw中添加媒體→插件）、顯示flash，見備注。
練習
練習1：實現登錄界面，有用戶名、密碼、驗證碼（使用普通圖片代替）、“記住密碼”復選框、登錄按鈕、重置按鈕。使用Table進行布局。使用label來寫修飾文本。
<table border="1">
<tr><td><label for="username">用戶名：</label></td><td><input id="username" type="text" /></td ></tr>
<tr><td><label for="password">密碼：</label></td><td><input id="password" type="text"/></td ></tr>
<tr><td><label for="remember">記住密碼：</label></td><td><input id="remember" type="checkbox"/></tr>
</table>
練習2：實現注冊頁面，分為兩個頁面，第一個頁面是協議顯示頁面，點擊“我同意”超鏈接進入第二個注冊頁面，填寫內容：用戶名、密碼、重復密碼、省份（下拉列表）、性別（男、女、保密三個Radio）、職業（學生、公司職員、其他三個Radio）、愛好（登山、籃球、足球、讀書、游泳五個CheckBox）。使用label來寫修飾文本。將愛好幾個CheckBox放到一個fieldset(GroupBox)中
樣式表、CSS
CSS（層疊樣式表，Cascading Style Sheets）是用來美化頁面用的，可以對頁面元素進行更精細的設置，樣式主要描述元素的字體顏色、背景顏色、邊框等。CSS是描述元素的皮膚。
使用CSS的好處：
外觀美化 布局、定位
樣式表能實現內容與樣式的分離，方便團隊開發
方便統一定義格式,修改也方便.
HTML標簽的外觀樣式比較單一
頁面色彩不生動
樣式修改不方便
樣式表的作用：為網頁設置外觀，相當于華麗的衣服。
例如：背景顏色：
<input type="text" value="123" style="background-color:red"/>
邊框顏色：
<input type="text" value="123" style="border-color:red"/>
使用CSS的三種方式
CSS主要有元素內聯、頁面嵌入和外部引用三種使用方式。CSS是描述元素的皮膚！
元素內聯(行內樣式表)，直接將樣式寫入元素的style屬性中，<input type="text" readonly="readonly" style="background-color: #FF00FF" />，適用于樣式沒有可復用性的場合。
頁面嵌入（內嵌樣式表）：在head中加入
<style type="text/css">
input{border-color:Yellow;color:Red;}
</style>
表示頁面中所有input都是采用指定的樣式。適合于樣式復用，減小頁面體積
外部引用（外部樣式表），將css內容寫入css后綴的文件
textarea{background:yellow}
然后在頁面中引用，在head中加入
<link type="text/css" rel=“stylesheet" href="s1.css" />
適合于多個頁面共享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;}
<table><tr><td class="highlight">aaa</td><td class="warning">bb</td><td class="highlight warning">ccc</td></tr></table>
同一個標簽可以應用多個類選擇器（空格隔開）。如果樣式表中
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;}
<input class="accountno" type="text" value="11111111111" />
<label class="accountno">333333333333333333</label>
執行：
id選擇器
為指定id的元素設定樣式，id前加#
#username
{
font-size:10px;
}
<input id="usersname" type="text" value="aaaaaaaaaaaa" />
style、class可以同時組合使用
<input id="username" class="accountno" style="font-size:40px;color:red" type="text" value="aaaaaaaaaaaa“ />
更多選擇器(*)
包含選擇器：
P strong{ background-color:Yellow}
表示P標簽內的strong標簽內的內容使用的樣式
<strong>fadsfasdfads</strong>
<p><strong>adfasfd</strong></p>
組合選擇器，同時為多個標簽設定一個樣式
H1,H2,input{background-color:Green}
<h1>nihao</h1>
<input type="text" value="test" />
(*)其他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）
轉載于:https://www.cnblogs.com/seclusively/p/3789394.html
總結
以上是生活随笔為你收集整理的跟着杨中科学习asp.net之html的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Python 内置模块之 logging
- 下一篇： 跟着杨中科学习asp.net之dom