网页设计与开发第6章试卷及其规范标准答案.doc
-*网页设计与开发第6章试卷一、 选择题1）在HTML文件中，可以让表格显示边框线，例如：<table border=5>,5代表边框线的粗细，它的单位是( )。Acm Bpixel Cgrid Ddot答案: B2）在HTML语言中，下列( )是专属于td、th元素的属性。Abgcolor Balign Ccolspan Dbackground答案: C3）关于HTML表格说法错误的是( )。A表格的width属性可以设置为像素值或百分比B表格的height属性可以设置为像素值或者百分比C如果不指定border属性，表格默认宽度为1D表格和单元格的背景色可以同时设置答案: D4）下列( )设置能使单元格显示边框。A在<td>中添加border属性 B在<table>中添加border属性C在<tr>中添加border属性 D以上全都可以答案: A5）在HTML文件中，给表格添加行的标签是( )。A<tr> </tr> B<td> </td> C<th> </th> D以上都正确答案: A6）跨多列的单元格的HTML代码为（ ）。A<th colspan=#> B<th rowspan=#>C<td colspan=#> D<td rowspan=#>答案: C7）设置表格的单元格填充为0的HTML代码是（ ）。A<table cellspacing=0> B<table height=0>C<table border=0> D<table cellpadding=0>答案: D8）表示表头的背景色彩的HTML是（ ）。A<tr color=#> B<tr bgcolor=#> C<th bgcolor=#> D<th color=#>答案: C9）表示表头的背景图像的HTML是（ ）。A<tr backgound=#> B<th backgound =#> C<th src=#> D<tr src=#>答案: B10）关于表格的描述正确的一项是（ ）。A在单元格内不能继续插入整个表格 B可以同时选定不相邻的单元格C粘贴表格时，不粘贴表格的内容 D网页中水平方向可以并排多个独立的表格答案: D11) html语言中，设置围绕表格的边框的宽度的标记是？ A. <table border=#> B. <table cellspacing=#> C. <table cellpadding=#> D.<.table width=# or%> 答案: A12） 表格标记的基本结构是？ A. <tr></tr> B. <br></br> C. <table></table> D. <bg></bg>答案: C14）定义表元的HTML是（）A. <table>B. <td>C. <tr>D. <th>答案: B15）跨多行的表头的HTML代码为（）A. <th colspan=#>B. <th rowspan=#>C. <td colspan=#>D. <td rowspan=#>答案: B16）设置表格的单元格填充为0的HTML代码是（）A. <table cellspacing =0>B. <table height=0>C. <table border=0>D. <table cellpadding =0>答案: D17. 设置表格的宽度为600的HTML代码是（）A. <table height=500 width=600>B. <table vspace=600 hspace=500>C. <table height=600 width=500>D. <table vspacet=500 hspace=600> 答案: A18. 设置表格边框色彩的亮度的HTML代码是（）A. <th bordercolorlight=#>B. <table bordercolor=#>C. <th bordercolor=#>D. <table bordercolorlight=#>答案: D19. 表格的题头的HTML是（）A. tbody> . </tbody>B. <tfoot> . </tfoot>C. <thead> . </thead>D. <caption> . </caption>答案: D20. <table rules=cols>,表示（）A. 显示所有分隔线B. 只显示组(Groups)与组之间的分隔线C. 只显示行与行之间的分隔线D. 只显示列与列之间的分隔线答案: D21.如果要使浏览器不显示表格边框，应将“边框粗细”设置为（）。A:1B:2C:3D:0答案: D22.Html标记中，用什么方法可以将整个表格在页面中居中？A.place=middleB.type=middleC.align=centerD.type=center答案：C23.分析下面的HTML代码片段，则选项中的说法正确的是（ ）。<table border="10"><tr> <td colspan=2 align="center">姓名</td></tr><tr> <td rowspan=2 align="center">成绩</td><td align="center">语文</td></tr><tr><td colspan=2 align="center">数学</td></tr><table>A. 该表格共有2行3列B. 该表格的边框宽度为10毫米C. 该表格中的文字均居中显示D. “姓名”单元个跨2行答案: C24.以下关于HTML语言中的表格的说法正确的是（ ）。A. 在HTML语言中，表格必须由<TABLE>标签、<TR>标签、<TD>标签组成，缺一不可B. <TABLE>标签之前不能相互嵌套C. 有多少对<TR>标签，就有多少列D. 有多少对<TD>标签，就有多少行答案：A25. 以下选项中，哪个全部都是表格标签？A <table><head><tfoot> B <table><tr><td> C<table><tr><tt> D<thead><body><tr>答案：B知识点：表格标记26.哪一个标记用于使HTML文档中表格里的单元格在同行进行合并？AcellspacingBcellpaddingCrowspanDcolspan答案:D27.以下说法中，错误的是： 。 A表格在页面中的对齐应在 TABLE 标记符中使用 align 属性。B要控制表格内容的水平对齐，应在 TR、TD、TH 中使用 align 属性。C要控制表格内容的垂直对齐，应在 TR、TD、TH 中使用 valign 属性。D表格内容的默认水平对齐方式为居中对齐答案：D28下列说法中正确的是（ ）A.使用表格进行布局时，表格的宽度都必须采用百分比计量方式B.表格不可以实现嵌套 C.为了提高网页的下载速度，一般应把所有内容分成几块放在几个表格中 D.使用表格进行布局时，最内层表格的宽度采用绝对计量方式答案：C29很多动态大型网站也都是借助( )排版,它可以把相互关联的信息元素集中定位。A.表单 B.表格C.文字D.图像答案：B30、在复杂的表格结构中，有的单元格在水平方向上是跨多个单元格的，这时需要使用（ ）属性A.colspace B.rowspace C.cellpadding D.cellspacing答案:A二、 填空题1） 在表格属性中，当表格的边框线设为_时，表格线不可见。答案: 02） 表格的_属性指定了单元格中的内容与单元格边框之间的空间大小。答案: cellpadding3） 如果不希望表格宽度随窗口大小而变化，一般应该以_为单位定义表格宽度。答案: 百分比4）表格的宽度可以用百分比和_ 两种单位来设置。答案: 像素5）请写出在网页中设定表格边框的厚度的属性_；设定表格单元格之间宽度属性_。答案: border cellspacing6）请写出<caption align=bottom>表格标题</caption>功能是_。答案: 设置表格标题7）单元格垂直合并所用的属性是_；单元格横向合并所用的属性是_。答案:rowspan colspan8）利用<table>标记符的_属性可以控制表格边框的显示样式；利用<table>标记符的_属性可以控制表格分隔线的显示样式。答案: frame border9）要使整个表格行采用某种对齐方式，应在 标记符中使用aligh属性。答案: cellpadding10）设置表格标题的HTML标记是_。答案: <caption>三、 简答题1.简述创建一个表格的基本步骤。答案：1) 用合适的工具设计表格草图。2) 确定表头。3) 确定需要的行数和列数，标识出需要跨越多个单元格的行和列。4) 合理的运用表格嵌套，尽量少用，避免结构的混乱。5) 根据内容确定采用固定的和可缩放的流体设计。6) 如果是一个需要分页的表格，需要考虑分页的设计效果。2.使用表格进行页面设计应注意哪些问题？答案：在创建复杂的表格之前，先进行规划，如可以先用笔在纸上设计页面。使用表格排版网页时，要尽量细划表格，不要把整个网页放在一个大的表格里。因为只有当表格内所有元素全部载入后，整个表格才得以显示。所以如果表格内有一些元素（比如计数器）载入较慢，就会延迟整个表格的显示。对于整个网页使用表格排版时，可以将整个页面分成几块，使用多个表格来排版。例如可以采用上部放置徽标、广告条、导航等、中间放置页面内容、下部放置版权信息等，结构分三部分，由三个表格实现。四、 实验题1. 成绩登记表的制作。下图是一个基本的成绩登记表，数据包括：ID序号、学号、姓名、平时成绩、期末成绩、总评成绩。答案：源代码文件如下：<html><head><title>成绩登记表</title><style type="text/css">#scorewidth:600px;border: 1px solid #000000;border-collapse: collapse;#score th,td border: 1px solid #000000;#score caption font-size:28px;font-weight:bold;letter-spacing:12px;line-height:2.5;#score th background-color: #4682B4;font-size:20px;font-weight:bold;line-height:2;#score td font-size:18px;line-height:2;text-align:center;#score .seq width: 50px;#score .studentId width: 120px;#score .studentName width: 80px;#score .hwScore width: 100px;#score .termScore width: 100px;#score .finalScore width: 120px;/*斑马纹类*/.odd td background-color: #FFF;.even td background-color: #CCCCCC;</style></head><body><table id="score"> <caption> 成绩登记表 </caption> <tr> <th class="seq">序号</th> <th class="studentId">学号</th> <th class="studentName">姓名</th> <th class="hwScore">平时成绩</th> <th class"termScore">期末成绩</th> <th class="finalScore">学期总成绩</th> </tr> <tr class="odd"> <td>1</td> <td>2010300201</td> <td>张小丽</td> <td>95</td> <td>95</td> <td>95</td> </tr> <tr class="even"> <td>2</td> <td>2010300202</td> <td>李宁</td> <td>90</td> <td>88</td> <td>89</td> </tr> <tr class="odd"> <td>3</td> <td>2010300203</td> <td>刘梅</td> <td>98</td> <td>92</td> <td>95</td> </tr> <tr class="even"> <td>4</td> <td>2010300204</td> <td>王刚</td> <td>98</td> <td>90</td> <td>94</td> </tr> <tr class="odd"> <td>5</td> <td>2010300205</td> <td>郑军</td> <td>90</td> <td>85</td> <td>87</td> </tr> <tr class="even"> <td>6</td> <td>2010300206</td> <td>杨波</td> <td>80</td> <td>80</td> <td>80</td> </tr></table></body></html>2. 产品介绍页面的制作。使用表格布局完成下图的产品页面的展示答案：源代码文件如下：<html><head><title>产品介绍</title><style type="text/css">.productwidth:500px;border: 1px solid #FF6600;border-collapse: collapse;.product td border: 1px solid #FF6600;.productNamefont-size: 14px;color: #993300;font-weight: bold;.categoryfont-size:14px;color:#993300;font-weight:bold;background-color:#FFB468;.productImgtext-align:center;vertical-align:middle;width:170px;.productDescriptionbackground-color:#FEE8AB.paraTable td border-style:none;.paraNamefont-size: 13px;color: #666666;text-align:right;vertical-align:top;width:70px;.paraValuefont-size: 13px;text-align:left;padding-left:5px;</style></head><body><table class="product"><tr><td class="productImg"><img src="images/041.jpg" width="144" height="129" /></td><td class="productDescription"> <p class="productName">产品名称：佳能 IXUS 130</p> <p class="paraValue">佳能 IXUS 130（官方标配）<BR> 松下原装SD卡2G（高速正品）<BR> 佳能IXUS系列专用皮包<BR> 索尼2.7英寸LCD保护贴（防刮/高透光/静电吸附)<BR> 摄影指南</p></td></tr><tr class="category"><td colspan="2">主要参数</td></tr><tr><td colspan="2"><table class="paraTable"><tr><td class="paraName">型号:</td><td class="paraValue">PMP169B</td></tr><tr><td class="paraName">内存容量:</td><td class="paraValue">512M</td></tr><tr><td class="paraName">屏幕尺寸:</td><td class="paraValue">2.12英寸（最佳视觉比列16：9的宽屏）</td></tr><tr><td class="paraName">屏幕特性:</td><td class="paraValue">LTPS TFT (720x240)</td></tr><tr><td class="paraName">视频功能:</td><td class="paraValue">支持ASF格式的MPG4,或通过软件转换成ASF播放,播放效果:320420,30fps/视频输出,输入/电视节目定时录制。</td></tr></table></td></tr><tr class="category"><td colspan="2">功能参数</td></tr><tr><td colspan="2"><table class="paraTable"><tr><td class="paraName">音频功能:</td><td class="paraValue">支持音频格式:MP3,WMA,WAV/内置麦克风,支持LINEIN寻录/收音功能/内置喇叭</td></tr><tr><td class="paraName">录音格式:</td><td class="paraValue">44.1KHz, 128 Kbps, MP3, 支持MIC/LINE-IN直录</td></tr><tr><td class="paraName">附加功能:</td><td class="paraValue">支持图片格式:JPEG(EXIF2.1)/电子书浏览/多语言(中/英)设置</td></tr></table></td></tr><tr class="category"><td colspan="2">其它参数</td></tr><tr><td colspan="2"><table class="paraTable"><tr><td class="paraName">接口:</td><td class="paraValue">USB接口,AV OUT接口, AV IN接口</td></tr><tr><td class="paraName">扩展卡:</td><td class="paraValue">可扩充2G SD,MMC卡</td></tr><tr><td class="paraName">电池:</td><td class="paraValue">内置锂电池</td></tr><tr><td class="paraName">尺寸:</td><td class="paraValue">105.2 x47.6x15.6mm</td></tr><tr><td class="paraName">重量:</td><td class="paraValue">90g</td></tr></table></td></tr></table></body></html>
