HTML/CSS題庫

本文轉載自查看原文 2016-11-14 19:27 9514 Q軟考題庫

一、 填空題

使用文本編輯器編輯完HTML后，擴展名可以是__html___或___htm__。
表格的標簽是____table______，單元格的標簽是____td______。
在編輯table表格時，合並行使用 __rowspan_____合並列使用_____colspan____。
在CSS層疊樣式表當中經常用到的三種選擇器：___元素選擇器___、__類選擇器__、__id選擇器__。
在JavaScript腳本語言當中，定義函數使用___function__單詞表示。
用來輸入密碼的表單域是___ input標簽type屬性等於password ____。
文件頭標簽也就是通常所見到的 _head___ 標簽。
預格式化文本標記<pre></pre>的功能是___標記內的內容按照原格式顯示在網頁當中______。
__超鏈接___是網頁與網頁之間聯系的紐帶，也是網頁的重要特色。
表單是Web__客戶端__和Web__服務器___之間實現信息交流和傳遞的橋梁。
<tr>….</tr>是用來定義__表格的一行____；<td>…</td>是用來定義___表格的一列___；
在網頁中插入背景圖案（文件的路徑及名稱為/img/bg.jpg）的語句是

___<body background=/img/bg.jpg>_____。

設定圖片高度及寬度的屬性是___ height\width ____。
window的 ___onload___ 事件在瀏覽器完成頁面加載后立即觸發。
Javascript里Math的___ random()____方法返回介於0和1之間的偽隨機數。
獲得焦點的事件___ onfocus __,失去焦點的事件___ onblur ___。
W3C是指 __萬維網聯盟___ 。
當今比較流行的技術研發模式是__c/s___和__b/s___的體系結構來實現的
利用CSS設置網頁背景顏色為綠色的語句____background-color=’green’___<body style=”background-color:green;”>____。
在HTML中，引入CSS的方法主要有___行內式____、___內嵌式___、___導入式___、___鏈接式__4種。
在標簽當中可以通過__style__屬性中設定CSS樣式。
CSS樣式遵循_就近_原則。
繼承原則中，CSS所有的樣式子標記都可以____繼承___父標記所有的樣式風格，而子標記的樣式風格___完全不會影響___父標記。
表單的提交有兩種方式，分別是:___get____、___post___。
表單對象的名稱由__name__屬性設定；提交方法由___method____屬性指定；若要提交大數據量的數據，則應采用___post__方法；表單提交后的數據處理程序由__action___屬性指定。
經常說的表單驗證，那么表單是使用___form___標簽表示。
表單實際上包含兩個重要組成部分：一是描述表單信息的____ web頁，二是用於處理表單數據的服務器端___表單處理程序___。
設置文檔的可見部分開始標記符___<body>___；結束標記符是____</body>_______。
嚴格來說， ___html___並不是一種編程語言，而只是一些能讓瀏覽器看懂的標記。
請寫出在網頁中設定表格邊框的厚度的屬性__border_____；設定表格單元格之間寬度屬性___ cellpadding____；設定表格資料與單元格線的距離屬性___ cellspacing___。

二、 選擇題

1. 在HTML中有效，規范的注釋聲明是( D )。(選擇一項)

A.	//這是注釋
B.	<!--這是--注釋-->
C.	/這是注釋/
D.	<!--這是注釋-->
2.分析下面的HTML代碼片段，則選項中的說法正確的是( CD )(選擇二項) <table cellspacing="30"> <tr><td colspan="2" align="center">姓名</td></tr> <tr><td rowspan="2" align="center">成績</td> <td align="center">語文</td> </tr> <tr><td colspan="2" align="center">數學</td></tr> </table>

A.	該表格共有兩行三列
B.	該表格邊框寬度為30像素
C.	該表格中的文字均居中顯示
D.	姓名”單元格跨2列

3.分析下面的HTML代碼段，下面描述正確的是( A )(選擇一項) *<frameset cols="30%,"> <frameset rows="50%,50%"> <frame name="fx" src="x.html"> <frame name="fy" src="y.html"> <frameset> <frame ame="fz" src="z.html"> <frameset>**

A.	在頁面中創建了三個框架，左邊一列包含兩個框架(各占50%)，右邊一列占窗口的70%
B.	在頁面中創建了三個框架，左邊一列占窗口的30%，右邊一列包含兩個框架(各占50%)
C.	在頁面中創建了三個框架，上邊一行占窗口的30%，下邊一行包含兩個框架(各占50%)
D.	在頁面中創建了三個框架，上邊一行包含兩個框架(各占50%)，下邊一行占窗口的70%
4. 在HTML中，通過( b )可以實現鼠標懸停在超鏈接上時，為無下划線的效果。(選擇一項)

A、a{text-decoration:underline}
B、a{text-decoration:none}
C、a:hover{text-decoration:none}
D、a:link{text-decoration:underline}
5. 在HTML中，使用<IMG>標簽插入圖像，下列選項關於<IMG>的src屬性說法正確的是( C )。(選擇一項)

A.		用來設置圖片文件的格式
B.		用來設置圖片文件所在的位置
C.		用來設置鼠標指向圖片時顯示的文字
D.		用來設置圖片周圍顯示的文字

6. 在HTML中，( D )可以在網頁上通過連接直接打開客戶端的發送郵件工具發送電子郵件(選擇一項)

A.	<A HREF="telnet:zhangming@aptech.com">發送反饋信息</A>
B.	<A HREF="mail:zhangming@aptech.com">發送反饋信息</A>
C.	<A HREF="ftp:zhangming@aptech.com">發送反饋信息</A>
D.	<A HREF="mailto:zhangming@aptech.com">發送反饋信息</A>

7. 下列常用屬性設置中，( B )適用於<frame>標簽 (選擇一項)

A.	border="0"
B.	frameborder="1"
C.	scrolling="0"
D.	href="head.htm"

8. 下面關於外部樣式表的說法錯誤的是( A )。(選擇一項)

A.	文件擴展名為 .cs
B.	外部樣式表內容不需要使用<style>標簽,外部樣式表內容不需要使用<style>標簽
C.	使用<link>標簽引入外部樣式,使用<link>標簽引入外部樣式
D.	使用外部樣式表可以使網站更加簡潔，風格保持統一

9. 在HTML中，以下關於CSS樣式中文本及字體屬性的說法，錯誤的是( C )。(選擇一項)

A.	font-size用來設置文本字體的大小
B.	text-align用來設置文本的對齊方式
C.	font-type用來設置字體的類型
D.	font-weight用來設置字體的粗細

10. 關於W3C標准，下列說法錯誤的是( B )。(選擇一項)

A.	W3C標准是由W3C組織制定的一系列Web標准
B.	*.htm,<SPAN>,<p>是符合W3C標准規范的書寫方式
C.	W3C標准主要包括XHTML、CSS、DOM和ECMAScript標准
D.	W3C提倡內容與表現分離的Web結構
11. 在HTML中，( A )用來表示特殊字符引號。(選擇一項)

A.	"
B.	>
C.	©
D.

12. 下面的描述正確的是( D )(選擇一項) #menu{ font-size:14px; }

A.	menu是標簽選擇器
B.	menu是元素選擇器
C.	menu是類選擇器
D.	menu是ID選擇器

13. 關於瀏覽器的兼容性，下列說法正確的是( AD )。(選擇二項)

A.	瀏覽器所使用的內核不同，是導致跨瀏覽器兼容性問題的根本原因
B.	瀏覽器的優先級別：IE8.0>IE7.0>IE6.0>Firefox
C.	clear:both不能用於清除浮動
D.	通過寫CSS Hack的方式，可以解決瀏覽器兼容性的問題

14. 在html中,實現如下圖所示效果,則橫線處應填寫的代碼是( D ) <style> li{ width:150px; font:28px 隸書; list-style:_____; float:_____; } </style> <div> <ul> <li>登錄</li><li>注冊</li><li>幫助</li> </ul> </div> 圖: 登錄注冊幫助(選擇一項)

A.	第一個橫線:inherit 第二個橫線:right
B.	第一個橫線:none 第二個橫線:right
C.	第一個橫線:inherit 第二個橫線:left
D.	第一個橫線:none 第二個橫線:left

15. 在HTML中，將表單中INPUT元素的TYPE屬性值設置為( A )時，用於創建重置按鈕。(選擇一項)

A.	Reset
B.	Set
C.	Button
D.	Image

16. 如圖所示，要求單擊“天狼星”時，彈出頁面“Page.html”,並顯示“天狼星歡迎你”，則在HTMLPage.html中，正確實現此連接的代碼是( C )(選擇一項)

A.	<a href="HTMLPage.htm" target="_blank">天狼星</a>
B.	<a href="_blank" target="Page.htm">天狼星</a>
C.	<a href="Page.htm" target="_blank">天狼星</a>
D.	<a href="HTMLPage.htm" target="Page.htm">天狼星</a>

17. 在HTML中，以下( A )能夠實現表格跨列。(選擇一項)

A.	colspan屬性
B.	rowspan屬性
C.	colspan標簽
D.	rowspan標簽

18. 已知在HTML頁面上定義了如下所示的CSS樣式(選擇一項) <STYLE TYPE="text/css"> .t{ border-left-width:0px;border-left-width:1px;border-right-style:dashed; padding-top:5px;padding-left:2px; } </STYLE> 分析如下的HTML代碼片斷，選項中說法錯誤的是( B ) <table> <tr> <td class="t">姓名：</td> <td colspan="2" class="tBorder"><input type="text" name="name"></td> </tr> <tr> <td class="t">性別：</td> <td class="t">男<input type="radio" name="sex" checked></td> <td class="t">女<input type="radio" name="sex"></td> </tr> </table>

A.	表格中某些單元格應用了t樣式
B.	表格共兩列，其中name文本框跨了兩列
C.	表格單元格右邊框為dashed(虛線框樣式)
D.	表格單元格頂填充為5像素

19. CSS樣式background-position:-5px 10px代表的意義是( A )(選擇一項)

A.	背景圖片向左偏移5px，向下偏移10px
B.	背景圖片向左偏移5px，向上偏移10px
C.	背景圖片向右偏移5px，向下偏移10px
D.	背景圖片向右偏移5px，向上偏移10px

20. 若某標簽里內容超過標簽尺寸，則超出內容自動隱藏的CSS樣式是( C )。(選擇一項)

A.	display:none
B.	visibility:hidden
C.	overflow:hidden
D.	clear:both

21. 閱讀下面CSS代碼，下面選項中與該代碼段效果等同的是( A )。(選擇一項) .box { margin:10px 5px; margin-right:10px; margin-top:5px; }

A.	.box { margin:5px 10px 10px 5px; }
B.	.box { margin:5px 10px 0px 0px; }
C.	.box { margin:5px 10px; }
D.	.box { margin:10px 5px 10px 5px; }

22. 閱讀下面HTML代碼，如果期望tabs位於box容器的右下角，則需要添加的CSS樣式是( C )。(選擇一項) <div id="box"><div id="tabs"></div></div>

A.	#tabs { position:absolute; right:0; bottom:0; }
B.	#tabs { position:relative; right:0; bottom:0; }
C.	#box { position:relative; } #tabs { position:absolute; right:0; bottom:0; }
D.	#box { position:relative; } #tabs { position:right bottom; }

23. 在HTML網頁中添加如下CSS樣式，鼠標懸浮在鏈接上面時，網頁中的鏈接呈現的顏色為( B )。(選擇一項) body { color:red; } a { color:black; } a:link,a:visited { color:blue; } a:hover,a:active { color:green; } ...

A.	紅色
B.	綠色
C.	藍色
D.	黑色
24. 在HTML中，( D )標簽用於在網頁中創建表單。(選擇一項)

A.		<INPUT>
B.		<SELECT>
C.		<TABLE>
D.		<FORM>

25. 在HTML中，以下關於CSS樣式中文本屬性的說法，錯誤的是( D )。(選擇一項)

A.	font-size用於設置文本字體的大小
B.	font-family用於設置文本的字體類型
C.	color用於設置文本的顏色
D.	text-align用於設置文本的字體形狀

26. 在HTML中,要通過無列表符號來實現導航菜單, Css屬性中 ( C )可以設置垂直疊放次序。 (選擇一項)

A.	list-style
B.	padding
C.	z-index
D.	Float

27. 下列css代碼，( C )能控制鼠標懸浮其上的超鏈接樣式。(選擇一項)

A.	a:link{color:#ff7300;}
B.	a:visited{color:#ff7300;}
C.	a:hover{color:#ff7300;}
D.	a:active{color:#ff7300;}

28. 下列css屬性中,用於指定背景圖片的是( A ).(選擇一項)

A.	background-image
B.	background-color
C.	background-position
D.	background-repeat

29. 在 html 中,下列css屬性中不屬於盒子屬性的是( C ).(選擇一項)

A.	Border
B.	Padding
C.	Float
D.	Margin

30. 下列css屬性中用於指定內容與邊框之間距離為2px的是( A )(選擇一項)

A.	padding:2px;
B.	border:2px;
C.	margin:2px;
D.	content:2px;

三、 判斷題

HTML的段落標志中,標注文本以原樣顯示的是<PRE></PRE>（ T ）
超鏈接只能在不同的網頁之間進行跳轉（ F ）
在源代碼窗口可以看到html文件是標准的ASCII文件，它是包含了許多被稱為標簽(tag)的特殊字符串的普通文本文件（ T ）
一個大div塊里包含一個小的div，設置小的div與大div的左邊距5px樣式的標准寫法是margin-left:5px; （ F ）
在<form><form>標簽對之間，不允許出現<p><ul>等非表單域元素。（ F ）
在符合XHTML1.0 Strict規范的HTML文檔中，允許使用<embed>標簽為頁面添加音頻、視頻、動畫等多媒體信息。（ F ）
在css層疊規則中，id選擇器樣式表的優先級高於類選擇器。（ T ）
超鏈接：是一種標記，形象的說法就是單擊網頁中的這個標記則能夠加載另一個網頁，這個標記可以做在文本上也可以做在圖像上。（ T ）
HTML是HyperText Markup Language（超文本標記語言）的縮寫。超文本使網頁之間具有跳轉的能力，是一種信息組織的方式，使瀏覽者可以選擇閱讀的路徑，從而可以不需要順序閱讀（ T ）

10. 標識<b>無需</b>標識（ F ）

11. 在HTML文檔中，允許為無序列表（ul）的某個列表項（li）嵌入定義列表（dl）。（ T ）

12. CSS樣式表的繼承性是指html元素將自動繼承父元素的所有css屬性。（ F ）

13. 在css樣式定義中，子選擇器與后代選擇器的含義相同。（ F ）

14. 在css層疊規則中，id選擇器樣式表的優先級高於類選擇器。（ T ）

15. 只有IE瀏覽器支持CSS，而其他瀏覽器不支持。（ F ）

16. 在HTML文檔中，<q>和<cite>標簽通常配合使用，以描述引文和引用的來源。（ T ）

17. IE6下，制作一個大小為10*10px的div，樣式是width:10px;height:10px; （ F ）

18. FTP協議是指超文本傳輸協議（ F ）

19. HTML中，空格的代碼為 （ T ）

20. 可以用HTML、JavaScript或C語言編寫自己的擴展（ T ）

四、 簡答題

html和htm兩者之間有什么區別？
表格、框架、DIV三種HTML布局方式的特點？
簡述一下盒子模型！
什么是錨連接？請舉例！
HTML表單的作用和常用表單類型！
CSS與HTML之間的關系或分別說明一下兩者的意義！
CSS的定義和作用！
CSS分為哪幾種選擇器並說明他們各自的特點！
FORM表單中input設置為readonly和disabled的區別？
FORM表單提交的方法中分為哪幾種？有什么區別請簡要概述！

五、 編碼題

1．請編寫代碼實現下圖效果。（6分）

HTML:

1  <table style="border: 1px solid blue;">
2     <tr>
3         <td style="padding-right: 20px">紅色</td>
4         <td style="padding-right: 20px">藍色</td>
5         <td style="padding-right: 20px">綠色</td>
6     </tr>
7 </table>

2．請編碼實現如下效果。（9分）

HTML:

 1  <table>
 2     <tr>
 3         <td>姓名</td>
 4         <td>
 5             <input type="text" id="uname"
 6                                                     name="username"onblur="checkname()">
 7         </td>
 8         <td id="namemess"></td>
 9     </tr>
10     <tr>
11         <td>密碼</td>
12         <td>
13             <input type="password" id="pwd"  name="pwd">
14         </td>
15         <td></td>
16     </tr>
17     <tr>
18         <td>重復密碼</td>
19         <td>
20             <input type="password" id="pwd2"
21                                                     name="pwd2"onblur="checkpwd()">
22         </td>
23         <td id="pwdmsg"></td>
24     </tr>
25     <tr>
26         <td>年齡</td>
27         <td>
28             <input type="text" id="age"
29                                             name="age" onblur="checkage()">
30         </td>
31         <td id="agemsg"></td>
32     </tr>
33     <tr>
34         <td>性別</td>
35         <td>
36             <input type="radio" value="1" name="sex">男
37   &nbsp;&nbsp;&nbsp;
38                 <input type="radio" value="0" name="sex">女
39         </td>
40     </tr>
41     <tr>
42         <td>愛好</td>
43         <td>
44             <input type="checkbox" value="1" name="aihao">足球 
45                                                 &nbsp;&nbsp;&nbsp;
46                 <input type="checkbox" value="2" name="aihao">藍球
47                     <input type="checkbox" value="3" name="aihao">羽毛球
48                         <input type="checkbox" name="aihao"  value="4">乒乓球
49         </td>
50     </tr>
51     <tr>
52         <td>班級</td>
53         <td>
54             <select name="banji">
55                 <option value="1">一年級一班</option>
56                 <option value="2">一年級2班</option>
57                 <option value="3">一年級3班</option>
58                 <option value="4">一年級4班</option>
59             </select>
60         </td>
61     </tr>
62     <tr>
63         <td>
64             <input type="reset" value="重置">
65         </td>
66         <td align="center">
67             <input type="submit" value="提交">
68         </td>
69     </tr>
70 </table>

CSS:

 1 <style type="text/css">
 2     table
 3     {
 4         font-size: 12px;
 5         border: solid 1px blue;
 6         border-collapse:collapse;
 7     }
 8     td
 9     {
10         border:solid 1px blue;
11     }
12 </style>

3．請編寫代碼實現下圖效果（5分）

HTML:

 1 <table>
 2     <tr>
 3         <td>姓名</td>
 4         <td>
 5             <input type="text" name="uname">
 6         </td>
 7     </tr>
 8     <tr>
 9         <td>密碼</td>
10         <td>
11             <input type="text" name="pwd">
12         </td>
13     </tr>
14     <tr>
15         <td colspan="2" align="center">
16             <input type="submit" value="登錄">
17         </td>
18     </tr>
19 </table>

CSS:

 1 table 
 2 {
 3     font-size: 12px;
 4     border: solid 1px blue;
 5     border-collapse: collapse;
 6     width: 300px;
 7 }
 8 td 
 9 {
10     font-size: 12px;
11     border: solid 1px blue;
12 }

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 html的題庫（含答案） css題庫（含答案）題庫 html和css HTML和CSS css加載動畫（純css和html） HTML如何引入CSS文件 HTML5&CSS挑戰 html+css實例 HTML + CSS 案例