------- Windows Phone 7手機開發、.Net培訓、期待與您交流！ -------
瀏覽器簡介
-
瀏覽器就是接收瀏覽者的操作（打開一個網址、點擊一個鏈接、點擊一個按鈕），然後幫瀏覽者去Web服務器請求網頁內容（HTML格式返回），然後翻譯成正常人類能夠看得懂的可視化頁面軟件。
-
瀏覽器有很多種，最常見的有兩種內核，IE瀏覽器的內核Trident和Chrome的內核WebKit。其他瀏覽器大多采用的都是其中的一種或兩種內核。WebKit引擎比較牛，所以最新的IE瀏覽器也用了起來。
-
所謂的Trident引擎就是IE的WebBrowser控件。
靜態頁面、動態頁面
-
靜態頁面：有一個html頁面文件保存在服務器上，瀏覽器要這個頁面的時候服務器就把這個頁面文件發給瀏覽器。
-
動態頁面：服務器上沒有瀏覽者要看的頁面，而是服務器動態生成的HTML頁面發給瀏覽者，動態語言的服務器可以用C#、VB.Net、PHP、Java、C等編寫。
-
編寫普通的HTML頁面是和任何後臺語言無關的，可以使用Dreamweaver、Expression Web等工具寫，這些工具是給頁面美工用的，開發人員用VisualStudio寫html就夠了。
HTML頁結構說明
-
所有內容都在<html></html>標籤之內；<head></head>內放的是頭部信息，是對頁面的描述，不會直接顯示在頁面中，<head>內的<title>中的設置的是頁面的標題，<title>只能放在<head>中；<body>是頁面的主體，大部分顯示內容都定義在這裏。
-
所有頁面都應該至少包含這些部分，由於瀏覽器的容錯性強，所以即使不包含也能正常顯示，但是最好還是寫完全了。
-
HTML不把“ ”當成空格，因爲HTML中經常有縮進，如果把縮進的空格在瀏覽器中以空格的形式展現的話，排版會很麻煩。
HTML的基本標籤
-
(頁面內容的)標題(Heading):<h1/>-<h6/> <h1>表示的標題字最大</h1>
-
段落(Paragraph):<p/> <p align="center">居中對齊</p>
-
換行符(break):<br> <br/>換行
-
預先格式化(pre edition)：<pre>該元素中的文本保留空格、換行符，文本爲等寬字體。顯示 預先定義格式 的文本（如HTML文檔中所示）
-
字符格式化：<b>粗體(bold)</b> <i>斜體(italic)</i> <u>加下劃線(underline)</u> <sub>下標(subscript)</sub> <sup>上標(superscript)</sup>
-
列表(list): 無序列表(unordered list)-<ul><li></li></ul> 有序列表(ordered list)-<ol></ol>
-
水平線(Horizontal Rule):<hr> 屬性：align width size noshade
<hr noshade size="5" align="center" width="50%" />
-
字體(font)：<font></font> 屬性：size(1-7)數字越大字體越大,color(也可用16進製表示),face(可以指定一系列字體) <font size = “5” color = “blue” face = “Arial”></font>
-
圖像(image)：<img/> 屬性:src圖形路徑 align對齊方式
<img src="a.jpg">注意圖片是鏈接的，不是插入的，所以如果Src指向的文件不存在了，就看不了了。Alt屬性爲圖片無法顯示時的顯示文本。
最好指定圖片的width、height，哪怕是原始尺寸大小，因爲如果不指定大小，圖片會不佔位置，圖片下載後才調整大小，會造成頁面很亂。
如果網頁上要顯示小圖（比如縮略圖），不要僅僅是把大圖設定一下width、height來縮小，因爲仍然會下載大圖，會使得加載速度很慢。
-
特殊字符:
空格(no break space)：
大於號(>):> >
小於號(<):⁢ <
引號("):" "
®:® ®
©:©©
-
超級鏈接:<a/> href(hyperlink reference)
<a href="url">Link text</a>
<a href="http://www.xxx.com/">我的主頁</a>
{
錨標籤<a>還可用於使用戶“跳”到文檔的某個部分
爲達到這種跳轉效果，需要在href參數中使用該標記
<a href = “#Lion”>獅子</A>
Html的name屬性用於創建錨標記
<a name = “Lion”>獅子</a>
效果如下圖所示，點擊帶下劃線的“獅子”可以跳到下文的“獅子”處。
}
也可以跳到其他HTML文檔的某個部分：
<A HREF=AnimalDetails.htm#Lion>獅子</A>
<A NAME = Lion>獅子</A>
電子郵件鏈接:
<a href=“mailto:[email protected]”>請將您的疑問發送至David</A>
-
meta標籤：位於頭部：<head>
許多搜索引擎都使用 meta 標籤信息
<meta name="author" content="Graham Browne">
<meta http-equiv-"expires" content="Wed, 14 Sep 2011 GMT">:表示網友過期時間
<meta http-equit="refresh" content="2">:表示每隔2秒，自動刷新網頁
-
小結：
HTML 標籤一般配對使用，不區分大小寫
標籤都具有屬性。屬性提供關於網頁上 HTML 元素的附加信息
meta 標籤放置在網頁的標題處以提供關於頁面的信息。搜索引擎常會用到這些標籤
標題級標籤使用<h1>…<h6>
段落標籤使用<p align＝“對齊方式”>…</p>
無序列表使用<ul>標籤,有序列表使用<ol>標籤
字體標籤<font color=“顏色” size=“大小” face＝“字體”>
超鏈接標籤<a href=“鏈接地址”>超鏈接文本</a>
-
創建表格:
border="2"表示邊框線尺寸
<caption>表示表格標題
<th>表示行或列標題，粗體顯示
colspan="3"表示跨3列
rowspan="3"表示跨3行
align,水平對齊，可選值left,right,center;
valign,垂直對齊，可選值top,middle,bottom。
<tr>表示行
<td>表示列
例子：
<table border="0" align="center" width="200"> <!-整個表格居中-->
<caption align="top">學員檔案信息</caption>
<tr bgcolor="#00ffff">
<th>姓名</th> <!-默認左對齊-->
<th align="center">性別</th> <!-居中-->
<th align="right">分數</th> <!-右對齊-->
</tr>
<tr bgcolor="#ffff00">
<td>Robert</td>
<td align="center">M</td>
<td align="right">80</td>
</tr>
<tr bgcolor="#ffff00">
<td>Mary</td>
<td align="center">F</td>
<td align="right">18</td>
</tr>
</table>
-
HTML表單和輸入<form>
<input> 定義輸入域（單行文本框）
<textarea> 定義文本域（多行文本框）
<select> 定義一個選擇列表
<form>
<input name="button1" type="submit" value="提交"/>
<input name="button2" type="reset" value="重置" />
<input name="button3" type="button" value="普通按鈕" />
<input type="text" name="PID" value="" size="20" maxlength="18" />
<input type="password" value="" name="pass" size="15" />
<textarea name="textarea" cols="20" rows="5">請填寫您的工作經歷</textarea>
性別：<input type="radio" name="sex" value="male">男性</input>
<input type="radio" name="sex" value="female">女性</input>
你喜歡以下哪些明星：<br/>
<input type="Checkbox" name="id1" value="Noriko_Sagai">酒井法子</input>
<input type="Checkbox" name="id2" value="Leon">鄭秀文</input>
<input type="Checkbox" name="id3" value="BonJovi" checked="checked">BonJovi</input>
<b>誰是2002年世界盃冠軍？</b>
<select name="myselect">
<option selected="selected">西班牙</option>
<option>法國</option>
<option>巴西</option>
<option>德國</option>
</select>
</form>
-
fieldset：GroupBox效果
<fieldset>
<legend>區域標題</legend>
<input type="text" />
</fieldset>
Fieldset:將控件劃分一個區域，看起來更加整齊。
-
樣式表、CSS
CSS（層疊樣式表）是用來美化頁面用的，可以對頁面元素進行更精細的設置，樣式主要描述元素的字體顏色、背景顏色、邊框等。CSS、頁面嵌入和外部引用三種方式。
1. 元素內聯，直接將樣式style屬性中，<input type=”text” readonly=“readonly” style=”background-color:#ff00ff”>,適用於樣式沒有可複用性的場合。
2. 頁面嵌入：在head中加入
<style type=”text/css”>
Input{border-color:Yellow;color:Red;}
</style>
表示頁面中所有input都是採用指定的樣式。適合於樣式複用，減小頁面體積
3. 外部引用，將css內容寫入css後綴的文件
Textarea{background:yellow;}
然後再頁面中引用，在head中加入
<link type=”text/css” rel=”Stylesheet” href=”s1.css”/>
適合於多個頁面共享css。
-
常見樣式（style）
1. CSS計量單位：表示寬度、距離時有多種計量單位：px（像素）、30%（百分比）、em（相對單位）等。
2. Backgroud-color:Red;背景顏色；color：文本顏色
3. Border-style:solid:邊框風格，實線，還有dotted（點）等值；border-color：邊框顏色；border-width：邊框寬度。例子：style=”border-color:red;border-width:1px;border-style:dotted;”
4. Display:元素是否顯示，可選值none（不顯示）、block（顯示爲塊級元素，此元素前後會帶有換行符。）、inline（顯示爲內聯元素，元素前後沒有換行符）等。
5. Cursor，鼠標在元素上時顯示的光標圖標，可選值：cursor（默認光標）、pointer（超鏈接上的手）、text（輸入Bean）、wait（忙沙漏）、help（幫助）等。
<body style=”cursor:url(animal.ani)”></body>
鼠標圖案變成圖片（animal.ani），也可以是.cur類型的圖片。
-
層（Div）、塊（Span）
層：<div></div>將內容放到層中，就以將這些內容當成一個整體進行處理，比如整體隱藏、整體移動等。Div非常強大和常用。
Span: div是將內容放到一個矩形的區塊中，會影響佈局，而span只是把一段內容定義成一個整體進行操作，但不影響佈局、顯示。