2023-2024學年《Web開發(fā)基礎(chǔ)》試卷及答案解析_第1頁
2023-2024學年《Web開發(fā)基礎(chǔ)》試卷及答案解析_第2頁
2023-2024學年《Web開發(fā)基礎(chǔ)》試卷及答案解析_第3頁
2023-2024學年《Web開發(fā)基礎(chǔ)》試卷及答案解析_第4頁
2023-2024學年《Web開發(fā)基礎(chǔ)》試卷及答案解析_第5頁
已閱讀5頁,還剩29頁未讀 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進行舉報或認領(lǐng)

文檔簡介

國家開放大學

2023-2024學年《Web開發(fā)基礎(chǔ)》模擬試卷及答案解析

試題題型:配伍題、判斷題、單選題、多選題、編程題

第1章Web的工作方式

判斷題

1.Web(WorldWideWeb)即全球廣域網(wǎng),也稱為萬維網(wǎng)。(4)

2.Web服務器主要功能包括:存儲網(wǎng)站資源文件,代用戶發(fā)送請求,提供基本的安全功能。(x)

3.Web服務端應用程序開發(fā)主要可以使用以下幾種編程語言:PHP、ASP.NET等。N)

4.FTP協(xié)議規(guī)定了Web服務器與瀏覽器之間如何打包及如何傳輸數(shù)據(jù)。(x)

5.Web中采用HTML(HyperTextMarkupLanguage,超文本標記語言)通信協(xié)議。(x)

單選題

1.Internet上提供的主要服務有:Telnet、E-maik(C)、FTP。

A.AppB.WindowsC.WWWD.W3C

2.萬維網(wǎng)聯(lián)盟(WorldWideWebConsortium),簡稱(C),專門負責制定Web應用的標準。

A.WWWB.WebC.W3CD.3WC

3.Web分為(A)和Web服務器程序。

A.Web客戶端B.HTMLC.數(shù)據(jù)庫D.瀏覽器

4.Web程序要想順利運行,就需要Web服務器、瀏覽器、(D)三者相互配合,共同發(fā)揮作用。

A.數(shù)據(jù)庫B.HTMLC.網(wǎng)頁D.通信協(xié)議

5.創(chuàng)建Web內(nèi)容主要包括三部分:Web設(shè)計、(B)和Web服務器端應用程序開發(fā)。

A.數(shù)據(jù)庫開發(fā)B.Web前端網(wǎng)頁開發(fā)C.App開發(fā)D.通信協(xié)議

配伍題

1.請為名詞①~⑤選擇表示其含義的描述,將配對好的a~e填寫到括號中

代用戶發(fā)送請求,作為HTML的解釋器和內(nèi)嵌腳本的執(zhí)行器,

①WEB服務器a

用圖形化方式顯示W(wǎng)eb網(wǎng)頁的內(nèi)容。

存儲網(wǎng)站資源文件,響應瀏覽器發(fā)來的請求,提供基本的安全

②WEB瀏覽器b

功能

③HTTP協(xié)議c用于支持客戶機跨廣域網(wǎng)訪問公司內(nèi)部網(wǎng)絡的服務

④Internetd規(guī)定了Web服務器與瀏覽器之間如何打包及如何傳輸數(shù)據(jù)

⑤遠程訪問服務e由那些使用公用語言互相通信的計算機連接而成的全球網(wǎng)絡

請?zhí)顚懀孩伲孩冢孩郏孩埽孩?

[參考答案]

第1頁共34頁

①:b②:a③:d@:e@:c

第2章HTML5基礎(chǔ)知識

判斷題

1.HTML規(guī)定元素標簽可以嵌套,但不允許交叉。(Y)

2.單標記只有開始標記,沒有結(jié)束標記。開始標記中的/可有可無。(q)q

3.如果網(wǎng)頁中包含多個擁有相同id屬性值的元素,則網(wǎng)頁報錯,無法顯示。(X)

4.<p>元素中不允許包含以下元素:標題元素(hl~h6)、span元素、div元素。(x)

5.HTML源代碼中的空格都是無效的,最終顯示時,都會被瀏覽器刪掉。(x)

6.查找父級目錄中的文件或文件夾,可使用“.../父級目錄文件或文件夾”返回上級目錄。(x)

7.若不指定<a>元素的target屬性,則在單擊超鏈接時,默認會在當前窗口打開新網(wǎng)頁。(4)

8.設(shè)置<td>的colspan屬性可讓單元格跨多行顯示。(x)

9.表格元素的align屬性不是設(shè)置表格內(nèi)容居中對齊。而是設(shè)置整個表格在其父元素中整體居中對

齊。(d)

10.有序列表可自動將列表項按內(nèi)容排序后顯示。(x)

單選題

1.下面定義HTML注釋正確的是(B)。

A.<div<!-id="main"―?</div>B.<div><!—這里是注釋一></div>

C.<!一<「這里是注釋一>一>D.<div><—這里是注釋—></div>

2.下面定義頁面編碼格式的元素正確的是(C)。

A.<metacharset=utf-8>B.<metacharset:nutf-8H>

C.<metacharset=nutf-8H>D.<titlecharset=,utf-8,>

3.以下可以實現(xiàn)當鼠標懸停在元素上時,出現(xiàn)工具提示效果的是(C)o

A.<div><title>工具提示的內(nèi)容</title></div>

B.<divid="工具提示的內(nèi)容”>v/div>

C.<divtitle="工具提示的內(nèi)容”>v/div>

D.<divtooltip="工具提示的內(nèi)容”>v/div>

4.以下說法正確的是(C)o

A.只要網(wǎng)頁中包含中文,都必須設(shè)置〈metacharset=,,utf-8,,>

B.只要網(wǎng)頁中同時包含中文和英文,都必須設(shè)置<metacharset=,,utf-8,,>

C.<metacharset="">M須和當前網(wǎng)頁.html文件的編碼格式保持一致

D.在中文版操作系統(tǒng)中,必須設(shè)置〈metacharset=,,utf-8,,>

5.下面定義頁面編碼格式的元素不正確的是(D)o

A.<metacharset="utf-8''>B.<metacharset=,,utfl8'7>

C.<metacharset=,,utf^8,,x/meta>D.<bodycharset=,utf-8,>

第2頁共34頁

6.<img>元素的(B)屬性用于設(shè)置要引入的圖片的URL地址。

A.hrefB.srcC.altD.link

7.將<a>元素的target屬性值設(shè)置為(C),可實現(xiàn)單擊<a>在新窗口打開新鏈接。

A._selfB.不指定值C._blankD.blank

8.以下定義錨點位置錯誤的是(B)。

A.<labelid="top"></label>B.<a>top</a>

C.<aname="top"x/a>D.<aid="top">

9.關(guān)于絕對路徑的組成,以下描述正確的是(A)。

A.協(xié)議:〃域名/目錄路徑/文件名

B.協(xié)議/>域名/目錄路徑/文件名

C.目錄路徑:/協(xié)議/域名/文件名

D.目錄路徑〉協(xié)議/域名/文件名

10.HTML5結(jié)構(gòu)標記中專門定義主導航區(qū)域的元素是(B)。

A.<header>B.<nav>C.<section>D.<aside>

多選題

1.以下標記定義正確的是:(BCD)o

A.<div><p></divx/p>B.<div><br></div><br>

C.<div><p></px/div>D.<div><br><br></div>

2.以下說法正確的是(BC)。

A.元素中所有子元素的內(nèi)容,都會顯示在網(wǎng)頁上

B.<head>元素中包含對網(wǎng)頁的配置

C.<body>元素中包含要顯示的網(wǎng)頁的主要內(nèi)容

D.<title>元素即可定義在<head>中,又可定義在<body>中

3.下列說法錯誤的是(ABC)。

A.<b>元素專門用于代替換行

B.<i>元素專門用于給文字加下劃線

C.<u>元素專門用于加粗顯示文字

D.<p>元素專門用于顯示一段文字,并在開頭和結(jié)尾自動換行。

4.對<audio>標記的屬性描述正確的是(BD)。

A.href屬性用于設(shè)置要播放的音頻文件的路徑

B.src屬性用于設(shè)置要播放的音頻文件的路徑

C.auto屬性用于設(shè)置在網(wǎng)頁加載時自動播放音頻文件

D.loop屬性用于設(shè)置是否循環(huán)播放

5.以下關(guān)于不規(guī)則表格定義正確的是(BC)o

A.當前格td,向右跨4列(含自己),可寫為:<tdcolspan="3”>

B.當前格td,向右跨4列(含自己),可寫為:<tdcolspan="4”>

C.當前格td,向下跨2行(含自己),可寫為:<tdrowspan="2”>

第3頁共34頁

D.當前格td,向下跨2行(含自己)河寫為:vtdrowspan="l”>

6.以下關(guān)于列表元素的描述正確的是(CD)。

A.<ul>元素用于定義有序列表

元素用于定義無序列表

C.<ul>元素用于定義無序列表

D.<ol>元素用于定義有序列表

配伍題

1.請為名詞①?⑤選擇表示其含義的描述,將配對好的a?e填寫到括號中

①行內(nèi)元素a必須成對出現(xiàn)的開始標記和結(jié)束標記的元素

②塊級元素b默認獨占一行的元素

元素內(nèi)容有多少,空間就只能占用多少,且多個元素只能

③行內(nèi)塊元素c

在一行中顯示

單標記元素d只要一個開始標記即可實現(xiàn)功能的元素。

⑤雙標記元素e多個元素可在一行中顯示,但是可設(shè)置元素的大小

請?zhí)顚懀孩伲骸?—③:—④:—⑤:_

[參考答案]

①:c②:b?:e?:d⑤:a

編程題

1.從答案選項中選擇正確的代碼,將其對應的字母填寫在空白的步驟中,從而把步驟補充完整:

定義一個表格,一共2行四列。其中,第一行第一個格,向下跨2行,且內(nèi)容頂端對齊。第二

行第二個單元格位置的格,向右跨3行,且內(nèi)容居左對齊:

<table>

<tr>

<td①@></td>

<tdx/td>

<tdx/td>

<td></td>

</tr>

<tr>

<td—③—④></td>

</tr>

</table>

其中:①和③請選擇不規(guī)則表格相關(guān)的屬性

②和④請選擇內(nèi)容對齊方式

[答案選項]

a.colspan=^^2^^

第4頁共34頁

b.rowspan=,,2,9

c.colspan="3"

d.rowspan=''3"

e.align=^^right^^

f.valign="top”

g.align=^^top^^

h.valign="right”

請?zhí)顚懀孩伲骸冢骸郏骸?/p>

[參考答案]①:b②:f③:c④:e

第3章HTML5表單元素

判斷題

1.表單向服務器端提交數(shù)據(jù)主要有兩種方式:get方式和set方式。(x)

2.Select元素中的多個option元素,若希望多選一,則必須同時定義相同的name屬性。(x)x

3.默認情況下,單擊〈inputtype="radio”>旁邊的文本,不會選中該單選按鈕。(4)

4.實現(xiàn)表單提交功能,需要兩部分配合才能實現(xiàn):首先需要服務器端程序接收客戶端表單提交來

的數(shù)據(jù);其次定義客戶端HTML表單收集用戶信息并提交數(shù)據(jù)到服務器端。(N)

5.<from>元素用來定義一個表單整體,其中包含多種表單元素,用于收集用戶的各種信息;(x)

6.以get方式提交表單是以隱藏的方式將數(shù)據(jù)提交給服務器。要提交的表單數(shù)據(jù)不會出現(xiàn)在URL

的結(jié)尾,而是包含在請求消息主體的內(nèi)部。(x)

單選題

1.定義在文本框中初始時顯示的提示信息,輸入內(nèi)容后就被替換,可設(shè)置(C)屬性。

A.disabledB.readonlyC.placeholderD.value

2.當多個單選按鈕多選一時,應該為組內(nèi)的多個單選按鈕定義相同的(B)屬性值。

A.valueB.nameC.typeD.checked

3.下列選項中,不屬于input元素的type屬性可選內(nèi)容的是(D)。

A.textB.passwordC.submitD.hide

4.設(shè)置select元素的(D)屬性可實現(xiàn)多選。

A.valueB.selectedC.nameD.multiple

5.設(shè)置iframe的(A)屬性,可定義iframe要引入的另一個網(wǎng)頁的URL地址。

A.srcB.hrefC.relD.path

6.以get方式提交表單時,查詢字符串的格式正確的是:(C)

A.?uname=dingding;upwd=123456

B.?uname:dingding;upwd:123456

C.?uname=dingding&upwd=123456

第5頁共34頁

D.?uname:dingding&&upwd:123456

7.以get方式提交表單時,最大可發(fā)送的數(shù)據(jù)大小為:(B)

A.1KB.2KC.3KD.4K

8.如果表單中包含上傳文件功能時,內(nèi)容類型必須設(shè)置為:(D)。

A.utf-8

B.application/x-www-form-URLencoded

C.text/plain

D.multipart/form-data

多選題

1.以下關(guān)于表單元素的描述正確的是:(AC)。

A.method屬性,用于定義表單向服務器端提交數(shù)據(jù)的方式

B.doctype屬性用于定義表單數(shù)據(jù)進行編碼的方式

C.enctype屬性用于定義表單數(shù)據(jù)進行編碼的方式

D.methods屬性,用于定義表單向服務器端提交數(shù)據(jù)的方式

2.以下屬于表單元素的是:(BCD)。

A.labelB.inputC.textareaD.select

3.多個備選項中,可選擇多個選中項時,可使用哪種表單元素:(BD)。

A.<inputtype=,,radio,,>

B.<inputtype="checkbox”>

C.<inputtype=,,button,,>

D.<selectmultiple>

配伍題

1.請為元素①~⑤選擇右側(cè)最合適的使用場景,將配對好的a~e填寫到括號中

<input

①a收集用戶輸入的文字信息

type=,,checkbox,,>

②<textarea>b性別二選一

③<inputtype=''file''>c是否同意本網(wǎng)站的條款

<input

④d從一百多個國家的列表中選擇多個國家

type=,,radio,,>

⑤<select>e選擇本地文件上傳服務器

請?zhí)顚懀孩伲孩冢孩郏孩埽孩荩?/p>

[參考答案]

①:c②:a③:e④:b⑤:d

編程題

1.從答案選項中選擇正確的代碼,將其對應的字母填寫在空白的步驟中,從而把步驟補充完整:

在表單中定義性別,二選一。要求,回發(fā)服務器時的變量名為“sex”。且擴大選中區(qū)域,點擊文

第6頁共34頁

字,也可選中選項:

<form>

<_①_xinputtype="_②_③_="sex”_?_^[”,男7—①一〉

<__?xinputtype="_②_③_="sex"_?_="0">女〈/一①一〉

</form>

[答案選項]

a.id

b.name

c.title

d.value

e.radio

f.checkbox

g?P

h.label

請?zhí)顚懀孩伲骸冢骸郏骸埽骸?/p>

[參考答案]①:h②:e③:b④:d

第4章CSS3基礎(chǔ)知識

判斷題

1.內(nèi)部樣式表的優(yōu)先級總是高于外部樣式表。(X)

2.外部樣式表是指定義在<head>元素中的<style>元素內(nèi)的一組CSS樣式聲明。(x)

3.凡是定義在元素開始標簽之外的樣式表,都成為外部樣式表。(x)

4.父元素所有樣式屬性,子元素都會自動繼承。(x)

5.默認情況下,ID選擇器優(yōu)先級最高,元素選擇器優(yōu)先級最低。(4)

6.為適應不同大小的顯示設(shè)備,應盡量選擇相對單位設(shè)置尺寸,如百分比(%)。(Y)

7.單位Ipx的顯示大小不會隨顯示器分辨率改變而改變。(x)

8.margin:auto;可設(shè)置元素在水平和垂直兩個方向都居中。(x)

9.外邊距合并,是指當兩個垂直方向外邊距相遇時,將合并為一個外邊距。(d)

10.如果希望將內(nèi)邊距和邊框的范圍也納入內(nèi)容范圍中用width和height共同控制,可修改

box-sizing屬性值為border-box。(V)

11.所有行內(nèi)元素都無法使用width和height屬性設(shè)置大小。(x)

12.外邊距合并,最終的實際外邊距取決于兩個外邊距中距離較小的那個值。(x)

13.背景圖片默認是不平鋪的,如果希望平鋪可設(shè)置background-repeat:repeat。(x)

14.元素多層結(jié)構(gòu)自底向上,依次是:外邊距、背景色、背景圖片、邊框和內(nèi)邊距,以及最上層的

內(nèi)容。(<)

第7頁共34頁

15.background-size屬性值可以是contain,表示等比縮放,但以短邊剛好縮放到與元素對應邊等長

時,停止縮放。(x)

16.所有元素都有vertical-align屬性,可設(shè)置內(nèi)容垂直方向居中。(x)x

單選題

1.下列樣式聲明語法正確的是(D)。

A.color=purpleB.color=^^purple^^C.color:^^purple^^D.colo亡purple

2.下列關(guān)于內(nèi)聯(lián)樣式的定義格式正確的是:(C)。

A.<acolor-fontSize=,,l2px”>

B.<astyle=,,color=red;font-size=12px”>

C.<astyle=,,color:red;font-size:12px”>

D.<astyle=,,color:red;fontSize:12px,?>

3.下列關(guān)于內(nèi)部樣式表的內(nèi)容定義正確的是:(B)。

A.body:{color:red,fontSize:12px}

B.body{color:red;font-size:12px}

C.body={colo亡red;fontSize:12px}

D.body={color:''red",fdntSize:“12px”)

4.網(wǎng)頁中引入外部樣式表的代碼正確的是(C)。

A.<stylerel=,,stylesheef,href=,,index.css,5>

B.<stylerel=,,stylesheef,src=,,index.css,,>

C.<linkrel=,,stylesheef,href=,,index.css,,>

D.<linkrel=''stylesheet"src="index.css”>

5.一下定義id選擇器正確的是:(A)。

A.#id{}B..id{}C.@id{}D.!id{}

6.所有p元素和div元素字體大小均為12px,以下寫法正確的是:(C)o

A.p+div{font-size:12px}

B.p~div{font-size:12px}

C.p,div{font-size:12px}

D.pdiv{font-size:12px}

7.選擇ul元素下所有后代li(既包含直接子元素,又包含更深層后代元素)的選擇器是(B)。

A.ul>liB.ulliC.ul,liD.ul~li

8.選擇ul元素下所有直接子元素li的選擇器是(A)。

A.ul>liB.ulliC.ul,liD.ul?li

9.選擇class為active的a元素,下列選擇器正確的是(B)。

A.a+.activeB.a.activeC.a.activeDa>.actives

10.鼠標懸停在a元素上時,字體變?yōu)榧t色,正確的CSS定義是(B)。

A.a.hover{color:red}B.a:hover{font-color:red}

C.a:active{color:red}D.a:active{font-color:red}

第8頁共34頁

11.一個元素的內(nèi)聯(lián)樣式中定義color:red,內(nèi)部樣式表中定義了color:green,外部樣式表中定義了

color:yellowo最終字體顏色為(A)。

A.redB.greenC.yellowD.無法確定

12.(C)可將當前樣式聲明的優(yōu)先級提升為最高。

A.?importantB.?importC.!importantD.@import

13.以下單位屬于相對長度單位的是(A)。

A.emB.ptC.cmD.in

14.下列關(guān)于相對長度單位描述正確的是:(B)。

A.em總是相對于body元素的屬性值計算倍數(shù)

B.em總是相對于所在父元素的屬性值計算倍數(shù)

C.rem總是相對于所在父元素的屬性值計算倍數(shù)

D.rem總是相對于當前元素上的另一個屬性值計算倍數(shù)

15.下列表示顏色值錯誤的是(D)。

A.#fffB.#e4393cC.rgb(25,128,128)D.rgb:25128128

16.border屬性定義正確的是(A)。

A.border:IpxsolidredB.border:solidIpxred

C.border:IpxredsolidD.border:redIpxsolid

17.清除文本框的輪廓可使用(C)。

A.border:0;B.border:none;C.outline:。;D.border-radius:0

18.一個元素上、下外邊距都是lOpx,左、右外邊距都是20px,下列定義正確的是(C)。

A.margin:10px10px20px20pxB.margin:20pxlOpx20px

C.margin:lOpx20pxlOpxD.margin:20px20pxlOpxlOpx

19.僅設(shè)置左上角和左下角為圓角的css代碼如下正確的是:(B)。

A.border-radius:5px5px00

B.border-radius:5px005px

C.border-radius:05px5px0

D.border-radius:005px5px

20.僅設(shè)置左上角為圓角的css代碼正確的是:(A)。

A.border-top-left-radius:5px;

B.border-left-top-radius:5px;

C.border-radius-left-top:5px;

D.border-radius-top-left:5px

21.框模型規(guī)定,每個元素由內(nèi)向外由4個部分組成:(B)。

A.內(nèi)容,邊框,內(nèi)邊距,間距

B.內(nèi)容,內(nèi)邊距,邊框,間距

C.內(nèi)邊距,內(nèi)容,間距,邊框

D.內(nèi)邊距,內(nèi)容,邊框,間距

第9頁共34頁

22.下列定義背景圖片屬性正確的是(D)。

A.background-image:img/logo.pngB.background-image:url("img/logo.png")

C.background-image:"img/logo.png"D.background-image:url(img/logo.png)

23.設(shè)置背景圖片相對于所在元素向上移動10px,向左移動20px,以下設(shè)置正確的是(B)。

A.background-position:20px10pxB.background-position:-20px-lOpx

C.background-position:-lOpx-20pxD.background-position:lOpx20px

24.以下設(shè)置字體加粗屬性正確的是(B)。

A.font-size:boldB.font-weight:boldC.font-style:boldD.font-family:bold

25.以下設(shè)置字體為斜體正確的是(A)

A.font-style:italicB.font-family:italicC.text-decoration:italicD.text-indent:italic

26.普通元素設(shè)置文本垂直居中的屬性正確的是(C)。

A.text-valign:centerB.text-align:center

C.line-height:元素高D.line-height:元素高的一半

多選題

1.一個元素可同時被多個樣式類修飾,以下寫法正確的是:(BD)。

A.<aclass=".btrTclass=,,.btn-danger,,>

B.<aclass=^^btn^^class=,,btn-danger,,>

C.<aclass=,,btn,btn-danger9,>

D.<aclass=,,btnbtn-danger9,>

2.以下關(guān)于選擇器的權(quán)重描述正確的是:(AC)o

A.類選擇器的權(quán)重等于偽類選擇器的權(quán)重

B.元素選擇器的權(quán)重大于偽類選擇器的權(quán)重

C.偽類選擇器的權(quán)重小于ID選擇器的權(quán)重

D.偽類選擇器的權(quán)重小于其它所有選擇器的權(quán)重

3.一個元素上下內(nèi)邊距都是20px,左右內(nèi)邊距都是lOpx,下列定義正確的是:(AC)?

A.padding:20pxlOpx20pxlOpxB.padding:lOpx20pxlOpx

C.padding:20pxlOpx20pxD.padding:lOpxlOpx20px20px

4.以下關(guān)于內(nèi)容溢出說法正確的是:(BC)o

A.如果內(nèi)容是文字,默認就是橫向溢出

B.如果內(nèi)容是文字,默認就是縱向溢出

C.如果內(nèi)容是圖片,則默認縱向和橫向都會溢出

D.如果內(nèi)容是圖片,則默認不會溢出

5.以下可以隱藏內(nèi)容溢出部分的overflow屬性的值是:(ACD)。

A.hiddenB.visibleC.scrollD.auto

6僅顯示元素的左邊框,以下css屬性正確的是:(BD)。

A.border-left-style:2px

B.border-left-style:solid

第10頁共34頁

C.border-left:2px

D.border-left:solid

7.上外邊距溢出,有以下幾種預防方法:(ABCD)o

A.為父元素增加上邊框

B.為父元素設(shè)置上內(nèi)邊距;

C.在父元素的第一個子元素位置處,增加空<table></table>標記。

D.設(shè)置父元素的overflow:hidden

配伍題

1.請為選擇器①~⑤選擇右側(cè)最合適的解釋,將配對好的a~e填寫到括號中。

①ul>li.activeaul元素下的所有后代li的直接子元素中class為active的元素

②ulli.activebul元素下的直接子元素中class為active的li

③ulli>.activecul元素下的所有后代元素中class為active的li

④ulli.activedul元素下的直接子元素li以及其他任意class為active的元素

⑤ul>li,.activeeul元素下的所有后代li的所有后代中class為active的元素

請?zhí)顚懀孩伲阂虎冢阂虎郏骸狜:

[參考答案]

①:b②:c③:a④:e⑤:d

編程題

1.從答案選項中選擇正確的代碼,將其對應的字母填寫在空白的步驟中,從而把步驟補充完整:

如下圖所示需求設(shè)計圖:外層一個section元素,包裹著內(nèi)層四個span元素。

請在下列CSS中補充選擇器和css屬性:

<style>

section{____①—}

sectionspan{____②;____③____;}

section④{width:223px;}

</style>

[答案選項]

a.box-sizing:box;padding:10px0;

b.padding:lOpx0;

c.width:lOOOpx;margin:0auto;padding:015px;margin-top:35px;

第11頁共34頁

d.box-sizing:border-box;

e.width:lOOOpx;margin:auto;padding:15px;margin:35px;

f.padding:0lOpx;

g.span>img

i.span,img

請?zhí)顚懀孩伲篲__②:___③:___④:___

[參考答案]①:c②:d③:f④:g

第5章CSS3高級特性

判斷題

1.塊級元素默認都是從上到下排列的,且每個塊元素獨占一行。(4)

2.行內(nèi)塊元素默認都是從上到下排列的,且每個行內(nèi)塊元素獨占一行。(x)

3.行內(nèi)元素默認按照從左往右的方式排列,而行內(nèi)塊(inline-block)默認從上到下排列。(x)

4.因為每個元素都擁有自己的空間,所以一個元素不可能蓋住另一個元素。(x)

5.即使行內(nèi)元素浮動后,也允許修改width和height屬性。(4)

6.元素一旦設(shè)置浮動定位屬性,就脫離普通文檔流定位方式,不占用普通文檔流中的頁面空間。

N)

7.如果包含框太窄,無法容納水平排列的3個浮動元素,那么最后放不下的塊會被擠壓到下一行,

并始終浮動到下一行的開頭。(x)

8.元素一旦浮動后,都會變?yōu)樾袃?nèi)塊級元素,也允許修改大小尺寸。(x)

9.如內(nèi)部浮動元素,高于外部容器元素,則內(nèi)部浮動元素超出外部元素范圍的部分自動隱藏。(x)

10.用opacity設(shè)置透明度,僅影響所在元素,不影響子元素。(x)

11.dispaly:none不會讓元素脫離文檔流,雖然看不見,但依然占用空間。(x)

12.visibility:hidden不讓元素脫離文檔流,雖然看不見,但依然占用空間。(4)

13.rgba只作用于某個屬性,如背景顏色等。(4)

14.pointer屬性可設(shè)置鼠標的光標。當鼠標懸停在元素上時,可改變鼠標光標的顯示樣式。(義)

15.修改列表項標識為圖片,可使用:list-image:url(圖片路徑)屬性(x)

16.list-style:none和list-style-type:none均可清除列表項標識。(4)4

17.relative(相對定位)可讓元素脫離默認文檔流,相對于其所在父元素左上角自由定位。(x)

18.相對定位是讓元素相對于它在默認文檔流中的原始位置偏移一段距離,經(jīng)常用于對元素位置做

微調(diào)時使用。(Y)

19.絕對定位的元素默認總是相對于其所在直接父級元素左上角定位。(x)

20.相對定位的元素,雖然位置偏離了原位置,但默認文檔流中的原位置不釋放。(4)

21.修改父元素的z-index屬性值>子元素的z-index屬性值可讓父元素蓋住子元素。(x)

22.未使用定位屬性的元素不能使用z-index元素。(4)

第12頁共34頁

23.:first-child元素只能匹配一個元素。(x)

24.input+span只能匹配一個元素。(x)

25.:target用于匹配當前點擊的a元素。(x)

26.div:not([title二test])也會匹配那些不包含title屬性的div元素。(4)

27.元素可設(shè)置的屬性,偽元素也可設(shè)置。元素具有的特征,偽元素也同樣具備。(4)

28.使用彈性布局,要先使父容器變?yōu)閒lex容器----display:flex或display:inline-flex。(4)

29.默認情況下,如果主軸放不下所有項目時,項目會超出容器橫向溢出。(x)

30.彈性布局中,項目的flex-order屬性用于定義項目的排列順序。(x)

31.order屬性,用于定義項目的排列順序。其值為整數(shù)數(shù)字,無須單位。(7)

單選題

1.先后順序定義三個div:divl,div2,div3。div2向左浮動,divl和div3向右浮動,結(jié)果從左向右三個

div的順序依次是(C)。

A.dld2d3B,d2dld3C.d2d3dlD.dld3d2

2.CSS提供了(B)屬性用于設(shè)置元素浮動定位:

A.overflowB.floatC.floorD.fixed

3.以下不屬于float屬性值的是:(D).

A.leftB.rightC.noneD.center

4.清除前面元素浮動對當前元素的影響,可設(shè)置(B)屬性。

A.display:clearB.clear:bothC.float:bothD.both:clear

5.下列選項中,可讓圖片左右文字與圖片垂直居中對齊的css屬性是(B)o

A.text-align:centerB.vertical-align:middle

C.text-valign:centerD.vertical-align:baseline

6.下列設(shè)置鼠標懸停時光標變?yōu)槭种傅膶傩允牵―)。

A.cursor:moveB.cursor:waitC.cursor:textD.cursor:pointer

7.如果包含框太窄,無法容納水平排列的3個浮動元素,那么最后放不下的塊會:(A).

A.被擠壓到下一行B.默認隱藏C.橫向溢出D.始終換行到下一行的開頭

8.元素一旦浮動后,都會變?yōu)椋海˙).

A.行內(nèi)元素B.塊元素C.行內(nèi)塊元素D.浮動元素

9.一下不屬于clear屬性值的是:(D).

A.leftB.rightC.bothD.none

10.下列選項中,可讓元素獨占一行的屬性為(D)。

A.display:noneB.display:inline-blockC.display:inlineD.display:block

11.下列關(guān)于vertical-align屬性描述正確的是:(B)。

A.可設(shè)置表格元素的內(nèi)容在水平方向上的對齊方式

B.可設(shè)置img元素左右兩側(cè)的文本在垂直方向的對齊方式

C.可設(shè)置img元素在其父元素內(nèi)水平方向的對齊方式

D.可設(shè)置div元素的內(nèi)容在垂直方向的對齊方式

第13頁共34頁

12.以下不能實現(xiàn)隱藏元素的是:(A)o

A.overflow:hiddenB.opacity:0C.display:noneD.visibility:hidden

13.下列清除列表項標志的屬性設(shè)置正確的是(B)o

A.list-type:noneB.list-style-type:noneC.list-type-style:noneD.list:none

14.以下不屬于list-style-type屬性值的是:(D)。

A.noneB.circleC.discD.sqrt

15.將列表項標識改為圖片的屬性是:(C)o

A.list-style-typeB.list-imageC.list-style-imageD.list-type

16.希望能自由修改元素的位置,但又不希望默認文檔流中原始位置被釋放,應選擇(B)。

A.position:absoluteB.position:relativeC.position:fixedD.position:static

17.以下關(guān)于元素定位描述錯誤的是:(D)。

A.絕對定位的元素相對于離它最近的已定位的祖先元素實現(xiàn)定位。

B.如果當前元素的各級父元素中沒有已定位的祖先元素,那么元素就相對于body定位。

C.通常在設(shè)置絕對定位前,都要先找到要參照的祖先元素,并為祖先元素添加position屬性。

D.祖先元素的position屬性只能設(shè)置為relative

18.下列關(guān)于位移屬性描述正確的是:(A)o

A.left:-20px是讓元素基于當前位置向左移動20Px

B.left:20px是讓元素基于當前位置向左移動20Px

C.left:-20px是讓元素基于瀏覽器邊框,向左移動20Px

D.left:20Px是讓元素基于瀏覽器邊框,向左移動20Px

19.三個相令R元素:<b></b><span></span><i></i>,希望選中<1)>元素后的<i>元素,下列選擇器正確

的是(C)。

A.b,i{}B.b+i{)C.b~i{}D.b>i{}

20.選擇包含title屬性且title屬性值中包含“es”的div元素,下列選擇器正確的是(B)。

A.div[title=es]B.div[title*=es]C.div[titleA=es]D.div[title$=es]

21.選擇title屬性不等于“test”的div元素,下列選擇器正確的是:(A)。

A.div:not([title=test])B.div[title!=test]C.div[title*=test]D.div[title$=test]

22.希望單擊一個a元素,控制另一個元素的樣式變化,可使用以下哪種選擇器:(B)o

A.:hoverB.:targetC.:activeD.dink

23.以下描述錯誤的是:(D)o

A.-before,用于匹配某元素內(nèi)容區(qū)域之前的位置

B.:after,用于匹配某元素內(nèi)容區(qū)域結(jié)尾的位置

C.after,用于匹配某元素內(nèi)容區(qū)域結(jié)尾的位置

D.:before,用于匹配某元素與前一個元素之間的空白區(qū)域

24.下列在p元素開頭添加“>>”符號的代碼正確的是:(D)。

A.p::befbre{container:">>"}B.p::before{container:?}

C.p::before{content:?}D.p::before{content:"?"}

第14頁共34頁

25.防止外邊距溢出最好的方法是:(A)o

A.父元素::befbre{content:^^^^;display:table;}

B.父元素::befbre{content:^^^^;display:"table”}

C.父元素::befbre{container:^^^^;display:table}

D.父元素::befbre{container:"";display:,,table,,J

26.下列對于flex-direction屬性值描述正確的是:(B)。

A.值為row表示主軸x軸,起點在容器中心點

B.值為row-reverse表示主軸x軸,起點在右端

C.值為column表示主軸y軸,起點在底端

D.值為column表示主軸x軸,起點在最左端

27.如果主軸放不下所有項目時,可設(shè)置flex-wrap屬性值為(D)來實現(xiàn)換行顯示,但不改變主

軸方向。

A.nowrapB.wrap-reverseC.reverseD.wrap

28.下列代碼可以定義flex容器x為主軸,從左向右排列,且如果放不下就換行繼續(xù)從左向右排列的

是:(C)?

A.flex:rowwrapB.flex:wraprow

C.flex-flow:rowwrapD.flex-flow:wraprow

29.設(shè)置項目在主軸上的對齊方式,可設(shè)置以下哪個屬性:(B)。

A.flex-directionB.justify-contentC.flex-flowD.flex-wrap

30.實現(xiàn)每個項目兩端間距相同可設(shè)置以下哪個屬性:(A)o

A.justify-content:space-around

B.flex-wrap:wrap

C.flex-direction:space-around

D.justify-content:column

31.下列不屬于align-self屬性值的是:(C)。

A.flex-startB.flex-endC.flex-centerD.baseline

32.文檔類型聲明:<!DOCTYPEhtml>說明當前網(wǎng)頁使用的是(D)標準。

A.HTML4.1B.XHTML1.0C.XHTML2.0D.HTML5

多選題

1.以下描述正確的是:(AB)。

A.設(shè)置浮動定位屬性的元素會脫離普通文檔流,不占用普通文檔流中的頁面空間。

B.文檔的普通流中的其他塊,會上移填補浮動元素留下的空白位置。

C.元素浮動定位是相對于元素在普通文檔流中的原位置設(shè)置位移的偏移量。

D.浮動定位的元素在原文檔流中的位置始終占用,不釋放。

2.以下關(guān)于clear屬性描述正確的是:(BD)。

A.該屬性值可以是:left,用于清除當前元素前面元素的任意浮動帶來的影響;

B.該屬性值可以是:left,用于清除當前元素前面元素的左浮動帶來的影響;

第15頁共34頁

C.該屬性值可以是:right,用于清除當前元素后面的元素任意浮動帶來的影響;

D.該屬性值可以是:right,用于清除當前元素前面的元素右浮動帶來的影響;

3.清除浮動對父元素影響的方案有:(ACD)o

A.給父元素設(shè)置固定的高度;

B.設(shè)置父元素的float屬性為hidden或auto;

C.設(shè)置父元素也浮動;

D.在父元素內(nèi)的結(jié)尾追加一個空子元素(塊級元素),并設(shè)置空子元素清除浮動影響(clear:both)。

4.默認可在一行中水平排列的元素有:(AC)。

A.行內(nèi)元素B.塊元素C.行內(nèi)塊元素D.標題元素

5.下列對于opacity屬性描述正確的是:(BCD)。

A.值是1~100之間的任意一個整數(shù)

B.數(shù)值越大,越不透明;數(shù)值越小,越透明。

C.opacity可用于將整個元素的所有屬性及其子內(nèi)容全部設(shè)置透明度。

D.值是0~1之間的任意一個小數(shù)

6.下列可使用vertical-align屬性設(shè)置垂直方向?qū)R方式的有:(AD)。

A.tableB.divC.pD.img

7.下列關(guān)于固定定位描述正確的是:(AD)。

A.固定定位的元素,以文檔顯示區(qū)左上角作為參照

B.固定定位的元素,以body左上角作為參照

C.固定定位的元素位置在網(wǎng)頁滾動時,跟隨滾動,始終保持與body左上角的相對位置不變。

D.固定定位的元素位置不會隨著滾動條的滾動而發(fā)生改變。

8.下列關(guān)于位移屬性描述正確的是:(ABC)。

A.top:-20px

溫馨提示

  • 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預覽,若沒有圖紙預覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容,請與我們聯(lián)系,我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論