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

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