HTML+CSS教程

1、Html和CSS的關(guān)系學(xué)習(xí)web前端開(kāi)發(fā)基礎(chǔ)技術(shù)需要掌握：HTML、CSS、JavaScript語(yǔ)言。下面我們就來(lái)了解下這三門(mén)技術(shù)都是用來(lái)實(shí)現(xiàn)什么的：1.HTML是網(wǎng)頁(yè)內(nèi)容的載體。內(nèi)容就是網(wǎng)頁(yè)制作者放在頁(yè)面上想要讓用戶(hù)瀏覽的信息，可以包含文字、圖片、視頻等。2.CSS樣式是表現(xiàn)。就像網(wǎng)頁(yè)的外衣。比如，標(biāo)題字體、顏色變化，或?yàn)闃?biāo)題加入背景圖片、邊框等。所有這些用來(lái)改變內(nèi)容外觀的東西稱(chēng)之為表現(xiàn)。3.JavaScript是用來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)上的特效效果。如：鼠標(biāo)滑過(guò)彈出下拉菜單?；蚴髽?biāo)滑過(guò)表格的背景顏色改變。還有焦點(diǎn)新聞（新聞圖片）的輪換。可以這么理解，有動(dòng)畫(huà)的，有交互的一般都是用JavaScript來(lái)實(shí)

2、現(xiàn)的。認(rèn)識(shí)html標(biāo)簽讓我們通過(guò)一個(gè)網(wǎng)頁(yè)的學(xué)習(xí)，來(lái)對(duì)html標(biāo)簽有一個(gè)初步理解。平常大家說(shuō)的上網(wǎng)就是瀏覽各種各式各樣的網(wǎng)頁(yè)，這些網(wǎng)頁(yè)都是由html標(biāo)簽組成的。下面就是一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)。效果圖如下：我們來(lái)分析一下，這個(gè)網(wǎng)頁(yè)由哪些html標(biāo)簽組成：“勇氣”是網(wǎng)頁(yè)內(nèi)容文章的標(biāo)題，就是標(biāo)題標(biāo)簽，它在網(wǎng)頁(yè)上的代碼寫(xiě)成勇氣?！叭昙?jí)時(shí).我也沒(méi)勇氣參加?！?是網(wǎng)頁(yè)中文章的段落，是段落標(biāo)簽。它在網(wǎng)頁(yè)上的代碼寫(xiě)成三年級(jí)時(shí).我也沒(méi)勇氣參加。網(wǎng)頁(yè)上那張小女生的圖片，由img標(biāo)簽來(lái)完成的，它在網(wǎng)頁(yè)上的代碼寫(xiě)成網(wǎng)頁(yè)的完整代碼如下圖：總結(jié)一下，可以這么說(shuō)，網(wǎng)頁(yè)中每一個(gè)內(nèi)容在瀏覽器中的顯示，都要存放到各種標(biāo)簽中。單擊提交按鈕

3、進(jìn)行下一小節(jié)學(xué)習(xí)。標(biāo)簽的語(yǔ)法1.標(biāo)簽由英文尖括號(hào)括起來(lái)，如就是一個(gè)標(biāo)簽。2. html中的標(biāo)簽一般都是成對(duì)出現(xiàn)的，分開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽。結(jié)束標(biāo)簽比開(kāi)始標(biāo)簽多了一個(gè)/。如：（1）（2）（3）3. 標(biāo)簽與標(biāo)簽之間是可以嵌套的，但先后順序必須保持一致，如：里嵌套，那么必須放在的前面。如下圖所示。4. HTML標(biāo)簽不區(qū)分大小寫(xiě)，和是一樣的，但建議小寫(xiě)，因?yàn)榇蟛糠殖绦騿T都以小寫(xiě)為準(zhǔn)。認(rèn)識(shí)html文件基本結(jié)構(gòu)這一節(jié)中我們來(lái)學(xué)習(xí)html文件的結(jié)構(gòu)：一個(gè)HTML文件是有自己固定的結(jié)構(gòu)的。 . .代碼講解：1.稱(chēng)為根標(biāo)簽，所有的網(wǎng)頁(yè)標(biāo)簽都在中。2.標(biāo)簽用于定義文檔的頭部，它是所有頭部元素的容器。頭部元素有、等標(biāo)

4、簽，頭部標(biāo)簽在下一小節(jié)中會(huì)有詳細(xì)介紹。3. 在和標(biāo)簽之間的內(nèi)容是網(wǎng)頁(yè)的主要內(nèi)容，如、等網(wǎng)頁(yè)內(nèi)容標(biāo)簽，在這里的標(biāo)簽中的內(nèi)容會(huì)在瀏覽器中顯示出來(lái)。認(rèn)識(shí)head標(biāo)簽做得好，下面我們來(lái)了解一下標(biāo)簽的作用。文檔的頭部描述了文檔的各種屬性和信息，包括文檔的標(biāo)題等。絕大多數(shù)文檔頭部包含的數(shù)據(jù)都不會(huì)真正作為內(nèi)容顯示給讀者。下面這些標(biāo)簽可用在 head 部分： . . .標(biāo)簽：在和標(biāo)簽之間的文字內(nèi)容是網(wǎng)頁(yè)的標(biāo)題信息，它會(huì)出現(xiàn)在瀏覽器的標(biāo)題欄中。網(wǎng)頁(yè)的title標(biāo)簽用于告訴用戶(hù)和搜索引擎這個(gè)網(wǎng)頁(yè)的主要內(nèi)容是什么，搜索引擎可以通過(guò)網(wǎng)頁(yè)標(biāo)題，迅速的判斷出網(wǎng)頁(yè)的主題。每個(gè)網(wǎng)頁(yè)的內(nèi)容都是不同的，每個(gè)網(wǎng)頁(yè)都應(yīng)該有一個(gè)獨(dú)一無(wú)

5、二的title。例如： hello world標(biāo)簽的內(nèi)容“hello world”會(huì)在瀏覽器中的標(biāo)題欄上顯示出來(lái)，如下圖所示：標(biāo)簽中的其它標(biāo)簽內(nèi)容的講解，會(huì)在以后的章節(jié)中為大家一一講解。了解HTML的代碼注釋什么是代碼注釋?zhuān)看a注釋的作用是幫助程序員標(biāo)注代碼的用途，過(guò)一段時(shí)間后再看你所編寫(xiě)的代碼，就能很快想起這段代碼的用途。代碼注釋不僅方便程序員自己回憶起以前代碼的用途，還可以幫助其他程序員很快的讀懂你的程序的功能，方便多人合作開(kāi)發(fā)網(wǎng)頁(yè)代碼。語(yǔ)法：如：右邊編輯器的代碼的第 8、12 行都是，但是你會(huì)發(fā)現(xiàn)注釋代碼是不會(huì)在結(jié)果窗口中顯示出來(lái)的。語(yǔ)義化，讓你的網(wǎng)頁(yè)更好的被搜索引擎理解在這一章節(jié)我們要

6、開(kāi)始把網(wǎng)頁(yè)中常用到的標(biāo)簽一 一向大家介紹，學(xué)習(xí)這一章節(jié)的時(shí)候要記住學(xué)習(xí)html標(biāo)簽過(guò)程中，主要注意兩個(gè)方面的學(xué)習(xí)：標(biāo)簽的用途、標(biāo)簽在瀏覽器中的默認(rèn)樣式。標(biāo)簽的用途：我們學(xué)習(xí)網(wǎng)頁(yè)制作時(shí)，常常會(huì)聽(tīng)到一個(gè)詞，語(yǔ)義化。那么什么叫做語(yǔ)義化呢，說(shuō)的通俗點(diǎn)就是：明白每個(gè)標(biāo)簽的用途（在什么情況下使用此標(biāo)簽合理）比如，網(wǎng)頁(yè)上的文章的標(biāo)題就可以用標(biāo)題標(biāo)簽，網(wǎng)頁(yè)上的各個(gè)欄目的欄目名稱(chēng)也可以使用標(biāo)題標(biāo)簽。文章中內(nèi)容的段落就得放在段落標(biāo)簽中，在文章中有想強(qiáng)調(diào)的文本，就可以使用 em 標(biāo)簽表示強(qiáng)調(diào)等等。講了這么多語(yǔ)義化，但是語(yǔ)義化可以給我們帶來(lái)什么樣的好處呢？1. 更容易被搜索引擎收錄。2. 更容易讓屏幕閱讀器讀出網(wǎng)頁(yè)內(nèi)

7、容。在后面的章節(jié)會(huì)帶領(lǐng)大家學(xué)習(xí)了解html中每個(gè)標(biāo)簽的語(yǔ)義（用途）。標(biāo)簽，網(wǎng)頁(yè)上顯示的內(nèi)容放在這里還記得body標(biāo)簽嗎，在上一章節(jié)我們簡(jiǎn)單介紹過(guò)：在網(wǎng)頁(yè)上要展示出來(lái)的頁(yè)面內(nèi)容一定要放在body標(biāo)簽中。如下圖是一個(gè)新聞文章的網(wǎng)頁(yè)。在瀏覽器中的顯示效果：開(kāi)始學(xué)習(xí)標(biāo)簽，添加段落如果想在網(wǎng)頁(yè)上顯示文章，這時(shí)就需要標(biāo)簽了，把文章的段落放到標(biāo)簽中。語(yǔ)法：段落文本注意一段文字一個(gè)標(biāo)簽，如在一篇新聞文章中有3段文字，就要把這3個(gè)段落分別放到3個(gè)標(biāo)簽中。如下圖所示。在瀏覽器中顯示的效果：標(biāo)簽的默認(rèn)樣式，可以在上圖中看出來(lái)，段前段后都會(huì)有空白，如果不喜歡這個(gè)空白，可以用css樣式來(lái)刪除或改變它。了解標(biāo)簽，為你的網(wǎng)

8、頁(yè)添加標(biāo)題文章的段落用標(biāo)簽，那么文章的標(biāo)題用什么標(biāo)簽?zāi)?？在本?jié)我們將使用標(biāo)簽來(lái)制作文章的標(biāo)題。標(biāo)題標(biāo)簽一共有6個(gè)，h1、h2、h3、h4、h5、h6分別為一級(jí)標(biāo)題、二級(jí)標(biāo)題、三級(jí)標(biāo)題、四級(jí)標(biāo)題、五級(jí)標(biāo)題、六級(jí)標(biāo)題。并且依據(jù)重要性遞減。是最高的等級(jí)。語(yǔ)法：標(biāo)題文本(x為1-6)文章的標(biāo)題前面已經(jīng)說(shuō)過(guò)了，可以使用標(biāo)題標(biāo)簽，另外網(wǎng)頁(yè)上的各個(gè)欄目的標(biāo)題也可使用它們。如下圖為騰訊網(wǎng)站。注意：因?yàn)閔1標(biāo)簽在網(wǎng)頁(yè)中比較重要，所以一般h1標(biāo)簽被用在網(wǎng)站名稱(chēng)上。騰訊網(wǎng)站就是這樣做的。如：騰訊網(wǎng)h1-h6標(biāo)簽的默認(rèn)樣式：標(biāo)簽代碼：在瀏覽器中顯示的樣式：從上面的圖片可以看出標(biāo)題標(biāo)簽的樣式都會(huì)加粗，h1標(biāo)簽字號(hào)最大，

9、h2標(biāo)簽字號(hào)相對(duì)h1要小，以此類(lèi)推h6標(biāo)簽的字號(hào)最小。加入強(qiáng)調(diào)語(yǔ)氣，使用和標(biāo)簽有了段落又有了標(biāo)題，現(xiàn)在如果想在一段話(huà)中特別強(qiáng)調(diào)某幾個(gè)文字，這時(shí)候就可以用到或標(biāo)簽。但兩者在強(qiáng)調(diào)的語(yǔ)氣上有區(qū)別: 表示強(qiáng)調(diào)， 表示更強(qiáng)烈的強(qiáng)調(diào)。并且在瀏覽器中 默認(rèn)用斜體表示， 用粗體表示。兩個(gè)標(biāo)簽相比，目前國(guó)內(nèi)前端程序員更喜歡使用表示強(qiáng)調(diào)。語(yǔ)法：需要強(qiáng)調(diào)的文本需要強(qiáng)調(diào)的文本如，在網(wǎng)上商城中，某產(chǎn)品的打折后的價(jià)格是需要強(qiáng)調(diào)的。如下圖。代碼實(shí)現(xiàn)：在瀏覽器中默認(rèn)樣式是有區(qū)別的：原代碼，如下圖。瀏覽器中的樣子，如下圖。的內(nèi)容在瀏覽中顯示為斜體，顯示為加粗。如果不喜歡這種樣式，沒(méi)有關(guān)系，以后可以使用css樣式去改變它。使用標(biāo)

10、簽為文字設(shè)置單獨(dú)樣式這一小節(jié)講解標(biāo)簽，我們對(duì)、這三個(gè)標(biāo)簽進(jìn)行一下總結(jié)：1.和標(biāo)簽是為了強(qiáng)調(diào)一段話(huà)中的關(guān)鍵字時(shí)使用，它們的語(yǔ)義是強(qiáng)調(diào)。2.標(biāo)簽是沒(méi)有語(yǔ)義的，它的作用就是為了設(shè)置單獨(dú)的樣式用的。如果現(xiàn)在我們想把上一小節(jié)的第一段話(huà)“美國(guó)夢(mèng)”三個(gè)字設(shè)置成blue（藍(lán)色），但注意不是為了強(qiáng)調(diào)“美國(guó)夢(mèng)”，而只是想為它設(shè)置和其它文字不同的樣式（并不想讓屏幕閱讀器對(duì)“美國(guó)夢(mèng)”這三個(gè)字加重音讀出），所以這樣情況下就可以用到標(biāo)簽了。如下面例子：1922年的春天，一個(gè)想要成名名叫尼克卡拉威（托比馬奎爾Tobey Maguire 飾）的作家，離開(kāi)了美國(guó)中西部，來(lái)到了紐約。那是一個(gè)道德感漸失，爵士樂(lè)流行，走私為王，股票

11、飛漲的時(shí)代。為了追尋他的美國(guó)夢(mèng)，他搬入紐約附近一海灣居住。語(yǔ)法：文本標(biāo)簽，短文本引用想在你的html中加一段引用嗎？比如在你的網(wǎng)頁(yè)的文章里想引用某個(gè)作家的一句詩(shī)，這樣會(huì)使你的文章更加出彩，那么標(biāo)簽是你所需要的。語(yǔ)法：引用文本如下面例子：最初知道莊子，是從一首詩(shī)莊生曉夢(mèng)迷蝴蝶。望帝春心托杜鵑。開(kāi)始的。雖然當(dāng)時(shí)不知道是什么意思，只是覺(jué)得詩(shī)句挺特別。后來(lái)才明白這個(gè)典故出自是莊子的逍遙游，逍遙游代表了莊子思想的最高境界，是對(duì)世俗社會(huì)的功名利祿及自己的舍棄。講解：1. 在上面的例子中，“莊生曉夢(mèng)迷蝴蝶。望帝春心托杜鵑。” 這是一句詩(shī)歌，出自晚唐詩(shī)人李商隱的錦瑟 。因?yàn)椴皇亲髡咦约旱奈淖?，所以需要使用?shí)現(xiàn)

12、引用。2. 注意要引用的文本不用加雙引號(hào)，瀏覽器會(huì)對(duì)q標(biāo)簽自動(dòng)添加雙引號(hào)。下圖是代碼顯示結(jié)果：注意這里用標(biāo)簽的真正關(guān)鍵點(diǎn)不是它的默認(rèn)樣式雙引號(hào)（如果這樣我們不如自己在鍵盤(pán)上輸入雙引號(hào)就行了），而是它的語(yǔ)義：引用別人的話(huà)。標(biāo)簽，長(zhǎng)文本引用的作用也是引用別人的文本。但它是對(duì)長(zhǎng)文本的引用，如在文章中引入大段某知名作家的文字，這時(shí)需要這個(gè)標(biāo)簽。等等，上一節(jié)標(biāo)簽不是也是對(duì)文本的引用嗎？不要忘記標(biāo)簽是對(duì)簡(jiǎn)短文本的引用，比如說(shuō)引用一句話(huà)就用到標(biāo)簽。如想在我的文章中引用李白關(guān)山月中的詩(shī)句，因?yàn)橐梦谋颈容^長(zhǎng)，所以使用。語(yǔ)法:引用文本如下面例子：明月出天山，蒼茫云海間。長(zhǎng)風(fēng)幾萬(wàn)里，吹度玉門(mén)關(guān)。漢下白登道，胡窺青

13、海灣。由來(lái)征戰(zhàn)地，不見(jiàn)有人還。 戍客望邊色，思?xì)w多苦顏。高樓當(dāng)此夜，嘆息未應(yīng)閑。瀏覽器對(duì)標(biāo)簽的解析是縮進(jìn)樣式。如下圖所示：使用標(biāo)簽分行顯示文本對(duì)于上一小節(jié)的例子，我們想讓那首詩(shī)顯示得更美觀些，如顯示下面效果：怎么可以讓每一句詩(shī)詞后面加入一個(gè)折行呢？那就可以用到標(biāo)簽了，在需要加回車(chē)換行的地方加入，標(biāo)簽作用相當(dāng)于word文檔中的回車(chē)。上節(jié)的代碼改為：語(yǔ)法：xhtml1.0寫(xiě)法：html4.01寫(xiě)法：大家注意，現(xiàn)在一般使用 xhtml1.0 的版本的寫(xiě)法（其它標(biāo)簽也是），這種版本比較規(guī)范。 與以前我們學(xué)過(guò)的標(biāo)簽不一樣，標(biāo)簽是一個(gè)空標(biāo)簽，沒(méi)有HTML內(nèi)容的標(biāo)簽就是空標(biāo)簽，空標(biāo)簽只需要寫(xiě)一個(gè)開(kāi)始標(biāo)簽，這

14、樣的標(biāo)簽有、和。講到這里，你是不是有個(gè)疑問(wèn)，想折行還不好說(shuō)嘛，就像在 word 文件檔或記事本中，在想要折行的前面輸入回車(chē)不就行了嗎？很遺憾，在 html 中是忽略回車(chē)和空格的，你輸入的再多回車(chē)和空格也是顯示不出來(lái)的。如下邊的代碼。上面的代碼在瀏覽中顯示是沒(méi)有回車(chē)效果的。如下圖所示：總結(jié)：在 html 代碼中輸入回車(chē)、空格都是沒(méi)有作用的。在html文本中想輸入回車(chē)換行，就必須輸入。為你的網(wǎng)頁(yè)中添加一些空格在上一節(jié)的例子，我們已經(jīng)講解過(guò)在html代碼中輸入空格、回車(chē)都是沒(méi)有作用的。要想輸入空格，必須寫(xiě)入 。語(yǔ)法： 在html代碼中輸入空格是不起作用的，如下代碼。在瀏覽中顯示，

15、還是沒(méi)有空格效果。輸入空格的正確方法：在瀏覽器中的顯示出來(lái)的空格效果。如下圖所示。認(rèn)識(shí)標(biāo)簽，添加水平橫線(xiàn)在信息展示時(shí)，有時(shí)會(huì)需要加一些用于分隔的橫線(xiàn)，這樣會(huì)使文章看起來(lái)整齊些。如下圖所示：語(yǔ)法：html4.01版本xhtml1.0版本注意：1.標(biāo)簽和標(biāo)簽一樣也是一個(gè)空標(biāo)簽，所以只有一個(gè)開(kāi)始標(biāo)簽，沒(méi)有結(jié)束標(biāo)簽。2.標(biāo)簽的在瀏覽器中的默認(rèn)樣式線(xiàn)條比較粗，顏色為灰色，可能有些人覺(jué)得這種樣式不美觀，沒(méi)有關(guān)系，這些外在樣式在我們以后學(xué)習(xí)了css樣式表之后，都可以對(duì)其修改。3.大家注意，現(xiàn)在一般使用 xhtml1.0 的版本（其它標(biāo)簽也是），這種版本比較規(guī)范。標(biāo)簽，為網(wǎng)頁(yè)加入地址信息一般網(wǎng)頁(yè)中會(huì)有一些網(wǎng)站

16、的聯(lián)系地址信息需要在網(wǎng)頁(yè)中展示出來(lái)，這些聯(lián)系地址信息如公司的地址就可以標(biāo)簽。也可以定義一個(gè)地址（比如電子郵件地址）、簽名或者文檔的作者身份。語(yǔ)法：聯(lián)系地址信息如：文檔編寫(xiě)：lilian 北京市西城區(qū)德外大街10號(hào)本文的作者：lilian在瀏覽器上顯示的樣式為斜體，如果不喜歡斜體，當(dāng)然可以，可以在后面的課程中使用 css 樣式來(lái)修改它標(biāo)簽的默認(rèn)樣式。想加入一行代碼嗎？使用標(biāo)簽在介紹語(yǔ)言技術(shù)的網(wǎng)站中，避免不了在網(wǎng)頁(yè)中顯示一些計(jì)算機(jī)專(zhuān)業(yè)的編程代碼，當(dāng)代碼為一行代碼時(shí)，你就可以使用標(biāo)簽了，如下面例子：var i=i+300;注意：在文章中一般如果要插入多行代碼時(shí)不能使用標(biāo)簽了。語(yǔ)法：代碼語(yǔ)言注：如果是

17、多行代碼，可以使用標(biāo)簽。使用標(biāo)簽為你的網(wǎng)頁(yè)加入大段代碼在上節(jié)中介紹加入一行代碼的標(biāo)簽為，但是在大多數(shù)情況下是需要加入大段代碼的，如下圖：怎么辦？不會(huì)是每一代碼都加入一個(gè)標(biāo)簽吧，沒(méi)有這么復(fù)雜，這時(shí)候就可以使用標(biāo)簽。語(yǔ)法：語(yǔ)言代碼段 標(biāo)簽的主要作用:預(yù)格式化的文本。被包圍在 pre 元素中的文本通常會(huì)保留空格和換行符。如下代碼： var message=歡迎; for(var i=1;i=10;i+) alert(message); 在瀏覽器中的顯示結(jié)果為：在上面的例子中可以看到代碼中的空格，換行符都保留下來(lái)。如果用以前的方法，回車(chē)需要輸入簽，空格需要輸入 注意：標(biāo)簽不只是為顯示計(jì)算機(jī)的

18、源代碼時(shí)用的，在你需要在網(wǎng)頁(yè)中預(yù)顯示格式時(shí)都可以使用它，只是標(biāo)簽的一個(gè)常見(jiàn)應(yīng)用就是用來(lái)展示計(jì)算機(jī)的源代碼。使用ul，添加新聞信息列表在瀏覽網(wǎng)頁(yè)時(shí)，你會(huì)發(fā)現(xiàn)網(wǎng)頁(yè)上有很多信息的列表，如新聞列表、圖片列表，如下圖所示。新聞列表圖片列表這些列表就可以使用ul-li標(biāo)簽來(lái)完成。ul-li是沒(méi)有前后順序的信息列表。語(yǔ)法： 信息 信息 .舉例： 精彩少年 美麗突然出現(xiàn) 觸動(dòng)心靈的旋律ul-li在網(wǎng)頁(yè)中顯示的默認(rèn)樣式一般為：每項(xiàng)li前都自帶一個(gè)圓點(diǎn)，如下圖所示：使用ol，添加圖書(shū)銷(xiāo)售排行榜如果想在網(wǎng)頁(yè)中展示有前后順序的信息列表，怎么辦呢？如，當(dāng)當(dāng)網(wǎng)上的書(shū)籍熱賣(mài)排行榜，如下圖所示。這類(lèi)信息展示就可以使用標(biāo)簽來(lái)制

19、作有序列表來(lái)展示。語(yǔ)法： 信息 信息 .舉例：下面是一個(gè)熱點(diǎn)課程下載排行榜： 前端開(kāi)發(fā)面試心法 零基礎(chǔ)學(xué)習(xí)html JavaScript全攻略在網(wǎng)頁(yè)中顯示的默認(rèn)樣式一般為：每項(xiàng)前都自帶一個(gè)序號(hào)，序號(hào)默認(rèn)從1開(kāi)始，如下圖所示：認(rèn)識(shí)div在排版中的作用在網(wǎng)頁(yè)制作過(guò)程過(guò)中，可以把一些獨(dú)立的邏輯部分劃分出來(lái)，放在一個(gè)標(biāo)簽中，這個(gè)標(biāo)簽的作用就相當(dāng)于一個(gè)容器。語(yǔ)法：確定邏輯部分：什么是邏輯部分？它是頁(yè)面上相互關(guān)聯(lián)的一組元素。如網(wǎng)頁(yè)中的獨(dú)立的欄目版塊，就是一個(gè)典型的邏輯部分。如下圖所示：圖中用紅色邊框標(biāo)出的部分就是一個(gè)邏輯部分，就可以使用標(biāo)簽作為容器。給div命名，使邏輯更加清晰在上一小節(jié)中，我們把一些標(biāo)簽

20、放進(jìn)里，劃分出一個(gè)獨(dú)立的邏輯部分。為了使邏輯更加清晰，我們可以為這一個(gè)獨(dú)立的邏輯部分設(shè)置一個(gè)名稱(chēng)，用id屬性來(lái)為提供唯一的名稱(chēng)，這個(gè)就像我們每個(gè)人都有一個(gè)身份證號(hào)，這個(gè)身份證號(hào)是唯一標(biāo)識(shí)我們的身份的，也是必須唯一的。如下兩圖進(jìn)行比較，如果設(shè)計(jì)師把兩個(gè)圖給你，哪個(gè)圖你看上去能更快的理解呢？是不是右邊的那幅圖呢。語(yǔ)法：table標(biāo)簽，認(rèn)識(shí)網(wǎng)頁(yè)上的表格有時(shí)候我們需要在網(wǎng)頁(yè)上展示一些數(shù)據(jù)，如某公司想在網(wǎng)頁(yè)上展示公司的庫(kù)存清單。如下表：想在網(wǎng)頁(yè)上展示上述表格效果可以使用以下代碼：創(chuàng)建表格的四個(gè)元素：table、tbody、tr、th、td1、：整個(gè)表格以標(biāo)記開(kāi)始、標(biāo)記結(jié)束。2、：如果不加 , table

21、表格加載完后才顯示。加上這些表格結(jié)構(gòu)， tbody包含行的內(nèi)容下載完優(yōu)先顯示，不必等待表格結(jié)束后在顯示，同時(shí)如果表格很長(zhǎng)，用tbody分段，可以一部分一部分地顯示。（通俗理解table 可以按結(jié)構(gòu)一塊塊的顯示，不在等整個(gè)表格加載完后顯示。）3、：表格的一行，所以有幾對(duì)tr 表格就有幾行。4、：表格的一個(gè)單元格，一行中包含幾對(duì).，說(shuō)明一行中就有幾列。5、：表格的頭部的一個(gè)單元格，表格表頭。6、表格中列的個(gè)數(shù)，取決于一行中數(shù)據(jù)單元格的個(gè)數(shù)。上述代碼在瀏覽器中顯示的默認(rèn)的樣式為：總結(jié)：1、table表格在沒(méi)有添加css樣式之前，在瀏覽器中顯示是沒(méi)有表格線(xiàn)的2、表頭，也就是th標(biāo)簽中的文本默認(rèn)為粗體并

22、且居中顯示用css樣式，為表格加入邊框Table 表格在沒(méi)有添加 css 樣式之前，是沒(méi)有邊框的。這樣不便于我們后期合并單元格知識(shí)點(diǎn)的講解，所以在這一節(jié)中我們?yōu)楸砀裉砑右恍邮?，為它添加邊框。在右?cè)代碼編輯器中添加如下代碼：table tr td,thborder:1px solid #000;上述代碼是用 css 樣式代碼（后面章節(jié)會(huì)詳細(xì)講解），為th，td單元格添加粗細(xì)為一個(gè)像素的黑色邊框。結(jié)果窗口顯示出結(jié)果樣式：caption標(biāo)簽，為表格添加標(biāo)題和摘要表格還是需要添加一些標(biāo)簽進(jìn)行優(yōu)化，可以添加標(biāo)題和摘要。代碼如下：摘要摘要的內(nèi)容是不會(huì)在瀏覽器中顯示出來(lái)的。它的作用是增加表格的可讀性(語(yǔ)義

23、化)，使搜索引擎更好的讀懂表格內(nèi)容，還可以使屏幕閱讀器更好的幫助特殊用戶(hù)讀取表格內(nèi)容。語(yǔ)法：標(biāo)題用以描述表格內(nèi)容，標(biāo)題的顯示位置：表格上方。語(yǔ)法： 標(biāo)題文本 使用標(biāo)簽，鏈接到另一個(gè)頁(yè)面使用標(biāo)簽可實(shí)現(xiàn)超鏈接，它在網(wǎng)頁(yè)制作中可以說(shuō)是無(wú)處不在，只要有鏈接的地方，就會(huì)有這個(gè)標(biāo)簽。語(yǔ)法：鏈接顯示的文本例如：上面例子作用是單擊click here!文字，網(wǎng)頁(yè)鏈接到這個(gè)網(wǎng)頁(yè)。title屬性的作用，鼠標(biāo)滑過(guò)鏈接文字時(shí)會(huì)顯示這個(gè)屬性的文本內(nèi)容。這個(gè)屬性在實(shí)際網(wǎng)頁(yè)開(kāi)發(fā)中作用很大，主要方便搜索引擎了解鏈接地址的內(nèi)容（語(yǔ)義化更友好），如右側(cè)案例代碼（8-12行）。注意：還有一個(gè)有趣的現(xiàn)象不知道小伙伴們發(fā)現(xiàn)了沒(méi)有，只要

24、為文本加入a標(biāo)簽后，文字的顏色就會(huì)自動(dòng)變?yōu)樗{(lán)色（被點(diǎn)擊過(guò)的文本顏色為紫色），顏色很難看吧，不過(guò)沒(méi)有關(guān)系后面我們學(xué)習(xí)了css樣子就可以設(shè)置過(guò)來(lái)（acolor:#000),后面會(huì)詳細(xì)講解。在新建瀏覽器窗口中打開(kāi)鏈接標(biāo)簽在默認(rèn)情況下，鏈接的網(wǎng)頁(yè)是在當(dāng)前瀏覽器窗口中打開(kāi)，有時(shí)我們需要在新的瀏覽器窗口中打開(kāi)。如下代碼：click here!使用mailto在網(wǎng)頁(yè)中鏈接Email地址標(biāo)簽還有一個(gè)作用是可以鏈接Email地址，使用mailto能讓訪(fǎng)問(wèn)者便捷向網(wǎng)站管理者發(fā)送電子郵件。我們還可以利用mailto做許多其它事情。下面一一進(jìn)行講解，請(qǐng)看詳細(xì)圖示：注意：如果mailto后面同時(shí)有多個(gè)參數(shù)的話(huà)，第一個(gè)參

25、數(shù)必須以“?”開(kāi)頭，后面的參數(shù)每一個(gè)都以“&”分隔。下面是一個(gè)完整的實(shí)例:在瀏覽器中顯示的結(jié)果：發(fā)送點(diǎn)擊鏈接會(huì)打開(kāi)電子郵件應(yīng)用，并自動(dòng)填寫(xiě)收件人等設(shè)置好的信息，如下圖：認(rèn)識(shí)標(biāo)簽，為網(wǎng)頁(yè)插入圖片在網(wǎng)頁(yè)的制作中為使網(wǎng)頁(yè)炫麗美觀，肯定是缺少不了圖片，可以使用標(biāo)簽來(lái)插入圖片。語(yǔ)法：舉例：講解：1、src：標(biāo)識(shí)圖像的位置；2、alt：指定圖像的描述性文本，當(dāng)圖像不可見(jiàn)時(shí)（下載不成功時(shí)），可看到該屬性指定的文本；3、title：提供在圖像可見(jiàn)時(shí)對(duì)圖像的描述(鼠標(biāo)滑過(guò)圖片時(shí)顯示的文本)；4、圖像可以是GIF，PNG，JPEG格式的圖像文件。使用表單標(biāo)簽，與用戶(hù)交互網(wǎng)站怎樣與用戶(hù)進(jìn)行交互？答案是使用HTML表

26、單(form)。表單是可以把瀏覽者輸入的數(shù)據(jù)傳送到服務(wù)器端，這樣服務(wù)器端程序就可以處理表單傳過(guò)來(lái)的數(shù)據(jù)。語(yǔ)法：講解：1. ：標(biāo)簽是成對(duì)出現(xiàn)的，以開(kāi)始，以結(jié)束。2.action：瀏覽者輸入的數(shù)據(jù)被傳送到的地方,比如一個(gè)PHP頁(yè)面(save.php)。3.method：數(shù)據(jù)傳送的方式（get/post）。 用戶(hù)名: 密碼: 注意:1、所有表單控件（文本框、文本域、按鈕、單選框、復(fù)選框等）都必須放在 標(biāo)簽之間（否則用戶(hù)輸入的信息可提交不到服務(wù)器上哦！）。2、method : post/get 的區(qū)別這一部分內(nèi)容屬于后端程序員考慮的問(wèn)題。感興趣的小伙伴可以查看本小節(jié)的 wiki，里面有詳細(xì)介紹。文本輸

27、入框、密碼輸入框當(dāng)用戶(hù)要在表單中鍵入字母、數(shù)字等內(nèi)容時(shí)，就會(huì)用到文本輸入框。文本框也可以轉(zhuǎn)化為密碼輸入框。語(yǔ)法： 1、type： 當(dāng)type=text時(shí)，輸入框?yàn)槲谋据斎肟? 當(dāng)type=password時(shí),輸入框?yàn)槊艽a輸入框。2、name：為文本框命名，以備后臺(tái)程序ASP 、PHP使用。3、value：為文本輸入框設(shè)置默認(rèn)值。(一般起到提示作用)舉例： 姓名： 密碼： 在瀏覽器中顯示的結(jié)果：文本域，支持多行文本輸入當(dāng)用戶(hù)需要在表單中輸入大段文字時(shí)，需要用到文本輸入域。語(yǔ)法：文本1、標(biāo)簽是成對(duì)出現(xiàn)的，以開(kāi)始，以結(jié)束。2、cols ：多行輸入域的列數(shù)。3、rows ：多行輸入域的行數(shù)。4、在標(biāo)簽

28、之間可以輸入默認(rèn)值。舉例： 聯(lián)系我們 在這里輸入內(nèi)容.注意：代碼中的標(biāo)簽在本章5-9中講解。在瀏覽器中顯示結(jié)果：注意這兩個(gè)屬性可用css樣式的width和height來(lái)代替：col用width、row用height來(lái)代替。（這兩個(gè)css樣式在以后的章節(jié)會(huì)講解）使用單選框、復(fù)選框，讓用戶(hù)選擇在使用表單設(shè)計(jì)調(diào)查表時(shí)，為了減少用戶(hù)的操作，使用選擇框是一個(gè)好主意，html中有兩種選擇框，即單選框和復(fù)選框，兩者的區(qū)別是單選框中的選項(xiàng)用戶(hù)只能選擇一項(xiàng)，而復(fù)選框中用戶(hù)可以任意選擇多項(xiàng)，甚至全選。請(qǐng)看下面的例子:語(yǔ)法：1、type: 當(dāng)type=radio時(shí)，控件為單選框 當(dāng)type=checkbox時(shí)，控件

29、為復(fù)選框2、value：提交數(shù)據(jù)到服務(wù)器的值（后臺(tái)程序PHP使用）3、name：為控件命名，以備后臺(tái)程序 ASP、PHP 使用4、checked：當(dāng)設(shè)置 checked=checked 時(shí)，該選項(xiàng)被默認(rèn)選中如下面代碼：注意：代碼中的標(biāo)簽在本章 5-9 中有講解。在瀏覽器中顯示的結(jié)果：注意:同一組的單選按鈕，name 取值一定要一致，比如上面例子為同一個(gè)名稱(chēng)“radioLove”，這樣同一組的單選按鈕才可以起到單選的作用。使用下拉列表框，節(jié)省空間下拉列表在網(wǎng)頁(yè)中也常會(huì)用到，它可以有效的節(jié)省網(wǎng)頁(yè)空間。既可以單選、又可以多選。如下代碼：講解：1、value：2、selected=selected：設(shè)

30、置selected=selected屬性，則該選項(xiàng)就被默認(rèn)選中。在瀏覽器中顯示的結(jié)果：使用下拉列表框進(jìn)行多選下拉列表也可以進(jìn)行多選操作，在標(biāo)簽中設(shè)置multiple=multiple屬性，就可以實(shí)現(xiàn)多選功能，在 windows 操作系統(tǒng)下，進(jìn)行多選時(shí)按下Ctrl鍵同時(shí)進(jìn)行單擊（在 Mac下使用Command+單擊），可以選擇多個(gè)選項(xiàng)。如下代碼：在瀏覽器中顯示的結(jié)果：使用提交按鈕，提交數(shù)據(jù)在表單中有兩種按鈕可以使用，分別為：提交按鈕、重置。這一小節(jié)講解提交按鈕：當(dāng)用戶(hù)需要提交表單信息到服務(wù)器時(shí)，需要用到提交按鈕。語(yǔ)法：type：只有當(dāng)type值設(shè)置為submit時(shí)，按鈕才有提交作用value：按

31、鈕上顯示的文字舉例：在瀏覽器中顯示的結(jié)果：使用重置按鈕，重置表單信息當(dāng)用戶(hù)需要重置表單信息到初始時(shí)的狀態(tài)時(shí)，比如用戶(hù)輸入“用戶(hù)名”后，發(fā)現(xiàn)書(shū)寫(xiě)有誤，可以使用重置按鈕使輸入框恢復(fù)到初始狀態(tài)。只需要把type設(shè)置為reset就可以。語(yǔ)法：type：只有當(dāng)type值設(shè)置為reset時(shí)，按鈕才有重置作用value：按鈕上顯示的文字舉例：在瀏覽器中顯示的結(jié)果：輸入賬號(hào)單擊重置按鈕form表單中的label標(biāo)簽小伙伴們，你們?cè)谇懊鎸W(xué)習(xí)表單各種控件的時(shí)候，有沒(méi)有發(fā)現(xiàn)一個(gè)標(biāo)簽-label，這一小節(jié)就來(lái)揭曉它的作用。label標(biāo)簽不會(huì)向用戶(hù)呈現(xiàn)任何特殊效果，它的作用是為鼠標(biāo)用戶(hù)改進(jìn)了可用性。如果你在 label

32、 標(biāo)簽內(nèi)點(diǎn)擊文本，就會(huì)觸發(fā)此控件。就是說(shuō)，當(dāng)用戶(hù)單擊選中該label標(biāo)簽時(shí)，瀏覽器就會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上（就自動(dòng)選中和該label標(biāo)簽相關(guān)連的表單控件上）。語(yǔ)法：注意：標(biāo)簽的for 屬性中的值應(yīng)當(dāng)與相關(guān)控件的id 屬性值一定要相同。例子： 男 女 輸入你的郵箱地址 認(rèn)識(shí)CSS樣式CSS全稱(chēng)為“層疊樣式表 (Cascading Style Sheets)”，它主要是用于定義HTML內(nèi)容在瀏覽器內(nèi)的顯示樣式，如文字大小、顏色、字體加粗等。如下列代碼：p font-size:12px; color:red; font-weight:bold;使用CSS樣式的一個(gè)好處是通過(guò)定義某個(gè)樣

33、式，可以讓不同網(wǎng)頁(yè)位置的文字有著統(tǒng)一的字體、字號(hào)或者顏色等。CSS樣式的優(yōu)勢(shì)為什么使用css樣式來(lái)設(shè)置網(wǎng)頁(yè)的外觀樣式呢？右邊編輯器是一段文字，我們想把“超酷的互聯(lián)網(wǎng)”、“服務(wù)及時(shí)貼心”、“有趣易學(xué)”這三個(gè)短語(yǔ)的文本顏色設(shè)置為紅色，這時(shí)就 可以通過(guò)設(shè)置樣式來(lái)設(shè)置，而且只需要編寫(xiě)一條css樣式語(yǔ)句。第一步：把這三個(gè)短語(yǔ)用括起來(lái)。（見(jiàn)右邊代碼編輯器13行）第二步：寫(xiě)入下列代碼：（見(jiàn)右邊代碼編輯器7-8行）span color:red;觀察結(jié)果窗口文字的顏色是否變?yōu)榧t色了。CSS代碼語(yǔ)法css 樣式由選擇符和聲明組成，而聲明又由屬性和值組成，如下圖所示：選擇符：又稱(chēng)選擇器，指明網(wǎng)頁(yè)中要應(yīng)用樣式規(guī)則的元

34、素，如本例中是網(wǎng)頁(yè)中所有的段（p）的文字將變成藍(lán)色，而其他的元素（如ol）不會(huì)受到影響。聲明：在英文大括號(hào)“”中的的就是聲明，屬性和值之間用英文冒號(hào)“：”分隔。當(dāng)有多條聲明時(shí)，中間可以英文分號(hào)“;”分隔，如下所示：pfont-size:12px;color:red;注意：1、最后一條聲明可以沒(méi)有分號(hào)，但是為了以后修改方便，一般也加上分號(hào)。2、為了使用樣式更加容易閱讀，可以將每條代碼寫(xiě)在一個(gè)新行內(nèi)，如下所示：p font-size:12px; color:red;CSS注釋代碼就像在Html的注釋一樣，在CSS中也有注釋語(yǔ)句：用/*注釋語(yǔ)句*/來(lái)標(biāo)明（Html中使用)。就像下面代碼：內(nèi)聯(lián)式css

35、樣式，直接寫(xiě)在現(xiàn)有的HTML標(biāo)簽中CSS樣式可以寫(xiě)在哪些地方呢？從CSS 樣式代碼插入的形式來(lái)看基本可以分為以下3種：內(nèi)聯(lián)式、嵌入式和外部式三種。這一小節(jié)先來(lái)講解內(nèi)聯(lián)式。內(nèi)聯(lián)式css樣式表就是把css代碼直接寫(xiě)在現(xiàn)有的HTML標(biāo)簽中，如下面代碼：這里文字是紅色。注意要寫(xiě)在元素的開(kāi)始標(biāo)簽里，下面這種寫(xiě)法是錯(cuò)誤的：這里文字是紅色。并且css樣式代碼要寫(xiě)在style=雙引號(hào)中，如果有多條css樣式代碼設(shè)置可以寫(xiě)在一起，中間用分號(hào)隔開(kāi)。如下代碼：這里文字是紅色。嵌入式css樣式，寫(xiě)在當(dāng)前的文件中現(xiàn)在有一任務(wù)，把右側(cè)編輯器中的“超酷的互聯(lián)網(wǎng)”、“服務(wù)及時(shí)貼心”、“有趣易學(xué)”這三個(gè)短詞文字字號(hào)修改為18p

36、x。如果用上節(jié)課我們學(xué)習(xí)的內(nèi)聯(lián)式css樣式的方法進(jìn)行設(shè)置將是一件很頭疼的事情（為每一個(gè)標(biāo)簽加入sytle=font-size:18px語(yǔ)句），本小節(jié)講解一種新的方法嵌入式css樣式來(lái)實(shí)現(xiàn)這個(gè)任務(wù)。嵌入式css樣式，就是可以把css樣式代碼寫(xiě)在標(biāo)簽之間。如下面代碼實(shí)現(xiàn)把三個(gè)標(biāo)簽中的文字設(shè)置為紅色：spancolor:red;嵌入式css樣式必須寫(xiě)在之間，并且一般情況下嵌入式css樣式寫(xiě)在之間。如右邊編輯器中的代碼。外部式css樣式，寫(xiě)在單獨(dú)的一個(gè)文件中外部式css樣式(也可稱(chēng)為外聯(lián)式)就是把css代碼寫(xiě)一個(gè)單獨(dú)的外部文件中，這個(gè)css樣式文件以“.css”為擴(kuò)展名，在內(nèi)（不是在標(biāo)簽內(nèi)）使用標(biāo)簽將

37、css樣式文件鏈接到HTML文件內(nèi)，如下面代碼：注意：1、css樣式文件名稱(chēng)以有意義的英文字母命名，如 main.css。2、rel=stylesheet type=text/css 是固定寫(xiě)法不可修改。3、標(biāo)簽位置一般寫(xiě)在標(biāo)簽之內(nèi)。三種方法的優(yōu)先級(jí)有的小伙伴問(wèn)了，如果有一種情況：對(duì)于同一個(gè)元素我們同時(shí)用了三種方法設(shè)置css樣式，那么哪種方法真正有效呢？在右邊編輯器就出現(xiàn)了這種情況1、使用內(nèi)聯(lián)式CSS設(shè)置“超酷的互聯(lián)網(wǎng)”文字為粉色。2、然后使用嵌入式CSS來(lái)設(shè)置文字為紅色。3、最后又使用外部式設(shè)置文字為藍(lán)色（style.css文件中設(shè)置）。但最終你可以觀察到“超酷的互聯(lián)網(wǎng)”這個(gè)短詞的文本被設(shè)置

38、為了粉色。因?yàn)檫@三種樣式是有優(yōu)先級(jí)的，記住他們的優(yōu)先級(jí)：內(nèi)聯(lián)式嵌入式 外部式但是嵌入式外部式有一個(gè)前提：嵌入式css樣式的位置一定在外部式的后面。如右代碼編輯器就是這樣，代碼在.代碼的前面（實(shí)際開(kāi)發(fā)中也是這么寫(xiě)的）。感興趣的小伙伴可以試一下，把它們調(diào)換順序，再看他們的優(yōu)先級(jí)是否變化。其實(shí)總結(jié)來(lái)說(shuō)，就是-就近原則（離被設(shè)置元素越近優(yōu)先級(jí)別越高）。但注意上面所總結(jié)的優(yōu)先級(jí)是有一個(gè)前提：內(nèi)聯(lián)式、嵌入式、外部式樣式表中css樣式是在的相同權(quán)值的情況下，什么是權(quán)值呢？在后面的9-2小節(jié)中會(huì)講解到。什么是選擇器？每一條css樣式聲明（定義）由兩部分組成，形式如下：選擇器 樣式;在之前的部分就是“選擇器”，

39、“選擇器”指明了中的“樣式”的作用對(duì)象，也就是“樣式”作用于網(wǎng)頁(yè)中的哪些元素。比如右側(cè)代碼編輯器中第7行代碼中的“body”就是選擇器。標(biāo)簽選擇器標(biāo)簽選擇器其實(shí)就是html代碼中的標(biāo)簽。如右側(cè)代碼編輯器中的、。例如下面代碼：pfont-size:12px;line-height:1.6em;上面的css樣式代碼的作用：為p標(biāo)簽設(shè)置12px字號(hào)，行間距設(shè)置1.6em的樣式。類(lèi)選擇器類(lèi)選擇器在css樣式編碼中是最常用到的，如右側(cè)代碼編輯器中的代碼:可以實(shí)現(xiàn)為“膽小如鼠”、“勇氣”字體設(shè)置為紅色。語(yǔ)法：.類(lèi)選器名稱(chēng)css樣式代碼;注意：1、英文圓點(diǎn)開(kāi)頭2、其中類(lèi)選器名稱(chēng)可以任意起名（但不要起中文噢）

40、使用方法：第一步：使用合適的標(biāo)簽把要修飾的內(nèi)容標(biāo)記起來(lái)，如下：膽小如鼠第二步：使用class=類(lèi)選擇器名稱(chēng)為標(biāo)簽設(shè)置一個(gè)類(lèi)，如下：膽小如鼠第三步：設(shè)置類(lèi)選器css樣式，如下：.stresscolor:red;/*類(lèi)前面要加入一個(gè)英文圓點(diǎn)*/ID選擇器在很多方面，ID選擇器都類(lèi)似于類(lèi)選擇符，但也有一些重要的區(qū)別：1、為標(biāo)簽設(shè)置id=ID名稱(chēng)，而不是class=類(lèi)名稱(chēng)。2、ID選擇符的前面是井號(hào)（#）號(hào)，而不是英文圓點(diǎn)（.）。右側(cè)代碼編輯器中就是一個(gè)ID選擇符的完整實(shí)例。類(lèi)和ID選擇器的區(qū)別學(xué)習(xí)了類(lèi)選擇器和ID選擇器，我們會(huì)發(fā)現(xiàn)他們之間有很多的相似處，是不是兩者可以通用呢？我們不要著急先來(lái)總結(jié)一下

41、他們的相同點(diǎn)和不同點(diǎn)：相同點(diǎn)：可以應(yīng)用于任何元素不同點(diǎn)：1、ID選擇器只能在文檔中使用一次。與類(lèi)選擇器不同，在一個(gè)HTML文檔中，ID選擇器只能使用一次，而且僅一次。而類(lèi)選擇器可以使用多次。下面代碼是正確的： 三年級(jí)時(shí)，我還是一個(gè)膽小如鼠的小女孩，上課從來(lái)不敢回答老師提出的問(wèn)題，生怕回答錯(cuò)了老師會(huì)批評(píng)我。就一直沒(méi)有這個(gè)勇氣來(lái)回答老師提出的問(wèn)題。而下面代碼是錯(cuò)誤的： 三年級(jí)時(shí)，我還是一個(gè)膽小如鼠的小女孩，上課從來(lái)不敢回答老師提出的問(wèn)題，生怕回答錯(cuò)了老師會(huì)批評(píng)我。就一直沒(méi)有這個(gè)勇氣來(lái)回答老師提出的問(wèn)題。2、可以使用類(lèi)選擇器詞列表方法為一個(gè)元素同時(shí)設(shè)置多個(gè)樣式。我們可以為一個(gè)元素同時(shí)設(shè)多個(gè)樣式，但只

42、可以用類(lèi)選擇器的方法實(shí)現(xiàn)，ID選擇器是不可以的（不能使用 ID 詞列表）。下面的代碼是正確的(完整代碼見(jiàn)右側(cè)代碼編輯器).stress color:red;.bigsize font-size:25px;到了三年級(jí)下學(xué)期時(shí)，我們班上了一節(jié)公開(kāi)課.上面代碼的作用是為“三年級(jí)”三個(gè)文字設(shè)置文本顏色為紅色并且字號(hào)為25px。下面的代碼是不正確的(完整代碼見(jiàn)右側(cè)代碼編輯器)#stressid color:red;#bigsizeid font-size:25px;到了三年級(jí)下學(xué)期時(shí)，我們班上了一節(jié)公開(kāi)課.上面代碼不可以實(shí)現(xiàn)為“三年級(jí)”三個(gè)文字設(shè)置文本顏色為紅色并且字號(hào)為25px的作用。子選擇器還有一個(gè)

43、比較有用的選擇器子選擇器，即大于符號(hào)(),用于選擇指定標(biāo)簽元素的第一代子元素。如右側(cè)代碼編輯器中的代碼：.foodliborder:1px solid red;這行代碼會(huì)使class名為food下的子元素li（水果、蔬菜）加入紅色實(shí)線(xiàn)邊框。包含(后代)選擇器包含選擇器，即加入空格,用于選擇指定標(biāo)簽元素下的后輩元素。如右側(cè)代碼編輯器中的代碼：.first spancolor:red;這行代碼會(huì)使第一段文字內(nèi)容中的“膽小如鼠”字體顏色變?yōu)榧t色。請(qǐng)注意這個(gè)選擇器與子選擇器的區(qū)別，子選擇器（child selector）僅是指它的直接后代，或者你可以理解為作用于子元素的第一代后代。而后代選擇器是作用于所有子后代元素。后代選擇器通過(guò)空格來(lái)進(jìn)行選擇，而子選擇器是通過(guò)“”進(jìn)行選擇。總結(jié)：作用于元素的第一代后代，空格作用于元素的所有后代。通用選擇器通用選擇器是功能最強(qiáng)大的選擇器，它使用一個(gè)（*）號(hào)指定，它的作用是匹配html中所有標(biāo)簽元素，如下使用下面代碼使用html中任意標(biāo)簽元素字體顏色全部設(shè)置為紅色：* color:red;偽類(lèi)選擇符更有趣的是偽類(lèi)選擇符，為什么叫做偽類(lèi)選擇符，它允許給h