web前端试题和答案-白红宇

web前端试题和答案

阅读量：5276 次

发布时间：2019-06-14

本文共 4726 字，大约阅读时间需要 15 分钟。

一、基础题

（一）判断题（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分）

解释什么是网站重构，符合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" "">

<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" "">

<head>