Web前端开发案例教程（HTML5CSS3）（微课版）（第2版）-习题及答案习题1一、单项选择题HTML的中文意思是A）文件传输协议C）超文本标记语言HTTP的中文意思是A）文件传输协议C）超文本标记语言（C）。B）超文本传输协议D）统一资源定位符（B）oB）超文本传输协议D）统一资源定位符下面的应用软件中，不可以用于网页制作的是（D）。A)SublimeTextB)HBuilderXC)DreamweaverD)3dsMaxA)SublimeTextB)HBuilderXC)DreamweaverD)3dsMax二、判断题使用Chrome浏览器浏览网页时，在网页的任意空白处右击，选择“查看网页源代码”选项可以查看网页的HTML代码。（，）HTTP是由SSL+HTTP构建的、可进行身份认证的加密传输协议，比HTTPS安全。（x）HTML5可以跨平台使用，具有良好的移植性。（，）Web标准并不是某一个标准，而是一系列标准的集合，主要包括结构、表现和行为标准。（，）一个项目只能有一个网页文件。（x）习题2一、单项选择题.网页的主体内容写在哪个标记内部？(A)A)
B)C)
D).以下标记中，用于设置页面标题的是(A)。A)
B)<caption>C)<head>D)<html>.用HTML5编写一个简单的网页时，网页最基本的结构是(D)。<html><head>...</head><frame>...</frame></html><html><title>......
.............可以不用发布就能在本地计算机上浏览的页面的编写语言是(B)oA)ASPB)HTMLC)PHPD)JSP.以下标记中，没有对应的结束标记的是(B)。A)B)
C)D)
A)<header>B)<nav>C)<aritcle>D)<section>HTML5中的哪个标记用来定义当前页面附属信息部分？(C)A)<hcader>B)<nav>C)<asidc>D)<section>HTML5中的哪个标记用于对网站或应用程序中页面上的内容进行分块？(D)A)<header>B)<nav>C)<aside>D)<section>二、判断题.一个HTML页面可以包含多个<nav>标记，作为页面整体或不同部分的导航。(/).在HTML5中,〈article)标记通常使用多个〈section>标记进行划分。(/).在HTML5中，一个页面中〈article)标记只能出现一次。(*).在HTML5中，没有标题的内容区块不要使用〈section》标记定义。(/).在HTML5中，一个〈section》标记通常由标题和内容组成。(/).在HTML5中，可以在〈article》标记或者〈section》标记中添加〈footer》标记。(/).一个HTML5页面可以包含多个(footer)标记。(/)习题10一、单项选择题.transition-timing-function属性规定过渡效果的速度曲线，其默认值为(A)oA)easeB)linearC)ease-inD)ease-out.在3D变形中，指定元素仅围绕x轴旋转的函数是(A)。A)rotateXOB)rotateY0C)rotateZOD)rotate3d()3.用于定义动画开始前将会延迟2s,然后才开始执行的代码是(A)。A)animation-duration：2s；B)animation-timing-function：2s；C)animation-delay：2s；D)animation-direction：2s；4.设定动画在奇数次数正常播放，在偶数次数逆向播放的代码为(A)0A)animation-direction：alternate；B)animation-direction：normal；C)animation-direction：true；D)animation-direction：false；5.下列选项中，用于定义动画效果需要播放3次的代码是(D)。A)animation：3；B)animation-timing-function：3；C)animation-delay：3；D)animation-iteration-count：3；6.认真阅读下列代码，并按要求作答。animation-name:mymove；/*定义动画名称*/animation-duration：5s；/*定义动画时间*/animation-timing-function：linear；/*定义动画速度曲线*/animation-delay：2s；/*定义动画延迟时间*/animation-iteration-count：3；/*定义动画的播放次数*/</p>
<p>animation-direction：alternate；/*定义动画播放的方向*/animation属性是一个复合属性，下列选项中，可以同时设置上述属性的代码为(D)。A)animation：B)animation：C)animation：D)animation：二、判断题mymove32slinear5salternate；mymovelinear2s5s3alternate；mymove2slinear5s3alternate；mymove5s1inear2s3alternate；1.CSS3变形是一系列效果的集合，如平移、旋转、缩放和倾斜等，每个效果都被称作变形效果。（/）2.在3D变形中，可以让元素围绕x轴、y轴、z轴旋转。（/）.〈title)和〈/title)标记必须包含在下述哪对标记中？(C)A)<body>和</body>B)〈table〉和〈/table〉C)<110公>和</1104(1>D)3>和<々>.请选择能产生粗体字的HTML标记。(C)A)<bold>B)<bb>C)<strong>D)<bld>.在下列HTML标记中，哪个可以插入换行？(A)A)<br>B)<enter>C)<break>D)<b>.在下列的HTML标记中，哪个是最大的标题？(D)A)<h6>B)<h5>C)<h2>D)<hl>.用于标识一个段落的HTML标记是(C)0A)<b>和</b>B)<br>和</br>C)<p>和</p>D)<li>和</li>.在下列的HTML代码中，哪个可以插入图像？(C)A)<imghref="image,gif"alt=nH>B)<imagesrc=wimage,gifNalt=HH>C)<imgsrc=wimage,gif"alt=H,r>D)<img>image.gif</img>.建立超链接时，要在新窗口显示网页，需要加入的标记属性是(A)。A)target=,,_blankMB)border="l"C)name="target"D)#.包含图像的网页文件，其扩展名应该是(D)0A).jpgB).gifC).picD).html.最常用的网页图像格式有(C)oA)GIF、TIFFB)TIFF、JPGC)GIF、JPGD)TIFF、PNG.在网页中，必须使用哪个标记来设置超链接？(A)A)<a>...</a>B)<p>...</p>C)<link>...</link>D)<li>...</li>.下列路径中属于绝对路径的是(C)。A)address,htmB)staff/telephone.htmC)D)/Xuesheng/chengji/mingci.htm二、判断题.网页文件是用一种标记语言书写的，这种语言被称为HTML(HyperTextMarkupLanguage,超文本标记语言)，制作一个网站就等于制作一个网页。(乂).网站的首页文件通常是"index,htmlindex,htm”“Default,htm"Default,html",它必须存放在网站的根目录中。(9).HTML5标记是不区分大小写的，但通常用小写。(/).如果文本需要换行，则可以使用换行标记<br>°(/).<hr>标记可以在网页中生成一条水平线，它不需要结束标记。(/).标题标记<hl>〜<h6>都有换行的功能。(/).关于网页中图片的大小，可以在HTML5代码中直接指定其宽、高，但最好在图像处理软件中事先处理好图像的大小。(/).JPG格式能提供良好的、损失极少的压缩，这种格式可以用于制作透明和多帧的动画。(x).书写图片路径时，尽量使用绝对路径，因为这样更稳定简洁。(x).在网页中需要插入图片的相对路径时,用于指定上一级文件夹。(/).在超链接中，如果暂时没有确定链接目标，则通常将＜a＞标记的href属性值定义为(x).在HTML5中，通过点击锚点链接，用户能够快速定位到目标内容。(/).在图像常用格式中，GIF格式只能处理256种颜色。(.在标记的嵌套过程中，必须先结束最靠近内容的标记，再按照由内及外的顺序依次关闭标记。(/).PNG格式是一种支持透明的图像格式。(，).如果不给＜inig＞标记设置宽和高，图片就会按照它的原始尺寸显示。(，)习题3一、单项选择题.如何为所有的＜hl＞元素添加背景颜色？(B)A)hl.all{background-color：ttFFFFFF}B)hl{background-color：#FFFFFF}C)all.hl(background-color：#FFFFFF}D)hl.{background-color：#FFFFFF}.外部样式表的最大优势在于(A)oA)CSS代码与HTML代码完全分离B)CSS代码写在＜head＞与＜/head》之间C)直接对HTML的标签使用style属性D)采用import方式导入样式表.下面不属于CSS样式的引入方式的是(A)。A)索引式B)行内样式C)内部样式表D)外部样式表.在HTML文档中，引用外部样式表的正确位置是(DA)文档的末尾B)文档的顶部C)＜body＞部分D)＜head＞部分.下列哪个选项的CSS语法是正确的？(C)A)body：color=blackB){body:color=black(body)C)body{color：black}D){body；color：black}.下列哪个CSS属性可控制字号？(A)A)font-sizeB)text-styleC)font-styleD)text-size.在以下的CSS代码中，可使所有＜p＞元素变为粗体的正确语法是(C)oA)＜pstyle="font-size：bold"〉B)＜pstyle="text-size：bold")C)p{font-weight：bold}D)p{text-size：bold}.以下哪个选项可以改变元素的字体？(C)A)font=B)f：C)font-family：D)font.以下哪个选项可以使文本变为粗体？(B)A)font：bB)font-weight：boldC)style：boldD)b.下面说法错误的是(D)oCSS样式可以将格式和结构分离CSS样式可以控制页面的布局CSS样式可以使许多网页同时更新CSS样式不能制作文件更小、下载更快的网页.在以下的HTML中，哪个是正确引用外部样式表的方法？（B）<stylesrc=Mmystyle.cssN><linkrel="stylesheetHtype="text/css"href=,,mystyle.css"><stylesheet>m）^style.css</stylesheet>ColorfulStyleSheets.不属于CSS选择器的是（A）0A）对象选择器B）超文本标记选择器C）ID选择器D）类选择器.CSS的中文译名为（D）oA）样式表B）样式表标签语言C）瀑布样式表D）层叠样式表.要在网页中插入样式表main,css,以下用法中，正确的是（B）。<linkhref="main,css"type=Htext/cssHrel="stylesheet”〉<linksrc=Nmain.cssntype="text/css"rel=Mstylesheetw><1inkhref="main,css"type=Mtext/cssM><Includehref="main,css"type=°text/csswrel=wstylesheet">.下列选项中，属于并集选择器书写方式的是（C）oA）hlp{}B）hl_p{）C）hl,p{}D）hl-p{}.页面上的<div>标记,其HTML代码为<divid="box"class="red">文字</div>,为其设置CSS样式如下：#box{color：blue；}.red{color：red；}。那么，文字的颜色将显示为（B）oA）红色B）蓝色C）黑色D）白色.设置文字的大小为14px,文字加粗，行高为28px,字体是微软雅黑，斜体，以下书写正确的是（D）。font：14px”微软雅黑”28px600italicfont："微软雅黑"14px/28px600italicfont：14px/28px600"微软雅黑"italicfont：600italic14px/28px"微软雅黑"二、判断题.在编写CSS代码时，为了提高代码的可读性，通常需要加CSS注释语句。（/）.内部样式表是指将CSS代码集中写在HTML文档的<head>头部标记中,并且用〈style〉标记定义。（/）.内部样式表的样式对网站中的所有HTML页面都有效。（x）.外部样式表是使用频率最高，也是最实用的样式表之一，它将HTML代码与CSS代码分离为两个或多个文件，实现了结构和表现的完全分离。（/）.通配符选择器用号表示，能匹配页面中的所有元素。（/）.在<head>中使用标记可引用外部样式表文件，一个页面只允许使用一个Qink>标记引入外部样式表文件。（x）.RGBA是CSS3新增的颜色模式，它是RGB颜色模式的延伸，该模式在红、绿、蓝三原色的基础上添加了不透明度参数。（/）.ID选择器使用进行标识，后面紧跟ID名称。（/）.通配符选择器设置的样式对所有的HTML标记都生效，不管标记是否需要该样式，这样反而降低了代码的执行速度。（/）习题4一、单项选择题1.如何显示这样一个边框：上边框为10px,下边框为5px,左边框为20px,右边框为1px?(D)A)border-width：10px5px20pxIpxB)border-width：lOpx20px5pxIpxC)border-width：5px20pxlOpxIpxD)border-width：lOpxIpx5px20px.使用什么属性可以设置元素的左外边距？(D)A)text-indentB)indentC)marginD)margin-left.下列CSS属性中不用于设置背景图像样式的是(B)0A)background-imageB)background-beginC)background-repeatD)background-size4.要实现背景图像不重复，应该设置为(D)oA)background-repeat：repeatB)background-repeat：repeat-xC)background-repeat:repcat-yD)background-repeat:no-repeat5.在CSS中，设置背景图像的标记是(A)0A)backgroundB)background-imageC)background-colorD)bkground.下列选项中，用于更改元素左内边距的是(B)0A)text-indentB)padding-leftC)margin-leftD)padding-right.下列选项中，哪个不能设置边框为3Px的红色实线？(D)A)border：3pxsolid#F00；B)border：#F00solid3px；C)border：redsolid3px；D)border：#0F03pxsolid；8.关于样式代码box{width：200px；padding：15px；margin：20px；}下列说法正确的是(B)oA).box的总宽度为200PxB).box的总宽度为270PxC).box的总宽度为235PxD)以上说法均错误9.一个盒子的宽度和高度均为300px,左内边距为30px,同时盒子有3Px的边框，请问这个盒子的总宽度是多少？(C)A)333pxB)366pxC)336pxD)363px10.设置背景颜色为green,背景图片垂直居中显示，背景图片充满整个区域,但是背景图片不能变形，图片只出现一次，以下代码正确的是(A)obackground：urlC../img/imgl.jpg")no-repeatcenter/covergreen；background：url("../img/imgl.jpg")repeatcenter/covergreen；url/img/imgl.jpg")no-repeatcenter/100%green；url(w../img/imgl.jpgw)no-repeatcenter/100%100%green；二、判断题.在CSS背景综合属性中，既可以定义背景图片，也可以定义背景颜色。（/）.在CSS中，border属性是一个复/合属性。（）.在CSS3中，box-shadow属性不设置“阴影类型”参数时默认为“内阴影二（x）.一个div的高度为200px,内边距为10px,边框为Ipx,那么它的总高度为222pxo（/）.默认情况下，背景图像会自动向水平和竖直两个方向平铺。（/）.opacity属性用于定义元素的不透明度，参数opacityValue表示不透明度的值，它是一个0〜1的浮点数值。（/）.＜div＞与＜/div＞之间相当于一个容器，可以容纳段落、标题、图像等各种网页元素。（/）习题5一、单项选择题.去掉无序列表的项目符号使用的属性是（A）。A）1ist-style：noneB）list-type：noneC）list-rel：noneD）list-href：none.用于设置鼠标指针悬停时超链接样式的是（C）。A）a：linkB）a：visitedC）a：hoverD）a：active.下列样式代码中，可以将块元素转换为行内元素的是（D）。A）display：none；B）display：block；C）display：inline-block；D）display：inline；.HTML5中下面哪个元素可替代＜d可id="nav"X/div＞标记来定义导航条？（A）A）navB）headerC）asideD）footer.＜span＞标记是网页布局中常见的标记，其元素类型为（BA）块级元素B）行内元素C）行内块元素D）浮动元素.在CSS中，使用什么属性来定义元素的类型？（C）A）margin属性B）padding属性C）display属性D）font属性二、判断题宽度属性width和高度属性height对块元素无效。（x）a是一个行内元素。（/）div是一个行内元素，span是块元素。（*）习题6一、单项选择题position属性用于定义元素的定位类型，下列选项中不属于position属性常用属性取值的是（D）。A）staticB）relativeC）absoluteD）visible2.下列样式代码中，不能够设置元素定位类型的是（A）oA）position：auto；B）position：fixed；C）position：absolute；D）position：relative；3.下列样式代码中，可对元素进行绝对定位的是（B）。.special{position：relative；）.special{position：absolute；top：20px；left：16px；}.special{position：fixed；top：20px；left：16px；}.special{position：static；}二、判断题.当两个相邻的块元素水平排列时，如果左边的元素有右外边距margin-right,右边的元素有左外边距margin-left,则它们之间的水平外边距是两者之和。（/）.当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom,下面的元素有上外边距margin-top,则它们之间的垂直外边距不是两者之和，而是两者中的较大者。（/）.页面上定义的两个盒子都没有设置float属性时，盒子会水平排列。（x）.父元素包含的子元素设置浮动后，若父元素没有设置高度，则受子元素浮动的影响，父元素将不显示。（/）.绝对定位是指对元素依据浏览器窗口进行定位。（*）.在CSS中，可以通过position属性为元素设置浮动。（x）.z-index属性用于调整定位元素的层叠顺序。（/）.在静态定位状态下，无法通过坐标属性（top、bottom、left或right）改变元素的位置。（/）习题7一、单项选择题1.以下说法正确的是（D）。A）〈table）是表单标记B）<td>是表格行标记C）<tr>是表格列标记D）〈table>是表格标记2.在HTML中，设置围绕表格边框的宽度的HTML代码是（B）。A）<tablesize=#>B）<tableborder=#>C）<tablebordesize=#>D）tableborder=#>.定义表头单元格的HTML标记是（D）oA）<table>B）<td>C）<tr>D）<th>.合并多行单元格的HTML标记是（B）oA）<thcolspan=#>B）<throwspan=>C）<tdcolspan=#>D）<trrowspan=#>二、判断题.表格的列数，取决于一行中数据单元格的数量。（/）.colspan属性用来合并单元格的行。（x）.只需要设置border-collapse属性就可以显示表格边框。（又）.表格的结构标记是必须设置的。（/）.创建的表格在默认情况下是没有边框的。（/）习题8一、单项选择题.下面关于表单的叙述错误的是（D）。A）表单是用户与网站实现交互的重要手段B）表单可以收集用户的信息C）表单是网页上的一个特定区域D）表单是由一对（table〉标记组成的.要建立一个输入单行文字的文本框，下面代码正确的是（B）oA）<input>B）<inputtype="text"）C）<inputtype="radio"〉D）<inputtype="passwordH>.要建立一个密码框，〈input）标记的type属性的属性值应该等于（A）。A）passwordB）radioC）textD）image.要建立一对选择性别的单选按钮，下面关于它们的name值不正确的是（A）。A）name="boy",name="girl"B）name="boy",name="boy"C）name="girl",name="girl"D）name="sex”,name=wsexn.下面这段代码中，哪种颜色为加载页面后默认选中的颜色？（A）<fonn>红色〈inputtype="checkbox"checked="checked”〉黄色〈inputtype='fcheckboxn>蓝色（inputtype="checkbox"〉白色〈inputtype="checkbox"></form>A）红色B）黄色C）蓝色D）白色.关于下列代码片段分析正确的是（A）o<formname="form"action="register,hlml”method="post"〉</form>A）表单的名称是formB）表单的数据提交的位置是postC）表单提交的数据将会出现在地址栏中D）提交表单后，用户输入的数据会附加在URL之后.创建一个多行文本框所需的标记是（D）。A）<input>B）<select>C）<option>D）<textarea>.创建下拉列表，下面标记正确的是（C）0A）<select></select>B）<option></option>C)<</p>
</div>
<div class="pagIng">
<a href="/anyouwz/39022.html">网页制作项目流程泳道图</a>
<a href="/anyouwz/39024.html">李芳计算机网络基础课后答案（计算机网络基础李芳版答案）</a></div>
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
$(".zSubnav li").hover(function(){
$(this).stop().animate({top:"-10"},300)
},function(){
$(this).stop().animate({top:"0"},300)
})
});
$('.fonts a').click(function (){
$('.fonts a').removeClass('active');
$(this).addClass('active');
switch( $(this).index() ){
case 0:
$('.detailCont').css({fontSize:14});
return false;
case 1:
$('.detailCont').css({fontSize:15});
return false;
case 2:
$('.detailCont').css({fontSize:16});
return false;
}
});
</script>
<!-- 底部 -->
<div class="zFooter">
<div class="wrap1200 clearfix">
<div class="cont fl">
<h3>地址 · <span>ADDRESS</span></h3>
<p>地址：建邺区新城科技园嘉陵江东街18号2层</p>
<p>邮箱：309474043@qq.Com</p>
<a class="fukuan tr" href="/anyoucase/">点击查看更多案例</a>
</div>
<div class="tel fl">
<h3>联系 · <span>CALL TEL</span></h3>
<p class="p1">400-8793-956</p>
<p class="p2">售后专线：025-65016872</p>
<p>业务QQ:309474043 售后QQ:1850555641</p>
</div>
<div class="code fr"><img src="/img/wx.jpg"></div>
<div class="clearfix"></div>
<div class="box" style="line-height: 25px;">
<div class="hot fl" style="width: 40%;height: auto;">
<a href="http://www.anyouy.cn/" title="南京网站建设">南京网站建设</a><em>|</em><a href="http://www.anyouy.cn/" title="南京小程序开发">南京小程序开发</a><em>|</em><a href="http://www.anyouy.cn/" title="南京网站开发">南京网站开发</a>
</div>
<div> <p class="copy">©南京安优网络科技有限公司 版权所有 <a href="https://beian.miit.gov.cn" target="_blank">苏ICP备12071769号-4</a> <a href="/sitemap">网站地图</a></p>
</div>
</div>
<div class="clearfix"></div>
<div class="links">
<span>友情链接：</span>
<em>|</em>
<a href="http://www.ayxcx.cn/" title="南京小程序开发">南京小程序开发</a> |
</div>
</div>
</div>
<script src="/img/wow.min.js"></script>
<script>$(function(){new WOW().init();})</script>
<script type="text/javascript">
//导航
$(window).scroll(function(){
if($(window).scrollTop()>=100){
$(".zHeader").addClass("on");
}else{
$(".zHeader").removeClass("on");
}
})
//签约
jQuery(".zSigning").slide({titCell:".hd ul",mainCell:".bd ul",autoPage:true,effect:"leftLoop",autoPlay:true,vis:4,scroll:4});
//访问统计
window.onload = function() {
$.ajax({url:"/Api/Hitstall/index",});
}
</script>
<div class="tqfloat">
<ul>
<li class="hidden style1"><a class="tit" target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=309474043&site=qq&menu=yes">业务咨询</a></li>
<li class="hidden style1"><a class="tit" target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=309474043&site=qq&menu=yes">技术支持</a></li>
<li class="hidden style2"><p>联系电话</p><div class="tel">4008-793-956</div></li>
<li class="hidden style1"><a class="tit" target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=309474043&site=qq&menu=yes">投诉留言</a></li>
<li class="hidden gotop"><a class="tit" href="javascript:;"></a></li>
</ul>
</div>
<script type="text/javascript">
$(function(){
$(".tqfloat li.style2").hover(function(){
var _this = $(this);
_this.removeClass("hidden").stop().animate({left : - 184}, 400)
}, function(){
var _this = $(this);
_this.stop().animate({left : 0}, 400, function(){
_this.addClass("hidden")
})
})
$(".tqfloat li.style1").hover(function(){
$(this).removeClass("hidden").stop().animate({marginLeft : - 10}, 400)
}, function(){
var _this = $(this);
_this.stop().animate({marginLeft : 0}, 400, function(){
_this.addClass("hidden")
})
})
$(".gotop").click(function(){
$("html,body").stop().animate({scrollTop: "0"},600)
})
$(".subnav li").hover(function(){
$(this).stop().animate({top:"-10"},300)
},function(){
$(this).stop().animate({top:"0"},300)
})
});
</script>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?1c94697d8167ffaf76dd51252f3ad1a7";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<div class="jszx" style="display:none">
<div class="jxin"><img src="/img/xt_bg.jpg" alt="" /></div>
<div class="jszxdd">
<h1>零风险合作体验</h1>
<p>侧重以结果为服务导向，不满意退还所有费用，最大限度降低客户的合作风险<br>安优网络从不青睐于向客户虚夸我们的能力<br>如果量身定制的作品让您满意我们相信合作的基础会更加夯实。</p>
<p><a href="tel:400-8793-956">400-8793-956</a></p>
<span><a href="http://wpa.qq.com/msgrd?v=3&uin=309474043&site=qq&menu=yes" target="_blank">在线咨询</a></span><span><a href="javascript:vido(0)" class="jszx1">稍后再说</a></span> </div>
</div>
<script language="javascript">
setTimeout(function (){$(".jszx").show()},3000)//表示1000毫秒后执行第一次显示层
$(function(){
$(".jszx3,.jszx1").click(function(){
$(".jszx").hide();//点击关闭层
//每3000毫秒执行一次显示当前层
$(this).stop().fadeTo(955000, 1, function(){
$(".jszx").show();
});
});
});
</script>
</body>
</html>
