1、第一節(jié)課 基礎(chǔ)加強班l(xiāng) 什么是瀏覽器？1. 瀏覽器就是接受瀏覽者的操作（打開一個網(wǎng)址、點擊一個鏈接、點擊一個按鈕），然后幫瀏覽者去服務(wù)器請求網(wǎng)頁的內(nèi)容（格式返回），然后展現(xiàn)成人眼能夠看得懂的可視化的頁面的軟件。l 瀏覽器？這個說法是錯誤的。IE是瀏覽器的一種，還有FireFox、Opera、Charome等，注意遨游（Maxthon）、世界之窗、搜狗瀏覽器、瀏覽器等并不是一種獨立于IE的瀏覽器，其內(nèi)核還是IE的內(nèi)核，只不過是換了一個外殼而已，所以用遨游的不能嘲笑用IE的，否則就露怯了，試著用WeBrowse空間自己開發(fā)一個瀏覽器。l 所謂的Trident引擎就是WebBrosder空間，現(xiàn)在很

2、多非IE核心的瀏覽器用的是Webkit引擎，比如遨游或搜狗的雙核、Chrome、Safari。搞瀏覽器開發(fā)挺簡單的。l HTML就是描述網(wǎng)頁長什么樣子、有什么內(nèi)容的一個文本。在查看網(wǎng)頁的描述內(nèi)容的方式：使用IE瀏覽器的話，在網(wǎng)頁上點擊右鍵，選擇“查看源文件”l 瀏覽器兼容性問題：描述文件是一個統(tǒng)一的，但是就像口語翻譯一樣，不同翻譯翻譯出來的東西也是有差異的，所以同一個網(wǎng)頁在IE上和Firefox上看起來就可能長得不一樣，最明顯的就是以前qq空間上的頁面在Firefox上線時就有問題，甚至有的網(wǎng)頁在IE6、IE7、IE8商戰(zhàn)的也不一樣。因此web開發(fā)過程中的一個中藥也是最頭疼的問題就是瀏覽器的兼

3、容，測試Firefox（簡稱FF）、Chrome等瀏覽器安裝各自的軟件就可以，測試不同版本的IE可以用IETester。l 只要能跑IE和firefox就ok了。小知識：瀏覽器兼容性測試：Acid。測試標準：對給定幾個網(wǎng)頁來測試，谷歌的Firefox分，IE的分。瀏覽器開發(fā)引擎Webkit、Trident、Gecko。QQ、暴風(fēng)、千千靜聽等彈出的新聞中心是網(wǎng)頁，是嵌在瀏覽器框架中的。用visual studio 就可以開發(fā)。靜態(tài)頁面、動態(tài)頁面l 網(wǎng)站頁面分為靜態(tài)頁面和動態(tài)頁面兩種n 靜態(tài)頁面：有一個html頁面文件保存在服務(wù)器上，瀏覽器要這個頁面的時候服務(wù)器就把這個頁面文件發(fā)給瀏覽器；n 東莞

4、臺頁面：服務(wù)器上沒有臉攔著要看的頁面，而是服務(wù)器動態(tài)生成的html頁面發(fā)給瀏覽器，動態(tài)語言的服務(wù)端也易用C#，、 php、java、c等編寫。l 編寫普通的html頁面和任何后臺語言無關(guān)的，可以使用dreamweaver、expression web等工具寫，這些工具是給頁面美工用的，開發(fā)人員用visual studio寫html就夠了，不要把精力放到怎么把頁面好看上，正規(guī)公司都有專門的頁面美工，不正規(guī)的公司都是偷別人的美工頁面，無論是偷別人的頁面，還是使用美工公司開發(fā)出來的頁面，對于開發(fā)人員要做的“填模板”工作都是一樣的。第二課課前說明：l 內(nèi)容：html、cssl 目標：掌握手寫html實

5、現(xiàn)一般難度的web頁面的能力（如網(wǎng)站注冊表單），為學(xué)習(xí)打基礎(chǔ)。堅持手寫html，可視化設(shè)計知識一種自學(xué)的手段。l 參考書：張孝祥javascript網(wǎng)頁開發(fā)體驗式學(xué)習(xí)教程第一個網(wǎng)頁主流編程人員所用的為visual studio 2008，可以去官網(wǎng)下載。有點大，3.7個G。l 新建web項目（新建web應(yīng)用程序），新建html頁面（添加新建項webhtml頁）l 查看頁面方式n 切換到“設(shè)計”視圖，可以在這里查看初步的預(yù)覽效果，不是很準，可以再“設(shè)計”試圖工具箱中拖放空間可視化的設(shè)計，設(shè)計復(fù)雜頁面的時候很少直接可視化設(shè)計n 在變機器上右鍵，選擇“在瀏覽器中查看”。無法進行調(diào)試。n 將要查看的頁

6、面設(shè)為起始頁（在文件上點擊右鍵“設(shè)為起始頁”），然后點擊“啟動調(diào)試”，即可調(diào)試。l 學(xué)沒有js、c#代碼的時候用“在瀏覽器中查看”。修改頁面不用關(guān)閉瀏覽器再打開，刷新就可以。第三課Html頁結(jié)構(gòu)說明l 所有內(nèi)容都在標簽之內(nèi)：內(nèi)存放的是頭部信息，是對頁面的描述，不會直接顯示在頁面中，內(nèi)的中設(shè)置的是頁面的標題，只能放在中；是頁面的主題，大部分顯示內(nèi)容都定義在這里。l 所有頁面都應(yīng)該至少含有這些部分，由于瀏覽器容錯性強，所以即使不包含也能正常顯示，但是最好還是寫全了。顏色體系l Body標簽中的bgcolor屬性可以設(shè)定網(wǎng)頁的背景顏色，l #006699就是html中表示顏色的方式，每兩個是一組，三

7、組就分別表示R、G、B的值，是16進制表示。關(guān)于RGB見備注l 可以使用vs內(nèi)置的顏色選擇對話框生成RGB值，也可以用取色器（比如DEBUG內(nèi)置的取色器；打開IE，打開debugbar工具欄，點擊吸管圖標）；html海域定義了一些顏色：red、black、white等，比如bgcolor=“black”。l 配色不是一個專業(yè)開發(fā)人員考慮的，是美工的事情，所以對于顏色的取值不用太操心，知道有這么一會是就行了。 Html和xml的聯(lián)系、區(qū)別l Xhtmll 屬性值：html中屬性值即可以用單引號括起來，也可以用雙引號括起來、甚至不用引號都可以（不推薦），單雙要配對。l 注釋：html使用和xml一

8、樣的來做注釋。l 特殊字符：html中是有特殊含義的、空格不會被顯示的（輸入一個帶空格的字符串試試），所以需要特殊符號，相當(dāng)于c#中的“n”轉(zhuǎn)義符。&it；（小于號）；>；（大于號）； ；（空格）；實用工具，免除記憶。l 格式標簽創(chuàng)建段落；回車，也可以寫成，在html中有一些標簽可以不關(guān)閉，就是一個，這是和xml不同的地方，但是為了遵循xhtml規(guī)范，推薦像xml一樣嚴格關(guān)閉。l Html不把“ ”當(dāng)成空格，因為html中經(jīng)常有縮進，如果把縮進的空格在瀏覽器中以空格形式展現(xiàn)的話，排版會很麻煩?！?nbsp;”表示空格。l 不是萬能的。功能有限。文字格式l 只是回(即換行)，是分段，

9、前后會有比較大的空白，而則沒有。 如圖l 網(wǎng)絡(luò)創(chuàng)新小組居中顯示 如圖 l h標簽，html定義了到六個h標簽，分別表示不同大小的字體。l 網(wǎng)絡(luò)創(chuàng)新小組粗體l 字體標簽，紅色 紅色url、超鏈接l url：表示資源在網(wǎng)絡(luò)中的地址，比如 /a.html、28/b.zip。還有uri的概念，比url大，有的尅中使用uri之中說法，可以暫時看成和url一樣大就行。l 超鏈接：好123 點擊，直接進入“好123”網(wǎng)站l 中還可以嵌套圖片，這樣就是點擊圖片打開連接超鏈接深入l 相對url：相對url表示相對于當(dāng)前文檔的資源，“/”表示網(wǎng)站根目

10、錄，“./”表示父目錄，“././”表示父目錄的父目錄，”./”或者不寫任何斜線表示相對于當(dāng)前路徑的目錄。站內(nèi)引用最好用相對url，這樣域名改變了，目錄改變了都不受影響。 l 將的target屬性設(shè)定為“_blank”就可以在新的窗口中打開超鏈接。國內(nèi)的網(wǎng)站都默認是在新窗口中打開。l 超鏈接：baidul 用的target屬性為起名字：這就是最后 這樣可以通過跳到平臺來跳轉(zhuǎn)到超鏈接的部分。l 案例：去評論、回到正文。多敲幾個回車圖片l 注意圖片是連接的，不是插入的，所以如果src指向的文件不存在了，就看不了了。Alt屬性為圖片無法顯示使得顯示文本，鼠標方式也會有懸浮提示“點擊查看大圖”；bor

11、der屬性指定邊框，border=“0”不顯示邊框；width、height屬性指定圖片的顯示大小，如果不指定則是原始大小。l 最好指定width、height，哪怕是原始尺寸大小，因為如果不指定大小，圖片不占位置，圖片下載后才調(diào)整大小，會造成頁面很亂。如果知道那個了width、height哪怕圖片沒有加載完成，也會先把位置占上。l 如果網(wǎng)頁上要顯示小圖（比如縮略圖），不要僅僅是把大圖設(shè)定一下width、height來縮小，因為仍然會下載大圖，使得加載速度很慢。列表、表格l 列表：灌水區(qū)版務(wù)區(qū)原創(chuàng)貼圖（unordered list）l 還有有序列表，很少用。Ordered listl 表格：為

12、表格，在內(nèi)部用過創(chuàng)建行，內(nèi)部通過創(chuàng)建單元格?？梢灾vtable的border屬性設(shè)為0來隱藏表格線 n 屬性：align，水平對齊，可選值left、right、center；valign，垂直對齊，可選值top、middle、bottom。n 也有align和valign。tom20男：子標簽?zāi)J則繼承父標簽的屬性，如果自己單組設(shè)定了屬性，則會覆蓋父標簽的屬性。n 還可以使rowspan、colspan來進行單元格的合并，vs可視化的功能來做就行。n 表頭的td可以用th代替，這樣就會表示粗體、居中顯示。n 建議將表頭用代替表單l 網(wǎng)站表單于填單l 標簽為表單標簽。如果要把數(shù)據(jù)提交到服務(wù)器，則需

13、要將、等表單元素放到form中。l 是主要的表單元素，type的可選值：submit（提交按鈕）、button（普通按鈕）、checkbox（復(fù)選框）file（文件選擇框）、hidden（隱藏字段）、img（圖片按鈕）、password（密碼框）、radio（單選按鈕）、reset（重置按鈕）、text（文本框）input表單詳解submit：點擊submit按鈕表單就會被提交給服務(wù)器，中文IE下默認按鈕文本為“提交查詢”，可以設(shè)置value屬性修改按鈕的顯示文本text：size屬性為寬度，value為值，maxlength為可以輸入的最大長度，readonly只讀。（只寫屬性名，不寫屬性值

14、）或者（推薦）checkbox：checked屬性表示是否被選中，或者(推薦)checked、readonly等這種一個可選值的屬性都可以省略屬性值。radio：相同name屬性的為一只有組，不同radio設(shè)定不同的value值，這樣通過取指定name的值就可以知道誰被選中了，不用單獨的判斷。file：使用file，則form的enctype必須設(shè)置為multipart/form-data、method屬性為POST（*）image：使用src屬性指定圖片的地址，用來實現(xiàn)美化的“登錄按鈕”。用圖片實現(xiàn)的submit按鈕，同時提交了用戶點擊圖片的坐標。標簽用來創(chuàng)建類似于WinForm中的Comb

15、oBox或者ListBox如果size屬性大于1就是ListBox（size的值為顯示出來的列表數(shù)量），否則就是ComboBox?；蛘撸ㄍ扑]），那么就是可以多選的ListBox。select中的項是，北京還可以設(shè)定項的值北京。將一個option設(shè)置為選中：333或者333(推薦)就可以將這個項設(shè)定為選擇項如何實現(xiàn)“不選擇”，添加一個-不選擇-，然后編程判斷select選中的值如果是-1就認為是不選擇。select分組選項，可以使用optgroup對數(shù)據(jù)進行分組，分組本身不會被選擇，無論對于下拉列表還是列表框都適用。見備注。 其他標簽l 多行文本（也是表單元素）：文本，cols=“50”、row

16、s=“15”屬性表示行數(shù)和列數(shù)。l ：在前可以寫普通的文本來修飾，但是單擊修飾文本的時候input并不會得到焦點，而用label則可以，for屬性指定要修飾的控件的id，asdfad；”txt1”為被修飾的控件設(shè)置一個唯一的id。(label的accesskey=“r”屬性指定快捷鍵，F(xiàn)F不支持)用label主要是點擊“姓名”、“婚否”，鼠標就會在該方框里面。l 婚否 l fieldset：GroupBox效果，將控件劃分一個區(qū)域，看起來更規(guī)整 常用 l submit(提交)、reset(恢復(fù)為默認值)l *滾動文字 l *播放聲音（dw中添加媒體插件）、顯示flash，見備注。練習(xí)練習(xí)1：實

17、現(xiàn)登錄界面，有用戶名、密碼、驗證碼（使用普通圖片代替）、“記住密碼”復(fù)選框、登錄按鈕、重置按鈕。使用Table進行布局。使用label來寫修飾文本。練習(xí)2：實現(xiàn)注冊頁面，分為兩個頁面，第一個頁面是協(xié)議顯示頁面，點擊“我同意”超鏈接進入第二個注冊頁面，填寫內(nèi)容：用戶名、密碼、重復(fù)密碼、省份（下拉列表）、性別（男、女、保密三個Radio）、職業(yè)（學(xué)生、公司職員、其他三個Radio）、愛好（登山、籃球、足球、讀書、游泳五個CheckBox）。使用label來寫修飾文本。將愛好幾個CheckBox放到一個fieldset(GroupBox)中 樣式表、CSSCSS（層疊樣式表，Cascading St

18、yle Sheets）是用來美化頁面用的，可以對頁面元素進行更精細的設(shè)置，樣式主要描述元素的字體顏色、背景顏色、邊框等。CSS是描述元素的皮膚。使用CSS的好處：外觀美化 布局、定位樣式表能實現(xiàn)內(nèi)容與樣式的分離，方便團隊開發(fā)方便統(tǒng)一定義格式,修改也方便.HTML標簽的外觀樣式比較單一頁面色彩不生動樣式修改不方便樣式表的作用：為網(wǎng)頁設(shè)置外觀，相當(dāng)于華麗的衣服。例如：背景顏色：邊框顏色：使用CSS的三種方式CSS主要有元素內(nèi)聯(lián)、頁面嵌入和外部引用三種使用方式。CSS是描述元素的皮膚！元素內(nèi)聯(lián)(行內(nèi)樣式表)，直接將樣式寫入元素的style屬性中，適用于樣式?jīng)]有可復(fù)用性的場合。頁面嵌入（內(nèi)嵌樣式表）：

19、在head中加入 inputborder-color:Yellow;color:Red; 表示頁面中所有input都是采用指定的樣式。適合于樣式復(fù)用，減小頁面體積外部引用（外部樣式表），將css內(nèi)容寫入css后綴的文件textareabackground:yellow然后在頁面中引用，在head中加入適合于多個頁面共享css。一列全部顯示顏色：層(DIV)文本顏色：語法：p 把CSS申明在一個文件里面Div層（塊級元素）、Span(行內(nèi)元素)div：將內(nèi)容放到層中，就以將這些內(nèi)容當(dāng)成一個整體進行處理，比如整體隱藏、整體移動等。div非常強大和常用。類似于WinForm的Panel。span：d

20、iv是將內(nèi)容放到一個矩形的區(qū)塊中，會影響布局（兩端會換行），而span只是把一段內(nèi)容定義成一個整體進行操作，但不影響布局、顯示（兩端沒有換行）。演示：一行文字用span與div截取部分文字的區(qū)別。Div在網(wǎng)頁布局中使用非常多。Span一般用來圈住一小段文字，設(shè)置不同的樣式。為什么不用標簽，因為用可以通過CSS來設(shè)樣式。html這些標簽去哪里查？Msdn目錄 web開發(fā) HTML and CSS HTML and DHTML Reference Objects 常見CSS樣式Css樣式的屬性的鍵值對之間用“：”（冒號）隔開，而不同的屬性之間用”;”（分號）隔開。css計量單位：css中表示寬度、

21、距離時有多種計量單位：px（像素）、30%（百分比）、em（相對單位）等。width:20px。background-color:Red;背景顏色；color：文本顏色border-style:solid;邊框風(fēng)格，實線（默認是沒有），還有dotted(點)等值；border-color：邊框顏色；border-width：邊框?qū)挾?默認是0)。例子：style=border-color:Red;border-width:1px;border-style:dotted;display：元素是否顯示，可選值none（不顯示）、block （顯示為塊級元素，此元素前后會帶有換行符。）、inline

22、（顯示為內(nèi)聯(lián)元素，元素前后沒有換行符 ,為div增加display:inline;樣式后與span顯示效果一致。注意：【 】）等。cursor，鼠標在元素上時顯示的光標圖標，可選值：cursor（默認光標）、pointer（超鏈接上的手）、text（輸入Bean）、wait（忙沙漏）、help（幫助）等。還可以通過cursor:url(dinosau2.ani)使用ani、cur格式的自定義光標圖片。LI不顯示圓點：LIST-STYLE-TYPE: none;一般設(shè)在li或者ul上margin(與表格的cellspacing屬性類似)、padding(與表格的cellpadding類似。)ma

23、rgin:值1; /上右下左都是 值1。margin:值1 值2; /上下為值1，左右為值2.margin:值1 值2 值3; /上為值1 左右為值2 下為值3;margin:值1 值2 值3 值4; /每個值分別是：上 右 下 左;(順時針方向)例如：風(fēng)格是inline 樣式選擇器對于非元素內(nèi)聯(lián)的樣式需要定義樣式選擇器，通俗的說就是這個樣式適合于哪些元素，三種：標簽選擇器、class選擇器和id選擇器。標簽選擇器 inputborder-color:Yellow;color:Red;，對于指定的標簽采用統(tǒng)一的樣式class選擇器，以定義一個命名的樣式，然后在用到它的時候設(shè)定元素的class屬

24、性為樣式的名稱，還可以同時設(shè)定多個class，名稱之間加空格樣式名稱開頭加“.”.warningbackground:Yellow;.highlightfont-size:xx-large;cursor:help;aaabbccc同一個標簽可以應(yīng)用多個類選擇器（空格隔開）。如果樣式表中style=background-color:Green的權(quán)優(yōu)先于 .warningbackground:Yellow; .highlightfont-size:xx-large;cursor:help; 的class, 所以背景變?yōu)榫G色，原先class設(shè)置為黃色。 標簽+class選擇器class選擇器也可以針對不同的標簽，實現(xiàn)