《Web前端开发技术（HTML+CSS+JavaScript）》题库附答
案
1. 什么是Web技术？
答：Web即全球⼴域⽹（World Wide Web），也称为万维⽹，它是⼀种基于超⽂本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。它是建⽴在Internet上的⼀种⽹络服务，为浏览者在Internet上查和浏览信息提供了图形化的、易于访问的直观界⾯，其中的⽂档及超链接将Internet上的信息节点组织成⼀个互为关联a的⽹状结构。
1. 什么是Web前端？
答：Web前端是指基于Web（现在⼀般指动态页⾯技术）的客户端软件，也就是通常说的在浏览器端运⾏的⽹页程序。Web前端降低了应⽤软件部署的难度，减少了更新操作，只需对服务器⼀端的软件更新即可完成所有⽤户需要的更新，且现在的动态页⾯技术基本可以实现所有的传统C/S客户端的功能。
1. 什么是Web项⽬？Web项⽬包含哪些内容？Web前端开发技术有哪些？
答：（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．<html> <head>…</head> <frame>…</frame> </html>
B．<html> <title>…</title> <body>…</body> </html>
html注释方法有几种
C．<html> <title>…</title> <frame>…</frame> </html>
D．<html> <head>…</head> <body>…</body> </html>
2．创建最⼩的标题⽂本标签是（  D ）。
A．<pre></pre> B．<h1></h1> C．<h6></h6> D．<b></b>
3．HTML中，设置背景颜⾊的代码是（  A  ）。
A．<body bgcolor=?> B．<body text=?> C．<body link=?> D．<body vlink=?>
4．在HTML中，下⾯是段落标签的是（  D ）。
A．<html>…</html>    B．<head>…</head>
C．<body>…</body>  D．<p>…</p>
5．HTML⽂件中的图⽚标记是（ B  ）。
A．<a> B．<img> C．<link> D．<picture>
6．HTML⽂本显⽰状态代码中，<SUP></SUP>表⽰（  A  ）。
A．⽂本加注下标线 B．⽂本加注上标线
C．⽂本闪烁 D．⽂本或图⽚居中
7．创建⼀个位于⽂档内部位置的链接的代码是（  D  ）。
A．<a href="#NAME"></a> B．<a name="NAME"></a>
C．<a href="mailtEMAIL"></a> D．<a href="URL"></a>
8．HTML中，插⼊图像的HTML代码是<img src=" ">，其中src的含义是（ B  ）。
A．链接的地址 B．图像的路径
C．所插⼊图像的属性 D．以上都正确
9．设置围绕⼀个图像的边框的⼤⼩的标记是（ D  ）。
A．<img src="name" border=?></img> B．<img src="name" border=?>
C．<img src="name" height=?> D．<img src="name" bordersize=?>
10．设置⽔平线⾼度的HTML代码是（ B  ）。
A．<hr> B．<hr size=?> C．<hr width=?> D．<hr noshade>
11．HTML代码<a name="NAME"></a>表⽰（ C  ）。
A．创建⼀个超链接 B．创建⼀个⾃动发送电⼦邮件的链接
C．创建⼀个位于⽂档内部的链接点 D．创建⼀个指向位于⽂档内部的链接点
上机指导
1．使⽤Dreamweaver创建⼀个HTML⽂件，⽂件名为dangdangIndex.html，⽹页显⽰效果如图2-27所⽰。
图2-27  上机指导第1题⽹页显⽰效果
要求如下。
（1）“⾸页”“我的当当”“37类商品”三个按钮链接到本页即可。
（2）要求marquee属性从下到上，⾼度为100，⿏标移动⾄上边后停⽌，离开后继续移动。使⽤⽆序列表内容包括：衬衫全场满百返30元A券
当当⽹图书短信⽐价服务
发表评论，⽉⽉礼券等你拿
html留言板网页模板
雀巢矿泉⽔“开盖赢⼤礼”
当当有奖问答，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．<img src="url" border=?>B．<samp></samp>
C．<address></address>D．<frame noresize>
2．设置围绕表格的边框宽度的HTML代码是（  D  ）。
A．<table size=#>B．<table border=#>
C．<table bordersize=#>D．<tableborder=#>
3．在HTML代码中，给表格添加⾏的标记是（  A）。
A．<tr></tr>B．<td></td>C．<th></th>D．以上都正确
4．HTML代码<table width=# or%>表⽰（ B  ）。
A．设置表格单元格之间空间的⼤⼩
B．设置表格单元格边框与其内部内容之间空间的⼤⼩
C．设置表格的宽度——⽤绝对像素值或⽂档总宽度的百分⽐
D．设置表格单元格的⽔平对齐
5．表格标记的基本结构是（  C  ）。
A．<tr></tr>B．<br></br>C．<table></table>D．<bg></bg>
6．以下标记符中，⽤于设置表格标题的是（  B）。
html+css美食静态网页设计
A．<title>B．<caption>C．<head>D．<html>
7．定义表格常⽤的3个标签是（  ABC ）。
A．<table>B．<tr>C．<td>D．<tp>
8．两个属性（AD  ）可⽤于表格的合并单元格。
A．colspan B．trspan C．tdspan D．rowspan
9．<frameset cols=#>⽤来指定（ B  ）。
A．混合分框B．纵向分框C．横向分框D．任意分框
10．HTML中“<noframes></noframes>”的具体含义是（  A  ）。
A．⽆框架时的内容B．相关性C．基本视窗名称D．⽂件形态
11．定义框架要⽤到（  C ）标签。
A．<framework>B．<frameset>C．<frame>D．<framespace>
12．定义上下分割的框架⼤⼩的是（ A ）。
A．rows B．cols C．widths D．heights
上机指导
免费下载ppt模板网站书香伴我成长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．<input type="text" rows="4" cols="30" name="txtintrol">
B．<textarea rows="4" cols="30" name="txtintro">
bigdecimal原理C．<textarea rows="4" cols="30" name="txtintro"></textarea>
D．<textarea rows="30"cols="4" name="txtintro"></textarea>
3．HTML代码<select name="NAME"></select>表⽰（ D）。
A．创建表格 B．创建⼀个滚动菜单
C．设置每个表单项的内容 D．创建⼀个下拉菜单
4．HTML代码<input type=text name="foo" size=20>表⽰（ B）。
A．创建⼀个单选框 B．创建⼀个单⾏⽂本输⼊区域
C．创建⼀个提交按钮 D．创建⼀个使⽤图像的提交按钮
5．实现下拉列表框，要⽤到（B）标签。
A．<input> B．<select> C．<option> D．<radio>
上机指导
1．使⽤Dreamweaver创建⼀个HTML⽂件，⽂件名为clientMgrAdd.html，⽹页显⽰效果如图4-19所⽰。
图4-19  上机指导第1题⽹页效果
要求如下。
（1）要求使⽤表格进⾏布局。
（2）其中“民族”下拉框中的列表信息为：汉族、少数民族、其他。“政治⾯貌”下拉框中的列表信息为：中共党员、中共预备党员、共青团员、众、其他。“学历”下拉框中的列表信息为：⼩学、初中、⾼中、中专、⾼职、专科、本科、硕⼠研究⽣、博⼠研究⽣。“专业技术职称”下拉框中的列表信息为：⼯程专业技术⼈员 ⾼级⼯程师、⼯程专业技术⼈员 ⼯程师、⼯程专业技术⼈员 助理⼯程师、经济专业技术⼈员 ⾼级经济师、经济专业技术⼈员 经济师、经济专业技术⼈员 助理经济师、会计专业技术⼈员 ⾼级会计师、会计专业技术⼈员 会计师、会计专业技术⼈员 助理会计师、统计专业技术⼈员 ⾼级统计师、统计专业技术⼈员 统计师、统计专业技术⼈员 助理统计师、审计专业技术⼈员 ⾼级审计师、审计专业技术⼈员 审计师、审计专业技术⼈员 助理审计师、政⼯专业技术⼈员 助理政⼯师、政
⼯专业技术⼈员⾼级政⼯师、政⼯专业技术⼈员 政⼯师。“客户经理等级”下拉框中的列表信息为⾼级专家级客户经理、专家级客户经理、资深客户经理、⾼级客户经理、客户经理、客户经理助理、⽆。“业务线条”下拉框中的列表信息为：对公、对个⼈。download phpfans
（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．类选择器

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。