《Web前端技术》（张晓如诸峰）书后习题答案

佚名 · 0905

答案，技术

文件大小20.75 KB

文件格式docx

分享时间2025-01-08

更多此类文档

立即下载

还剩13页未读，继续阅读

本资源只提供10页预览，全部文档请下载后查看！喜欢就下载吧，查找使用更方便

立即下载

文本内容:

《前端技术》书后习题答案Web第章2

一、选择题1-5CCD AC6-10BCD AB11-12CB

二、填空题超文本标记语言浏览器12head body〉3meta http-equiv=refresh content=T4b strongsup5bgcolor background6face7ol ulli8img borderalt9get postpost get10type

三、简答题略第章3

一、选择题1-5ADABD6-10CDCCD

二、填空题层叠样式表1Cascading StyleSheeet内联样式内部样式外部样式23display visibility边框外边距4块级元素行内元素5

三、简答题略

四、设计分析题

1.stylebody{font-size:12px;font-style:normal;text-decoration:underline;color:#ff3300;}/style

2.htmlheadmeta charset=utf-8”/titlex/titlestylestyle*{box-sizing:border-box;body{font-family:Arial;padding:lOpx;background:#flflfl;/*头部标题*/.header{padding:30px;text-align:center;background:white;.header hl{font-size:50px;/*导航条*/.topnav{overflow:hidden;background-color:#333;/*导航条链接*/.topnav a{/*float:left;display:block;*/display:inline-block;color:#f2f2f2;text-align:center;padding:14px16px;text-decoration:none;/*链接颜色修改*/.topnav a:hover{background-color:#ddd;color:black;/*创建两列列/*Left column*/.leftcolumn{float:left;width:75%;/*右侧栏*/.rightcolumn{float:left;width:25%;background-color:#flflfl;padding-left:20px;/*图像部分*/.fakeimg{background-color:#aaa;width:100%;padding:20px;/*文章卡片效果*/.card{background-color:white;padding:20px;margin-top:20px;/*列后面清除浮动*/.row:after{content:display:table;clear:both;/*底部*/.footer{padding:20px;text-align:center;background:#ddd;margin-top:20px;/*响应式布局・屏幕尺寸小于800px时，两列布局改为上下布局*/@media screen and max-width:800px{.leftcolumn,.rightcolumn{width:100%;padding:0;/*响应式布局-屏幕尺寸小于时导航等布局改为上下布局*/400px@media screen and max-width:400px{.topnav a{float:none;width:100%;/style/headbodydiv class=header我的网页hl/hl重.置浏览器大小查看效果p/p/divdiv class=topnav链接a href=#”/aahrek1#1链接/a〉链接a href=#/a链接a href=#style=float:right”/a/divdiv class=rowdiv class=leftcolumndiv class=Hcard文章标题h2/h2年月日h52019417/h5div class=fakeimg style=height:200px;ffl/div一些文本…p/p一些文本…p/p/div〉div class=card文章标题h2/h2年月h52019417H/h5图片〉div class=fakeimg style=heightZOOpx;/div一些文本…p/p一些文本…p v/p/div/divdiv class=rightcolumndiv class=,,card关于我h2/h2图片div class=fakeimg style=height:100px;”/div关于我的一些信息p../p/divdiv class=card热门文章h3/h3二,,图片div classfakeimg”p/p/div图片〉div class=fakeimg”p/p/div图片〉/div class=fakeimgp/p div/divdiv class=card关注我h3/h3一些文本…p/p/div/div/divdiv class=footer底部区域h2/h2/div/body/html第章13

一、选择题1-8DCBABBDA

二、简答题略#div1{・匚background colo#ffc33c;border:2px solid#333;height:300px;width:300px;float:left;margin-right:25px;#div2{background-color:#ff33cc;border:2px solid#333;height:300px;width:300px;float:left;margin-left:25px;margin-right:25px;#div3{background-color:#ff33cc;border:2px solid#333;height:300px;width:300px;float:left;margin-left:25px;margin-right:25px;}/style/headbody左列vdiv id=div1”v/div右列div id=div2”1v/div右列div id=div3”2/div/body/html

3.htmlheadmeta charset=utf-8/titlex/titlestylediv{border:lpx redsolid;width:400px;height:200px;background-color:gray;color:white;a:link{color:#ffOOOO;text-decoration:none;a:visited{color:#OOffOO;a:hover{color:#ffOOff;a:active{color:#OOOOff;/style/headbodydiv〃欢迎访问我的个人网站a href=http:www.myweb.com”/a/div/body/html第章4

一、选择题1-4DBBD5-8CDDD

二、填空题选中子元素1:firstChild2border-radius border-top-left-radius3box-shadow x_offset blur4border-image border-image-repeat roundstretch线性渐变径向渐变56perspective

三、简答题略

四、设计分析题/*水平导航条*/

1.htmlheadmeta charset=utf-8水平导航条/titlestyleullist-style-type:none;margin:O;padding:O;overflow:hidden;lifloat:left;a:link,a:visiteddisplay:block;width:120px;font-weight:bold;color:#FFFFFF;background-color:#98bf21;text-align:center;padding:4px;text-decoration:none;a:hover,a:activebackground-color:#7A991A;/style/headbodyul二首页lixa href#home”新闻「lixa href=#news”/a/联系方式lixa href=#contact”/a/li关于我们lixa href=#about/a/li/ul/body/html/*垂直导航条:去除中的样式即可*/li floatdeft

2.htmlheadmeta charset=utf-8titlex/titlestylediv.img{border:lpx solid#ccc;div.img:hover{border:lpx solid#777;div.img img{width:100%;height:auto;div.desc{padding:15px;text-align:center;*{box-sizing:border-box;.responsive{padding:06px;float:left;width:

24.9%;@media onlyscreenandmax-width:800px{.responsive{width:

49.9%;margin:6px0;}@media onlyscreenandmax-width:400px{.responsive{width:100%;}/style/headbody响应式图片相册h2style=text-align:center”/h2div class=responsive”div class=imga target=_blank href=imgl.jpgHimg src=imgl.jpg alt=imgl/adiv class=desc imgl/div/div/divdiv class=responsivediv class=img二a target=”_blank”href img

2.jpgimg src=img

2.jpg alt=img2/adiv class=desc img2/div/div/divdiv class=responsive”div class=img atarget=_blank href=img

3.jpgimg src=img

3.jpg alt=img3/adiv class=desc img3/div/div/divdiv class=responsivediv class=img atarget=_blankH href=img

4.jpgimg src=img

4.jpg alt=img4/adiv class=desc img4/div/div/divdiv class=,clearfix/divdiv style=padding:6px;/div/body/html第章5

一、选择题1-5CACBC6-10BCBBA

二、填空题（）文档对象模型浏览器对象模型1（）分号2（）单行注释多行注释3（）标识符数字关键字4（）键值内置对象浏览器对象5

三、设计分析题

1.htmlbodyscriptvar sum=0;forvar i=l;i=1000;i++{sum+=i;间整数的和等于:document.write1~1000+sum;/script/body/html

2.htmlbodyscriptvar sum=0;forvar i=l;i1000;i+=2{sum+=i;以内奇数和等于:document.write1000+sum;/script/body/html第章6

一、选择题1-5BCCCC6-10DCACD

二、填空题文档对象模型1W3C2getAttribute setAttribute浏览器对象模型3window navigator绑定事件解除事件绑定45confirm prompt6\w\d

三、设计分析题

1.A[l-9]\d{5}18119|

[23]\d\d{2}0[l-9]|10111112[0-2][1-9]|10|20|30|31\d{3}[0-9Xx]$p id=ndemonx/p停止〈/〉button onclick=stop”buttonscript二var myVarsetIntervalmyTimer,1000;function myTimer{var d=new Date;var t=d.toLocaleTimeStringO;document.getElementByIdndemon.innerHTML=t;function stop{cl earintervalmyVar;}/script第章7

一、选择题1-7ADCBACC

二、填空题1lang zh-CN en2charset gbk3header navsection4summary details5progress meter6contenteditable hiddendragable7\w\d

三、简单题略第章8

一、选择题1-5CBCBC6-10D BAC D

二、填空题1canvas svg2screenX screenY3getContext4createLinearGradient createRadialGradient矢量可缩放的矢量图形5

三、简单题略第章9

一、选择题1-6CBCCDA

二、填空题1audio video2autoplay3mp4ogg webm有损4OGG Vorbis5Web AudioAPI6preload poster第章10

一、选择题1-5CABAB6-10BDCBA

二、填空题1multiple FileList2name sizeMIME lastModified3readAsText readAsBinaryString4dragable键值对5JSON6sessionstorage localstorage

三、简单题略第章11

一、选择题1-7BADCBDB