配套html基礎(chǔ)加強

1、北京傳智播客教育 HTML基礎(chǔ)加強講師：牛亮亮課前說明內(nèi)容：HTML、CSS目標(biāo)：掌握手寫HTML實現(xiàn)一般難度的Web頁面的能力（如網(wǎng)站注冊表單），為 學(xué)習(xí)打基礎(chǔ)。堅持手寫HTML，可視化設(shè)計只是一種自學(xué)的手段。參考書：張孝祥JavaScript網(wǎng)頁開發(fā)體驗式學(xué)習(xí)教程瀏覽器介紹什么是瀏覽器？解釋和執(zhí)行HTML源碼的工具。IE是瀏覽器，瀏覽器就是IE嗎？五大瀏覽器：IE【IE6及以下版本（IE7及以上）】、FF(FireFox)、Chrome、Opera、Safari(Apple)搜狗、騰訊TT、遨游（Maxthon） 、360瀏覽器、(不是一個級別)Trident引擎，（就是IE的WebBro

2、wser控件）WebKit引擎(開源瀏覽器內(nèi)核)，現(xiàn)在很多非IE核心的瀏覽器用的是WebKit引擎，比如遨游3或搜狗的雙核、Chrome、Safari.HTMLHTML(HyperTextMarkupLanguage)就是描述網(wǎng)頁長什么樣子、有什么內(nèi)容的一個文本。查看網(wǎng)頁的描述內(nèi)容（HTML）的方式：使用IE瀏覽器的話，在網(wǎng)頁上點擊右鍵，選擇“查看源文件”。 HTML之所以能展現(xiàn)出各種各樣的效果，是瀏覽器的功能。瀏覽器兼容性問題：描述文件是一個統(tǒng)一的，但是就像口語翻譯一樣，不同的翻譯翻譯出來的東西也是不一樣的。不同瀏覽器品牌對HTML的支持是有差異的，所以同一個網(wǎng)頁在IE上和FireFox上看

3、起來可能長得不一樣，最明顯的就是以前QQ空間上的頁面在FireFox上顯示就有問題，甚至有的頁面在IE6、IE7、IE8上長的也不一樣。因此Web開發(fā)過程中的一個重要的也是最頭疼的問題就是瀏覽器的兼容。測試FireFox（簡稱FF）、Chrome等瀏覽器安裝各自的軟件就可以，測試不同版本的IE可以用IETester、IE Collection(使用IE Collection瀏覽頁面時，最好通過http:/的方式瀏覽，否則部分版本瀏覽器會報錯。)CSS、JavaScript都存在瀏覽器兼容問題，CSS尤甚，我們只考慮JS的兼容。靜態(tài)頁面、動態(tài)頁面（*）網(wǎng)站頁面分為靜態(tài)頁面和動態(tài)頁面兩種靜態(tài)頁面：

4、后綴名為html或htm都是靜態(tài)頁面。有一個html頁面文件保存在服務(wù)器上，瀏覽器要這個頁面的時候服務(wù)器就把這個頁面文件發(fā)給瀏覽器；動態(tài)頁面：動態(tài)頁面中會包括一些腳本代碼。服務(wù)器上沒有瀏覽者要看的頁面，而是服務(wù)器動態(tài)生成的HTML頁面發(fā)給瀏覽器，動態(tài)語言的服務(wù)器端可以用C#、 、PHP、Java、C等編寫。htm、html都是靜態(tài)頁面，asp、aspx、jsp、php等都是動態(tài)頁面。開發(fā)工具記事本、高級記事本(Editplus、Notepad+、UltraEdit)（推薦）其他工具：Dreamweaver、Expression Web(FrontPage的改頭換面版) 等快速開發(fā)工具，這些工具

5、是給頁面美工用的。開發(fā)人員用VisualStudio寫html就夠了。一開始學(xué)的時候全部手寫（使用文本編輯器，不要用快速開發(fā)工具）?！靖呤钟脴淙~也能殺死人，菜鳥使槍也沒姿勢！】不要把精力放到怎么把界面做好看上，正規(guī)公司都有專門的頁面美工，不正規(guī)公司都是偷別人的美工頁面，無論是偷別人的頁面，還是使用公司美工開發(fā)出來的頁面，對于開發(fā)人員要做的“填模板”工作都是一樣的。第一個網(wǎng)頁,網(wǎng)頁基本結(jié)構(gòu)使用記事本創(chuàng)建網(wǎng)頁新建一個文本文件，后綴名改為.html或.htm輸入我的第一個網(wǎng)頁Hello world注意windows隱藏文件后綴名問題。1.html.txtHTML頁結(jié)構(gòu)說明所有內(nèi)容都在標(biāo)簽之內(nèi)；內(nèi)放的

6、是頭部信息，是對頁面的描述，不會直接顯示在頁面中，內(nèi)的中設(shè)置的是頁面的標(biāo)題，只能放在中；是頁面的主體，大部分顯示內(nèi)容都定義在這里。所有頁面都應(yīng)該至少包含這些部分，由于瀏覽器容錯性強，所以即使不包含也能正常顯示，但是最好還是寫完全了。HTML注釋： 。易錯：title標(biāo)簽的結(jié)束標(biāo)簽，如果忘記 / ,則整個頁面都不顯示。顏色體系body標(biāo)簽的bgcolor屬性可以設(shè)定網(wǎng)頁的背景顏色。bgcolor的取值可以是英文單詞red、blue、yellow，也可以是十六進(jìn)制的顏色#00FF69、#23AEFF。(#000000黑色、#FFFFFF白色)。#00FF69這就是HTML中表示顏色的方式，每兩個是

7、一組，三組分別就表示R、G、B的值，是16進(jìn)制表示。關(guān)于RGB見備注1。取色工具：ColorPic、PicPick、VS自帶的顏色選擇對話框、FastStone Capture。 （見備注2）bgcolor=“rgb(10,125,200)”或bgcolor=“rgb(10%,125%,20%)”也可以但存在瀏覽器兼容性問題FF、Opera、Chrome不支持（*）HTML和XML的聯(lián)系、區(qū)別（*）html與xml相同點：都是標(biāo)記語言、注釋都是：都可以通過dom編程方式來訪問都可以通過CSS來改變外觀html與xml的不同點：xml比html語法要求更嚴(yán)格。有開始標(biāo)簽必須有結(jié)束標(biāo)簽、大小寫一致

8、、屬性用雙引號等。xml側(cè)重于數(shù)據(jù)存儲，html側(cè)重于數(shù)據(jù)展示。趨勢：數(shù)據(jù)存儲與數(shù)據(jù)表現(xiàn)相分離(html中只有要顯示的頁面內(nèi)容，樣式都有CSS來控制,html頁面中不再有等標(biāo)簽，控制樣式都用CSS)。xhtml：可擴(kuò)展超文本置標(biāo)語言（eXtensibleHyperTextMarkupLanguage，XHTML），更符合xml語法規(guī)范的html。xhtml的出現(xiàn)主要是為了向xml過度，通過xml+css也能實現(xiàn)很好的頁面?！緓html要求：全部小寫、有開始結(jié)束標(biāo)簽、屬性用雙引號】dhtml： Dynamic HTML的簡稱，就是動態(tài)的html。 HTML、樣式表和JavaScript 的組合h

9、tml常用標(biāo)簽：文字格式h標(biāo)簽（標(biāo)題），HTML定義了到六個h標(biāo)簽，分別表示不同大小的字體。h1最大，h6最小。只是回車，是分段。前后會有比較大的空白，而則沒有。傳智播客居中顯示.a粗體，推薦。b斜體。c帶下劃線。強調(diào)，斜體2下標(biāo)，如：H2O2上標(biāo)，如：102字體標(biāo)簽，紅色。color（設(shè)置顏色） size（1-7） face（設(shè)置字體,設(shè)置字體是注意用戶計算機(jī)中必須有該字體才能正常顯示） color size（厚度） width（長度） align=left/center/right （默認(rèn)為劇中顯示） 預(yù)格式化 保持本色html編碼（特殊字符）用于顯示一些特殊字符，有特殊含義的()以及鍵盤

10、上無法輸入的字符。HTML編碼以&開頭，以;結(jié)尾。在網(wǎng)頁上顯示helloChina，helloChina特殊字符：HTML中是有特殊含義的、空格是不會被顯示的（輸入一個帶空格的字符串看看），所以需要特殊符號，相當(dāng)于C#中的n轉(zhuǎn)義符。（大于號，greater than）；（空格，Nonbreaking space ）。見備注。上網(wǎng)搜：ISO Latin-1 Character Set 或ISO Latin-1 字符集，查看所有。URL、超鏈接URL：URL表示資源在網(wǎng)絡(luò)中的地址，比如 、28/b.zip。還有URI的概念，比URL大，有的類中使用URI這種說法，可以暫時看成和URL一樣就行。超級

11、鏈接：如鵬網(wǎng)。a標(biāo)簽的一些常用屬性：href、title、target、name（錨記時用）中還可以嵌套圖片，這樣就是點擊圖片打開連接超鏈接深入相對URL：相對URL表示相對于當(dāng)前文檔的資源，“/”表示網(wǎng)站根目錄，“./”表示父目錄，“././”表示父目錄的父目錄，“./”或者不寫任何斜線表示相對于當(dāng)前路徑的目錄。站內(nèi)引用最好用相對URL，這樣域名改變了、目錄改變了都不受影響。將的target屬性設(shè)定為_blank就可以在新窗口中打開超鏈接。國情：國內(nèi)的網(wǎng)站很多都是默認(rèn)在新窗口中打開。錨記：用name屬性為 起名字：這里是最后。這樣可以通過轉(zhuǎn)到平臺來跳轉(zhuǎn)到超鏈接的部分。案例：去往評論、回到正文

12、。多敲幾個回車圖片注意圖片是鏈接的，不是插入的，所以如果src指向的文件不存在了，就看不了了。alt屬性為圖片無法顯示時的顯示文本，鼠標(biāo)方式去也會有懸浮提示“點擊查看大圖”；title用來顯示當(dāng)鼠標(biāo)放到圖片上時顯示的文字；border屬性指定邊框，border=0不顯示邊框；width、height屬性指定圖片的顯示大小，如果不指定則是圖片的原始大小。最好指定width、height，哪怕是原始尺寸大小，因為如果不指定大小，圖片會不占位置，圖片下載后才調(diào)整大小，會造成頁面很亂。如果指定了width、height哪怕圖片沒有加載完成，也會先把位置占上。如果網(wǎng)頁上要顯示小圖（比如縮略圖），不要僅僅

13、是把大圖設(shè)定一下width、height來縮小，因為仍然會下載大圖，會使得加載速度很慢。易錯，不要以為把bmp后綴改為jpg就是改文件格式了！發(fā)送圖片格式介紹的文檔。知識補充px (Pixel)單位名稱為像素，相對長度單位，像素（px）是相對于顯示器屏幕分辨率而言的（隨著屏幕分辨率而變化）,國內(nèi)推薦； QQ截圖也是使用PX作為長度寬度單位。 em單位名稱為相對長度單位。相對于當(dāng)前對象內(nèi)文本的字體尺寸，國外使用比較多；如當(dāng)前對行內(nèi)文本的字體尺寸未被人為設(shè)置，則相對于瀏覽器的默認(rèn)字體尺寸。見備注。列表、表格dldefinition list(定義列表)，見備注1。一般可用于名詞解釋之類。uluno

14、rdered list(無序列表)，注意多個ul嵌套時的寫法。見備注2olordered list(有序列表)，見備注3。用嵌套ul或ol來模擬二級菜單。見備注4。與都有一個type屬性，用來設(shè)置序列的顯示樣式。type的取值可以是：1、a、A、i、I、disc、circle、square。(可用CSS控制ul、ol的type樣式)列表、表格表格：為表格，在內(nèi)部通過創(chuàng)建行，內(nèi)部通過 創(chuàng)建單元格?？梢詫able的border屬性設(shè)為0來隱藏表格線。演示常規(guī)表格。填充、間距cellpadding內(nèi)容和表格邊線之間的距離 cellspacing單元格之間的間距。見備注1.的屬性：align，水平對

15、齊，可選值left、right、center；valign，垂直對齊，可選值top、middle、bottom。也有align和valign。tom20男：子標(biāo)簽?zāi)J(rèn)繼承父標(biāo)簽的屬性，如果自己單獨指定了屬性，則會覆蓋父標(biāo)簽的屬性。還可以使用rowspan(合并行)、colspan（和并列）進(jìn)行單元格的合并。rowspan、colspan是td的屬性。一個完整的表格。table、caption、thead、tbody、tfoot、tr、th、td。見備注2. (查找vs2008msdn(目錄-web開發(fā)-)練習(xí)練習(xí)1：分別使用 顯示歌曲列表，使用a,b,c格式顯示，使用實心圓顯示。練習(xí)2：使用做

16、一個員工表格.顯示員工姓名、性別、工資，表頭加粗、居中顯示。顯示4個員工。見備注。練習(xí)練習(xí)3：跨行跨列。學(xué)生成績表格、學(xué)生基本情況表格表格練習(xí)，作業(yè)：注意：當(dāng)單元格內(nèi)容為空時，加與不加的區(qū)別。（沒有doctype的時候需要手動添加）表單網(wǎng)站表單與填表。標(biāo)簽為表單標(biāo)簽。如果要把數(shù)據(jù)提交到服務(wù)器，則需要將、等表單元素放到form中。是主要的表單元素，type的可選值：submit（提交按鈕）、button（普通按鈕）、checkbox（復(fù)選框）、file（文件選擇框）、hidden（隱藏字段）、image（圖片按鈕）、password（密碼框）、radio（單選按鈕）、reset（重置按鈕）、te

17、xt（文本框）。input表單詳解submit：點擊submit按鈕表單就會被提交給服務(wù)器，中文IE下默認(rèn)按鈕文本為“提交查詢”，可以設(shè)置value屬性修改按鈕的顯示文本text：size屬性為寬度，value為值，maxlength為可以輸入的最大長度，readonly只讀。（只寫屬性名，不寫屬性值）或者（推薦）checkbox：checked屬性表示是否被選中，或者(推薦)checked、readonly等這種一個可選值的屬性都可以省略屬性值。radio：相同name屬性的為一只有組，不同radio設(shè)定不同的value值，這樣通過取指定name的值就可以知道誰被選中了，不用單獨的判斷。fi

18、le：使用file，則form的enctype必須設(shè)置為multipart/form-data、method屬性為POST（*）image：使用src屬性指定圖片的地址，用來實現(xiàn)美化的“登錄按鈕”。用圖片實現(xiàn)的submit按鈕，同時提交了用戶點擊圖片的坐標(biāo)。標(biāo)簽用來創(chuàng)建類似于WinForm中的ComboBox或者ListBox如果size屬性大于1就是ListBox（size的值為顯示出來的列表數(shù)量），否則就是ComboBox?；蛘撸ㄍ扑]），那么就是可以多選的ListBox。select中的項是，北京還可以設(shè)定項的值北京。將一個option設(shè)置為選中：333或者333(推薦)就可以將這個項設(shè)定

19、為選擇項如何實現(xiàn)“不選擇”，添加一個-不選擇-，然后編程判斷select選中的值如果是-1就認(rèn)為是不選擇。select分組選項，可以使用optgroup對數(shù)據(jù)進(jìn)行分組，分組本身不會被選擇，無論對于下拉列表還是列表框都適用。見備注。其他標(biāo)簽多行文本（也是表單元素）：文本，cols=“50”、rows=“15”屬性表示行數(shù)和列數(shù)。：在前可以寫普通的文本來修飾，但是單擊修飾文本的時候input并不會得到焦點，而用label則可以，for屬性指定要修飾的控件的id，asdfad；”txt1”為被修飾的控件設(shè)置一個唯一的id。(label的accesskey=“r”屬性指定快捷鍵，F(xiàn)F不支持)婚否 fi

20、eldset：GroupBox效果，將控件劃分一個區(qū)域，看起來更規(guī)整 常用 submit(提交)、reset(恢復(fù)為默認(rèn)值)*滾動文字 *播放聲音（dw中添加媒體插件）、顯示flash，見備注。練習(xí)練習(xí)1：實現(xiàn)登錄界面，有用戶名、密碼、驗證碼（使用普通圖片代替）、“記住密碼”復(fù)選框、登錄按鈕、重置按鈕。使用Table進(jìn)行布局。使用label來寫修飾文本。練習(xí)2：實現(xiàn)注冊頁面，分為兩個頁面，第一個頁面是協(xié)議顯示頁面，點擊“我同意”超鏈接進(jìn)入第二個注冊頁面，填寫內(nèi)容：用戶名、密碼、重復(fù)密碼、省份（下拉列表）、性別（男、女、保密三個Radio）、職業(yè)（學(xué)生、公司職員、其他三個Radio）、愛好（登山

21、、籃球、足球、讀書、游泳五個CheckBox）。使用label來寫修飾文本。將愛好幾個CheckBox放到一個fieldset(GroupBox)中meta標(biāo)簽(*)meta標(biāo)簽包括在head標(biāo)簽中。主要用來描述頁面自身信息。標(biāo)簽，有指定name和指定http-equiv兩種用法：關(guān)于網(wǎng)頁的描述信息。模擬http響應(yīng)頭信息。例如：指定網(wǎng)頁編碼 三秒鐘后刷新此網(wǎng)頁。 三秒鐘后重定向到新網(wǎng)頁。發(fā)帖成功后提示“發(fā)帖成功，即將轉(zhuǎn)向帖子查看頁面”。 禁止瀏覽器緩存頁面。在MSDN中輸入meta。使用VS創(chuàng)建網(wǎng)頁新建Web項目（新建 Web應(yīng)用程序、新建網(wǎng)站），新建html頁面（添加新建項WebHTML頁

22、）查看頁面的方式：切換到“設(shè)計”視圖，可以在這里查看初步的預(yù)覽效果，不是很準(zhǔn)，可以在“設(shè)計”視圖從工具箱中拖放控件可視化的設(shè)計，設(shè)計復(fù)雜頁面的時候很少直接可視化設(shè)計。在編輯器上點右鍵，選擇“在瀏覽器中查看”。無法進(jìn)行調(diào)試。將要查看的頁面設(shè)為起始頁（在文件上點擊右鍵“設(shè)為起始頁”），然后點擊“啟動調(diào)試”?？梢哉{(diào)試。學(xué)沒有JS、C#代碼的時候用“在瀏覽器中查看”。修改頁面不用關(guān)閉瀏覽器再打開，刷新就可以。自動提示快速完成頁面，結(jié)束標(biāo)簽自動補全，Ctrl+J自動提示。文檔類型定義：指明當(dāng)前的html頁面是符合某種規(guī)范的。類似于各種合同書上面注明當(dāng)前條款是根據(jù)國家某某法律規(guī)定來制定的。doctype的

23、主要作用是告訴瀏覽器或其他軟件當(dāng)前頁面所使用的語言版本信息，以便更精準(zhǔn)的解析與呈現(xiàn)頁面。Div層（塊級元素）、Span(行內(nèi)元素)div：將內(nèi)容放到層中，就以將這些內(nèi)容當(dāng)成一個整體進(jìn)行處理，比如整體隱藏、整體移動等。div非常強大和常用。類似于WinForm的Panel。span：div是將內(nèi)容放到一個矩形的區(qū)塊中，會影響布局（兩端會換行），而span只是把一段內(nèi)容定義成一個整體進(jìn)行操作，但不影響布局、顯示（兩端沒有換行）。演示：一行文字用span與div截取部分文字的區(qū)別。Div在網(wǎng)頁布局中使用非常多。Span一般用來圈住一小段文字，設(shè)置不同的樣式。為什么不用標(biāo)簽，因為用可以通過CSS來設(shè)樣

24、式。html這些標(biāo)簽去哪里查？Msdn目錄 web開發(fā) HTML and CSS HTML and DHTML Reference Objects樣式表、CSSCSS（層疊樣式表，Cascading Style Sheets）是用來美化頁面用的，可以對頁面元素進(jìn)行更精細(xì)的設(shè)置，樣式主要描述元素的字體顏色、背景顏色、邊框等。使用CSS的好處：外觀美化 布局、定位樣式表能實現(xiàn)內(nèi)容與樣式的分離，方便團(tuán)隊開發(fā)方便統(tǒng)一定義格式,修改也方便.HTML標(biāo)簽的外觀樣式比較單一頁面色彩不生動樣式修改不方便樣式表的作用：為網(wǎng)頁設(shè)置外觀，相當(dāng)于華麗的衣服。常見CSS樣式Css樣式的屬性的鍵值對之間用“：”（冒號）隔

25、開，而不同的屬性之間用”;”（分號）隔開。css計量單位：css中表示寬度、距離時有多種計量單位：px（像素）、30%（百分比）、em（相對單位）等。width:20px。background-color:Red;背景顏色；color：文本顏色border-style:solid;邊框風(fēng)格，實線（默認(rèn)是沒有），還有dotted(點)等值；border-color：邊框顏色；border-width：邊框?qū)挾?默認(rèn)是0)。例子：style=border-color:Red;border-width:1px;border-style:dotted;display：元素是否顯示，可選值none（不顯

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

27、ing屬性類似)、padding(與表格的cellpadding類似。)margin:值1; /上右下左都是 值1。margin:值1 值2; /上下為值1，左右為值2.margin:值1 值2 值3; /上為值1 左右為值2 下為值3;margin:值1 值2 值3 值4; /每個值分別是：上 右 下 左;(順時針方向)樣式選擇器對于非元素內(nèi)聯(lián)的樣式需要定義樣式選擇器，通俗的說就是這個樣式適合于哪些元素，三種：標(biāo)簽選擇器、class選擇器和id選擇器。標(biāo)簽選擇器 inputborder-color:Yellow;color:Red;，對于指定的標(biāo)簽采用統(tǒng)一的樣式class選擇器，以定義一個命

28、名的樣式，然后在用到它的時候設(shè)定元素的class屬性為樣式的名稱，還可以同時設(shè)定多個class，名稱之間加空格樣式名稱開頭加“.”.warningbackground:Yellow;.highlightfont-size:xx-large;cursor:help;aaabbccc同一個標(biāo)簽可以應(yīng)用多個類選擇器（空格隔開）。如果樣式表中的定義有重復(fù)，則以最后一個定義為準(zhǔn)。標(biāo)簽+class選擇器class選擇器也可以針對不同的標(biāo)簽，實現(xiàn)同樣的樣式名對于不同的標(biāo)簽有不同的樣式，只要在樣式名前加標(biāo)簽名即可。input.accountnotext-align:right;color:Red;label.

29、accountnofont-style:italic; id選擇器為指定id的元素設(shè)定樣式，id前加# #username font-size:10px; style、class可以同時組合使用更多選擇器(*)包含選擇器：P strong background-color:Yellow表示P標(biāo)簽內(nèi)的strong標(biāo)簽內(nèi)的內(nèi)容使用的樣式fadsfasdfadsadfasfd組合選擇器，同時為多個標(biāo)簽設(shè)定一個樣式H1,H2,inputbackground-color:Greennihao(*)其他CSS選擇器：div p(子選擇器)、div + p（相鄰選擇器）、。IE7以下不支持。在jQuery中

30、還會學(xué)習(xí)。偽選擇器偽選擇器：為標(biāo)簽的不同狀態(tài)設(shè)定不同的樣式：A:visited：超鏈接點擊過的樣式；A:active：選中超鏈接時的樣式；A:link：超鏈接未被訪問時的狀態(tài)；A:hover：鼠標(biāo)移到超鏈接時的狀態(tài)。A:visited TEXT-DECORATION: noneA:active TEXT-DECORATION: noneA:link TEXT-DECORATION: noneA:hover TEXT-DECORATION: underline說明：TEXT-DECORATION: none表示超鏈接不顯示下劃線。不是所有的元素都支持偽選擇器。（不同瀏覽器支持情況不一樣,IE7以

31、下不支持input:hover等標(biāo)簽。），目前大多數(shù)只在A標(biāo)簽時使用。注意瀏覽器緩存問題。思考：頁面上 部分超鏈接默認(rèn)是紅色、部分超鏈接默認(rèn)是白色。怎么實現(xiàn)？（.myAnchor:link）使用CSS的三種方式CSS主要有元素內(nèi)聯(lián)、頁面嵌入和外部引用三種使用方式。CSS是描述元素的皮膚！元素內(nèi)聯(lián)(行內(nèi)樣式表)，直接將樣式寫入元素的style屬性中，適用于樣式?jīng)]有可復(fù)用性的場合。頁面嵌入（內(nèi)嵌樣式表）：在head中加入 inputborder-color:Yellow;color:Red; 表示頁面中所有input都是采用指定的樣式。適合于樣式復(fù)用，減小頁面體積外部引用（外部樣式表），將css內(nèi)容寫入css后綴的文件textareabackground:yellow然后在頁面中引用，在head中加入適合于多個頁面共享css。推薦把盡可能多的樣式寫到單獨的css文件中，這樣可以復(fù)用，美工人員和開發(fā)人員很好的分工。只有頁面特有的樣式才寫到中只有元素特有的樣式才寫到元素的style屬性中。如果不同級別的樣式有沖突，詳細(xì)級別、子元素的會覆蓋更高級別、父元素的。就近原則。CSS中的注釋： /* */文檔流文檔流：將窗體自上而下分成一行行, 并在每行中按從左至右的順序排放元素。position:absolute;絕對定位,即完全脫離文檔流, 相對于position屬性非static值的最近父級