什麼是瀏覽器？
瀏覽器就是接收瀏覽者的操作(打開一個網址 點擊一個鏈接 點擊一個按鈕)，然後幫瀏覽者去Web服務器請求網頁內容(HTML格式返回)，然後展現成人眼能夠看得懂的可視化頁面的軟件。
IE==瀏覽器？IE是瀏覽器的一種，還有FireFox Opera Chrome等，注意遨遊(Maxthon) 世界之窗 搜狗瀏覽器 360瀏覽器等並不是一種獨立於IE的瀏覽器，其內核還是IE的內核，只不過換了一個外殼而已，所以用遨遊的不能嘲笑用IE的，否則就露怯了。
所謂的Trident引擎就是IE的WebBrowser控件。現在很多非IE核心的瀏覽器用的是WebKit引擎，比如哦遨遊3或搜狗的雙核 Chrome Safari.
HTML
HTML就是描述網頁長什麼樣子 有什麼內容的一個文本。查看網頁的描述內容(HTML)的方式：使用IE瀏覽器的話，在網頁上點擊右鍵，選擇“查看源文件”
瀏覽器兼容性問題：描述文件時一個統一的，但是就像口語翻譯一樣，不同的翻譯翻譯出來的東西也是不一樣的。不同瀏覽器品牌對HTML的支持是有差異的，所以同一個網頁在IE上和FireFox上看起來可能長得不一樣，最明顯的就是以前的IE上和FireFox上看起來可能長得不一樣，最明顯的就是以前的QQ空間上的頁面在FireFox上顯示就有爲您提，設置有的頁面在IE6 IE7 IE8上長得也不一樣。因此Web開發過程中的一個重要的也是最頭疼的問題就是瀏覽器的兼容。測試FireFox(簡稱FF) Chrome等瀏覽器安裝各自的軟件就可以，測試不同版本的IE可以用IETester
靜態頁面 動態頁面
網站頁面分爲靜態頁面和動態頁面兩種
靜態頁面：有一個html頁面文件保存在服務器上，瀏覽器要這個頁面的時候服務器就把這個頁面文件發給瀏覽器；
動態頁面：服務器上沒有瀏覽者要看的頁面，而是服務器動態生成的HTML頁面發給瀏覽器，動態語言的服務器可以用C# VB.NET PHP Java C等編寫
編寫普通的HTML頁面時和任何後臺語言無關的，可以使用Dreamweaver Expression Web(FrontPage的改頭換面版)等工具寫，這些工具是給頁面美工用的，開發人員用VisualStudio寫html就夠了。不要把精力放到怎麼把頁面做好看上，正規公司都有專門的頁面美工，不正規公司都市偷別人的美工頁面，無論是偷別人的頁面，還是使用公司美工開發出來的頁面，對於開發人員要做的“填模板”工作都是一樣的。
第一個網頁
新建Web項目(新建==》ASP.NetWeb應用程序)，新建html頁面(添加==》新建項==》Web==》HTML頁)
查看頁面的方式：
切換到”設計“試圖，可以在這裏查看初步的預覽效果，不是很難，
可以在“設計”試圖從工具箱中拖放空間可視化的設計，設計負責頁面的時候很少直接可視化設計。
在編輯器上點右鍵，選擇“在瀏覽器中查看”。無法進行調試。
將要查看的頁面設爲起始頁（在文件上點擊右鍵“設爲起始頁”），
然後點擊“啓動調試”。可以調試。
學沒有JS C#代碼的時候用“在瀏覽器中查看”。修改頁面不用關閉瀏覽器再打開，刷新就可以。
HTML頁結構說明
所有內容都在<html></html>標籤之內；<head></head>內放的是頭部信息，是對頁面的描述，不會直接顯示在頁面中，<head>內的<title>中設置的是頁面的標題，<title>只能放在<head>中;<body>是頁面的主體,大部分顯示內容都定義在這裏。
所有頁面都應該至少包含這些部分，由於瀏覽器容錯性強，所以即使不包含也能正常顯示，但是最好還是寫完全了。
顏色體系
body標籤的bgcolor屬性可以設定網頁的背景顏色,<body bgcolor="#006699">
#006699這就是HTML中表示顏色的方式，每兩個是一組，三組分別就表示R G B的值，是16進製表示。關於RGB見備註
可以使用VS內置的顏色選擇對話框生成RGB值，也可以用取色器(比如DebugBar內置的取色器：打開IE，打開DebugBar工具欄，點擊吸管圖標);HTML還預定義了一些顏色：red black white等，比如bgcolor="black".
配色不是一個專業開發人員考慮的，是美工的事情，所以對於顏色的取值不用太操心，知道有這麼一回事就行了。
HTML和XML的聯繫 區別
屬性值：HTML中屬性值即可以用單引號括起來 也可以用雙引號括起來 設置不用引號都可以(不推薦)，單雙要配對。
註釋：HTML使用和XML一樣的<!--註釋內容-->賴做註釋。
特殊字符：HTML中<、>是有特殊含義的、 空格是不會被顯示的（輸入一個帶空格的字符串看看），所以需要特殊符號，相當於C#中的'/n'轉義符。<(小於號,less than);>(大於號，greater than); (空格，no-break space).使用工具 免除記憶。
格式標籤：<p></p>創建段落;<br/>回車，也可以寫成<br>,在HTML中游一些標籤可以不關閉，<br>就是一個，這是和XML不同的地方，但是爲了遵循XHTML規範，推薦像XML一樣嚴格關閉。
HTML不把“ ”當成空格，因爲HTML中經常有縮進，如果把縮進的空格在瀏覽器中一空格形式展現的話，排版會很麻煩。“ ”表示空格。
爲什麼<>要用<>代替?就是因爲<>有特殊含義：標籤的定義。
文字格式
<br/>只是回車,<p>是分段。<p>前後會有比較大的空白，而<br/>則沒有。
<center>傳智播客</center>居顯示
h標籤，HTML定義了<h1></h2>到<h6></h6>六個h標籤，分別表示不同大小的字體。
<b>a</b>粗體。
<font></font>字體標籤,<font color="red">紅色</font>
<font size="30" color="red">紅色</font>
URL 超鏈接
URL:URL表示資源在網絡中的地址，比如
http://127.0.l0.1/a.htm
ftp://192.168.88.128/b.zip.還有URI的概念，比URL大，有的類中使用URI這種說法，可以暫時看成和URL一樣就行。
超級鏈接：<a href="http://www.rupeng.com">如鵬網</a>.
<a>中海可以嵌套圖片，這樣就是點擊圖片打開鏈接
<a href="http://www.rupeng.com"><img src="</a" target="_blank">http://www.rupeng.com/forum/templates/uchome/images/logo.gif"/></a>
超鏈接深入
相對URL：相對URL表示相對於當前文檔的資源，"/"表示網站根目錄，"../"表示父目錄，"../../"表示父目錄的父目錄，"./"或者不寫任何斜線表示相對於當前路徑的目錄。站內引用最好用相對URL，這樣域名改變了 目錄改變了都不受影響。
<a href="a.htm"><img src="a.jpg"/></a>
將<a>的target屬性設定爲"_blank"就可以在新窗口中打開超鏈接。國情：國內的網站很多都市默認在新窗口中打開。
用name屬性爲<a>起名字 ：<a name="Last">這裏是最後</a>.
這樣可以通過<a href="#Last">轉到平臺</a>賴跳轉到超鏈接的部分。
案例：去往評論、回到正問。多敲幾個回車
圖片
<img src="a.jpg"/>注意圖片不是鏈接的，不是插入的，所以如果Src指向的文件不存在了，就看不了了。alt屬性爲圖片無法顯示時的顯示文本，鼠標方式去也會有懸浮提示“點擊查看大圖”；
border屬性指定邊框，border="0"不顯示邊框;width height屬性指定圖片的顯示大小，如果不指定則是圖片的原始大小。
最好指定width height 哪怕是原始尺寸大小，因爲如果不指定大小，圖片會不佔位置，圖片下載後才調整大小，會造成頁面很亂.如果指定了width height哪怕圖片沒有家在完成，也會先把位置占上。
如果網頁上要顯示小圖（比如縮略圖），不要僅僅是把大圖設定一下width height賴縮小，因爲仍然會下載大圖，會使得家在速度很慢。
列表 表格
列表：<ul><li>灌水區</li><li>版務區</li><li>原創貼圖</li></ul> unordered list
(*)還有有序的列表<ol></ol>,用的很少。ordered list
表格：<table></table>爲表格,在內部通過<tr>創建行， <tr>內部通過<td>創建單元格。可以將table的border屬性設爲0賴隱藏表格線。
<tr>的屬性：align,水平對齊，可選值left right center; valign,垂直對齊，可選值top middle bottom
<td>也有aligtn和valign.子標籤默認會繼承父標籤的屬性，如果自己單獨指定了屬性，則會覆蓋父類的屬性。
(*)還可以使用rowspan colspan進行單元格的合併，用VS可視化的功能來做就行。
(*)表頭的td可以用th代替，這樣就會表頭粗體 居中顯示。
建議將表用用<thead>代替<tr>
表單
網站表單與填表
<form>標籤爲表單標籤。如果要把數據調教到服務器，則需要將<input> <textarea> <select>等表單元素放到form中。
<input>是主要的表單元素，type的可選值：submit(提交按鈕) button(普通按鈕) checkbox(複選框) file(文件選擇框)
hidden(隱藏字段) image(圖片按鈕) 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的值就可以知道誰被選中了，不用單獨的判斷。
file:使用file,則form的enctype必須設置爲multipart/form-data methord屬性爲post
image:使用src屬性指定圖片的地址，用來實現美化的“登錄按鈕”。
<select>標籤
用來創建類似於WinForm中的ComboBox或者ListBox
如果 size屬性大於1就是ListBox（size的值爲顯示出來的列表數量）,否則就是ComboBox.
<select multiple>或者<select multiple="multiple">(推薦),那麼就是可以多選的ListBox.
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都數據進行分組，分組本身不會被選擇，無論對於下拉列表還是列表框都使用。
其他標籤
<textarea>多行文本(也是表單元素);<textarea>文本</textarea>,cols rows屬性表示行數和列數
<label>:在<input type="text">前可以寫普通的文本賴修飾,但是單擊修飾文本的時候input並不會得到焦點，而用label則可以，for屬性指定要修飾的控件的id,
<label for="txt1">sadfadf</label>
爲被修飾的控件設置一個唯一的id.
fieldset:GroupBox效果,將控件劃分一個區域，看起來更規整。
<fieldset>
<legend>常用</legend>
<input type="text">
</fieldset>
層(Div) 塊(Span)
層:<div></div>將內容放到層中，就以將這些內容當成一個整體進行處理，比如整體隱藏 整體移動等。div非常強大和常用。
類似於WinForm的Panel.
span:div是將內容放到一個矩形的區塊中，會影響佈局，而span只是把一段內容定義成一個整體進行操作，但不影響佈局 顯示。
樣式表 CSS
CSS（層疊樣式表）是用來美化頁面用的，可以對頁面元素進行更精細的設置，樣式主要描述元素的字體顏色 背景顏色 邊框等。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(顯示爲內聯元素，元素前後沒有換行符)等。
cursor,鼠標在元素上時顯示的光標圖標，可選值：cursor(默認光標) pointer(超鏈接上的手) text(輸入Bean) wait(忙沙漏) help(幫助)等。
Li不顯示圓點：LIST_STYLE-TYPE:none;一般設置在li或者ul上
應用：圖片：不顯示邊框
元素內聯，直接將樣式寫入元素的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.
樣式選擇器
對於非元素內聯的樣式需要定義樣式選擇器，通俗的說就是這個樣式適合於哪些元素，三種：標籤選擇器 class選擇器和id選擇器。
標籤選擇器input{border-color:Yellow;color:Red;}對於指定的標籤採用統一的樣式
class選擇器，自定義一個命名的樣式，然後再用到它的時候設定元素的class屬性爲樣式的名稱，還可以同時設定多個class,名稱之間加空格。
標籤+class選擇器
class選擇器也可以針對不同的標籤，實現同樣的樣式名對於不同的標籤有不同的樣式，只要在樣式名前加簽名即口。
id選擇器
爲指定id的元素設定樣式，id前加#
#username
{
font-size:xx-large;
}
<input id="username" type="text" value="aaaaaaaaaaaa">
style class可以同時組合使用
<input id="username" class="accountno" style="font-size:xx-large" type="text" value="aaaaaaaaaaaa">
更多選擇器
關聯選擇器
P strong{background-color:Yellow}
表示P標籤內的strong標籤內的內容使用的樣式
<strong>dfasldfj</strong>
<p><strong>fdsfs</strong></p>
組合選擇器,同時爲多個標籤設定一個樣式
H1.H2.input{background-color:Green}
<h1>nihao</h1>
<input type="text" value="test">
僞選擇器：
僞選擇器：爲標籤的不同狀態設定不同的樣式：
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}
HTML
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章