一．單選題（共20小題，每題1.5分，共30分）
1、下面哪一個標(biāo)簽不能放在head標(biāo)簽內(nèi)？（ C ）
A. title標(biāo)簽 B. style標(biāo)簽
C. body標(biāo)簽 D. script標(biāo)簽
2、如果網(wǎng)頁中出現(xiàn)亂碼，我們一般使用（ A ）來解決。
A. <meta charset="utf-8" />
B. <style type="text/css"></style>
C. <script></script>
D. <link type="text/css" rel="stylesheet" href="css/index.css">
3、下面選項中，屬于HTML正確注釋方式是（ C ）。
A. //注釋內(nèi)容
B. /注釋內(nèi)容/
C.
D.//注釋內(nèi)容//
4、選出你認為最合理的定義標(biāo)題的方法是（ C ）。
A. <div>文章標(biāo)題</div> B. <p><b>文章標(biāo)題</b></p>
C. <h1>文章標(biāo)題</h1> D.<strong>文章標(biāo)題</strong>
5、如果想要實現(xiàn)粗體效果，我們可以使用（ A ）標(biāo)簽來實現(xiàn)。
A. <strong></strong> B. <em></em>
C. D.
6、下面有關(guān)自閉合標(biāo)簽說法不正確的是（ D ）。
A. 自閉合標(biāo)簽只有開始符號沒有結(jié)束符號
B. 自閉合標(biāo)簽可以在內(nèi)部插入文本或圖片
C. meta標(biāo)簽是自閉合標(biāo)簽
D. hr標(biāo)簽是自閉合標(biāo)簽
7、在瀏覽器默認情況下，下面有關(guān)塊元素和行內(nèi)元素說法不正確的是（ D ）。
A. 塊元素獨占一行
B. 塊元素內(nèi)部可以容納塊元素
C. 塊元素內(nèi)部可以容納行內(nèi)元素
D. 行內(nèi)元素可以容納塊元素
8、下面標(biāo)簽中，哪一個不是塊元素？（ A ）
A. strong B. p C. div D. hr
9、在下面幾種列表形式中，哪一種在HTML5中已經(jīng)被廢棄了。（ D ）
A. 有序列表ol B.無序列表ul
C. 定義列表dl D.目錄列表dir
10、下面哪種列表我們在實際開發(fā)中是用得最多的？（ C ）
A. 有序列表ol B.無序列表ul
C. 定義列表dl D.目錄列表dir
11、下面有關(guān)ul元素說法不正確的是（ D ）。
A. ul元素的子元素只能是li，不能是其他元素
B. ul元素內(nèi)部的文本，只能在li元素內(nèi)部添加，不能在li元素外部添加
C. 絕大多數(shù)列表都是使用ul元素來實現(xiàn)，而不是ol元素
D. 我們可以在ul元素中直接插入div元素
12、下面有關(guān)HTML語義化不正確的是（ A ）。
A. 對于大多數(shù)標(biāo)簽實現(xiàn)的效果，我們完全可以使用div和span來代替實現(xiàn)
B. 學(xué)習(xí)HTML目的在于：在需要的地方，用正確的標(biāo)簽
C. 語義化對于搜索引擎優(yōu)化來說是非常重要的
D. 語義化目的在于提高可讀性和可維護性
14、在img標(biāo)簽中，（ B ）屬性的內(nèi)容是提供給搜索引擎看的。
A. src B.alt C.title D.class
15、下面說法，正確的是（ B ）。
A.當(dāng)鼠標(biāo)移到圖片上時，就會顯示img標(biāo)簽alt屬性中的文字
B. src是img標(biāo)簽必不可少的屬性，只有定義它之后圖片才可以顯示出來
C. 在實際開發(fā)中，我們常用的是絕對路徑，很少用到相對路徑
D. 如果想要顯示一張動畫圖片，可以使用png格式來實現(xiàn)
23、下面說法中，正確的是（ C ）。
A. 現(xiàn)在已經(jīng)是CSS3時代了，CSS2沒必要再去學(xué)
B. 一般使用script標(biāo)簽來引用外部樣式表
C. 在實際開發(fā)中，一般使用外部樣式表的多
D. 內(nèi)部樣式表和行內(nèi)樣式表在實際開發(fā)中一點用處都沒有
24、每一個樣式聲明之后，要用（ B ）表示一個聲明的結(jié)束。
A. 逗號 B. 分號 C. 句號 D. 頓號
25、下面哪一項是CSS正確的語法結(jié)構(gòu)？（ D ）
A. body:color=black B. {body;color:black}
C. {body:color=black;} D. body{color:black;}
26、下面有關(guān)id和class的說法中，正確的是（ A ）。
A. id是唯一的，不同頁面中不允許出現(xiàn)相同的id
B. id就像你的名字，class就像你的身份證號
C. 同一個頁面中，不允許出現(xiàn)兩個相同的class
D. 可以為不同的元素設(shè)置相同的class來為他們定義相同的css樣式
27、下面有關(guān)選擇器的說法中，不正確的是（ B ）。
A. 在class選擇器中，我們只能對相同的元素定義相同的class屬性
B. 后代選擇器選擇的不僅是子元素，還包括它的其他后代元素（如“孫元素”）
C. 群組選擇器可以對幾個選擇器進行相同的操作
D. 想要為某一個元素定義樣式，我們可以使用不同的選擇器來實現(xiàn)
28、CSS中可以使用（ C ）屬性來定義字體粗細。
A. font-family B. font-size C. font-weight D. font-style
三、判斷題（每題1分，共13分）
1.在HTML中,若實現(xiàn)點擊超鏈接時,彈出一個新的網(wǎng)頁窗口,符合要求的寫法是<a href="right.html" target="_blank">節(jié)目</a> （ √ ）
2.由于某些字符在HTML中有特殊含義，因此需要在瀏覽器中顯示這些字符，就必須在HTML中使用字符轉(zhuǎn)譯碼。其中?表示空格 （ √ ）
3.在HTML中，從本頁面連接到頁面中錨記是marker位置的代碼是<a href="hello.htm" position="marker">Hello</a> （ × ）
4.<a href="index.html" target="_blank">首頁</a>這段代碼目標(biāo)窗口在當(dāng)前窗口中打開 （ × ）
5.將一個網(wǎng)頁中所有的h1元素以及p元素的字體顏色設(shè)置為紅色的CSS代碼為h1, p {color:red;} （ √ ）
6.使用外部樣式表可以使網(wǎng)站更加簡潔，風(fēng)格保持統(tǒng)一，它的文件擴展名為 .cs （ √ ）
7.外部樣式表內(nèi)容不需要使用<style>標(biāo)簽,而是使用<link>標(biāo)簽引入外部樣式 （ √ ）
8.在HTML中，通過a{text-decoration:none}可以實現(xiàn)鼠標(biāo)懸停在超鏈接上時，為無下劃線的效果 （ × ）
9.div標(biāo)簽是塊級元素 （ √ ）
10.下面選項中，可以設(shè)置頁面中某個DIV標(biāo)簽相對頁面水平居中（垂直對齊）的CSS樣式是vertical-align:middle （ × ）
11.在HTML中，DIV默認樣式下是不帶滾動條的，若要使<div>標(biāo)簽出現(xiàn)滾動條，需要為該標(biāo)簽定義overflow:scroll樣式 （ √ ）
12.若某個標(biāo)簽里的內(nèi)容超過標(biāo)簽的尺寸，則超出的內(nèi)容自動隱藏的CSS樣式是visibility:hidden （ × ）
15.html內(nèi)嵌框架的標(biāo)簽名是iframe （ √ ）
- 權(quán)重等級由高到低依次為!important > 內(nèi)聯(lián)樣式 > ID選擇器 > 類、偽類和屬性選擇器（ √ ）
四、簡答題（每題14分，共42分）
1、請默寫HTML基本結(jié)構(gòu)。
<!DOCTYPE html>
<html lang=’en’>
<head>
<title>document name</title>
<meta charset = ‘utf-8’>
</head>
<body>
<h1></h1>
</body>
</html>
2、下面有一段代碼，如果我們想要選中所有的div和p，請用至少2種不同的選擇器方式來實現(xiàn)，并且選出最簡單的一種。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.a{color=’red’;} /類選擇器/
</style>
</head>
<body>
<div></div>
<p class=’a’></p>
<p></p>
<strong></strong>
<span></span>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hali</title>
<style type="text/css">
#box,div{color: red;}
</style>
</head>
<body>
<div>你好</div>
<p>every one</p>
<p id = box>i Miss you</p>
<strong>happy</strong>
<span>new year</span>
</body>
</html>
3、為下面這段文字定義字體樣式，要求字體類型指定多種、大小為14px、粗細為粗體、顏色為藍色。
“有規(guī)劃的人生叫藍圖，沒規(guī)劃的人生叫拼圖?！?br>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hali</title>
<style type="text/css">
p1{color:blue;
font:bold italic 14px '宋體，華文彩云，楷體'}
p2{color: blue;
font:bold italic 14px '楷體'}
p3{color: blue;
font:bold italic 14px '仿宋'}
</style>
</head>
<body>
<p1>"有規(guī)劃的人生叫藍圖,沒規(guī)劃的人生叫拼圖."</p>
<p2>"有規(guī)劃的人生叫藍圖,沒規(guī)劃的人生叫拼圖."</p>
<p3>"有規(guī)劃的人生叫藍圖,沒規(guī)劃的人生叫拼圖."</p>
</body>
</html>
五、論述題（每題15分，共15分）
1、請羅列出盒子模型的計算公式，盒子的寬度等于什么，盒子的高度等于什么？
盒子的計算方式:
width，height內(nèi)容的寬高
整個盒子的大?。?br>
盒子的寬：內(nèi)容的寬：width+padding2+border2+margin2
盒子的高：內(nèi)容的高：height+padding2+border2+margin2
1.plate 元素選擇器
2.bento 元素選擇器
3.#fancy id選擇器
4.plate apple 后代選擇器
5.#fancy pickle id選擇器+后代選擇器
6..small 類選擇器
7.orange.small 復(fù)合選擇器
8.bento orange.small 類選擇器+后代選擇器
9.plate bento 群組選擇器（并集選擇器）
10.* 通用選擇器
11.plate * 元素選擇器+后代選擇器
12.plate+apple 兄弟選擇器（查找后邊一個兄弟元素）
13.bento ~ pickle 兄弟選擇器（查找后邊所有兄弟元素）
14.plate > apple 子元素選擇器
15.orange:first-child 子元素選擇器（選擇第一個標(biāo)簽）
16.plate :only-child 子元素選擇器（唯一標(biāo)簽）
17.#fancy .small,pickle:last-child id選擇器+類選擇器+后代元素選擇器+子元素選擇器
18.plate:nth-child(3) 子元素選擇器（選擇指定位置的子元素
19.bento:nth-last-child(4) 子元素選擇器（倒數(shù)第4個）
20.apple:first-of-type 子元素選擇器（第一種類型）
21.plate:nth-of-type(even) 子元素選擇器（偶數(shù)類型） plate:nth-of-type(even) 子元素選擇器（奇數(shù)類型）
22.plate:nth-of-type(2n+2) 子元素選擇器（從第3個元素開始，截取每個2個元素的距離包含第2個的元素）
23.apple：only-of-type 子元素選擇器(唯一類型)
24..small:last-of-type 子元素選擇器(最后一個元素)
25.bento:empty 子元素選擇器（沒有元素的）
26.apple:not(.small) 否定偽類選擇器
