第4章常見(jiàn)的HTML標(biāo)簽與CSS樣式的搭配01學(xué)習(xí)目標(biāo)02課程思政目標(biāo)03知識(shí)點(diǎn)04本章練習(xí)PPT模板/moban/

學(xué)習(xí)目標(biāo)深刻理解塊級(jí)、內(nèi)聯(lián)、內(nèi)聯(lián)-塊級(jí)元素的特征；進(jìn)一步熟練編寫(xiě)常見(jiàn)HTML標(biāo)簽以及對(duì)應(yīng)的CSS樣式屬性，包括屬性的簡(jiǎn)寫(xiě)格式；理解常見(jiàn)若干種類型的選擇器的使用場(chǎng)景；理解選擇器的優(yōu)先順序；能用多種思維去考慮實(shí)現(xiàn)頁(yè)面效果布局；養(yǎng)成使用選擇器的組合去申明目標(biāo)樣式的習(xí)慣，并在<style>標(biāo)簽內(nèi)部形成整齊的選擇器名稱排列；進(jìn)一步培養(yǎng)編寫(xiě)代碼時(shí)在重點(diǎn)位置書(shū)寫(xiě)注釋的習(xí)慣。第4章

常見(jiàn)的HTML標(biāo)簽與CSS樣式的搭配1通過(guò)本章學(xué)習(xí)，要求達(dá)到以下既定目標(biāo)：課程思政目標(biāo)2以個(gè)人形式完成對(duì)應(yīng)學(xué)號(hào)的繪制容器關(guān)系圖練習(xí)，培養(yǎng)獨(dú)立學(xué)習(xí)能力，解決大部分人學(xué)習(xí)中的依賴行為。個(gè)人簡(jiǎn)歷表格布局練習(xí)，培養(yǎng)學(xué)生動(dòng)手完成實(shí)習(xí)期前夕必做項(xiàng)目的能力?！靶@霸凌問(wèn)卷”練習(xí)，了解校園霸凌的特點(diǎn)、處理方式等，加強(qiáng)學(xué)生正確的應(yīng)對(duì)意識(shí)。了解本章成語(yǔ)的出處，理解成語(yǔ)含義與知識(shí)點(diǎn)理解的結(jié)合：“文武兼?zhèn)洹?、“橫行天下”，對(duì)于個(gè)人而言，勤修內(nèi)外功，方能在行業(yè)、領(lǐng)域中闖出一方天地；第4章

常見(jiàn)的HTML標(biāo)簽與CSS樣式的搭配2“無(wú)孔不入”，強(qiáng)調(diào)規(guī)則制度有滯后性，切勿鉆漏洞獲取不當(dāng)利益。“同氣連枝”、“株連蔓引”，在集體生活，應(yīng)當(dāng)團(tuán)結(jié)友愛(ài)，親如兄弟，切勿做損傷集體利益的事情，避免一損俱損的情況?！皩掖稳保型瑢W(xué)經(jīng)常屢屢遲到，卻無(wú)改進(jìn)的意愿和措施，吃一塹卻不長(zhǎng)一智?！叭宋⒀暂p”、“一呼百諾”，有力量的人，周圍的人都愿意聽(tīng)從他的建議，并不因?yàn)樗穆毼桓叩?，這股力量來(lái)自堅(jiān)定、勇氣、自信……第4章

常見(jiàn)的HTML標(biāo)簽與CSS樣式的搭配3知識(shí)點(diǎn)4.1塊元素、內(nèi)聯(lián)元素、內(nèi)聯(lián)塊級(jí)元素的特征4.2常見(jiàn)CSS屬性表標(biāo)簽選擇器ID選擇器類選擇器通配符選擇器（通用選擇器）后代選擇器標(biāo)簽選擇器、ID選擇器、類選擇器的優(yōu)先權(quán)級(jí)別4.3常見(jiàn)的選擇器類型第4章

常見(jiàn)的HTML標(biāo)簽與CSS樣式的搭配3知識(shí)點(diǎn)4.4結(jié)構(gòu)類標(biāo)簽4.5文本類標(biāo)簽第4章

常見(jiàn)的HTML標(biāo)簽與CSS樣式的搭配header標(biāo)簽section標(biāo)簽nav標(biāo)簽article標(biāo)簽footer標(biāo)簽p標(biāo)簽span標(biāo)簽和i標(biāo)簽h1~h6標(biāo)簽br標(biāo)簽sub、sup標(biāo)簽em、strong標(biāo)簽4.6a標(biāo)簽4.7圖像、視音頻類標(biāo)簽img標(biāo)簽video標(biāo)簽audio標(biāo)簽3知識(shí)點(diǎn)4.8列表類標(biāo)簽4.9表格標(biāo)簽第4章

常見(jiàn)的HTML標(biāo)簽與CSS樣式的搭配ul標(biāo)簽ol標(biāo)簽dl標(biāo)簽4.10表單類標(biāo)簽form標(biāo)簽input標(biāo)簽textarea標(biāo)簽select標(biāo)簽4.1塊元素、?內(nèi)聯(lián)元素、?內(nèi)聯(lián)塊級(jí)元素的特征3知識(shí)點(diǎn)4.1塊元素、?內(nèi)聯(lián)元素、?內(nèi)聯(lián)塊級(jí)元素的特征1.塊元素block：block讀音——英[bl?k]每個(gè)塊級(jí)元素都從新的一行開(kāi)始，并且其后的元素也另起一行。元素的高度、寬度、垂直和水平的內(nèi)外邊距都可設(shè)置。元素寬度在不設(shè)置的情況下，是它本身父容器的100%（和父元素的寬度一致）。常見(jiàn)的塊狀元素有<div>、<p>、<ul>、<table>、<form>等。4.1塊元素、?內(nèi)聯(lián)元素、?內(nèi)聯(lián)塊級(jí)元素的特征3知識(shí)點(diǎn)知識(shí)點(diǎn)：塊元素特征記憶關(guān)鍵詞：橫行天下關(guān)鍵詞解析：塊元素占用一橫行，即便設(shè)置了寬度，也依然不允許后面的元素排上來(lái)，霸道至極，可謂武將。《莊子·盜跖》：“盜跖從卒九千人，橫行天下，侵暴諸侯。”橫行天下——形容遍行天下，不受阻礙。也形容東征西戰(zhàn)，到處稱強(qiáng)，沒(méi)有敵手。4.1塊元素、?內(nèi)聯(lián)元素、?內(nèi)聯(lián)塊級(jí)元素的特征3知識(shí)點(diǎn)2.內(nèi)聯(lián)元素（行內(nèi)元素）inline：inline讀音——英['in'lain]和其他內(nèi)聯(lián)元素都在同一行上。元素的高度、寬度、上/下內(nèi)邊距、上/下外邊距不可設(shè)置，但是可以設(shè)置左/右內(nèi)邊距、左/右外邊距。元素的寬度就是它包含的文字或圖片的寬度。常見(jiàn)的行內(nèi)元素有<a>、<span>、<br>、<i>、<em>、<strong>、<label>等。4.1塊元素、?內(nèi)聯(lián)元素、?內(nèi)聯(lián)塊級(jí)元素的特征3知識(shí)點(diǎn)知識(shí)點(diǎn)：內(nèi)聯(lián)元素特征記憶關(guān)鍵詞：無(wú)孔不入關(guān)鍵詞解析：實(shí)力弱小，在塊級(jí)元素強(qiáng)者之間求生存發(fā)展，竭盡所能靠近“上層社會(huì)”，前排哪里有空位擠哪里，可謂文將。清·李寶嘉《官場(chǎng)現(xiàn)形記》第三十五回：“況且上海辦捐的人，鉆頭覓縫，無(wú)孔不入?！睙o(wú)孔不入——意思是比喻有空子就鉆。4.1塊元素、?內(nèi)聯(lián)元素、?內(nèi)聯(lián)塊級(jí)元素的特征3知識(shí)點(diǎn)3.內(nèi)聯(lián)塊級(jí)元素（行內(nèi)塊元素）inline-block：和其他內(nèi)聯(lián)元素都在同一行上。元素的高度、寬度可設(shè)置。常見(jiàn)的內(nèi)聯(lián)塊級(jí)元素有<img>、<input/>、<button></button>、<td></td>等。4.1塊元素、?內(nèi)聯(lián)元素、?內(nèi)聯(lián)塊級(jí)元素的特征3知識(shí)點(diǎn)知識(shí)點(diǎn)：內(nèi)聯(lián)塊級(jí)元素特征記憶關(guān)鍵詞：文武兼?zhèn)潢P(guān)鍵詞解析：具備有內(nèi)聯(lián)元素不會(huì)霸占整行的特征，同時(shí)又可以像塊級(jí)元素一樣設(shè)置正常的內(nèi)外邊距。漢·荀悅《漢紀(jì)·宣帝紀(jì)》：“文武兼?zhèn)洌┧┰O(shè)。”文武兼?zhèn)洹馑际峭瑫r(shí)具有文才和武才，文武雙全。4.2常見(jiàn)CSS屬性表3知識(shí)點(diǎn)4.2常見(jiàn)CSS屬性表如表4-1中的屬性在案例中經(jīng)常用到，一定要認(rèn)得常用的英文單詞，最起碼得要求也必須要記住每個(gè)單詞前幾個(gè)字母，敲代碼時(shí)根據(jù)Hbuilder的代碼提示功能找到眼熟的即可。屬性名稱翻譯屬性作用background背景所有background-*屬性的簡(jiǎn)寫(xiě)屬性。border邊框所有邊框?qū)傩缘暮?jiǎn)寫(xiě)屬性。border-radius邊框半徑設(shè)置邊框的圓角度。box-shadow盒子-陰影設(shè)置容器的陰影。clear清除清除浮動(dòng)帶來(lái)的影響。color顏色設(shè)置文本的顏色。content內(nèi)容與:before和:after偽元素一起使用，來(lái)插入生成的內(nèi)容。cursor光標(biāo)規(guī)定當(dāng)指向元素時(shí)要顯示的鼠標(biāo)光標(biāo)。display顯示規(guī)定如何顯示某個(gè)HTML元素。filter濾鏡定義元素顯示的濾鏡效果float浮動(dòng)設(shè)置容器進(jìn)行浮動(dòng)。font-family文字-家族規(guī)定文本的字體系列font-size文字大小規(guī)定文本的字體大小。font-weight文字粗細(xì)規(guī)定字體的粗細(xì)。letter-spacing字符間距增加或減少文本中的字符間距。line-height行高設(shè)置行高，一行文本可以理解為文字上下均占用一些空白區(qū)域。list-style-type列表樣式規(guī)定列表項(xiàng)標(biāo)記的類型。opacity透明度設(shè)置元素的不透明等級(jí)。4.2常見(jiàn)CSS屬性表3知識(shí)點(diǎn)屬性名稱翻譯屬性作用overflow溢出規(guī)定如果內(nèi)容溢出元素框會(huì)發(fā)生什么情況。position位置規(guī)定用于元素的定位方法的類型（靜態(tài)、相對(duì)、絕對(duì)或固定）。text-align文字對(duì)齊規(guī)定文本的水平對(duì)齊方式。text-decoration文字裝飾規(guī)定文本裝飾。text-indent文字縮進(jìn)規(guī)定文本塊中的的首行縮進(jìn)。transform變換向元素應(yīng)用2D或3D轉(zhuǎn)換。transition-delay（動(dòng)畫(huà)）過(guò)渡延遲規(guī)定合適開(kāi)始過(guò)渡效果。transition-duration（動(dòng)畫(huà)）過(guò)渡持續(xù)時(shí)間規(guī)定完成過(guò)渡效果所需的秒或毫秒數(shù)。transition-timing-function（動(dòng)畫(huà)）過(guò)渡-時(shí)間函數(shù)規(guī)定過(guò)渡效果的速度曲線。vertical-align垂直對(duì)齊設(shè)置元素的垂直對(duì)齊方式。visibility能見(jiàn)度規(guī)定元素是否可見(jiàn)。word-spacing單詞間隔增加或減少文本中的單詞間距，僅對(duì)英文有效。z-indexZ軸的堆疊順序設(shè)置定位元素的堆疊順序，Z軸指的是眼睛視線垂直于電腦屏幕的軸線。4.3常見(jiàn)的選擇器類型3知識(shí)點(diǎn)4.3.1標(biāo)簽選擇器一個(gè)完整的HTML頁(yè)面是有很多不同的標(biāo)簽組成，而標(biāo)簽選擇器，則是決定哪些標(biāo)簽采用相應(yīng)的默認(rèn)CSS樣式或者自定義樣式。只要是HTML的標(biāo)簽都能當(dāng)做標(biāo)簽選擇器，標(biāo)簽選擇器選中的是指定容器中的所有相應(yīng)標(biāo)簽（如果沒(méi)有設(shè)定指定容器，則默認(rèn)為body容器）。標(biāo)簽選擇器以"標(biāo)簽名"來(lái)定義，用法示例：h1{color:red;}ul{list-style-type:none;}4.3常見(jiàn)的選擇器類型3知識(shí)點(diǎn)知識(shí)點(diǎn)：標(biāo)簽選擇器的意義記憶關(guān)鍵詞：同氣連枝關(guān)鍵詞解析：“同氣”指的是具有相同標(biāo)簽的元素，它們因?yàn)橄嗤膶傩裕礃?biāo)簽名）而被歸類在一起；“連枝”則形象地表達(dá)了這些元素通過(guò)標(biāo)簽選擇器被連接在一起，共同接受對(duì)應(yīng)樣式的影響。南朝·梁·周興嗣《千字文》：“孔懷兄弟，同氣連枝?！蓖瑲膺B枝——意思是比喻同胞的兄弟姐妹。4.3常見(jiàn)的選擇器類型3知識(shí)點(diǎn)【案例1】基于sec優(yōu)化排名，logo處采用h1標(biāo)簽，標(biāo)志圖片作為背景圖像。logo標(biāo)志是整個(gè)網(wǎng)站最重要的元素之一，如何能讓該頁(yè)面盡可能被搜索引擎收錄，識(shí)別出正確的站點(diǎn)信息。我們要思考幾個(gè)因素：在瀏覽網(wǎng)頁(yè)時(shí)，圖片有幾率刷不出來(lái)，尤其是大圖。圖片如果刷不出來(lái)的時(shí)候，怎么體現(xiàn)出這個(gè)位置放置了什么內(nèi)容？搜索引擎喜歡“標(biāo)題”語(yǔ)義，也就是喜歡收錄能概括整個(gè)頁(yè)面結(jié)構(gòu)的元素。4.3常見(jiàn)的選擇器類型3知識(shí)點(diǎn)4.3.2ID選擇器id選擇器可以為標(biāo)有特定id的HTML元素指定特定的樣式。id選擇器以"#"來(lái)定義，用法示例：#box-red{color:red;}#bg{color:green;}引用id一定要加#，id的命名只能由字符、數(shù)字、下劃線組成，且不能以數(shù)字開(kāi)頭，更不應(yīng)該以html關(guān)鍵字為id名，如#p，#a，#img等。4.3常見(jiàn)的選擇器類型3知識(shí)點(diǎn)知識(shí)點(diǎn)：id選擇器的應(yīng)用場(chǎng)景記憶關(guān)鍵詞：寡二少雙、獨(dú)一無(wú)二關(guān)鍵詞解析：每個(gè)標(biāo)簽都可以設(shè)置唯一一個(gè)id，id就相當(dāng)于人/標(biāo)簽的身份證，因此在同一頁(yè)面內(nèi)id選擇器絕不能重復(fù)。《漢書(shū)·吾丘壽王傳》：“子在朕前之時(shí)，知略輻湊，以為天下少雙，海內(nèi)寡二?！惫讯匐p——意思很少有第二個(gè)，形容極其突出。4.3常見(jiàn)的選擇器類型3知識(shí)點(diǎn)【案例2】中華網(wǎng)

框架布局4.3常見(jiàn)的選擇器類型3知識(shí)點(diǎn)【案例3】使用手機(jī)打開(kāi)某個(gè)APP，這里以如圖4-16所示的唯品會(huì)為例，用A4紙，直尺繪制容器包含結(jié)構(gòu)圖，并輔以箭頭和文字給各容器命名id，如圖4-17所示。4.3常見(jiàn)的選擇器類型3知識(shí)點(diǎn)4.3.3類選擇器類選擇器選擇若干個(gè)有特定class屬性的HTML元素。同一頁(yè)面內(nèi)class可以重復(fù)。在編寫(xiě)樣式時(shí)盡量使用類選擇器，id選擇器的優(yōu)先級(jí)比類選擇器高，導(dǎo)致id選擇器在后期樣式的控制中會(huì)越來(lái)越難控制。如需選擇擁有特定class的元素，請(qǐng)寫(xiě)一個(gè)句點(diǎn)（.）字符，后面跟類名，用法示例：.center{text-align:center;color:red;}HTML元素也可以引用多個(gè)類。每個(gè)元素都可以設(shè)置一個(gè)或多個(gè)class（空格分隔），比如，<p>元素將根據(jù)CSS代碼區(qū)的"center"和"large"樣式進(jìn)行設(shè)置，那可以寫(xiě)成：<pclass="centerlarge">本文文字會(huì)受到兩個(gè)樣式影響</p>4.3常見(jiàn)的選擇器類型3知識(shí)點(diǎn)知識(shí)點(diǎn)：類選擇器有利于代碼復(fù)用記憶關(guān)鍵詞：屢次三番關(guān)鍵詞解析：實(shí)際項(xiàng)目中一個(gè)元素為了能被多個(gè)樣式應(yīng)用對(duì)應(yīng)效果，樣式復(fù)用可以提高效率。簡(jiǎn)單地說(shuō)，就是一個(gè)元素可以擁有多個(gè)類，一個(gè)類也可以應(yīng)用到多個(gè)元素上。正如我這么說(shuō)，A君有動(dòng)物類、靈長(zhǎng)類、人類的特征，靈長(zhǎng)類特征不僅僅只發(fā)生在A君身上，也會(huì)發(fā)生在每個(gè)人身上。如果不采用類，每次介紹新朋友就要介紹他擁有人類的諸多特征？！清·李寶嘉《官場(chǎng)現(xiàn)形記》第29回：“徐大軍機(jī)本來(lái)是最恨舒軍門(mén)的，屢次三番請(qǐng)上頭拿他正法?！睂掖稳馑际切稳莘磸?fù)多次。4.3常見(jiàn)的選擇器類型3知識(shí)點(diǎn)【案例4】打開(kāi)之前的“中華網(wǎng)”布局練習(xí)中，完成頁(yè)頭部分。4.3常見(jiàn)的選擇器類型3知識(shí)點(diǎn)4.3.4通配符選擇器（通用選擇器）HTML通配符選擇器是一個(gè)通配符，用星號(hào)(*)表示，用于匹配任何HTML元素，它可用于設(shè)定全局樣式、初始化元素樣式并覆蓋繼承的樣式。用法格式：*{屬性:值；}在企業(yè)開(kāi)發(fā)中一般不會(huì)使用通配符選擇器，理由是：由于通配符選擇器是設(shè)置頁(yè)面上所有的標(biāo)簽的屬性，解釋時(shí)會(huì)遍歷所有的標(biāo)簽，如果當(dāng)前界面上的標(biāo)簽比較多，那么性能就會(huì)比較差。可以參考以下寫(xiě)法，把常設(shè)定為某個(gè)值的標(biāo)簽采用并列聲明來(lái)寫(xiě)。body,ul,ol,li,h1,h2,h3,form,th,td{margin:0;padding:0}4.3常見(jiàn)的選擇器類型3知識(shí)點(diǎn)知識(shí)點(diǎn)：通配符選擇器范圍記憶關(guān)鍵詞：一呼百諾、一呼百應(yīng)關(guān)鍵詞解析：通配符選擇器，就是給所有的元素附加指定的樣式。如果確實(shí)需要使用通配符，一般設(shè)置大部分元素都有的margin、padding、font-size、color這幾個(gè)公共屬性。漢·韓嬰《韓詩(shī)外傳》第五卷：“當(dāng)前快意，一呼再諾者，人隸也。”一呼百諾——指一人召喚，百人響應(yīng)。形容響應(yīng)附和的人眾多。4.3常見(jiàn)的選擇器類型3知識(shí)點(diǎn)4.3.5后代選擇器后代選擇器，別稱包含選擇器，是一種多個(gè)用空格分隔的選擇器。用法格式：選擇器1選擇器2{屬性:值;}每個(gè)空格符可以解釋為“在...找到...”，比如選擇器為ula{……}，這個(gè)語(yǔ)法就會(huì)選擇從<ul>元素內(nèi)部的所有<a>元素，而不論<a>的嵌套層次多深。4.3常見(jiàn)的選擇器類型3知識(shí)點(diǎn)知識(shí)點(diǎn)：后代選擇器無(wú)視嵌套層次記憶關(guān)鍵詞：株連蔓引、株連九族關(guān)鍵詞解析：后代不僅僅是兒子，也包括孫子、重孫子，后代選擇器可以通過(guò)空格一直延續(xù)下去，但不需要把完整的族譜寫(xiě)出來(lái)，比如可以聲明為“父親曾孫子”，而不需要申明為“父親我兒子孫子曾孫子”。至于家族恰好出現(xiàn)了2個(gè)同名的后代，我們應(yīng)該如何喊這其中一位？起碼也要在中間增加一個(gè)能確定結(jié)果的身份吧?！睹魇贰ぜ槌紓鳌ず┯埂罚骸暗郯l(fā)怒，肅清逆黨，詞所連及坐誅者三萬(wàn)余人。及為《昭示奸黨錄》，布告天下，株連蔓引，迄數(shù)年未靖云?！敝赀B蔓引——指株連對(duì)象廣泛。4.3常見(jiàn)的選擇器類型3知識(shí)點(diǎn)4.3.6標(biāo)簽選擇器、ID選擇器、類選擇器的優(yōu)先權(quán)級(jí)別所謂樣式優(yōu)先權(quán)，理解為誰(shuí)的優(yōu)先級(jí)最高，最終樣式就由誰(shuí)決定。關(guān)于CSS的選擇器優(yōu)先級(jí)我在w3school文檔中并沒(méi)有看到對(duì)應(yīng)說(shuō)明，業(yè)界普遍對(duì)不同選擇器給予不同的數(shù)值代表其權(quán)重高低，對(duì)于初學(xué)者來(lái)說(shuō)，我們目前只需要知道以下規(guī)則：

id選擇器>類選擇器>標(biāo)簽選擇器>通用選擇器4.3常見(jiàn)的選擇器類型3知識(shí)點(diǎn)知識(shí)點(diǎn)：優(yōu)先級(jí)別與權(quán)重值記憶關(guān)鍵詞：人微言輕、仗勢(shì)欺人關(guān)鍵詞解析：當(dāng)申明選擇器時(shí)，想要樣式發(fā)揮出作用，就看選擇器的“背景”夠不夠雄厚。當(dāng)有不同選擇器指定了相同的屬性，我們一般采用給目標(biāo)選擇器增加id或類選擇器，增加它的權(quán)重值，一個(gè)不行再增加一個(gè)，父容器分不出勝負(fù)，再把爺輩容器搬出來(lái)，就是要依仗更大的“勢(shì)”。宋·蘇軾《上執(zhí)政乞度牒賑濟(jì)及因修廨宇書(shū)》：“某已三奏其事，至今未報(bào)，蓋人微言輕，理當(dāng)自爾?！比宋⒀暂p——指職位低，言論主張不被人重視。元·王實(shí)甫《西廂記》第五本第三折：“他學(xué)師友，君子務(wù)本；你倚父兄，仗勢(shì)欺人。”仗勢(shì)欺人——意思是依仗某種權(quán)勢(shì)欺壓人。4.4結(jié)構(gòu)類標(biāo)簽3知識(shí)點(diǎn)4.4結(jié)構(gòu)類標(biāo)簽除了出現(xiàn)頻率最高的div標(biāo)簽外，我們簡(jiǎn)單介紹一下HTML5新增的幾個(gè)標(biāo)簽。4.4.1header標(biāo)簽header讀音——英[?hed?(r)]<header>標(biāo)簽是HTML5新引入的標(biāo)簽，用來(lái)表示網(wǎng)頁(yè)或一段內(nèi)容的頭部區(qū)域。它可以包含網(wǎng)站標(biāo)題、搜索表單、導(dǎo)航鏈接等。通常搜索引擎收錄網(wǎng)站時(shí)，并不會(huì)把頁(yè)碼所有內(nèi)容保存下來(lái)，開(kāi)始部分是重點(diǎn)關(guān)注內(nèi)容。<header>……</header>的寫(xiě)法，類似于<divid=”header”>……<divid=”header”>寫(xiě)法，不過(guò)從語(yǔ)義上來(lái)說(shuō)，前者寫(xiě)法更符合搜索引擎收錄的胃口。3知識(shí)點(diǎn)4.4.2nav標(biāo)簽nav讀音——[n?v]<nav>標(biāo)簽定義導(dǎo)航欄鏈接的部分，一般來(lái)說(shuō)用于頁(yè)面中主要的導(dǎo)航鏈接組，如傳統(tǒng)的導(dǎo)航條，側(cè)邊導(dǎo)航欄，頁(yè)面導(dǎo)航欄等。【案例6】完成如圖4-30所示的縱向排列的導(dǎo)航。4.4結(jié)構(gòu)類標(biāo)簽3知識(shí)點(diǎn)【案例7】完成如圖4-35所示橫向排列的導(dǎo)航?！窘鉀Q策略】

最大的容器設(shè)置淺灰背景色，布局采用“練習(xí)1”的結(jié)構(gòu)，不同之處就是將<li>標(biāo)簽進(jìn)行左浮動(dòng)即可，同時(shí)增加一個(gè)光標(biāo)浮在欄目上方時(shí)該元素底色變色、黑色線框圖標(biāo)換成另外一個(gè)白色線框圖標(biāo)。4.4結(jié)構(gòu)類標(biāo)簽3知識(shí)點(diǎn)4.4.3article標(biāo)簽article讀音——英[?ɑ?t?kl]<article>標(biāo)簽用于標(biāo)記獨(dú)立、完整的內(nèi)容塊，這通常表現(xiàn)為一個(gè)文章或者文章的一部分、論壇帖子、雜志或報(bào)紙文章、博客條目、用戶評(píng)論等。該標(biāo)簽的使用在結(jié)構(gòu)化語(yǔ)義上非常有幫助。例如，在博客中，每個(gè)帖子可以被標(biāo)記為一個(gè)<article>元素，其中包括標(biāo)題、作者、發(fā)布日期和文章內(nèi)容。這種做法增強(qiáng)了頁(yè)面的語(yǔ)義，便于搜索引擎和輔助技術(shù)更好地理解內(nèi)容的結(jié)構(gòu)，并按照其獨(dú)立性和完整性對(duì)其進(jìn)行索引。用法示例：<article><header><h1>帖子標(biāo)題</h1><p>發(fā)布于1月1日</p></header><p>這里是文章的第一個(gè)段落。</p><footer><p>作者A</p></footer></article>4.4結(jié)構(gòu)類標(biāo)簽3知識(shí)點(diǎn)4.4.4section標(biāo)簽section讀音——英[?sek?n]section元素是HTML5中用于定義文檔結(jié)構(gòu)中獨(dú)立部分的元素。它表示文檔中的一個(gè)主題或內(nèi)容區(qū)域，并可以包含標(biāo)題、段落、圖像、列表和其他內(nèi)容元素。通常<section>標(biāo)簽表示為頁(yè)面中的版塊、文章的章節(jié)。可以這么理解，一份報(bào)紙多個(gè)版面（section），每個(gè)版面可以有多篇文章（article），每篇文章里面又包含多個(gè)章節(jié)（section）。用法示例：<sectionid="main"><sectionid="article"><!--文章內(nèi)容--></section><sectionid="sidebar"><!--側(cè)邊欄內(nèi)容--></section></section>4.4結(jié)構(gòu)類標(biāo)簽3知識(shí)點(diǎn)4.4.5footer標(biāo)簽footer讀音——英[?f?t?(r)]<footer>標(biāo)簽定義文檔或小節(jié)的頁(yè)腳。<footer>元素通常包含有作者信息、版權(quán)信息、聯(lián)系信息、站點(diǎn)地圖、返回頂部鏈接、相關(guān)頁(yè)面。您可以在一個(gè)文檔中包含多個(gè)<footer>元素，但對(duì)于本書(shū)練習(xí)中，通常只需要用一個(gè)footer容器即可。用法示例：<footer><p>作者：Rose</p><p><ahref="mailto:rose@">rose@</a></p></footer>4.4結(jié)構(gòu)類標(biāo)簽4.5文本類標(biāo)簽3知識(shí)點(diǎn)4.5文本類標(biāo)簽4.5.1p標(biāo)簽<p>標(biāo)簽定義段落。輸入如圖4-39所示的代碼并運(yùn)行，由于文字具備行高屬性，在行高值默認(rèn)的情況下，<p>元素會(huì)自動(dòng)在文字上下創(chuàng)建一定的空白區(qū)域，如圖4-40所示的文字與上下紅色邊框的間隙、文字行與文字行的間隙。可以在樣式表中規(guī)定行高（line-height）來(lái)縮小空白。3知識(shí)點(diǎn)【案例8】打開(kāi)“第4章-常用標(biāo)簽-p標(biāo)簽-素材.html”，設(shè)置文本段落的首行縮進(jìn)、行高、字體大小、字體樣式、顏色等，提高瀏覽友好度，如圖4-43所示。4.5文本類標(biāo)簽4.5文本類標(biāo)簽3知識(shí)點(diǎn)4.5.2h1~h6標(biāo)簽h類標(biāo)簽一共有h1、h2、h3、h4、h5、h6六個(gè)，h1是最大的標(biāo)題，h6是最小的標(biāo)題,標(biāo)簽重要性依次下降，權(quán)重也依次下降。h標(biāo)簽對(duì)于搜索引擎優(yōu)化（SEO）很重要，因?yàn)樗兄谒阉饕胬斫忭?yè)面的內(nèi)容結(jié)構(gòu)?！景咐?】打開(kāi)之前手繪的手機(jī)app布局效果圖，如圖4-45所示，將h標(biāo)簽合理應(yīng)用在企業(yè)首頁(yè)各欄目。3知識(shí)點(diǎn)【案例10】h標(biāo)簽嵌套span標(biāo)簽以上題作業(yè)為基礎(chǔ)，發(fā)現(xiàn)英文單詞字母之間間距過(guò)寬，英文字母看上去更多起到一種裝飾作用，顏色無(wú)需這么深。裝飾性的元素，我們通?？梢圆捎?lt;span>無(wú)語(yǔ)義的標(biāo)簽去定義樣式。4.5文本類標(biāo)簽4.5文本類標(biāo)簽3知識(shí)點(diǎn)4.5.3br標(biāo)簽<br/>標(biāo)簽是為數(shù)不多的單獨(dú)標(biāo)簽，沒(méi)有結(jié)束標(biāo)簽，它可插入一個(gè)簡(jiǎn)單的換行符。請(qǐng)使用<br/>標(biāo)簽來(lái)輸入空行，而不是分割段落。<br>和<br/>具有相同作用，但前者是老的HTML規(guī)范，新的規(guī)范要求一切都應(yīng)像XML那樣有結(jié)束符，如果沒(méi)有也要硬加一個(gè)反斜杠。用法示例：<p>前一段內(nèi)容</p><br/><p>下一段內(nèi)容</p>4.5文本類標(biāo)簽3知識(shí)點(diǎn)4.5.4span標(biāo)簽和i標(biāo)簽span讀音——英[sp?n]span標(biāo)簽是內(nèi)聯(lián)元素，不像塊級(jí)元素那樣有換行的效果。<i>標(biāo)簽也是內(nèi)聯(lián)元素，它定義與文本中其余部分不同的部分，并把這部分文本呈現(xiàn)為斜體文本。兩者經(jīng)常出現(xiàn)在p標(biāo)簽內(nèi)部，從語(yǔ)義角度來(lái)說(shuō)，這兩者都不包含什么含義，只是為了產(chǎn)生樣式上的變化。4.5文本類標(biāo)簽3知識(shí)點(diǎn)4.5.5sub、sup標(biāo)簽sub讀音——英[s?b]sup讀音——英[s?p]<sub>標(biāo)簽可定義下標(biāo)文本。<sup>可定義上標(biāo)文本。兩者經(jīng)常出現(xiàn)在公式、數(shù)學(xué)表達(dá)式或化學(xué)復(fù)合物的場(chǎng)合。但如果表達(dá)過(guò)于復(fù)雜，寧愿采用圖片的方式。用法示例如圖4-51所示。4.5文本類標(biāo)簽3知識(shí)點(diǎn)4.5.6em、strong標(biāo)簽strong讀音——英[str??]<em>標(biāo)簽用于定義強(qiáng)調(diào)文本，標(biāo)簽內(nèi)的內(nèi)容通常以斜體顯示；<strong>標(biāo)簽用于定義具有很強(qiáng)重要性的文本，以粗體顯示。em和strong的主要區(qū)別如下：視覺(jué)表現(xiàn)：em標(biāo)簽斜體顯示，而strong標(biāo)簽以黑體顯示。強(qiáng)調(diào)程度：em表示的是局部的、相對(duì)較弱的強(qiáng)調(diào)，而strong表示的是全局的、更強(qiáng)烈的強(qiáng)調(diào)。例如，在文章中使用em標(biāo)簽強(qiáng)調(diào)某一特定部分，讀者在閱讀到該部分時(shí)才會(huì)注意到；而使用strong標(biāo)簽強(qiáng)調(diào)的內(nèi)容，讀者在閱讀文章時(shí)立刻就能注意到，因?yàn)閟trong標(biāo)簽的視覺(jué)效果更加明顯。使用場(chǎng)景：em標(biāo)簽適用于注釋、補(bǔ)充說(shuō)明等；而strong標(biāo)簽則適用于關(guān)鍵信息、重要提示等。4.6

a標(biāo)簽3知識(shí)點(diǎn)4.6a標(biāo)簽<a>標(biāo)簽定義超鏈接，a元素最重要的屬性是href屬性，它指定鏈接的目標(biāo)，如果暫時(shí)沒(méi)有明確目標(biāo)，可以采用空鏈接。超鏈接的類型取決于href屬性設(shè)置的類型，包括以下幾種：（1）相對(duì)鏈接：格式只包括"路徑/文件名"，它只能鏈接網(wǎng)站內(nèi)部的頁(yè)面或資源。例如href="image/logo.jpg"是鏈接image文件夾內(nèi)的logo.jpg文件。（2）絕對(duì)鏈接：是嚴(yán)格書(shū)寫(xiě)URL格式的鏈接，一般是指向站點(diǎn)外部的資源。例如，網(wǎng)頁(yè)中有一個(gè)超鏈接是要跳轉(zhuǎn)至百度首頁(yè)，則鏈接地址應(yīng)按照URL格式寫(xiě)成href=""。一般網(wǎng)站中"友情鏈接"部分的超鏈接均為絕對(duì)鏈接。4.6

a標(biāo)簽3知識(shí)點(diǎn)（3）文件鏈接：也可以直接指向文件。當(dāng)該文件的格式不能被瀏覽器識(shí)別，則會(huì)打開(kāi)下載窗口提供該文件的下載。例如某鏈接地址為href="/abc.mp3"，則點(diǎn)擊該地址可以實(shí)現(xiàn)下載abc.mp3的功能。（4）空鏈接：不具備跳轉(zhuǎn)功能，但卻顯示為超鏈接的樣式?？真溄拥墓δ?，一是在設(shè)計(jì)制作階段，可以幫助設(shè)計(jì)師提前實(shí)現(xiàn)頁(yè)面效果；二是可以在空鏈接上添加腳本，通過(guò)腳本實(shí)現(xiàn)頁(yè)面互動(dòng)?？真溄拥牡刂酚?#"表示。例如：<ahref=”#”>百度</a>。（5）電子郵件鏈接：鏈接地址為郵件地址，即郵箱號(hào)。當(dāng)點(diǎn)擊該鏈接時(shí)，會(huì)自動(dòng)打開(kāi)電子郵件的創(chuàng)建向?qū)?。例如?lt;ahref=”mailto:88101010@”>……</a>4.6

a標(biāo)簽3知識(shí)點(diǎn)（6）錨點(diǎn)鏈接：用于跳轉(zhuǎn)到當(dāng)前頁(yè)面或其他頁(yè)面的指定位置。如果目標(biāo)位置是頁(yè)面內(nèi)的一個(gè)特定id，你可以使用#后跟該id名稱來(lái)創(chuàng)建錨鏈接。例如：如果你有一個(gè)id為section2的元素，你可以這樣創(chuàng)建一個(gè)錨鏈接。<ahref="#section2">跳轉(zhuǎn)到第二部分</a>如果你想鏈接到另一個(gè)頁(yè)面的錨點(diǎn)，你需要在href中提供完整的URL加上錨點(diǎn)引用。例如：<ahref="/page.html#section2">跳轉(zhuǎn)到另一頁(yè)的第二部分</a>4.6

a標(biāo)簽3知識(shí)點(diǎn)a標(biāo)簽通常會(huì)跟以下幾種偽類選擇器一起使用。a:link{……}/*未訪問(wèn)的鏈接*/a:visited{……}/*已訪問(wèn)過(guò)的鏈接*/a:hover{……}/*當(dāng)光標(biāo)懸停在鏈接上*/a:active{……}/*光標(biāo)點(diǎn)擊鏈接，不松開(kāi)左鍵的期間*/通常在實(shí)際案例中，我們只需要設(shè)置a{……}樣式和a:hover{……}樣式即可。3知識(shí)點(diǎn)【案例11】打開(kāi)之前的“文本類標(biāo)簽-h標(biāo)簽.html”練習(xí)，增加一個(gè)文字類導(dǎo)航條。4.5文本類標(biāo)簽【案例12】使用錨點(diǎn)鏈接完成下圖書(shū)籍目錄的跳轉(zhuǎn)功能，效果如圖所示。3知識(shí)點(diǎn)談到些標(biāo)簽，初學(xué)者容器出錯(cuò)的地方在于“src屬性”設(shè)置錯(cuò)誤，不明白相對(duì)路徑與絕對(duì)路徑的區(qū)別，經(jīng)常導(dǎo)致圖片刷不出。相對(duì)路徑：就是相對(duì)于當(dāng)前文件的路徑。網(wǎng)頁(yè)中一般表示路徑使用這個(gè)方法。相對(duì)路徑所常用的兩個(gè)特殊符號(hào)，"./"代表目前所在的目錄，"../"代表上一層目錄。絕對(duì)路徑：就是該文件在硬盤(pán)（主機(jī)）上真正的路徑，絕對(duì)路徑在網(wǎng)頁(yè)中實(shí)際很少用到，可以這么理解，在網(wǎng)頁(yè)中使用http://開(kāi)頭的地址便是絕對(duì)路徑。4.7圖像、視音頻類標(biāo)簽4.7圖像、視音頻類標(biāo)簽3知識(shí)點(diǎn)<img>標(biāo)簽從視覺(jué)上常理感覺(jué)方方正正、大塊的圖像標(biāo)簽應(yīng)該是塊級(jí)元素，但與感覺(jué)相反，img是內(nèi)聯(lián)塊級(jí)標(biāo)簽。4.7圖像、視音頻類標(biāo)簽4.7.1img標(biāo)簽【案例13】嘗試給如圖所示的圖片增加不一樣的樣式效果，比如邊框、內(nèi)邊距的設(shè)計(jì)?！景咐?4】制作圖片在hover狀態(tài)下，圖片緩慢放大的效果。3知識(shí)點(diǎn)video讀音——英[?v?di??]帶寬提升，短視頻橫行，純文字已滿足不了部分人群需求，為了表現(xiàn)出更多的細(xì)節(jié)，烘托更濃烈的氛圍感，越來(lái)越多的網(wǎng)頁(yè)在局部引入視頻元素。H5引入的<video>標(biāo)簽為瀏覽器提供了原生的視頻播放支持，不再需要依賴外部插件如Flash。HTML支持mp4、webm和ogg這三種格式。<video>標(biāo)簽包含一個(gè)或多個(gè)帶有不同視頻源的<source>標(biāo)簽。瀏覽器將選擇它支持的第一個(gè)源。用法常用格式：<videowidth=""height=""controlsloop><sourcesrc=""type="video/mp4"></video>4.7圖像、視音頻類標(biāo)簽4.7.2video標(biāo)簽3知識(shí)點(diǎn)4.7圖像、視音頻類標(biāo)簽<video>標(biāo)簽對(duì)應(yīng)的屬性詳見(jiàn)表4-2所示。屬性值描述autoplayautoplay規(guī)定視頻準(zhǔn)備就緒后立即開(kāi)始播放。controlscontrols規(guī)定應(yīng)顯示的視頻控件（例如播放/暫停按鈕等）。height像素設(shè)置視頻播放器的高度。looploop規(guī)定視頻將在每次結(jié)束時(shí)重新開(kāi)始。srcURL規(guī)定視頻文件的URL。width像素設(shè)置視頻播放器的寬度。3知識(shí)點(diǎn)audio讀音——英[???di??]<audio>標(biāo)簽定義聲音，比如音樂(lè)或其他音頻流。目前，<audio>元素支持的3種文件格式：Mp3、Wav、Ogg。可以在<audio>和</audio>之間放置一些提示性的文本內(nèi)容，倘若不支持<audio>標(biāo)簽的瀏覽器運(yùn)行頁(yè)面時(shí)，這些提示性文字將會(huì)呈現(xiàn)給瀏覽者。audio標(biāo)簽的相關(guān)屬性與video大致相同，用法示例如下：<audiocontrols> <sourcesrc="horse.ogg"type="audio/ogg"> <sourcesrc="horse.mp3"type="audio/mpeg">

您的瀏覽器不支持audio元素。</audio>4.7圖像、視音頻類標(biāo)簽4.7.3audio標(biāo)簽3知識(shí)點(diǎn)在HTML中，列表主要有三種類型：無(wú)序列表<ul>，列表項(xiàng)用的是項(xiàng)目符號(hào)標(biāo)記；有序列表（<ol>），列表項(xiàng)用的是數(shù)字或字母標(biāo)記；自定義列表<dl>，列表項(xiàng)無(wú)符號(hào)標(biāo)記。無(wú)序列表及有序列表部分外觀樣式如圖4-71所示。4.8列表類標(biāo)簽4.8列表類標(biāo)簽3知識(shí)點(diǎn)有些網(wǎng)頁(yè)還載入特殊字體集文件來(lái)代替項(xiàng)目符號(hào)標(biāo)記，設(shè)計(jì)師們經(jīng)常希望在網(wǎng)頁(yè)中使用特定的字體，尤其是當(dāng)這些字體不是主流操作系統(tǒng)的內(nèi)置字體時(shí)。傳統(tǒng)的做法是將特殊字體處理成圖片，但這種方法有欠缺靈活。為了解決這個(gè)問(wèn)題，在線字體庫(kù)允許設(shè)計(jì)師在網(wǎng)站設(shè)計(jì)時(shí)調(diào)用這些字體，從而使網(wǎng)頁(yè)在客戶端上能夠很好地顯示，而無(wú)需用戶在其計(jì)算機(jī)上安裝這些字體。這種技術(shù)通過(guò)使用CSS3的@font-face屬性實(shí)現(xiàn)，它允許開(kāi)發(fā)者指定自定義字體的來(lái)源，使得網(wǎng)絡(luò)中自由使用自定義字體成為可能。4.8列表類標(biāo)簽屬性描述list-style簡(jiǎn)寫(xiě)屬性。在一條聲明中設(shè)置列表的所有屬性。list-style-image指定圖像作為列表項(xiàng)標(biāo)記。list-style-position規(guī)定列表項(xiàng)標(biāo)記（項(xiàng)目符號(hào)）的位置。list-style-type規(guī)定列表項(xiàng)標(biāo)記的類型。3知識(shí)點(diǎn)<ul>標(biāo)簽雖然號(hào)稱列表項(xiàng)沒(méi)有固定順序，也沒(méi)有編號(hào)。但作為一個(gè)排列，總是要按照一定標(biāo)準(zhǔn)去排列隊(duì)伍，比如最高的站前面，最重要的排前面。在實(shí)際項(xiàng)目中，通常還采用ul無(wú)序列表前面加上數(shù)字標(biāo)記的小圖標(biāo)來(lái)做著“有序”的事情。4.8列表類標(biāo)簽4.8.1ul標(biāo)簽【案例16】完成如圖4-72所示的新聞列表效果。3知識(shí)點(diǎn)【案例17】在案例16的基礎(chǔ)上，添加左側(cè)版面，如圖4-77所示。4.8列表類標(biāo)簽【解決策略】思路一：可能有同學(xué)會(huì)將這個(gè)結(jié)構(gòu)拆解成左右部分，用2個(gè)大容器去裝，右邊部分我們?cè)谏弦粋€(gè)練習(xí)已經(jīng)完成，剩下左側(cè)部分未做。思路二：左側(cè)版面由1張圖加上3行文字，內(nèi)容其實(shí)跟右側(cè)li容器的圖文內(nèi)容一樣，不過(guò)只是圖文排版不一樣而已。前面我們說(shuō)過(guò)，CSS負(fù)責(zé)外觀表現(xiàn)，HTML負(fù)責(zé)內(nèi)容，既然內(nèi)容一樣，我們就可以把左側(cè)版面也當(dāng)成一個(gè)li容器。3知識(shí)點(diǎn)<ol>標(biāo)簽是有序（序號(hào)）標(biāo)簽。此列表標(biāo)簽我們常常使用在文章標(biāo)題列表、圖片列表等有規(guī)律列表類內(nèi)容排版布局。4.8列表類標(biāo)簽4.8.2ol標(biāo)簽【案例18】敲入下圖的代碼，完成小說(shuō)的章節(jié)目錄效果。3知識(shí)點(diǎn)【案例19】完成如圖4-86所示的新聞排行榜（數(shù)字序號(hào)）。4.8列表類標(biāo)簽3知識(shí)點(diǎn)<dl>標(biāo)簽相對(duì)于ul標(biāo)簽而言，增加一個(gè)標(biāo)題子標(biāo)簽<dt>的同時(shí)，<li>標(biāo)簽換成了<dd>標(biāo)簽。只要是文字用于描述標(biāo)題含義的基本都可以采用dl結(jié)構(gòu)。用法示例如下：<dl><dt>標(biāo)簽——標(biāo)題<dd>標(biāo)簽——具體描述1<dd>標(biāo)簽——具體描述2</dl>4.8列表類標(biāo)簽4.8.3dl標(biāo)簽【案例20】采用多組dt+dd標(biāo)簽完成書(shū)籍目錄效果，如圖4-93所示。3知識(shí)點(diǎn)【案例21】完成如圖4-95所示的網(wǎng)頁(yè)頁(yè)腳區(qū)域的站點(diǎn)地圖site-map區(qū)域。4.8列表類標(biāo)簽3知識(shí)點(diǎn)HTML表格是一種用于展示結(jié)構(gòu)化數(shù)據(jù)的標(biāo)記語(yǔ)言元素。每個(gè)表格均有若干行，由<tr>標(biāo)簽定義；每行被分割為若干單元格，由<td>標(biāo)簽定義；表格還可以包含標(biāo)題行<th>用于定義列的標(biāo)題。tr：表示表格的一行。td：表示表格的數(shù)據(jù)單元格。th：表示表格的表頭單元格。1.table標(biāo)簽<table>標(biāo)簽用于創(chuàng)建表格，它是一種將數(shù)據(jù)按行和列組織排列的結(jié)構(gòu)，用于在網(wǎng)頁(yè)中呈現(xiàn)復(fù)雜的數(shù)據(jù)集。比如最常見(jiàn)的用途是以表格形式展示數(shù)據(jù)，如產(chǎn)品價(jià)格、學(xué)生成績(jī)、電影時(shí)間表等。表格可以清晰地展示數(shù)據(jù)的結(jié)構(gòu)和關(guān)系。還可以用于創(chuàng)建網(wǎng)頁(yè)表單，通過(guò)在表格單元格中放置表單控件（如文本框、復(fù)選框、下拉菜單等），用戶可以方便地輸入數(shù)據(jù)。4.9表格標(biāo)簽4.9表格標(biāo)簽3知識(shí)點(diǎn)2.tr標(biāo)簽<tr>標(biāo)簽行中可以包含<th>或<td>單元格，用來(lái)顯示表格的標(biāo)題或數(shù)據(jù)。3.td標(biāo)簽<th>標(biāo)簽定義表格中的數(shù)據(jù)單元格。每個(gè)單元格可以包含各種類型的內(nèi)容，包括文本、圖像、鏈接等。此外，單元格還可以包含其他HTML元素，如段落、列表等。4.th標(biāo)簽<th>標(biāo)簽定義表格中的表頭單元格（標(biāo)題單元格）。4.9表格標(biāo)簽3知識(shí)點(diǎn)【案例22】完成如圖4-99所示的表格。4.9表格標(biāo)簽3知識(shí)點(diǎn)【案例23】完成個(gè)人簡(jiǎn)歷頁(yè)面效果，如圖4-106所示。4.9表格標(biāo)簽3知識(shí)點(diǎn)form讀音——英[f??m]<form>標(biāo)簽用于創(chuàng)建HTML表單，目的為接收用戶輸入的數(shù)據(jù)。我們介紹一些常見(jiàn)屬性，如表4-4所示。4.10表單類標(biāo)簽4.10表單類標(biāo)簽4.10.1form標(biāo)簽屬性值描述actionURL規(guī)定提交表單時(shí)將表單數(shù)據(jù)發(fā)送到哪里。methodget、post使用get時(shí)，form的數(shù)據(jù)集被附加到form元素的action屬性所指定的url后面，旁人可以在瀏覽器網(wǎng)址處看到，不安全。post方式時(shí)，form的數(shù)據(jù)集被包裝在請(qǐng)求的body中并被發(fā)送，安全系數(shù)高。name文本規(guī)定表單的名稱。3知識(shí)點(diǎn)用法示例：<formname=”user”action="/action_page.php"method="get"> <label>名字：</label> <inputtype="text"> <