《Web前端开发技术(HTML+CSS+JavaScript)》题库附答案

答：Web即全球广域网（World Wide Web），也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。它是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超链接将Internet上的信息节点组织成一个互为关联a的网状结构。

答：Web前端是指基于Web（现在一般指动态页面技术）的客户端软件，也就是通常说的在浏览器端运行的网页程序。Web前端降低了应用软件部署的难度，减少了更新操作，只需对服务器一端的软件更新即可完成所有用户需要的更新，且现在的动态页面技术基本可以实现所有的传统C/S客户端的功能。

答：（1）Web项目也可以称为Web工程或者Web应用程序。它是一种可以通过Web访问的应用程序。Web项目最大的一个好处就是用户很容易访问，用户只要安装了浏览器即可，不需要再安装其他软件。例如现在经常使用的门户网站（新浪、搜狐等）、电商网站（淘宝、京东等）、网上银行等都属于Web项目，用户通过浏览器就可以访问和使用它们。Web项目开发与建设是目前软件开发领域的三大方向之一。

（2）Web项目由两大部分组成，分别是Web客户端和Web服务器端。Web客户端的作用是组织和显示来自Web服务器端的信息，以及接收用户从界面上输入的信息并传递到Web服务器端；Web服务器端的作用是进行业务逻辑的处理和数据存储，并把处理后的结果反馈到Web客户端，供用户使用。

（3）基本的静态网页开发技术为HTML/CSS/JavaScript，图1-2所示为Web前端基础开发技术的基本情况。其中HTML的英文全称是Hyper Text Markup Language，中文全称是超文本标记语言，作用是在浏览器端组织和显示网页信息（文本、图片、视频等），属于网页的内容层。CSS英文全称是Cascading Style Sheets，中文全称是层叠样式表，作用是格式化网页的样式，如文本的字体、图片显示位置等，CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化，属于网页的样式层。JavaScript是客户端脚本语言，它使网页与用户之间产生动态交互效果，属于网页的行为层。

1.使用Adobe Dreamweaver CC 2017创建一个HTML文档，文档名为inspur.html，网页中显示文本信息“浪潮优派欢迎你”。

答：源码请参见“CHO1_LAB\inspur.html”。

1．用HTML标记语言编写一个简单的网页，网页最基本的结构是（ D ）。

A． … …

B． … …

C． … …

D． … …

2．创建最小的标题文本标签是（   D ）。

A． B． C． D．

3．HTML中，设置背景颜色的代码是（  A  ）。

A． B． C． D．

4．在HTML中，下面是段落标签的是（   D ）。

A．…    B．…

C．…   D．

…

5．HTML文件中的图片标记是（ B   ）。

A． B． C． D．

6．HTML文本显示状态代码中，表示（  A  ）。

A．文本加注下标线 B．文本加注上标线

C．文本闪烁 D．文本或图片居中

7．创建一个位于文档内部位置的链接的代码是（  D  ）。

A． B．

C． D．

8．HTML中，插入图像的HTML代码是，其中src的含义是（ B   ）。

A．链接的地址 B．图像的路径

C．所插入图像的属性 D．以上都正确

9．设置围绕一个图像的边框的大小的标记是（ D   ）。

A． B．

C． D．

10．设置水平线高度的HTML代码是（ B   ）。

  A． B． C． D．

11．HTML代码表示（ C   ）。

  A．创建一个超链接 B．创建一个自动发送电子邮件的链接

  C．创建一个位于文档内部的链接点 D．创建一个指向位于文档内部的链接点

1．使用Dreamweaver创建一个HTML文件，文件名为dangdangIndex.html，网页显示效果如图2-27所示。

图2-27  上机指导第1题网页显示效果

要求如下。

（1）“首页”“我的当当”“37类商品”三个按钮链接到本页即可。

（2）要求marquee属性从下到上，高度为100，鼠标移动至上边后停止，离开后继续移动。使用无序列表内容包括：

衬衫全场满百返30元A券

当当网图书短信比价服务

发表评论，月月礼券等你拿

雀巢矿泉水“开盖赢大礼”

当当有奖问答，69元抢购！

当当玩具让利狂潮抢购中

当当购物卡，送礼好选择

（3）网页中所有的图片信息，存在ch2\images目录中。

答：源码请参见“CH02_LAB\dangdangIndex.html”。

2．使用Dreamweaver创建一个HTML文件，文件名为workIndex.html，网页显示效果如图2-28所示。

图2-28  上机指导第2题网页显示效果

要求如下。

（1）单击“工作室简介”跳转到“工作室简介”位置。

（2）单击“设计作品”跳转到“设计作品”位置。

（3）单击“广告知识”跳转到“广告知识”位置。

（4）单击“E-mail站长”可以给自己的某一个qq邮箱发送邮件。

（5）“欢迎光临梦幻美术工作室！！”从右向左移动，并要求来回移动，当鼠标移动上去的时候停止，鼠标移开继续移动。

（6）广告知识下的链接都链接到本页即可。

（7）网页中所有的图片信息，存在目录ch2\images中。

答：源码请参见“CH02_LAB\workIndex.html”。

1．框架中“不可改变大小”的语法是（   D ）。

A． B．

C． D．

2．设置围绕表格的边框宽度的HTML代码是（  D  ）。

A． B．

C． D．

3．在HTML代码中，给表格添加行的标记是（  A  ）。

A． B． C． D．以上都正确

4．HTML代码表示（ B   ）。

A．设置表格单元格之间空间的大小

B．设置表格单元格边框与其内部内容之间空间的大小

C．设置表格的宽度——用绝对像素值或文档总宽度的百分比

D．设置表格单元格的水平对齐

5．表格标记的基本结构是（  C  ）。

A． B． C． D．

6．以下标记符中，用于设置表格标题的是（  B  ）。

A． B． C． D．

7．定义表格常用的3个标签是（   ABC ）。

A． B． C． D．

8．两个属性（  AD  ）可用于表格的合并单元格。

A．colspan B．trspan C．tdspan D．rowspan

9．用来指定（ B   ）。

A．混合分框 B．纵向分框 C．横向分框 D．任意分框

10．HTML中“”的具体含义是（  A  ）。

  A．无框架时的内容 B．相关性 C．基本视窗名称 D．文件形态

11．定义框架要用到（   C ）标签。

  A． B． C． D．

12．定义上下分割的框架大小的是（ A ）。

  A．rows B．cols C．widths D．heights

1．使用Dreamweaver创建一个HTML文件，文件名为NBAIndex.html，网页显示效果如图3-15所示。

图3-15  上机指导第1题网页效果

要求如下。

（1）要求使用表格元素。

（2）表格中第一行的背景图片，存在ch3\images目录中。

答：源码请参见“CH03_LAB\NBAIndex.html”

2．使用Dreamweaver创建一个HTML文件，文件名为NBAIndex.html，网页显示效果如图3-16所示。

图3-16  上机指导第2题网页效果

要求如下。

（1）要求使用表格元素。

（2）表格中第一行的背景图片，存在ch3\images目录中。

答：源码请参见“CH03_LAB\NBAIndex.html”。

1．下列关于表单的说法不正确的一项是（ B ）。

A．表单对象可以单独存在于网页表单之外

B．表单中包含各种表单对象，如文本域、列表框和按钮

C．表单就是表单对象

D．表单由两部分组成：一是描述表单的HTML源代码，二是用来处理用户表单域中输入的信息的服务器端应用程序客户端脚本

2．若要产生一个4行30列的多行文本域，以下方法中，正确的是（  C  ）。

A．

B．

C．

D．

3．HTML代码表示（ D ）。

A．创建表格 B．创建一个滚动菜单

C．设置每个表单项的内容 D．创建一个下拉菜单

4．HTML代码表示（ B ）。

A．创建一个单选框 B．创建一个单行文本输入区域

C．创建一个提交按钮 D．创建一个使用图像的提交按钮

5．实现下拉列表框，要用到（B）标签。

A． B． C． D．

1．使用Dreamweaver创建一个HTML文件，文件名为clientMgrAdd.html，网页显示效果如图4-19所示。

图4-19  上机指导第1题网页效果

要求如下。

（1）要求使用表格进行布局。

（2）其中“民族”下拉框中的列表信息为：汉族、少数民族、其他。“政治面貌”下拉框中的列表信息为：中共党员、中共预备党员、共青团员、群众、其他。“学历”下拉框中的列表信息为：小学、初中、高中、中专、高职、专科、本科、硕士研究生、博士研究生。“专业技术职称”下拉框中的列表信息为：工程专业技术人员 高级工程师、工程专业技术人员 工程师、工程专业技术人员 助理工程师、经济专业技术人员 高级经济师、经济专业技术人员 经济师、经济专业技术人员 助理经济师、会计专业技术人员 高级会计师、会计专业技术人员 会计师、会计专业技术人员 助理会计师、统计专业技术人员 高级统计师、统计专业技术人员 统计师、统计专业技术人员 助理统计师、审计专业技术人员 高级审计师、审计专业技术人员 审计师、审计专业技术人员 助理审计师、政工专业技术人员 助理政工师、政工专业技术人员 高级政工师、政工专业技术人员 政工师。“客户经理等级”下拉框中的列表信息为高级专家级客户经理、专家级客户经理、资深客户经理、高级客户经理、客户经理、客户经理助理、无。“业务线条”下拉框中的列表信息为：对公、对个人。

（3）界面的样式信息可以等学完CSS后再进行完善。

答：源码请参见“CH04_LAB\clientMgrAdd.html”。

2．请使用Dreamweaver创建一个HTML文件，文件名为studyMgrAdd.html，网页显示效果如图4-20所示。

图4-20  上机指导第2题网页效果

要求如下。

（1）使用表格进行布局。

（2）其中“资料类型”下拉框中的列表信息为：规章制度、学习培训材料、岗位资格考试教程、客户营销技巧。

（3）界面的样式信息可以等学完CSS后再进行完善。

答：源码请参见“CH04_LAB\studyMgrAdd.html”。

1．CSS的语法结构由三部分组成：选择器　、　属性　　、　值　。

2．添加CSS的3种方法为　内联样式 、　内部样式　、外部样式　。

3．常用的字体属性有font-size、font-family、font-style、font-weight、font-variant。

4．CSS中的选择器不包括（  A  ）。

A．超文本标记选择器 B．类选择器

C．标签选择器     D．ID选择器

5．若要在网页中插入样式表main.css，以下用法中，正确的是（ A  ）。

A．

B．

C．          

D．

6．样式表定义#title {color:red}表示（ B   ）。

A．网页中的标题是红色的

B．网页中某一个id为title的元素中的内容是红色的

C．网页中元素名为title的内容是红色的

D．以上任意一个都可以

7．CSS文本属性中，文本对齐属性的取值有（   BCDE ）。

A．auto   B．justify   C．center   D．right E．left

（1）对网页中“你好，欢迎使用CSS样式”文本内容应用字体属性，具体要求：字体为宋体，字体大小为36px，字体加粗。

答：源代码请参见“CH05_LAB \test01.html”。

（2）使用内联样式表，实现图5-34所示的页面效果。使用2个

标签包含相应的文本信息，要求设置如下样式：

① 第一段内容“内联样式表的应用”，宋体、字体大小为20px、字体颜色为蓝色、居中显示。

② 第二段内容“第一个样式表的使用……”，默认字体，字体大小为30px、加粗、居中显示。

 答：源代码请参见“CH05_LAB \ test02.html”。

（3）设计一个网页，其页面展示效果如图5-35所示，具体要求如下：

①“冬至的由来”使用标题，字体颜色为蓝色。

② 使用

标签标记两段文字，左对齐显示，行间距为15px。

③ 正文中所有“冬至”的文字，显示为蓝色字体。

答：源代码请参见“CH05_LAB\test03.html”。

1．网页布局的概念是把即将出现在网页中的所有元素进行　排版　。

2．盒模型由　外边距　、　内边距　、　内容　和　边框　组成。

3．盒子的定位方式有　静态定位、相对定位　、绝对定位和固定定位。

4．实现元素浮动的属性为float ，清除浮动可以使用 clear　属性。

5．CSS中盒子的padding属性包括的属性有（BCDE    ）。

A．填充 B．上填充 C．底填充

D．左填充 E．右填充

6．CSS中，下面不属于盒子模型属性的是（A   ）。

A．borderStyle B．margin C．padding   D．border

7．下列CSS规则中能够让图层div不显示的选项是（ B  ）。

A．div{display:block;} B．div{display:none;}

C．div{display:inline;} D．div{display:hidden;}

8．下列CSS规则中能让列表项水平排列的选项是（ A  ）。

A．li{float:left;}  B．li{float:none;}

C．li{float:middle;}   D．li{float:up;}

9．简述采用DIV+CSS技术进行页面布局的基本步骤。

答：DIV+CSS布局的步骤大致有4步：第一步在整体上对页面进行分块；第二步使用标签进行分块设计，清理标签的嵌套以及层叠关系；第三步对标签进行CSS定位；第四步在各个块中填充相应的内容。

1.通过CSS+DIV实现鲜花网站的设计，具体要求如下。

（1）网站布局，由三个组成，构建一行两列的网站页面。

（2）DIV1设置背景图片，使用table表格实现上方菜单导航。

（3）DIV2通过form表单+列表实现。

（4）DIV3实现图6-24所示的排列展示效果。

（5）背景图片位于image文件夹下。

答：源代码请参见“CH06_LAB \ test1\flowerShow.html”。

2．通过CSS+DIV实现个人主页（见图6-25）的设计具体要求如下。

（1）网站导航使用table（已用矩形框标示出来）完成，宽度为600px。

（2）网页布局：两列布局。

（3）背景图片位于image文件夹下。

答：源代码请参见“CH06_LAB\test2\personShow.html”。

1.CSS3遵循了___模块化___开发模式。

2.在CSS3中增加的设置元素不透明度的属性的是_opacity__。

3.CSS3中新增加的选择器分别是__关系选择器__、__属性选择器_和__伪类选择器___。

4.CSS3中设置边框圆角的属性是__border-radius__，设置文本阴影的属性是_text-shadow__。

5.CSS3中新增加的颜色模式有__RGBA__、___HSL___和__HSLA___。

6.在CSS3中，为某元素设置border-radius：20px 25px的圆角样式，其中20px作用在该元素的___上左边角__、__下右边角___，25px作用在该元素的___下左边角___、___上右边角___。

7.CSS3中，新增加的UI元素状态伪类选择器有__checked选择器___、___enabled选择器___和____disabled选择器______。

8.在CSS3中，text-overflow属性的取值可以为__clip__和__ ellipsis _____。

9.RGBA色彩模式的语法为rgba(r,g,b,a),其中a代表_透明度___，取值为__0~1__。

1.使用CSS3制作如图所示导航菜单

图7-24 CSS3制作导航菜单实现效果一

要求：1导航条设置圆角效果

      2 导航菜单选项之间设置分隔线（第一个选项前不设置，最后一个选项后不设置）

      3 当鼠标悬停到任意的菜单选项时，该菜单选项右下方出现紫色阴影效果，当鼠标移 开后，阴影效果消失，如图所示

图7-25 CSS3制作导航菜单实现效果二

答：源代码请参见“CH07_LAB\navigation.html”。

2.为下面代码添加CSS样式，实现如图所示效果。

中

秋

佳

节

图7-26 “中秋佳节”网页实现效果

要求:

1.class=”yue”的div元素，宽度为300px,高度为300px,背景为素材bg7-7.jpg，设置圆角实现月亮效果。

2.使用伪类选择器分别设置“中”、“秋”“佳”、“节”字体的位置以及阴影效果。

答：源代码请参见“CH07_LAB\goddess.html”。

一、选择题

1.以下代码运行后的结果是输出(  B )

var a=[1, 2, 3];

console.log(a.join());

A．123     B．1,2,3     C．1  2  3     D．[1,2,3]

2.在 JavaScript中，'1555’+3 的运行结果是(  C )

A．1558     B．1552     C．15553     D．1553

3.以下代码运行后弹出的结果是( B  )

var a = 888;

++a;

alert(a++);

A．888     B．889     C．890     D．891

4.关于变量的命名规则，下列说法正确的是（ ABCDE   ）

A．首字符必须是大写或小写的字母、下划线（_）或美元符（$）

B．除首字母的字符可以是字母、数字、下划线或美元符

C．变量名称不能是保留字

D．长度是任意的

E．区分大小写

5.下列哪一个表达式返回值为假（ B  ）

A．!(3=4)&&(5