网页设计与制作(HTML5-CSS3-JavaScript)题库附答案

网页设计与制作（HTML5+CSS3+JavaScript）题库（含参考答案）第1章HTML5基础第1题判断正误（1）HTML标记符的属性一般不区分大小写。（对）（2）网站就是一个链接的页面集合。（对）（3）将网页上传到Internet时通常采用FTP方式。（对）（4）所有的HTML标记符都包括开始标记符和结束标记符。（错）（5）可以用文本编辑器编辑HTML文件。（对）（6）文本编辑器和HTML编辑器软件都可以用来编辑HTML文件。（对）（7）TITLE标记符通常位于BODY标记符之间。（错）（8）TITLE标记符通常位于HEAD标记符之间。（对）（9）title标记符和title属性的作用是相同的。（错）第2题单选题（1）WWW是的意思。答案：BA．网页B．万维网C．浏览器D．超文本传输协议（2）在网页中显示特殊字符，如果要输入“<”，应使用_________。答案：DA．lt;B．≪C．<D．<（3）以下说法中，错误的是：。答案：DA．获取WWW服务时，需要使用浏览器作为客户端程序。B．WWW服务和电子邮件服务是Internet提供的最常用的两种服务。C．网站就是一系列逻辑上可以视为一个整体的页面的集合。D．所有网页的扩展名都是.htm。（4）以下说法中，错误的是：。答案：BA．网页的本质就是HTML源代码。B．网页就是主页。C．使用“记事本”编辑网页时，通常应将其保存为.htm或.html后缀。D．本地网站通常就是一个完整的文件夹。（5）以下说法中，错误的是：。答案：DA．主页是网站中的一个特定页面。B．网页中的注释可以放在任何位置。C．在HTML中， 表示空格。D．在HTML中，<表示>。（6）浏览网页时，通常使用以下协议：答案：CA．mailtoB．FTPC．HTTPD．TCP/IP（7）在网页中显示特殊字符，如果要输入空格，应使用_________。答案：DA．nbsp;B．&Nbsp;C． D． （8）以下软件中，不能直接用来编辑HTML文件的是：_________。答案：CA．记事本B．Notepad++C．PhotoshopD．Dreamweaver（9）以下软件中，不属于HTML编辑器的是：_________。答案：DA．记事本B．Notepad++C．VSCodeD．Flash（10）以下有关HTML标记符的属性的说法中，错误的是：_________。答案：CA．在HTML中，所有的属性都放置在开始标记符的尖括号里。B．属性与HTML标记符的名称之间用空格分隔。C．属性的值放在相应属性之后，用等号分隔；而不同的属性之间用分号分隔。D．HTML属性通常也不区分大小写。第3题填空题（1）上网浏览网页时，应使用作为客户端程序。答案：浏览器（2）TITLE标记符应位于标记符之间。答案：HEAD（3）在Web标准中，用于“表现”的技术是。答案：CSS（4）在Web标准中，用于“行为”的技术是DOM和。答案：JavaScript第4题问答题（1）简要说明html的基本工作原理。答题要点：1、标记符；2、超链接；3、属性。答出后两个要点各得2分，第一个要点得1分。（2）简要说明WWW工作的基本原理。要点：浏览器、服务器、地址、超链接（3）简要说明Web标准。要点：结构（HTML）、表现（CSS）、行为（JavaScript）第2章文本格式与超链接第1题判断正误（1）用H1标记符修饰的文字通常比用H6标记符修饰的要小（错）。（2）B标记符表示用粗体显示所包括的文字。（对）（3）strong标记符与i标记符显示的效果相同。（错）（4）指定水平线粗细的属性是size。（对）（5）指定水平线粗细的属性是width。（对）（6）指定电子邮件超链接时，href属性的取值是：mailto=邮件地址。（错）（7）./public/index.htm是一个绝对URL。（错）（8）是一个绝对URL。（对）（9）使用相对地址时，符号..表示当前目录。（错）（10）使用相对地址时，符号..表示上一级目录。（对）第2题单选题（1）以下说法中，正确的是：。答案：CA．P标记符与BR标记符的作用一样。B．多个P标记符可以产生多个空行。C．多个BR标记符可以产生多个空行。D．P标记符的结束标记符通常不可以省略。（2）要控制水平线的粗细，应使用以下属性：。答案：CA．colorB．widthC．sizeD．height（3）以下代码中，不能产生多个空行效果的是：答案：BA．<BR><BR><BR><BR>B．<P><P><P><P>C．<P> <P> <P> <P> D．<BR> <BR> <BR> <BR>（4）以下标记符中，默认align属性不是left的是：答案：BA．<P>B．<HR>C．<H1>D．<DIV>（5）以下有关列表的说法中，错误的是：。答案：DA．有序列表和无序列表可以互相嵌套。B．指定嵌套列表时，也可以具体指定项目符号或编号样式。C．无序列表应使用UL和LI标记符进行创建。D．在创建列表时，LI标记符的结束标记符不可省略。（6）以下有关列表的说法中，错误的是：。答案：CA．有序列表和无序列表可以互相嵌套。B．有序列表默认的type属性值是“1”。C．无序列表默认的type属性值是“circle”。D．在创建列表时，LI标记符的结束标记符可以省略。（7）以下有关列表的说法中，错误的是：。答案：BA．有序列表和无序列表可以互相嵌套。B．有序列表默认的type属性值是“A”。C．无序列表默认的type属性值是“disc”。D．在创建列表时，LI标记符的结束标记符可以省略。第3题填空题（1）<hrwidth=50%>表示创建一条的水平线。答案：宽度为浏览器窗口50%的水平线（2）在OL标记符中，使用属性可以控制有序列表的数字序列样式。答案：type（3）在UL标记符中，使用属性可以控制无序列表的项目符号样式。答案：type（4）要设置一条一像素粗、200像素长的左对齐的水平线，应使用语句。答案：<hrsize=1width=200align=left>（5）要使文字显示为粗体，应使用的标记符是。答案：b或strong（6）如果要创建一个指向电子邮件someone@的超链接，代码应该如下：<a>指向someone@的超链接</a>答案：href=mailto:someone@（7）在指定页内超链接的时候，如果在某一个位置使用了<a="target1">锚点</a>语句定义了锚点，那么应使用以下语句，以便在单击超链接时跳转到锚点定义的位置：<ahref=>锚点链接</a>答案：name，#target1（8）已知站点文件夹结构如图所示，要在interest.htm这个网页中插入sunset.gif，应使用语句。答案：<imgsrc=../images/sunset.gif>（9）已知站点文件夹结构如图所示，要在interest.htm这个网页中创建一个能跳转到index.htm文件的超链接（链接文字为“返回”），应使用语句。答案：<ahref=../index.htm>返回</a>（10）已知站点文件夹结构如图所示，要在index.htm这个网页中插入一个链接到interest.htm的超链接，并且使用frontpage.gif作为超链接的源（也就是制作一个图像超链接），应使用语句：<ahref="interest/interest.htm></a>。答案：<imgsrc=../images/frontpage.gif>（11）在指定锚点超链接的时候，如果在文件file1.htm某一个位置使用了<a="target1">锚点</a>语句定义了锚点，那么应使用以下语句，以便在file2.htm中单击超链接时跳转到file1.htm中该锚点定义的位置：<ahref=>锚点链接</a>答案：name,file2.htm#target1第4题问答题（1）简要说明如何在html中创建锚点链接。答题要点：1、<aname="target">；2、<ahref="#target">。（2）根据超链接的目标位置的不同，超链接一般包括哪些类别。答题要点：1、同一网站内页面间的链接；2、不同网站间页面间的链接；3、页面内的链接；4、电子邮件链接；5、空链接；6、下载链接第3章CSS3基础第1题判断正误（1）在CSS中，可以用3种以上的方式来表示颜色。（对）（2）CSS样式表项的组成为：selector{property1:value1,property2:value2,……}（错）（3）在CSS中要设置超链接的效果，应指定虚类selector。（对）（4）CSS中的color属性用于设置HTML元素的背景颜色。（错）（5）指定line-height属性时，既可以使用一个整数，也可以使用百分比。（对）（6）ex是比em更常用的一种长度单位。（错）（7）在使用rgba模式时，a数值表示透明度，取值为1时表示完全透明。（错）第2题单选题（1）以下选项中不能用来表示CSS颜色的是：CA.redB.#FF0000C.rgb(f,0,0)D.rgb(100%,0,0)（2）以下选项中不能用来表示CSS颜色的是：CA.redB.#F00C.rgb(f,0,0)D.rgb(100%,0,0)（3）以下有关样式表项的定义中，正确的是：CA.H1{font-family:楷体_gb2312,text-aligh:center}B.H1{font-family=楷体_gb2312,text-aligh=center}C.H1{font-family:楷体_gb2312;text-aligh:center}D.H1{font-family=楷体_gb2312;text-aligh=center}（4）以下有关样式表项的定义中，正确的是：DA.P{font-size=24px,text-aligh=center}B.P{font-size:24px,text-aligh:center}C.P{font-size=24px;text-aligh=center}D.P{font-size:24px;text-aligh:center}（5）以下关于CSS的说法中，错误的是：CA.伪类选择器不但能应用于超链接，也能应用于其他一些标记符。B.指定超链接多种状态的效果时，应该按照a:link、a:visited、a:hover、a:active的顺序。C.群组选择器使用空格分隔多个选择器。D.id选择器和类选择器的作用不同。（6）要设置背景图案是否与内容一起滚动，应使用的属性是：AA.background-attachmentB.background-positionC.background-repeatD.background-image（7）以下CSS定义，有错误的是：DA.p{font:italic20xSerif;}B.p{font:bold2em楷体;}C.p{font:18px/1.2Fantasy;}D.p{fontitalicboldSerif}（8）以下选项中，不属于text-align属性取值的是：DA.leftB.justifyC.centerD.Middle（9）以下选项中，不能表示2倍行高的是：CA.line-height:2emB.line-height:200%C.line-height:2exD.line-height:2（10）在使用link链接外部样式表时，一般不使用的HTML属性是：。DA.href B.type C.rel D.src第3题填空题（1）要使网页中所有的超链接都不显示下划线，样式表项应为。答案：A{text-decoration:none}（2）要定义鼠标悬停状态的样式，应使用的selector为。a:hover或:hover（3）如果要定义一个可应用于所有标记符的通用类test，应使用{color:red}答案：.test（4）要在HTML标记符中直接嵌入样式，应使用标记符的属性。答案：style（5）在网页中使用CSS包括三种常用方式：、将样式定义嵌入到网页中以及将样式定义包含在外部CSS样式文件。（6）在网页中使用CSS包括三种常用方式：将样式定义直接嵌入到标记符中、以及将样式定义包含在外部CSS样式文件。（7）在网页中使用CSS包括三种常用方式：将样式定义直接嵌入到标记符中、将样式定义嵌入到网页中以及。（8）CSS样式的作用包括：=1\*GB3①简化网页的格式设置工作；=2\*GB3②；=3\*GB3③大大加强网页的表现力。（9）CSS样式的作用包括：=1\*GB3①简化网页的格式设置工作；=2\*GB3②增强网页的可维护能力；=3\*GB3③。（10）最常见的长度单位是px、em和。答案：百分比（11）要设置文本的颜色，应使用的CSS属性是。答案：color（12）如果要给段落设置2个汉字的首行缩进，相应的样式表项应该是。答案：p{text-indent:2em}第4题问答题（1）举例说明在网页中使用CSS样式表的三种方式（都使用对p标记符应用color属性为例），并简要分析各自的特点。提示：LINK标记符的用法：<LINKrel=”stylesheet”type=”text/css”href=””>（9分）答题要点：1、在标记符中直接嵌套样式信息（1分），例如，p<style=”color:red”>红色显示的段落文本</p>（1分）；优点是可以单独指定特定部分的样式，缺点是不利于维护（1分，优缺点只说明其中之一的扣0.5分）。2、在style标记符中指定样式信息（1分），例如<style>p{color:red}</style>（1分）优点是能对单独网页进行很好的格式控制和维护，缺点是不利于多个网页的维护。（1分，优缺点只说明其中之一的扣0.5分）3、链接外部样式表中的样式信息（1分），例如，在当前网页目录中包括以下mycss.css文件：p{color:red}然后在网页中用以下代码<LINKrel=”stylesheet”type=”text/css”href=”mycss.css”>。（1分，未说明清楚如何使用的，扣0.5分）优点是利于维护多个网页，缺点是不利于控制单独页面中的个别部分（1分，优缺点只说明其中之一的扣0.5分）。（2）简要说明CSS样式表在网页制作中的作用。要点：简化格式化，简化维护，加强表现力。（3）举例说明CSS样式表在网页制作中的作用。要点：简化格式化，简化维护，加强表现力。但必须使用比较具体的实例说明。第4章图像与多媒体第1题判断正误（1）GIF格式的图象最多可以显示256种颜色。（对）（2）矢量图一般比位图文件尺寸要小。（对）（3）GIF格式能够设置透明色。（对）（4）在常用的网页图像格式中，只有GIF格式能够设置透明色。（错）（5）Photoshop是一种位图编辑软件。（对）（6）Illustrator是一种矢量图编辑软件。（对）（7）在网页中使用图像时应该尽量使用更多的格式。（错）（8）在img标记符中使用align属性可以使其在页面中居中对齐。（错）（9）要控制图像与周围内容的垂直对齐，应使用的CSS属性是v-align。（错）（10）要设置图像环绕文本效果，可以为img标记符设置float属性。（对）（11）CSS属性opacity如果设置为1，表示完全不透明。（对）（12）在HTML中，只能用audio标记符来插入音频。（错）（13）在网页中插入背景音乐时，应将controls属性设置为controls。（错）（14）在网页中插入背景音乐时，不应设置controls属性，这样就不显示播放控件。（对）（15）video和embed标记符都可以用于在网页中插入视频。（对）第2题单选题（1）以下关于JPEG图像格式中，错误的是：答案：BA．适合表现真彩色的照片。B．最多可以指定1024种颜色。C．不能设置透明度。D．可以控制压缩比例。（2）以下说法中，错误的是：。答案：BA．GIF格式的图象采用无损压缩算法进行图象压缩。B．只有GIF格式才能使用透明色。C．GIF格式支持动画。D．GIF格式最多可以显示256种颜色。（3）以下说法中，错误的是：。答案：DA．JPEG格式使用有损压缩算法进行图象压缩。B．处理JPEG格式的图象时，可以控制压缩比率。C．JPEG格式的图象几乎没有颜色限制。D．JPEG格式的图象具有透明色的特点。（4）以下说法中，正确的是：。答案：CA．可以通过直接改文件名后缀来修改图象格式。B．矢量图通常比位图的文件尺寸大。C．使用图象处理软件可以修改图象的像素大小。D．Flash是一种位图处理软件。（5）以下软件中，不属于位图编辑软件的是：答案：DA．PhotoshopB.FireworksC.PhotoImpactD.Illustrator（6）能够设置半透明图像效果的图像文件格式是：。答案：BA．JPEGB．PNGC．GIFD．IMG（7）以下说法中，错误的是：。答案：CA．audio标记符可以用于插入音频。B．video标记符可以用于插入视频。C．object标记符可以用于插入背景音乐。D．embed标记符可以用于插入Flash动画。第3题填空题（1）请至少说明GIF格式的两种特点：；。答案：无损压缩，256色，动画，透明色。4选2即可。（2）请至少说明JPEG格式的两种特点：；。答案：有损压缩，真彩色，控制压缩比。3选2即可。（3）在网页中插入图像时，最基本的两个属性是。答案：src和alt（4）要控制图像与周围内容的垂直对齐，应使用的CSS属性是。答案：vertical-align（5）要在网页中插入背景音乐，应使用标记符。答案：audio（6）在网页中插入音频或视频时，控制循环播放的属性是。答案：loop（7）在网页中插入音频或视频时，控制自动播放的属性是。答案：autoplay第4题问答题（1）简要说明使用网页图像时应注意的问题。要点：文件较小，数量和质量，动画（2）简要说明GIF格式和JPEG格式图像的特点。要点：GIF：无损压缩，256色，动画，透明色（4者答对其中三者即可得3分）JPEG：有损压缩，真彩色，控制压缩比（3者答对两个即可得3分）第5章表格与表单第1题判断正误（1）HTML表格在默认情况下有边框。（错）（2）在HTML表格中，TD和TH标记符都可以用来包括单元格内容。（对）（3）在HTML表格中，表格的行数等于TR标记符的个数。（对）（4）在HTML表格中，表格的列数等于任意一行中TH与TD的个数。（错）（5）在HTML表格中，表格的列数等于任意一行中TH与TD的colspan属性的和。（错）（6）在HTML表格中，表格的列数等于第一行中TH与TD的colspan属性的和。（对）（7）在HTML表格中，在TR、TD或TH标记符中使用align属性可以控制单元格内容的垂直对齐。（错）（8）HTML表格内容的垂直对齐方式默认为垂直居中。（对）（9）在HTML中，与表格一样，表单也能嵌套。（错）（10）一个网页中只能包含一个表单。（错）（11）在HTML表单中，文本框、口令框和复选框都是用INPUT标记符生成的。（对）（12）在HTML表单中，提交按钮和重置按钮都可以用图象表示。（错）第2题单选题（1）以下说法中，错误的是：。答案：DA．表格在页面中的对齐应在TABLE标记符中使用align属性。B．要控制表格内容的水平对齐，应在TR、TD、TH中使用align属性。C．要控制表格内容的垂直对齐，应在TR、TD、TH中使用valign属性。D．表格内容的默认水平对齐方式为居中对齐（2）如果要在表单里创建一个普通文本框，以下写法中正确的是：。答案：AA．<INPUT>B．<INPUTtype="password">C．<INPUTtype="checkbox">D．<INPUTtype="radio">（3）以下有关表单的说明中，错误的是：。答案：CA．表单通常用于搜集用户信息。B．在FORM标记符中使用action属性指定表单处理程序的位置。C．表单中只能包含表单控件，而不能包含其他诸如图片之类的内容。D．在FORM标记符中使用method属性指定提交表单数据的方法。（4）以下有关表单的说明中，错误的是：。答案：DA．填写完毕的表单通常要发送到服务器端由特定程序处理。B．在FORM标记符中使用action属性指定表单处理程序的位置。C．在FORM标记符中使用method属性指定提交表单数据的方法。D．表单中的“重置”按钮是必不可少的。（5）在指定单选框时，只有将以下属性的值指定为相同，才能使它们成为一组。答案：BA．typeB．nameC．valueD．checked（6）创建选项菜单应使用以下标记符：。答案：AA．SELECT和OPTIONB．INPUT和LABELC．INPUTD．INPUT和OPTION（7）以下有关按钮的说法中，错误的是：。答案：BA．可以用图像作为提交按钮。B．可以用图像作为重置按钮。C．可以控制提交按钮上的显示文字。D．可以控制重置按钮上的显示文字。（8）以下表单控件中，不是由INPUT标记符创建的为：CA.单选框B.口令框C.选项菜单D.提交按钮（9）要给表单控件设置标签，以下代码中正确的是：DA.<INPUTtype="checkbox"name="news"><LABELfor="news">新闻</LABEL>B.<INPUTtype="checkbox"for="news"><LABELid="news">新闻</LABEL>C.<INPUTtype="checkbox"for="news"><LABELname="news">新闻</LABEL>D.<INPUTtype="checkbox"id="news"><LABELfor="news">新闻</LABEL>（10）如果要控制表格边框与内容之间的距离，应指定的CSS属性是：。答案：DA．cellspacingB．cellpaddingC．spacingD．Padding（11）以下选项中，不属于表单按钮的属性是：。答案：CA．typeB．nameC．sizeD．value（12）CSS中用于设置内容垂直对齐方式的属性是：。CA．alignB．text-alignC．vertical-alignD．valign第3题填空题（1）要控制单元格内容与表格框线之间的空白，可以在TABLE标记符中使用属性。答案：cellpadding（2）要使整个表格行采用某种对齐方式，应在标记符中使用align属性。答案：tr（3）在HTML表格中进行单元格合并时，可以使用TD或TH的属性进行行合并，使用它们的colspan属性进行列合并。答案：rowspan（4）在HTML表格中进行单元格合并时，可以使用TD或TH的rowspan属性进行行合并，使用它们的属性进行列合并。答案：colspan（5）要在表单中添加一个默认时为选中状态的复选框，应使用语句。答案：<inputtype=checkboxchecked>（6）要创建一个图像提交按钮，应将INPUT标记符的type属性指定为。答案：image（7）在表单中添加选项菜单时，应使用和标记符。答案：select，option（8）要在表单中添加一个口令框（密码框），应使用语句。答案：<inputtype="password">（9）在表单中使用INPUT标记符创建提交按钮时，属性用于控制按钮上的文字。答案：value第4题问答题（1）简要说明表单的基本工作原理。要点：在表单控件填写数据后，单击“提交”按钮，发送到服务器处理，也可客户端处理。第5题综合题1、编写出实现如图所示页面效果的关键html代码。其中，A、B、C、D、E均为默认字号和默认字体，并且加粗显示，它们都位于各自单元格的正中间，A单元格的高度为200像素，B单元格的高度为100像素，C单元格的宽度为100像素，高度为200像素。（10分）答题要点（标记符是否大小写没有关系）：<tablewidth=300border="1"align=center><tr><tdrowspan="2"align="center"><b>A</b><tdcolspan="2"height="100"align="center"><b>B</b><tralign="center"><tdheight="100"><b>E</b><tdrowspan="2"><b>C</b><tralign=center><tdcolspan="2"height="100"><b>D</b></td></tr></table>评分要点：（不一定要与参考答案完全一致，只要最后能显示出效果即可。）（1）正确地写出了表格的行列结构，给4分。（2）正确地设置了表格各单元格大小，给2分。（2）设置了表格的边框和居中对齐，给2分。（3）设置了表格行或单元格的水平居中（垂直居中不用设置，如果设置了也不加分），给1分。（4）正确地指定了粗体，给1分。2、已知页面效果如图所示，请填写以下html代码中留下的空白。（10分）。<form><tableborderbgcolor="#eeeeee"><tr><td(1)align=center><b>情况登记</b><tr><td>姓名：<td>(2)<tr><td>密码：<td><INPUTsize="20"(3)value="pwd"><tr><td>性别：<td><INPUTname="sex"type=radio>男<INPUTname="sex"type=radio>女<tr><td> <td><INPUT(4)value="提交"><INPUTtype="reset"(5)></table></form>答案：（1）colspan="2"（2）<inputsize="20"value="name">（3）type="password"（4）type="submit"（5）value="重写"3、已知页面效果如图所示（其中的细线效果为一像素粗细，颜色为灰色），请填写以下html代码中留下的空白。（10分）<FORM><TABLE(1)cellpadding="5"align="center"bgcolor="#dddddd"><TR><TD(2)colspan="2"><B>个人信息</B><TRbgcolor="white"><TD>姓名：<TD><INPUTsize="20"><TRbgcolor="white"><TD>密码：<TD><INPUTsize="20"(3)value="pwd"><TRbgcolor="white"><TD>性别：<TD><INPUTname="sex"type=radio>男<INPUT(4)type=radio>女<TR><TD> <TD><INPUTvalue="提交"(5)><INPUTtype="reset"value="重写"></TABLE></FORM>答案：（1）cellspacing="1"（2）align="center"（3）type="password"（4）name="sex"（5）type="submit"4、已知页面效果如图所示，请填写以下html代码中留下的空白。（10分）。<table（1）width="500"height="500"><tr><tdheight="300"width="100"（2）>A</td><tdheight="100"width="400"colspan="4">D</td></tr><tr><tdheight="200"width="100"rowspan="2">E</td><tdheight="100"width="200"colspan="2"（3）>H</td><tdheight="300"width="100"rowspan="4">C</td></tr><tr><tdheight="100"width="100"（4）>I</td><tdheight="200"width="100"rowspan="2">G</td></tr><tr><tdheight="100"width="200"（5）>F</td></tr><tr><tdheight="100"width="400"colspan="4">B</td></tr></table>答案：（1）border="1"（2）rowspan="4"（3）valign="top"（4）align="center"（5）colspan="2"5、已知页面效果如图所示（其中的细线效果均为一像素粗细，颜色为灰色），请填写以下html代码中留下的空白。（10分）<FORM><TABLE（1）cellpadding="5"align="center"bgcolor="#cccccc"><TR><TD（2）colspan="2"><B>个人信息</B><TRbgcolor="white"><TD>姓名：<TD><INPUTsize="20"><TRbgcolor="white"><TD>密码：<TD><INPUTsize="20"(3)value="pwd"><TRbgcolor="white"><TD>职业：<TD><selectsize="1"name="D1"><optionselected>学生</option><option>教师</option><option>职员</option><option>军人</option><option>经理</option><option>其他</option></select><TRbgcolor="white"><TD>收入：<TD><inputtype="radio"value="V1"(4)name="R1"id="fp1"><label(5)>2000以下</label><inputtype="radio"name="R1"value="V2"id="fp2"><labelfor="fp2">2000以上</label><TR><TD> <TD><INPUTvalue="提交"type="submit"><INPUTtype="reset"value="重写"></TABLE></FORM>答案：（1）cellspacing="1"（2）align="center"（3）type="password"（4）checked（5）for="fp1"第6章CSS进阶第1题判断正误子元素选择器可以认为是后代选择器的一种。（对）使用后代选择器时，选择器之间的分隔符是“>”。（错）使用属性选择器可以选取带有指定属性和值的HTML元素。（对）[attribute$=value]表示匹配属性值以指定值结尾的每个元素。（错）CSS定位布局应使用的属性是float和clear。（错）CSS盒模型仅适用于块元素，不适用于行内元素。（错）一个元素的背景颜色和背景图案作用于内容、填充、边框和边距。（错）在CSS盒模型中，width和height指的是内容区域的宽度和高度。（对）增加填充、边框和边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。（对）在CSS中既可以使用text-decoration，也可以使用border-bottom实现文本下划线效果。（对）在CSS中使用text-decoration和使用border-bottom实现的文本下划线效果相同。（错）在CSS中使用padding属性指定4个方向上的填充时，如果指定4个值，那么是按照上、右、下、左这个顺序指定。（对）在CSS中使用margin属性指定4个方向上的边距时，如果指定4个值，那么是按照上、下、左、右这个顺序指定。（错）CSS定位属性z-index用于设置元素的堆叠顺序，取值为整数，数字越大越在底层，即有可能被其他元素覆盖。（错）对块进行CSS定位时，position设置为absolute或fixed都会将块从默认文本流中删除。（对）display属性设置为inline-block时，元素将显示为行内块元素。（对）使用transition属性设置过渡效果时，需要指定设置过渡效果的另外一个CSS属性。（对）第2题单选题已知网页代码如下：<divid="sidebar"><p><ahref="#">超链接1</a></p></div><divid="main"><p><ahref="#">超链接2</a></p></div>要为“超链接1”设置效果，应使用的选择器是：答案：Caa:hover#sidebara#sidebar>a使用相邻兄弟选择器时，选择器之间的分隔符是：答案：C空格>+-（3）在HTML元素周围有三种空白，由内而外分别为：。AA.填充（padding）、边框（border）和边界（margin）B.边框（border）、填充（padding）和边界（margin）C.填充（padding）、边界（margin）和边框（border）D.边框（border）、边界（margin）和填充（padding）（4）已知HTML代码如下所示：<divclass=”content”><divid=”left”><h2>需要修饰的内容</h2><p>其他内容</p></div></div>要对加下划线的内容进行修饰，应该使用的CSS选择器是：CA.#content B.#left C..content#lefth2 D..lefth2（7）下列说法中错误的是_______.CA．div元素用于创建自定义的块元素B．span元素用于创建自定义的行内元素C．class属性用于为某一个具体特定的HTML元素指定上下文D．id属性用于为某一个具体特定的HTML元素指定上下文（8）用于指定段落文本的段前间距的CSS属性是：。BA． text-indent B．margin-top C．line-height D．text-align（9）CSS盒模型中，背景颜色的作用范围是：。C1．内容2．padding3．border4．marginA． 1 B．1,2 C．1,2,3 D．1,2,3,4（10）以下CSS选择器中，属于后代（上下文关系）选择器的是_______.AA．h1a.specialB．h1.specialC．h1#specialD．a:hover（11）以下代码的显示效果是：_______.C<html><head><title>浮动布局</title><style>#box{width:1010px;margin:0auto;height:1000px;background:lightblue;}#header{width:800px;height:200px;border:1pxblacksolid;}#main{width:600px;height:800px;border:1pxblacksolid;float:left;}#sidebar{width:200px;height:500px;border:1pxblacksolid;float:left;}#footer{clear:both;width:800px;height:200px;border:1pxblacksolid;}</style></head><body><divid="box"><divid="header">头部</div><divid="main">主体</div><divid="sidebar">边栏</div><divid="footer">脚注</div></div></body></html>A.B.C.D.要将所有元素的margin和padding设置为零来覆盖浏览器样式，代码是：A*{margin:0;padding:0;}B.all{margin:0;padding:0;}C.everything{margin:0;padding:0;}D.?{margin:0;padding:0;}以下说法中，错误的是：B静态定位是默认的定位方式。相对定位会把定位块从默认文本流中删除。绝对定位会把定位块从默认文本流中删除。固定定位会把定位块从默认文本流中删除。设置某个块的相对定位时，如果想要向右下偏移2像素，应设置的属性是：Atop:2px;left:2px;top:2px;right:2px;bottom:2px;left:2px;bottom:2px;right:2px;使用固定定位时，定位的参照点是：A视口浏览器窗口左上角浏览器窗口右上角静态定位时的位置在使用border-radius属性时，最多可以指定个值。D1B.2C.3D.4设置box-shadow属性时，至少应指定个值。B1B.2C.3D.4设置text-shadow属性时，至少应指定个值。B1B.2C.3D.4设置transition属性时，至少应指定个值。B1B.2C.3D.4以下CSS样式中，优先级最高的是：Culli#box#box #breadpulolli.red以下CSS样式中，优先级最低的是：Aulli#box#box #breadpulolli.red第3题填空题（1）CSS定位属性position的取值包括：static、、absolute和fixed。答案：relative（2）HTML标记符用于创建自定义的行内元素。答案：span（3）CSS有3种基本的定位机制：普通流、浮动定位和。答案：绝对定位（4）在CSS定位属性中，定义了定位元素右边距边界与其包含块右边界之间的偏移。答案：right（5）浮动定位的两个关键CSS属性是float和。答案：clear（6）如果要让多个li元素在一行内显示，应将其display属性值设置为。答案：inline（7）用于设置圆角矩形的CSS属性是。答案：border-radius（8）用于设置文本阴影的CSS属性是。答案：text-shadow（9）CSS样式优先级的一般性规则是。答案：就近优先（10）一般而言，应将页内样式表放在站点样式表（填写“之前”或“之后”）。答案：之后第4题问答题举例说明样式优先级的“就近优先”原则。（略，参见教材）举例说明具体样式优先级的计算规则。（略，参见教材）第5题综合题1、网页效果如图所示，请参考注释填写以下代码中的空白。<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>锦绣中华游—丽江</title><styletype="text/css"><!--body{ （1）;/*行高设置为1.5倍*/}#container{（2）;/*定义网页以浏览器窗口宽度的80%显示*/ margin:0pxauto;/*使Div块居中显示*/ background-color:#CCFF66;}#container#header{background-color:#CC99FF; （3）;/*文本居中对齐*/ border-top:thicksolid#FF9933; border-bottom:thicksolid#FF9933;padding-top:10px;}a:hover{color:red;}/*所有超链接悬停变红*/（4）{/*主导航条中的超链接悬停变红并且加粗*/ font-weight:bold; color:red;}#container#sidebar1{float:left;/*使用浮动属性创建左侧栏*/ width:10em;/*左侧栏宽度为10个字体宽度*/ padding-top:15px; background-color:#55FF66;}#container#sidebar2{float:right; width:8em; padding-top:15px; background-color:#99FF66;}#container#content{ margin-right:9em; margin-left:11em; margin-top:0px; margin-bottom:0px;}#container#footer{ background-color:#CC99FF; text-align:center; font-size:12px; padding:5px;}#container#sidebar2p{ font-family:"楷体_GB2312"; font-weight:bold; margin:0px; padding:0px; }#container#sidebar2ul{ font-size:14px; margin-top:0px; padding-top:0px; list-style-type:square;}.clearfloat{ clear:both; height:0;font-size:1px;line-height:0px;}--></style></head><body><divid="container"><divid="header"><h1>唐诗宋词精选</h1><ahref="#">首页</a><ahref="#">唐诗</a><ahref="#">唐五代词</a><ahref="#">宋词</a><ahref="../hunan/hunan.html">宋诗</a></div><divid="sidebar1"><ul><li><ahref="#">唐诗简介</a></li><li><ahref="#">李白</a></li><li><ahref="#">杜甫</a></li><li><ahref="#">白居易</a></li><li><ahref="#">李商隐</a></li></ul></div><divid="sidebar2"><palign="center">热门资源：</p><ul><li><ahref="#">美人</a></li><li><ahref="#">琵琶行</a></li><li><ahref="#">长恨歌</a></li><li><ahref="#">茅屋...</a></li><li><ahref="#">蜀相</a></li><li><ahref="#">望岳</a></li></ul></div><divid="content"><h1>唐诗简介</h1><p>唐代(公元618-907年)是我国古典诗歌发展的全盛时期。唐诗是我国优秀的文学遗产之一，也是全世界文学宝库中的一颗灿烂的明珠。尽管离现在已有一千多年了，但许多诗篇还是为我们所广为流传。</p><p>唐代的诗人特别多。李白、杜甫、白居易固然是世界闻名的伟大诗人，除他们之外，还有其他无数诗人，象满天的星斗一样。这些诗人，今天知名的就还有二千三百多人。他们的作品，保存在《全唐诗》中的也还有四万八千九百多首。唐诗的题材非常广泛。有的从侧面反映当时社会的阶级状况和阶级矛盾，揭露了封建社会的黑暗；</p></div><brclass="clearfloat"/><div（5）>©版权所有<br/><ahref="mailto:zhaofengnian@263.net">mailto:zhaofengnian@263.net</a></div></div></body></html>答案：（1）line-height:1.5（2）width:80%（3）text-align（4）#headera:hover（5）id=footer2、网页效果如图所示，请填写以下代码中的空白。<html><head><title>（1）</title><style>body{background:（2）(bg.jpg)fixed;text-align:center;}#navbar{（3）:Arial,Helvetica,sans-serif;}#navbarspan.self{font-weight:bold;（4）:black;//文字颜色设置为黑色background-color:yellow;padding:8px;}#navbara{border:white1pxsolid;（5）:none;//超链接去掉下划线padding:8px;background:white;}#navbara:hover{background-color:yellow;color:black;text-decoration:none;border:1pxyellowsolid;}#container{width:800px;（6）;//设置块居中对齐}#header{position:relative;height:150px;background:url("header-bg.jpg");}#navbar{//设置导航条位置position:absolute;（7）:0px;right:170px;}#main{//设置绝对定位的参照块position:（8）;background:yellow;height:500px;text-align:left;}#sidebar{//设置左边栏位置width:150px;height:1200px;background:silver;position:absolute;top:0px;（9）:0px;padding:15px;}#content{width:600px;height:1200px;background:yellow;position:absolute;top:0px;left:150px;padding:15px;}#anotherbox{width:100px;height:300px;background:silver;position:absolute;top:50px;right:20px;padding:15px;}li{（10）:18px/2em楷体_gb2312,楷体;list-style:none;}//设置列表格式</style></head><body><divid="container"> <divid="header"> <divid="navbar"> <ahref="#">概述</a> <spanclass="self">课程表</span> <ahref="#">日程</a> <ahref="#">项目</a> <ahref="#">作业</a> <ahref="#">资源</a> </div> </div> <divid="main"> <divid="sidebar"> <p>子栏目</p> <ul> <li><ahref="#">项目1</a></li> <li><ahref="#">项目2</a></li> <li><ahref="#">项目3</a></li> </ul> </div> <divid="content"> 其他内容<ahref="#">超链接</a><p>正文内容</p><p>正文内容</p><p>正文内容</p><p>正文内容</p><p>正文内容</p><p>正文内容</p><p>正文内容</p><p>正文内容</p><divid="anotherbox">其他内容</div><p>正文内容</p><p>正文内容</p><p>正文内容</p><p>正文内容</p><p>正文内容</p><p>正文内容</p><p>正文内容</p><p>正文内容</p><p>正文内容</p><p>正文内容</p><p>正文内容</p><p>正文内容</p><p>正文内容</p><p>正文内容</p><p>正文内容</p><p>正文内容</p><p>正文内容</p><p>正文内容</p> </div> </div></div></body></html>答案：（1）绝对定位实例（2）url（3）font-family（4）color（5）text-decoration（6）margin:0auto;（7）bottom（8）relative（9）left（10）font3、网页效果如图所示。左边栏中的超链接鼠标悬停变红色，并且有“按下”效果（文字向右下方移动1像素）；上边导航栏的超链接没有下划线，且鼠标悬停加黄色背景色；右下角的黄色块始终位于浏览器窗口右下角。请填写以下代码中的空白。<html><head><title>网页布局实例</title><linkrel="stylesheet"type="text/css"href="mycss.css"/></head><body><a（1）></a><divid="container"> <divid="header"> <divid="navbar"> <ahref="#">概述</a> <span（2）>课程表</span> <ahref="#">日程</a> <ahref="#">项目</a> <ahref="#">作业</a> <ahref="#">资源</a> </div> </div> <divid="main"> <divid="sidebar"> <p>子栏目</p> <ul> <li><ahref="#">项目1</a></li> <li><ahref="#">项目2</a></li> <li><ahref="#">项目3</a></li> </ul> </div> <divid="content"><ahref="#">超链接</a><form><fieldset><legend>基本信息</legend><p>姓名：<input></p><p>密码：<input（3）></p><p>性别：<input（4）type="radio"name="sex"checked="checked"><labelfor="female">女</label><inputtype="radio"id="male"name="sex"><labelfor="male">男</label></p></fieldset><fieldset><legend>个人兴趣</legend><p>爱好：<inputtype="checkbox">篮球<inputtype="checkbox">足球</p><inputtype="submit"value="提交"></fieldset></form><divid="anotherbox">其他内容</div><p>正文内容</p><p>正文内容</p></div></div></div><pid="up"><ahref="#top">返回顶部</a></p></body></html>同目录下的mycss.css文件：body{（5）:url(bg.jpg)fixed;/*设置背景图案*/text-align:center;}#navbar{font-family:宋体,仿宋;/*设置字体*/}#navbarspan.self{font-weight:bold;color:black;background-color:yellow;padding:8px;}#navbara{border:white1pxsolid;（6）;/*超链接去掉下划线*/padding:8px;background:white;}#navbara:hover{background-color:yellow;color:black;text-decoration:none;border:1pxyellowsolid;}#container{width:800px;margin:0auto;/*设置块居中*/}#header{position:relative;height:150px;background:url("header-bg.jpg");}#navbar{position:absolute;bottom:0px;right:170px;}/*设置导航条位置*/#main{position:relative;background:yellow;height:1200px;text-align:left;}/*设置绝对定位的参照块*/#sidebar{width:150px;height:1200px;background:silver;position:absolute;top:0px;left:0px;padding:15px;}/*设置左边栏位置*/#sidebara:hover{color:red;(7);top:1px;left:1px;}#content{width:600px;height:1200px;background:yellow;position:absolute;top:0px;left:150px;padding:15px;}#anotherbox{width:100px;height:300px;background:silver;position:absolute;top:50px;right:20px;padding:15px;}#up{position:（8）;right:15px;bottom:5px;width:100px;background:yellow;line-height:2em;}li{（9）:18px/2em楷体_gb2312,楷体;list-style:none;}/*设置列表格式*//*设置表单效果*/fieldset{padding:8px;margin-bottom:20px;width:400px;（10）:center;}legend{font-family:楷体;color:red;padding:15px;}（1）name="top"或id="top"（2）class="self"（3）type="password"（4）id="female"（5）background（6）text-decoration:none（7）position:relative（8）fixed（9）font（10）text-align第7章JavaScript与前端开发技术第1题判断正误JavaScript变量可以在声明时赋值，也可以在声明之后再赋值。（对）JavaScript变量不区分大小写。（错）大多数JavaScript运算符都是双目运算符。（对）Ifelse语句和switch语句都可以用来表示多路分支。（对）dowhile语句与while语句的区别是循环体语句至少执行一次。（对）break语句仅用于跳出循环结构。（错）Date对象的getDay()方法返回一个1-7的整数。（错）JavaScript语句document.body.style.background-color="red";可以将背景颜色设置为红色。（错）document对象的anchors对象返回所有的超链接和图像映射。（错）document对象的getElementsByClassName()方法返回文档中所有指定类名的元素集合。（对）document对象的querySelectorAll()方法返回文档中匹配指定的CSS选择器的第1个元素。（错）textContent和innerHTML都可用于设置或返回节点的文本内容，二者功能相同。（错）JQuery的选择器基于CSS的选择器，包括标记符、类、ID、子元素、后代、相邻兄弟、属性、伪类等。（对）第2题单选题（1）以下有关JavaScript的说法中，正确的是：。BA.定义JavaScript变量时不区分大小写。B.JavaScript变量既可以在声明时赋值，也可以在声明之后赋值。C.JavaScript运算符都必须使用2个操作数。D.在创建数组时，必须指明数组的长度。（2）已知网页的HTML代码如下，以下在JavaScript中引用HTML对象的方式中，错误的是：。C<html><body><formname="myForm"><inputname="myText"><inputtype="password"name="myPwd"></form></body></html>A.window.document.myForm.myText B.document.myForm.myTextC.document.all.forms[1].myPwd D.document.forms[0].myPwd（3）在网页中如果嵌入以下JavaScript代码，则将在屏幕上显示：。Cfunctionfun1(a,b){if(a>b)return(a*(--b));elseif(a<b) return((++a)*(b++));elsereturn(a*b);}varx=3;document.write(fun1(2,x));A.6 B.8 C.9 D.12（4）以下document方法标记符名的对象集合：CA.getElementsByClassName()B.getElementById()C.getElementsByTagName()D.getElementsByName()（5）在Bootstrap的网格中，系统最多可以将网页分为列。DA.6 B.8