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代码，实现一个层垂直居中于浏览器中。
<style type="
">
<!—
div{
position:absolute;
top:50%;
left:50%;
margin:
;
width:200px;
height:200px;
border:1px solid red;
}
-->
</style>
这里使用百分比绝对定位，与外补丁负值的方法。
（三）简答题（60分）
1.
解释什么是网站重构，符合w3c布局与传统table相比有哪些优点。（10分）
2.
简述你对css盒子模式（框模型）的理解。（10分）
3.
用html实现如下表格(不可嵌套实用表格)（10分）
4.
请简述class属性的特点和用法及与id属性的区别，并写出一个具有class属性的例子（要求：指定div元素中样式类为a1,字体大小为9pt
的css样式）。（15分）
5.
简述SPAN元素和DIV元素的区别与用法。（15分）
二、提升题（15分）
运用HTML和CSS对下面样式布局（至少三种方法）,写出代码。
--------------------------------
| |
_____
| |
--------------------------------
答案
答案
一、基础题
（一）判断题
1.×
2.√
3.
√
4.
√
5.
×
（二）填空题
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>
<title>实验</title>
<style type="text/css">
table{width:300px;height:100px;border-collapse:collapse;}
</style>
<head>
<body>
<table border="1">
<tr>
<th rowspan="2"></th>
<th></th>
<th></th>
</tr>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
4．答：(1)按照字面的意思，id是指一个元素在整个文档中的“唯一标志”，而class则是它所属的“类别”。按照语法，同名的id在一个文档里只应该出现一次，而class名可重复使用。(2)属性的优先级问题：ID
的优先级要高于class。(3)方便JS等客户端脚本的引用，如果在页面中要对某个对象进行脚本操作，那么可以给他定义一个ID，否则只能利用遍历页面元素加上指定特定属性来找到它，这是相对浪费时间资源，远远不如一个ID来得简单与快捷。举例如下：
<style type=text/css>
.a1 {font-size:9pt;}
</style>
<div class=a1>...</div>
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">
<html xmlns="http://www.w3.org/1999/xhtml"lang="gb2312">
<head>
<title>实验</title>
<style type="text/css">
.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 class="a4">
<div class="a3"></div>
<div class="a1"></div>
<div class="a2"></div>
</div>
</body>
</html>
方法二：<head>
<title>实验</title>
<style type="text/css">
.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 class="a4">
<div class="a1"></div>
<div class="a3"></div>
<div class="a2"></div>
</div>
</body>
方法三：<head>
<title>实验</title>
<style type="text/css">
.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 class="a4">
<div class="a1"></div>
<div class="a2"></div>
<div class="a3"></div>
</div>
</body>
方法四：<head>
<title>实验</title>
<style type="text/css">
.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 class="a4">
<div class="a3"></div>
<div class="a1"></div>
<div class="a2"></div>
</div>
</body>
源文档 <http://www.cnblogs.com/longzhiyi/archive/2009/10/06/1578412.html>
