web前端开发技术储久良第三版答案整理(上:1-9章)

web前端开发技术储久良第三版答案整理(下:附录模拟试卷)_诗和远方_弈心博客

web前端开发技术储久良第三版答案整理(中:10-17章)_诗和远方_弈心博客

web前端开发技术储久良第三版答案整理(上:1-9章)_诗和远方_弈心博客

P16-第1章 练习与实验答案

练习1

1. 选择题

(1) B (2) D (3) B (4) B (5) D (6) A

2. 填空题

(1) 标记、文本

(2) Tim Berners-Lee(蒂姆·伯纳斯·李)

(3) 查看

(4) NotePad、EditPlus、TextPad、TopStyle、UltraEdit等

(5) 超文本标记语言、统一资源定位符(器)、层叠样式表(级联样式表)、异步JavaScript和XML

(6) IE、Firefox、Chrome、opera、UCWEB等

3. 简答题

见教材。

实验1

P32-第2章 练习与实验答案

练习2
1.选择题
(1) B (2) D (3) A (4) B (5) A (6) B

2.填空题
(1) html、htm,index.html、default.html
(2) <html></html>
(3) 单、双,双,开始(首)、结束(尾)
(4) 头部(head)、主体(body)。Body、head
(5) 严格型(Strict)、过渡型(Transitional)、框架型(Frameset)、<!doctype html>

3.简答题
见教材。

实验2
1.代码 实验2-1演示

<!-- exp_2_1.html 实验2-1 -->
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>求知家园</title>  
 </head>
 <body text="blue" bgcolor="#99ffff">
  欢迎来到我们的求知家园!
  <hr size="5" color="#ff3333">
 </body>
</html>
2.代码 [实验2-2演示](/fragment/exp_2_2.html)
<!-- exp_2_2.html 实验2-2 -->
<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Google搜索</title>  
    </head>
    <body bgcolor="#ffff33">
        欢迎使用Google搜索!<br>
        <img src="google.png" width="275" height="95" border="0" alt="">
        <hr size="5" color="#0033ff">
    </body>
</html>

P46-第3章 练习与实验答案

练习3
1.选择题
(1) A (2) A (3) C (4) C (5) B (6) A (7)B (8)B (9)D (10)A
2.填空题
(1) body、title
(2) <html></html>
(3) <head></head>
(4) <body></body>
(5) <title></title>
(6) <strong ></strong><em></em>
(7)<ruby></ruby><rt></rt><rp></rp>
3.问答题
见教材。

实验3
1.代码 实验3-1演示

<!--exp_3_1.html 实验3-1-->
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
    <title>自荐信</title>
    </head>
    <body>
    <center>自荐信</center>
    <hr width="100%" size="1" color="#000fff">
    尊敬的领导:<br>
    &nbsp;&nbsp;&nbsp;&nbsp;您好!
    <p>&nbsp;&nbsp;&nbsp;&nbsp;感谢您在百忙之中启阅我的自荐材料!相信此刻的停留不会让您失望!</p>
    <p>&nbsp;&nbsp;&nbsp;&nbsp;我是计算机专业的本科毕业生。经过将近四年的大学学习和锻炼,与同龄人一样,我即将走上工作岗位,通过社会来证实自己的知识和能力。为了找到一份符合自己特长和兴趣的工作,更好地发挥自己的才能,实现自己的人生价值,我冒昧地写下这封信,希望能得到您的认可,能为贵公司服务。</p>
    &nbsp;&nbsp;&nbsp;&nbsp;此致<br>
    敬礼!<b></b><br>
    <hr width="100%" size="1" color="#00ffff">
    <center><address>联系E-mail:zhang@163.com</address></center>
    </body>
</html>

2.代码 实验3-2演示

<!-exp_3_2.html  -->
<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>数学方程式</title>
        <style type="text/css">
            h3{font-size:24px;color:red;text-align:center;}
        </style>
    </head>
    <body>
      <h3>数学方程式</h3>
      <hr color="blue" width="80%"  size="2">
    <center>
            2x<sup>2</sup>+3x=9<br>
            x<sub>1</sub>+x<sub>2</sub>=10
        </center>
    </body>
</html>

P57-第4章 练习与实验答案

练习4
1.选择题
(1) C (2) D (3) B (4) B (5) C (6) D
2.填空题
(1) 添加列表项值
(2) 无序列表、有序列表
(3) start、整形数值、value
3.问答题
见教材。

实验4
1.代码 实验4-1演示

<!--exp_4_1.html 实验4-1-->
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
        <title>windows不同版本</title>
    </head>
    <body>
        <ol type="1">
            <li>windows 95</li>
            <li>windows 98</li>
            <li>windows NT
                <ul type="disc">
                    <li>windows NT Workstation</li>
                    <li>windows NT Server</li>
                </ul>
            </li>
            <li>windows 2000
                <ul type="disc">
                    <li>windows 2000 Professional</li>
                    <li>windows 2000 Server</li>
                    <li>windows 2000 Advance Server</li>
                </ul>
            </li>
            <li>windows xp</li>
            <li>windows vista</li>
            <li>windows 7</li>
            <li>windows 8</li>
        </ol>
    </body>
</html>

2.代码 实验4-2演示

<!-- exp_4_2.html -->
<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>第四届中国大学出版社图书奖公示</title>
    </head>
    <body bgcolor="#ccffcc">
        <h2>第四届中国大学出版社图书奖公示</h2>
        <dl>
            <dt>优秀教材一等奖(68种)</dt>
                <dd>1.刑事诉讼法(第五版),陈光中主编,北京大学出版社</dd>
                <dd>2.普通化学原理(第4版),华彤文,王颖霞,卞江,陈景祖 编著,北京大学出版社</dd>
                <dd>3.音韻學教程(第四版),唐作藩著,北京大学出版社</dd>
                <dd>4.保险学(第5版),孙祁祥著,北京大学出版社</dd>
                <dd>...</dd>    
            <dt>优秀教材二等奖(119种)</dt>
                <dd>1.艺术欣赏教程(第2版),杨辛、谢孟 主编,北京大学出版社</dd>
                <dd>2.经济学基础(第6版),[美] 曼昆著,北京大学出版社</dd>
                <dd>3.创新管理:赢得持续竞争优势(第2版),陈劲著,北京大学出版社</dd>
                <dd>4.医学遗传学(第3版),傅松滨主编,北京大学医学出版    </dd>
                <dd>...</dd>    
        </dl>
    </body>
</html>

附文字素材:

第四届中国大学出版社图书奖公示
优秀教材一等奖(68种) 
1.刑事诉讼法(第五版),陈光中主编,北京大学出版社 
2.普通化学原理(第4版),华彤文,王颖霞,卞江,陈景祖 编著,北京大学出版社 
3.音韻學教程(第四版),唐作藩著,北京大学出版社 
4.保险学(第5版),孙祁祥著,北京大学出版社 
... 
优秀教材二等奖(119种) 
1.艺术欣赏教程(第2版),杨辛、谢孟 主编,北京大学出版社 
2.经济学基础(第6版),[美] 曼昆著,北京大学出版社 
3.创新管理:赢得持续竞争优势(第2版),陈劲著,北京大学出版社 
4.医学遗传学(第3版),傅松滨主编,北京大学医学出版 
... 

P70-第5章 练习与实验答案

练习5
1.选择题
(1) D (2) C (3) B (4) C (5) B (6) A (7)B

2.填空题
(1) href=“mailto:someone@mail.com”
(2) name、“#target1”
(3) 绝对路径、相对路径、根路径。相对、根路径,绝对。
(4) <a href="http://www.edu.cn" target="leftframe">中国教育网</a>
3.问答题
见教材。

实验5
1.代码 实验5-1演示

<!--exp_5_1.html 实验5-1-->
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
        <title>apple网站</title>
        <style type="text/css">
            ul{list-style-type:none;margin:0 auto;}
            li{float:left;padding:10px; }
            img{width:200px;height:150px;}
            hr{clear:both;}
        </style>
    </head>
    <body>
    <h2 align="center">apple网站</h2>
    <hr size="3" color="#66ff33">
    <ul>
        <li><a href="http://www.apple.com.cn/iphone/"><img src="ipadblank1.gif" ></a></li>
        <li><a href="http://www.apple.com.cn/iphone/"><img src="ipadblank2.gif"></a></li>
        <li><a href="http://www.apple.com.cn/macbook-pro/"><img src="ipadblank3.gif" ></a></li>
        <li><a href="http://www.apple.com.cn/supplierresponsibility/"><img src="ipadblank4.gif"></a></li>
    </ul>
   <hr size="3" color="#66ff33">
    </body>

2.代码 实验5-2演示

<!-- exp_5_2.html -->
<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">   
        <title>桂林山水风景图片</title>
        <style type="text/css">    
            img{width:100px;height:100px;border:0;}    
            h3{color:#ff0000;}
            ul{list-style-type:none;text-align:center;}
            li{display:inline;width:120px;line-height:30px;}
        </style>
    </head>
    <body>
        <h3 align="center" >桂林山水风景图片</h3> 
        <ul>
            <li><a href="image51.jpg" target="_top"><img src="image51.jpg" alt=""><br>桂林山水1<br></a></li>
            <li><a href="image52.jpg"><img src="image52.jpg" alt=""><br>桂林山水2<br></a></li>
            <li><a href="image53.jpg"><img src="image53.jpg" alt=""><br>桂林山水3<br></a></li>
            <li><a href="image54.jpg"><img src="image54.jpg" alt=""><br>桂林山水4<br></a></li>
        </ul>
    </body>
</html>

3.代码 实验5-3演示

<!-- exp_5_3.html -->
<!doctype html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>浮动框架应用</title>
        <style type="text/css">
            body{ text-align:center; }
            iframe{width:350px;height:250px;}
        </style>
    </head>
    <body>
        <h3>浮动框架中打开新页面</h3>
        <iframe src="http://www.pku.edu.cn" name="left"></iframe>
        <iframe src="http://www.seu.edu.cn" name="right"></iframe>
        <br>
        <a href="http://www.baidu.com" target="left">在左边浮动框架中打开百度</a>
        <a href="http://www.qq.com" target="right">在右边浮动框架中打开腾讯</a>
    </body>
</html>

P85-第6章 练习与实验答案

练习6
1.选择题
(1)D (2)A (3)D(4)B
2.填空题
(1)<img>、<embed></embed>,<marquee></marquee>
(2)border="0"
(3)矩形;圆形;多边形。
3.简答题
(1)设置滚动空白空间就是指滚动文字背景和它周围文字及图像之间的空白空间范围。默认情况下,滚动对象周围的文字或图像是与滚动背景紧密连接的,使用hspace和vspace可以设置它们之间的空白空间。
(2)<img src="cup.gif" width="64" height="128" alt="替换文本">
Width设置宽度 height设置高度 alt替换文本

实验6 实验6-1演示

1、源代码如下所示:
<!-- exp_6_1.html 实验6-1 -->
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
     <title>图像对齐方式应用</title>
  </head>
<body>
    <h2 align="center">图像对齐方式应用</h2>
    <hr color="#ff3366">
    <h3>未设置对齐方式的图像:</h3>
    <p> <img src ="eg_cute.gif">PNG,图像文件存储格式,其目的是试图(原来此处使用了"企图")替代GIF和TIFF文件格式,同时增加一些GIF文件格式所不具备的特性。</p>
    <h3>已设置对齐方式的图像:</h3>
    <p>PNG使用了从LZ77派生的一个非专利无失真式压缩算法(名为deflation)。<img src="eg_cute.gif" align="bottom">这个算法对图像里的直线进行预测然后存储颜色差值,这使得PNG经常能获得比原始图像甚至比GIF更大的压缩率。但也有一些软件不能使用适合的预测而造成过分臃肿的PNG文件。
 </p>
    <p>PNG使用了从LZ77派生的一个非专利无失真式压缩算法(名为deflation)。<img src ="eg_cute.gif" align="middle">这个算法对图像里的直线进行预测然后存储颜色差值,这使得PNG经常能获得比原始图像甚至比GIF更大的压缩率。但也有一些软件不能使用适合的预测而造成过分臃肿的PNG文件。  </p>
    <p> <img src ="eg_cute.gif" align="left">PNG使用了从LZ77派生的一个非专利无失真式压缩算法(名为deflation)。这个算法对图像里的直线进行预测然后存储颜色差值,这使得PNG经常能获得比原始图像甚至比GIF更大的压缩率。但也有一些软件不能使用适合的预测而造成过分臃肿的PNG文件。</p>
</body>
</html>

2.代码如下所示:

实验6-2演示

<!-- exp_6_2.html 实验6-2 -->
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title> 图像画廊 </title>
  <style type="text/css">
    img{width:100px;height:100px;border:2px #cc0066 ridge;}
    ul{list-style-type:none;}
    li{float:left;}
  </style>
 </head>
 <body>
 <h2 align="center">图像画廊</h2>
  <hr color="#00ff33" size="5">
  <marquee behavior="alternate">
  <ul>
    <li><img src="t1.jpg" width="390" height="259" border="0" alt=""></li>
    <li><img src="t2.jpg" width="400" height="300" border="0" alt=""></li>
    <li><img src="t3.jpg" width="390" height="293" border="0" alt=""></li>
    <li><img src="t4.jpg" width="400" height="253" border="0" alt=""></li>
    <li><img src="t5.jpg" width="400" height="164" border="0" alt=""></li>
  </ul>
  </marquee>
   <hr color="#00ff33" size="5">
 </body>
</html>

P106-第7章 练习与实验答案

练习7
1.选择题
(1) A (2) C (3) D (4) A (5) D (6) D
2.填空题
(1) id,class
(2) link,href;style,@import url(“外部样式文件名”);
(3) .css
3.问答题
见教材。

实验7
1.代码 实验7-1演示

<!-- exp_7_1.html -->
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
        <title>古诗排版</title>
        <style type="text/css">
            body{text-align:center;    }
            p{font-family:"隶书";    }
        </style>
    </head>
    <body>
        <h3>早发白帝城</h3>
        <h6>李白</h6>
        <p>朝辞白帝彩云间,
        <p style="font-size:150%;">千里江陵一日还。
        <p style="font-size:200%;">两岸猿声啼不住,
        <p style="font-size:250%;">轻舟已过万重山。
    </body>
</html>

2.代码 工程7-1演示

<!-- project_7_1.html -->
 <!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
         <title>Web前端开发工程师工作内容</title>
         <style type="text/css">
                  *{font-family:楷体;color:blue;}
          #li1{font:italic bold 24px 黑体;}
          .li2{background:#9999cc;letter-spacing:1px;}
          #li3{font-size:18px;color:red;}         
         </style>
     </head>
     <body>
         <h1>Web前端开发工程师工作内容</h1>
         <h3>web前端工程师在不同的公司,会有不同的职能,但称呼都是类似。</h3>
         <ul>
                        <li id="li1">做网站设计、网页界面开发</li>
                        <li class="li2">做网页界面开发</li>
                        <li id="li3">做网页界面开发、前台数据绑定和前台逻辑的处理</li>
                        <li style="color:#0000cc;background:#c0c0c0;font-family:隶书;">设计、开发、数据处理</li>                    
         </ul>
         </body>
 </html>

附:素材

Web前端开发工程师工作内容
web前端工程师在不同的公司,会有不同的职能,但称呼都是类似。
•    做网站设计、网页界面开发 
•    做网页界面开发 
•    做网页界面开发、前台数据绑定和前台逻辑的处理 
•    设计、开发、数据处理 

P118-第8章 练习与实验答案

练习12
1.选择题
(1)C (2)A (3)B (4)C (5)A
2.填空题
(1)<div></div>;id、class、style。
(2)top、height。
(3)z-index,position。
3.简答题

实验8
1、源代码:

实验8-1演示

<!-- exp_8_1.html -->
<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>新闻</title>
        <link href="exp_8_1.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <div id="d1">
            <img src="exp_8_1.jpg">
            <div id="d2">
                <ul>
                <li>2017<span class="b" >央视</span>综艺节目发力 彰显公益大爱</li>
                <li>继北京、上海后,2017年<span class="b">腾讯</span>视频推介会昨又在广州隆重举行</li>
                <li>“<span class="b">跨界融合 开放共赢</span>”移动互联网营销峰会</li>
                <li>首届<span class="it">“联建杯”</span>户外LED显示屏媒体大赛评审圆满落幕</li>
                </ul>
            </div>
        </div>
    </body>
</html>
/* exp_8_1.css */
#d1{
    width:600px;
    height:380px;
    background-color:Lime;
}
#d2{
    font-family:"幼圆";
    font-size:20px;
}
.b{
    font-weight:bold;
    text-decoration:underline;
    color:red;
}
.it{font-style:italic;font-size:24px;font-weight:bold;}源代码:

实验8-2演示

<!-- exp_8_2.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">  
<title>匾牌设计</title>
<style type="text/css">
body{text-align:center;}
#div0{width:800px;height:100px;
border:20px outset #ff0000;
padding:20px;
margin:100px;
}
p{font:italic bolder 70px/1.5em 隶书;
text-align:center;                  
background:#efedee;
}
</style>
</head>
<body>
<div id="div0" class="">
<p>海纳百川,有容乃大</p>
</div>
</body>
</html>

P146-第9章 练习与实验答案

练习9
1.选择题
(1) D (2) B (3) D (4) A (5) C
2.填空题
(1) text-indent;text-align:center;
(2) background-repeat:repeat-x;background-position。
(3) red或RGB(100%,0,0)、rgb(255,0,0)、#FF0000、#F00
(4) 边框为2像素、双实线、红色。
3.问答题
见教材。
实验9
1、源代码:实验9-1演示

------------------- exp_9_1.html -----------------
<!-- ex_9_1.html -->
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
        <title>CSS+div</title>
        <style type="text/css">
            body{
                margin:0;    
            }
            #wrap{
                width:900px;
                margin:0 auto;    
                border:solid 2 red;
                margin-top:5px;
            }
            div{
                text-align:center;
            }
            #pic{
                width:420px;
                height:300px;
                background-image:url(ex8.jpg);
                background-repeat:no-repeat;
                background-position:center;
                float:left;
                background-color:#77A;
            }
            #text{
                background-image:url(ex8.jpg);
                width:420px;    
                height:500px;
                float:right;
                background-color:#77A;
                padding:10px;
                font-weight:bold;

            }
            #title{
                font-family:"华文彩云"    ;
                font-size:32px;
            }
            #author{
                font-size:12px;    
                font-family:"黑体";
                text-align:right;
                margin-bottom:24px;
            }
            p{
                font-family:"隶书";
                font-size:24px;
                margin:2px;
                letter-spacing:0.5em;    
                line-height:1.5em;
                text-align:center;
            }
        </style>
    </head>
    <body>
        <div id="wrap">
            <div id="pic"></div>
            <div id="text">
                <div id="title">木兰花令.拟古决绝词</div>
                <div id="author">纳兰性德</div>
                <div id="content">
                    <p>人生若只如初见,</p>
                    <p>何事秋风悲画扇。</p>
                    <p>等闲变却故人心,</p>
                    <p>却道故心人易变。</p>
                    <p>骊山雨罢清宵半,</p>
                    <p>泪雨霖铃终不怨。</p>
                    <p>何如薄幸锦衣郎,</p>
                    <p>比翼连枝当日愿。</p>
                </div>
            </div>
        </div>
    </body>
</html>

2. 实验9-2演示

<!-- exp_9_2.html -->
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
        <title>Head Line</title>
        <style type="text/css">
            h1{
                background:#678;
                color:white;
                text-align:center;    
            }
            p{
                font-family:Arial;
                font-size:16px;
                line-height:1.5em;    
            }
            .firstLetter{
                font-size:3em;
                float:left;    
            }
            img{
                border:dashed 1px gray;
                margin:10px 10px 10px 0;
                padding:5px;
                float:left;    
            }
        </style>
    </head>
    <body>
        <h1>Head Line</h1>
        <img src="cup.jpg"/>
        <p><span class="firstLetter">M</span>obile Widget使用的标准的Web技术,如HTML,CSS,javascript等。这些经典的Web技术规范是由W3C(万维网联盟)的下属各个工作组制定并推进的。作为开发Widget之前的知识准备,在本章中我们将逐一介绍这些技术。
    </body>
</html>
版权声明

弈心博客


本文首发site_name,转载请附上博文链接!