當(dāng)前位置：首頁 > 前端技术 > HTML >内容正文

HTML

web前端试题和答案

發(fā)布時間：2025/3/13 HTML 27 豆豆

生活随笔收集整理的這篇文章主要介紹了 web前端试题和答案小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

一、基礎(chǔ)題

（一）判斷題（5分）

1．所有的HTML標(biāo)記符都包括開始標(biāo)記符和結(jié)束標(biāo)記符。( ? ?1

)

2．良好的網(wǎng)站目錄結(jié)構(gòu)有利于網(wǎng)站的開發(fā)與維護(hù)。( ? ?0

)

3．HTML表格在默認(rèn)情況下沒有邊框。( ? ?1

)

4．有序列表和無序列表可以互相嵌套。( ? ?1

)

5．CSS樣式表項的組成格式為：selector{property1:value1,property2:value2,

……}( ? ?0

)

（二）填空題（20分）

1．一個HTML文檔必須包含三個元素，它們是head、body和? ?? ?? ?

。title

標(biāo)記符應(yīng)位于? ?? ?? ?

標(biāo)記符之間。

2．在網(wǎng)頁中插入圖像時,應(yīng)使用語句? ?? ?? ???? ?? ?? ???。

3．超鏈接訪問過后hover樣式不出現(xiàn)，原因是被點擊訪問過的超鏈接樣式hover和active失效，解決方法是使CSS屬性的排列順序為:????????????????????。

4．IE6的雙倍邊距BUG

　　???

例如:

<styletype="text/css">

　　???

???????

body{margin:0}

　　???

???????

div{ float:left;

margin-left:10px;

width:200px;

height:200px;

border:1px solid red; }

</style>

浮動后本來外邊距10px,但I(xiàn)E解釋為20px,解決辦法是加上???????

?????

。

5．填寫CSS代碼，實現(xiàn)一個層垂直居中于瀏覽器中。

<!—

div{

position:absolute;

top:50%;

left:50%;

margin:?????????????????

;

width:200px;

height:200px;

border:1px solid red;

}

-->

</style>

這里使用百分比絕對定位，與外補(bǔ)丁負(fù)值的方法。

（三）簡答題（60分）

解釋什么是網(wǎng)站重構(gòu)，符合w3c布局與傳統(tǒng)table相比有哪些優(yōu)點。（10分）

簡述你對css盒子模式（框模型）的理解。（10分）

用html實現(xiàn)如下表格(不可嵌套實用表格)（10分）

請簡述class屬性的特點和用法及與id屬性的區(qū)別，并寫出一個具有class屬性的例子（要求：指定div元素中樣式類為a1,字體大小為9pt

的css樣式）。（15分）

簡述SPAN元素和DIV元素的區(qū)別與用法。（15分）

二、提升題（15分）

運用HTML和CSS對下面樣式布局（至少三種方法）,寫出代碼。

?--------------------------------

| ? ? ? ? |

_____???

| ? ? ? ? |

--------------------------------

答案

一、基礎(chǔ)題

（一）判斷題

1.×??

2.√??

√

（二）填空題

1.html????

head

2.<img src=" url " />

3.link-visited-hover-active

4.display: inline

5.text/css???

-100px 0 0 -100px

（三）簡答題

1．答：網(wǎng)站重構(gòu)是把“未采用CSS，大量使用HTML進(jìn)行定位、布局，或者雖然已經(jīng)采用CSS，但是未遵循HTML結(jié)構(gòu)化標(biāo)準(zhǔn)的站點“變成”讓標(biāo)記回歸標(biāo)記的原本意義。通過在HTML文檔中使用結(jié)構(gòu)化的標(biāo)記以及用CSS控制頁面表現(xiàn)，使頁面的實際內(nèi)容與它們呈現(xiàn)的格式相分離的站點。”的過程就是網(wǎng)站重構(gòu)(WebsiteReconstruction)。

優(yōu)點:

（1）使頁面加載得更快速；

（2）降低帶寬帶來的費用：節(jié)約成本；

（3）讓你在修改設(shè)計時更有效率而代價更低；

（4）幫助你的整個站點保持視覺的一致性；

（5）更利于搜索引擎的檢索（符合SEO的規(guī)范）；

（6）令站點更容易被各種瀏覽器和用戶訪問（包括手機(jī)、PDA和殘障人士使用的文字瀏覽器）；

（7）兼容不容忽視的Mozilla

系瀏覽器（Firefox

份額）。

2．答：CSS盒子模式是CSS的基石之一，它指定元素如何顯示以及（在某種程度上）如何相互交互。頁面上的每個元素被看做一個矩形框，這個框由元素的內(nèi)容(content)、填充(padding)、邊框(border)和空白邊(margin)組成，填充出現(xiàn)在內(nèi)容區(qū)域的周圍。如果在元素上添加背景，那么背景會應(yīng)用于由內(nèi)容和填充組成的區(qū)域。因此，常常使用填充在內(nèi)容周圍創(chuàng)建一個隔離帶，使內(nèi)容不會與背景混在一起。添加邊框會在填充的區(qū)域外邊加一條線。在邊框外邊是空白邊。空白邊是透明的。一般使用它控制元素之間的間隔。示意圖如下：

3．答：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml" lang="gb2312">

<head>

???

???

??????

table{width:300px;height:100px;border-collapse:collapse;}

???

</style>

<head>

<body>

???

??????

<tr>

??????????

??????????

??????????

??????

</tr>

??????

<tr>

??????????

??????

</tr>

??????

<tr>

??????????

??????????

??????????

??????

</tr>

???

</table>

</body>

</html>

4．答：(1)按照字面的意思，id是指一個元素在整個文檔中的“唯一標(biāo)志”，而class則是它所屬的“類別”。按照語法，同名的id在一個文檔里只應(yīng)該出現(xiàn)一次，而class名可重復(fù)使用。(2)屬性的優(yōu)先級問題：ID

的優(yōu)先級要高于class。(3)方便JS等客戶端腳本的引用，如果在頁面中要對某個對象進(jìn)行腳本操作，那么可以給他定義一個ID，否則只能利用遍歷頁面元素加上指定特定屬性來找到它，這是相對浪費時間資源，遠(yuǎn)遠(yuǎn)不如一個ID來得簡單與快捷。舉例如下：

　　.a1 {font-size:9pt;}

</style>

5.答：div是塊元素，span是內(nèi)嵌元素。內(nèi)聯(lián)元素只能容納文本或者其他內(nèi)聯(lián)元素，常見內(nèi)聯(lián)元素“a”，塊元素可以包容內(nèi)聯(lián)元素或者其他塊元素。塊元素和內(nèi)聯(lián)元素的基本差異是塊元素一般都從新行開始。而當(dāng)加入了css控制以后，即給塊元素定義display:inline，塊元素就成了內(nèi)嵌元素，同樣地，給內(nèi)嵌元素定義了display:block就成了塊元素了。

二、提升題

答：方法一：<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

???

???

??????

.a1{float:left;width:100px;height:60px;border:#000solid 1px;}

??????

.a2{float:left;margin:10px 0px0px;width:100px;height:100px;border:#000 solid 1px;}

??????

.a3{float:right;width:60px;height:172px;border:#000solid 1px;}

??????

.a4{width:174px;height:174px; }

???

</style>

<head>

<body>

???

??????

??????

??????

???

</div>

</body>

</html>

方法二：<head>

???

???

??????

.a1{float:left;width:100px;height:60px;border:#000solid 1px;}

??????

.a2{float:left;margin:-100px 0px0px;width:100px;height:100px;border:#000 solid 1px;}

??????

.a3{float:left;margin:0px 0px 0px10px;width:60px;height:172px;border:#000 solid 1px;}

??????

.a4{width:174px;height:174px;}

???

</style>

<head>

<body>

???

??????

??????

??????

???

</div>

</body>

方法三：<head>

???

???

??????

.a1{float:left;width:100px;height:60px;border:#000solid 1px;}

??????

.a2{float:left;margin:10px 0px0px;width:100px;height:100px;border:#000 solid 1px;}

??????

.a3{float:left;margin:-62px 0px 0px10px;width:60px;height:172px;border:#000 solid 1px;}

??????

.a4{width:174px;height:174px;}

???

</style>

<head>

<body>

???

??????

??????

??????

???

</div>

</body>

方法四：<head>

???

???

??????

.a1{float:right;width:100px;height:60px;border:#000solid 1px;}

??????

.a2{float:right;margin:10px 0px0px;width:100px;height:100px;border:#000 solid 1px;}

??????

.a3{float:right;margin:0px 0px 0px10px;width:60px;height:172px;border:#000 solid 1px;}

??????

.a4{width:174px;height:174px;}

???

</style>

<head>

<body>

???

??????

??????

??????

???

</div>

</body>

源文檔 <http://www.cnblogs.com/longzhiyi/archive/2009/10/06/1578412.html>

轉(zhuǎn)載于:https://www.cnblogs.com/xuq22/archive/2011/05/28/3769361.html

總結(jié)

以上是生活随笔為你收集整理的web前端试题和答案的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。