《HTML5+CSS3 網(wǎng)頁(yè)布局任務(wù)教程》參考答案

習(xí)題參考答案第1單元1.HTML是HyperTextMarkupLanguage的縮寫，意為超文本標(biāo)記語(yǔ)言，它是構(gòu)成網(wǎng)頁(yè)的基本通用語(yǔ)言。2.超文本是指頁(yè)面內(nèi)可以包含圖片、鏈接，音樂(lè)、視頻、程序等非文本元素。3.HTML文檔被瀏覽器解析后呈現(xiàn)為網(wǎng)頁(yè)。。4.HTML5是HTML語(yǔ)言的最新版。5.不是。6.CSS是CascadingStyleSheets的縮寫，意為層疊樣式表，所以CSS還簡(jiǎn)稱樣式。7.HTML負(fù)責(zé)網(wǎng)頁(yè)的結(jié)構(gòu)，CSS負(fù)責(zé)網(wǎng)頁(yè)的表現(xiàn)，換句話說(shuō)，HTML表達(dá)網(wǎng)頁(yè)的內(nèi)容，CSS表達(dá)網(wǎng)頁(yè)的樣式。8.CSS3是CSS的最新版本。9.可以。10.輸入html:5，按TAB鍵。11.title元素，head元素。12.body元素。13.HTML標(biāo)簽是指由一對(duì)尖括號(hào)包圍的HTML關(guān)鍵詞。14.不是，因?yàn)閍bc、xyz都不是HTML的關(guān)鍵詞。15.“開始標(biāo)簽”、“結(jié)束標(biāo)簽”，以及它們所包圍的內(nèi)容，代表一個(gè)完整的內(nèi)容，叫做雙標(biāo)簽元素。16.單個(gè)出現(xiàn)的標(biāo)簽也叫單標(biāo)簽元素。17.<!DOCTYPEhtml>18.html元素。第2單元1.文字被加粗，自帶上下邊距。2.自帶上下邊距。3.h1。4.br、hr、img、input。5.引用獨(dú)立存在的圖像文件。6.無(wú)序列表中的列表項(xiàng)不分順序，列表項(xiàng)前顯示一樣的圖標(biāo)，有序列表中的列表項(xiàng)有順序，列表項(xiàng)前顯示不一樣的序號(hào)。7.HTML表格由若干行組成，每行由若干單元格組成。8.用戶上傳數(shù)據(jù)用的控件集合。9.會(huì)表現(xiàn)為空格。10.不是。第3單元1.都表示一個(gè)盒子，用于裝別的元素；默認(rèn)寬度為100%，占滿其父元素的可用寬度；默認(rèn)高度為auto，即自適應(yīng)其內(nèi)容，由其內(nèi)容來(lái)?yè)纹餯iv的高度。2.最好寫在</head>的上面。3.外部樣式表是指寫在.css文件內(nèi)的CSS代碼；內(nèi)部樣式表是指寫在網(wǎng)頁(yè)文件的style元素內(nèi)的CSS代碼；行內(nèi)樣式表是指寫在網(wǎng)頁(yè)元素的style屬性內(nèi)的CSS代碼。4.在CSS代碼或JavaScript代碼中，根據(jù)類名引用元素。5.可以。6.（1）。7.樣式表由一條條CSS規(guī)則組成，CSS規(guī)則由選擇器和屬性列表組成。8.選擇器是寫在{}前面的表達(dá)式，指出樣式作用于網(wǎng)頁(yè)上的哪些元素。9.（2）。10.每個(gè)元素都占據(jù)著一個(gè)盒型的頁(yè)面空間，這個(gè)頁(yè)面空間由內(nèi)而外由內(nèi)容盒、內(nèi)邊距盒、邊框盒和外邊距盒組成。11.內(nèi)容盒的寬高。12.（3）。13.內(nèi)邊距是邊框以內(nèi)的空白，外邊距是邊框以外的空白。14.三位或六位。15.線型、粗度和顏色。16.下邊框?yàn)闊o(wú)。17.獨(dú)占一行的元素叫塊級(jí)元素。div、header、footer、nav、aside、section等。18.元素脫離標(biāo)準(zhǔn)文檔流，向左或向右移動(dòng)。19.元素浮動(dòng)后，其父元素?zé)o法自動(dòng)包圍住它（因?yàn)樗呀?jīng)脫離了標(biāo)準(zhǔn)文檔流），從而會(huì)引發(fā)后續(xù)元素的布局混亂。。20.想辦法讓父元素包圍住其浮動(dòng)了的子元素，消除浮動(dòng)帶來(lái)的副作用。21. （1）為父元素設(shè)置足夠的高度（height）。 （2）為父元素設(shè)置溢出則隱藏（overflow:hidden）。 （3）在父元素內(nèi)容的末尾添加非浮動(dòng)元素（<divstyle="clear:both"></div>）。22.（1）（2）。23.標(biāo)準(zhǔn)文檔流、垂直相鄰或內(nèi)外嵌套、塊級(jí)元素，兩個(gè)邊距直接相遇。24.父元素。25.能。第4單元1.article跟div相比，有了“文章”這樣一個(gè)語(yǔ)義，默認(rèn)寬高特性跟div一樣。2. 3.B。4.h元素為粗體，p元素為常規(guī)粗細(xì)；h元素的字號(hào)（除了h4之外）比其父元素大或小，p元字號(hào)與其父元素相同；兩者默認(rèn)的垂直外邊距不相同。5.p是塊級(jí)元素，span是行內(nèi)元素；p有默認(rèn)垂直外邊距,span沒(méi)有。6.href。7.div和p元素的CSSheight屬性分別等于31px和30px。因?yàn)閜的line-height繼承了div的，等于30px，從而其height也等于30px，p的height加上邊框線的1px，等于div的height。8.給元素相等的height和line-height。9.行高為元素的font-size*1.5，子元素直接繼承該行高值。10.行高為元素的font-size*1.5，子元素直接繼承該行高值。11.行高為元素的font-size*1.5，子元素的行高為子元素的font-size*1.5。12.“三對(duì)雙胞胎”型。13.#0000ffbluergb(0,0,255)rgba(0,0,255,1)。14.背景色為不透明度為10%的藍(lán)色，背景圖像為橫向平鋪并垂直居中的sub/beijing.png圖像。15.是子代選擇器，表示class="div1"的元素的直接子元素里class="left"的元素的直接子元素p。16.text-indent。17.需要設(shè)置行內(nèi)局部樣式時(shí)。18.網(wǎng)頁(yè)文件、文本文件或圖像文件等任何有效文檔，也可以是頁(yè)面內(nèi)部的一個(gè)特定位置（錨點(diǎn)）。19.400900700。20.text-decoration。21. ../../sub2/a.png。22.鏈接1被點(diǎn)擊后當(dāng)前頁(yè)被刷新，鏈接2被點(diǎn)擊后當(dāng)前頁(yè)定位到頁(yè)面頂部。23.設(shè)置元素的CSS屬性，display:block。24.base-line，top。25.會(huì)，重新設(shè)置這兩個(gè)元素本身的font-size。26.不需要，因?yàn)樽兂尚袃?nèi)塊的那個(gè)元素會(huì)撐起父元素的高度，父元素的高度不會(huì)塌陷。27.是后代選擇器，表示class="div1"的元素內(nèi)的class="left"元素內(nèi)的p元素。28.sup和sub。29.會(huì)影響有的元素原有的重要特征，如ul、ol元素的列表項(xiàng)標(biāo)記不顯示或越界顯示，dd元素的縮進(jìn)量沒(méi)了等。30.一個(gè)元素不能有多個(gè)id名，不同的元素不能有相同的id名。31.ul的所有列表項(xiàng)有一樣的標(biāo)記，ol的列表項(xiàng)標(biāo)記是有序的數(shù)字或字符，dl沒(méi)有列表項(xiàng)標(biāo)記，兩種列表項(xiàng)，dd向右縮進(jìn)。32.#后面寫元素的id名的選擇器。33.list-style-position:outside時(shí)li的標(biāo)記在li的邊框線以外區(qū)域，list-style-position:inside時(shí)li的標(biāo)記在li的內(nèi)容盒區(qū)域內(nèi)。34.是多類選擇器，表示class="clearleft"的div元素。35.是一種偽類選擇器，表示class="title"的元素的鼠標(biāo)懸停時(shí)刻。36.設(shè)置元素的CSS屬性，white-space:nowrap。overflow:hidden;text-overflow:ellipsis。37.自定義圖像。38.設(shè)置p元素的CSS屬性，transition:background2s。39.設(shè)置元素的CSS屬性（background或background-image），background-image:linear-gradient(toright,#f00,#fff)。40.是一種偽類選擇器，表示屬于其父元素的最后一個(gè)子元素的a元素。第5單元1.figure跟div相比，有了“插圖、配圖”這樣一個(gè)語(yǔ)義，默認(rèn)寬高特性跟div一樣。2.figcaption。3.src。4.圖片加載失敗時(shí)顯示的文本。5.鼠標(biāo)懸停在元素上時(shí)顯示的提示文本。6.顯示尺寸。7.base-line（基線對(duì)齊）。8.元素被放置在當(dāng)前行的基線上。9.與行內(nèi)字母x的底部對(duì)準(zhǔn)的那條線。10.img的默認(rèn)對(duì)齊方式是基線對(duì)齊，所以圖片的底部并沒(méi)有緊挨著其父元素的底部。11.將img元素的vertical-alignCSS屬性，設(shè)置為top、middle、bottom等。12.將左右列設(shè)置為display:table-cell，將左右列的父元素設(shè)置為display:table。13.將p元素的height設(shè)置為其line-height的n倍，并設(shè)置overflow:hidden。14.border-radius。15.圖片的不透明度、元素背景色和文本顏色的不透明度。16.圖片在前，文本在后，圖片浮動(dòng)。17.對(duì)第二個(gè)浮動(dòng)的元素設(shè)置clear:both，清除前面浮動(dòng)的元素對(duì)自己的影響。18.元素的寬度和高度分別變?yōu)?.5倍。19.<divstyle="clear:both"></div>20.背景圖像的顯示尺寸。21.背景圖像寬高比不變，覆蓋整個(gè)元素，背景圖像“溢出”的部分會(huì)被截掉。22.背景圖像寬高比不變，被縮放到剛好被完整地包含在元素范圍內(nèi)，元素會(huì)有留白區(qū)域。23.背景圖像是否隨著頁(yè)面的其余部分滾動(dòng)。24.把網(wǎng)頁(yè)中所有背景圖標(biāo)整合到一張圖片文件（有人叫雪碧圖）中，再利用CSS的“background-image”，“background-repeat”，“background-position”的組合進(jìn)行背景定位。25.最大的優(yōu)點(diǎn)是能很好地減少網(wǎng)頁(yè)的http請(qǐng)求，從而大大地提高頁(yè)面的性能。第6單元1.table（塊級(jí)表格）。2.caption、thead、tbody、tfoot、th。3.table內(nèi)才可以寫tr，tr內(nèi)才可以寫td。4.無(wú)。5.分離的。6.在表格的邊框是合并（border-collapse:collapse）的情況下。7.3個(gè)。8.該td的下面3個(gè)tr里的相應(yīng)td要?jiǎng)h掉3個(gè)。9.td:nth-of-type(1)。第7單元1.用于采集用戶輸入的信息，并提交給Web服務(wù)器，實(shí)現(xiàn)人機(jī)交互功能所必需的網(wǎng)頁(yè)組成部分。2.是，不放在form元素內(nèi)的表單控件的數(shù)據(jù)不會(huì)被傳給服務(wù)器。3.指出“提交”按鈕被點(diǎn)擊后跳轉(zhuǎn)到哪個(gè)網(wǎng)頁(yè)。4.用于將label元素與表單控件關(guān)聯(lián)起來(lái)。5.   。6.該列表項(xiàng)被選定時(shí)提交給服務(wù)器的數(shù)據(jù)。7.<inputtype="password">。8.指明表單控件里的數(shù)據(jù)被提交后被保存到哪個(gè)服務(wù)器變量中。9.設(shè)置輸入框的placeholder屬性。10.因?yàn)橛械谋韱慰丶ㄈ缦吕斜砜?、按鈕）的box-sizing屬性的默認(rèn)值不是content-box，是border-box，無(wú)法得到一致的效果。11.元素的內(nèi)容較少，撐起的元素高度可能達(dá)不到要求時(shí)。12.background-size。13.static（靜態(tài)定位）。14.該元素將作為其絕對(duì)定位的子元素的“非靜態(tài)父元素”。15.基于離它最近的非靜態(tài)父元素，如不存在這樣的父元素，則基于瀏覽器窗口定位。16.基于元素原來(lái)的靜態(tài)位置定位。17.基于瀏覽器窗口。18.絕對(duì)定位和固定定位。19.占用。20.有可能。21.分組框。22.設(shè)置href屬性為javascript:void(0)。23.非靜態(tài)定位的元素的堆疊順序。24.表示將非靜態(tài)定位的元素的left和top屬性值進(jìn)行調(diào)整。第8單元1.外層盒子用于設(shè)置全寬的背景，內(nèi)層盒子用于控制頁(yè)眉內(nèi)容的水平邊界。2.一般通過(guò)行內(nèi)塊實(shí)現(xiàn)。3.一般通過(guò)上外邊距和水平外邊距控制。4.body的背景。第9單元1.以u(píng)l>li>a的結(jié)構(gòu)來(lái)組織。2.絕對(duì)定位，position:absolute;。3.它的父元素，即其頂部菜單項(xiàng)。position:relatvie;。4.跟它的父元素一樣寬。5.因?yàn)?menu-top>li>a和.menu-dropdown之間不是父子關(guān)系，所以該后代選擇器的寫法不正