當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

web前端试题和答案

發布時間：2025/3/13 HTML 32 豆豆

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

一、基礎題

（一）判斷題（5分）

1．所有的HTML標記符都包括開始標記符和結束標記符。( ? ?1

)

2．良好的網站目錄結構有利于網站的開發與維護。( ? ?0

)

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

)

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

)

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

……}( ? ?0

)

（二）填空題（20分）

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

。title

標記符應位于? ?? ?? ?

標記符之間。

2．在網頁中插入圖像時,應使用語句? ?? ?? ???? ?? ?? ???。

3．超鏈接訪問過后hover樣式不出現，原因是被點擊訪問過的超鏈接樣式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,但IE解釋為20px,解決辦法是加上???????

?????

。

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

<!—

div{

position:absolute;

top:50%;

left:50%;

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

;

width:200px;

height:200px;

border:1px solid red;

}

-->

</style>

這里使用百分比絕對定位，與外補丁負值的方法。

（三）簡答題（60分）

解釋什么是網站重構，符合w3c布局與傳統table相比有哪些優點。（10分）

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

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

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

的css樣式）。（15分）

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

二、提升題（15分）

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

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

| ? ? ? ? |

_____???

| ? ? ? ? |

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

答案

一、基礎題

（一）判斷題

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．答：網站重構是把“未采用CSS，大量使用HTML進行定位、布局，或者雖然已經采用CSS，但是未遵循HTML結構化標準的站點“變成”讓標記回歸標記的原本意義。通過在HTML文檔中使用結構化的標記以及用CSS控制頁面表現，使頁面的實際內容與它們呈現的格式相分離的站點。”的過程就是網站重構(WebsiteReconstruction)。

優點:

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

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

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

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

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

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

（7）兼容不容忽視的Mozilla

系瀏覽器（Firefox

份額）。

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

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是指一個元素在整個文檔中的“唯一標志”，而class則是它所屬的“類別”。按照語法，同名的id在一個文檔里只應該出現一次，而class名可重復使用。(2)屬性的優先級問題：ID

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

　　.a1 {font-size:9pt;}

</style>

5.答：div是塊元素，span是內嵌元素。內聯元素只能容納文本或者其他內聯元素，常見內聯元素“a”，塊元素可以包容內聯元素或者其他塊元素。塊元素和內聯元素的基本差異是塊元素一般都從新行開始。而當加入了css控制以后，即給塊元素定義display:inline，塊元素就成了內嵌元素，同樣地，給內嵌元素定義了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>

轉載于:https://www.cnblogs.com/xuq22/archive/2011/05/28/3769361.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。