Web前端开发必知必会 选择题答案及解析

《Web前端必知必会》选择题答案及解析目录第1课 Web前端简介 1第2课 常用HTML标签及其属性 1第3课 超链接与路径 2第4课 简单CSS 2第5课 复合选择器与网页导航 3第6课 基本HTML5框架与应用 3第7课 盒子模型与DOM 3第8课 position位置属性 4第9课 CSS+DIV固定宽度页面布局 4第10课 表单基础 4第11课 JavaScript基本应用 5第12课 jQuery特效 5第13课 固定宽度网页实例 5第14课 响应式设计基础 5第15课 响应式设计特点及应用 6第16课 Flexbox伸缩盒 6第17课 网站建设概述 6第18课 HTML5的API 6附录补充：常用学习网站指南 7第1课 Web前端简介1、答案：B解析：网页三要素分别是结构、表现、行为，对应的是HTM、CSS与JavaScript，C语言是另外的高级语言，通常用于底层的软件开发，不是网页需要的计算机语言。2、答案：C解析：网页中通过JavaScript代码，让页面具有交互性与动态性。3、答案：A

解析：所有要显示在网页中的内容，都应该放在body标签中。4、答案：C解析：网站中除了使用HTML、CSS外，也会使用JavaScript代码实现页面互动。 第2课 常用HTML标签及其属性 1、答案：C解析：color不是网页元素的标签名。2、答案：C解析：<br>是一个换行符，只需要一个<>，不成对。3、答案：B解析：文本的上标用的是标签，下标用标签，不属于特殊符号。4、答案：D解析：想要设置双线的表格，cellspacing单元格间距不为0，且要设置border不为0。 5、答案：C解析：<ol>结合<li>生成带数字的项目列表。6、答案：D解析：让一个div整体居中的方式，一是有一定宽度（其宽度不能是100%），二是外边距margin为自动auto，D选项中margin:auto0px;表示上下外边距为自动，左右为0，因此无法实现居中。第3课 超链接与路径1、答案：B解析：<ahref="#">，表示空链接，且href属性是不能缺省的。2、答案：C解析：四个选项中，只有<rect>表示的是地图中的矩形区域，用户也能用<circle>、<poly>等圈定超链接区域，其它3项在使用地图超链接时都会用到，不可缺少。第4课 简单CSS1、答案：D解析：“#12x”的ID名为数字开头，错了；“myfont”非标签，前面缺少用“#”或类“.”开头；“img”是标签名，不能作为类名，前面不能带符号；只有D选项是正确，body为标签名。2、答案：A解析：CascadingStyleSheets即层叠式样表。3、答案：C解析：color为字体颜色、font-size为字体大小、font-weight为字体粗细，float通常用于左右并排，不属于文本样式。4、答案：D解析：应该是color:RED;，RED为预定义的颜色，其他预定义颜色包括：BLUE,YELLOW,WHITE,BLACK,PURPLE,CYAN等等。5、答案：B解析：默认填充方式为全部充满，即repeat（X、Y方向全部填充）。6、答案：B解析：p.first{…}所定义的样式，此first类只对段落有效，对首字下沉需要用的<span>标签无效。7、答案：B解析：只有选项B是合法的样式写法。8、答案：B解析：A组“#123”不规范，C组“.a”和“.b”不规范，D组“.h3”不规范，只有B组的选择器命名全部规范。9、答案：C解析：通常边框线需要设置三个属性：颜色、线型、粗细，C组中只设置了颜色，因此选C。10、答案：A解析：A选项是外边距属性，其余三个选项均为内边距设置，且三者的含义是一样的。11、答案：C解析：类、ID选择器需要显式引用，而标签，以及很多的复合选择器，例如：navulli，li:nth-child(even)等，是不需要显式引用的。12、答案：B解析：选项B中，代码的最终结果页面显示为灰色，因为网页的样式时从上至下执行的，而且行内式样式的优先级最高，先设置为粉色，但是又在行内设置为灰色，因此最终为灰色。第5课 复合选择器与网页导航 1、答案：C解析：a:hover为鼠标悬停。2、答案：D解析：选项从A~D的属性含义分别为：文本对齐方式、文本大小写转换、文本缩进、文本修饰，其中下划线（underline）为文本修饰属性。3、答案：D解析：D选项中，用“,”分隔的是成组选择器，nava:link与a:visited二者共用代码，因此后面的nav不可省，即要改为“nava:link,nava:visited”才是超链接中后代选择器的正确写法。4、答案：D解析：navilia:hover选择器写法错误，“navi”需要添加ID符号“#”。第6课 基本HTML5框架与应用 1、答案：A解析：只有A选项的说法是正确的。meta中的信息不会显示在网页中，不会显示在网页标题中，也不属于CSS样式。2、答案：D解析：制作HTML5网页的时候，还是以开发者习惯为主，建议使用结构化语义化标签<header>、<footer>，但非必须。3、答案：C解析：选项A错在<navi>，并无此标签；选项B与选项D均未使用<nav>标签；只有选项C是正确的。4、答案：D解析：<foot>不对，无此标签名。5、答案：A解析：有效页面居中需要同时满足两个条件，只有选项A符合。1）有一定宽度，不能是100%宽度；2）外边距margin左右自动。第7课 盒子模型与DOM 1、答案：D解析：dashed表示虚线，需要有padding值才能有背景色，float实现图文混排，只有选项D的结果全部符合要求。2、答案：D解析：只有D说法正确。两个div之间为父子关系或称嵌套关系，盒子模型中不存在“上下关系”的说法。3、答案：A解析：float:none;能够让元素回到标准流状态。4、答案：D解析：float属性用处很多，ABC选项都是它的主要功能。第8课 position位置属性 1、答案：B解析：只有选项B是正确的。父块的position属性不能是none，而子块需要设置为position:absolute;。2、答案：D解析：除了使用top、left属性，也可以使用bottom、right属性。3、答案：A解析：apDiv（层）的本质还是使用ID的div标签，它本身不是一个单独的标签。第9课 CSS+DIV固定宽度页面布局 1、答案：B解析：一般选择器命名应该见词生义，#top-nav适合应用于导航，而不是最外容器。2、答案：C解析：div是块级元素，默认占用一行，因此仅仅设置较小的宽度，是无法实现并排的。。3、答案：B解析：无选项B说法。。4、答案：B 解析：背景图像填充是可以选择背景图像显示位置的；通常使用无序列表（ul、li）设计横向导航菜单；三列布局也是采用float+clear属性进行布局，只有选项B的说法是正确的。5、答案：A解析：是保证第三个兄弟块在前两个兄弟块下方的一种方法，也可以通过设置包含左右布局块的父块的overflow:hidden;，保证第三方块无法入侵。 第10课 表单基础 1、答案：A解析：略。2、答案：D解析：当一组若干个单选框的所有name相同时，每次只能选中一个。3、答案：B解析：多行文本域的标签为<textarea>。4、答案：D解析：普通文本框type为"text"。5、答案：A解析：placeholder属性用于提醒用户输入哪种信息。6、答案：D解析：同上第2小题第11课 JavaScript基本应用 1、答案：D解析：JavaScript代码均添加在网页代码中的<script>与</script>之间。2、答案：B解析：文档对象模型。3、答案：C解析：既可以将代码嵌入到网页文件，也可以使用链接外部JS文件。4、答案：A解析：A选项的getElementByIdName()中多了Name，错了。5、答案：C解析：Math.round(x)中x的值只能是数值。6、答案：C解析：getYear()方法只能返回年份的后2位，getFullYear()是返回四位年份。第12课 jQuery特效 1、答案：A解析：$是jQuery程序标志性的符号。2、答案：D解析：不一定要在线链接，也可以将库文件下载到本地后使用。3、答案：A解析：jQuery的口号是“写得更少，做得更多”。4、答案：C解析：ID是网页唯一标识，因此利用ID选择器来获取网页中的元素最快最高效。第13课 固定宽度网页实例 1、答案：D解析：开发网站的时候，建议使用<header>、<footer>等语义化新标签，但不是一定要。2、答案：C解析：动态网站指的是网页内容是通过jsp、asp等技术结合数据库等进行动态更新，如果只有JavaScript特效的网页，并不是动态网站。3、答案：D解析：按钮效果的超链接不是表单元素按钮，其本质上还是超链接。第14课 响应式设计基础 1、答案：D解析：开发网站的时候，建议使用<header>、<footer>等语义化新标签，但不是一定要。2、答案：C解析：动态网站指的是网页内容是通过jsp、asp等技术结合数据库等进行动态更新，如果只有JavaScript特效的网页，并不是动态网站。3、答案：D解析：按钮效果的超链接不是表单元素按钮，其本质上还是超链接。第15课 响应式设计特点及应用 1、答案：D解析：选项D中，screen后面缺少and，因此错误。。2、答案：C解析：响应式设计中单张网页的代码会更多更累赘，工作量更大。3、答案：A解析：以上四个选项中，只有SVG属于矢量图形，放多大都不失真。4、答案：C解析：响应式网站建议使用HTML5标准但不是必须HTML5。5、答案：D解析：选项A中，使用background-position:…px…px，可以设置背景的精确到px位置；选项B中，GIF图像格式是8位的图像；选项C中，设置图片的{width:50%;}，显示的图像大小就是其父块的一半。只有选项D是正确的。第16课 Flexbox伸缩盒 1、答案：A解析：选项B错，还需要设置父块的display:flex;属性；选项C错，应该在子项中添加order属性；选项D错，也还需要设置父块的display:flex;属性；只有选项A说法是正确的。2、答案：B解析：设置为比例宽度也能自动缩放子项目元素大小，因此不是flexbox重要的功能。第17课 网站建设概述 1、答案：D解析：一般地，网站的更新与维护不算在开发过程内，而是作为一种售后服务。2、答案：D解析：网站中的JavaScript代码，可以根据实际需要直接嵌入到HTML文档内，并不一定需要将都放入外部js文件中，而css样式一般使用外部CSS文件。第18课 HTML5的API 1、答案：B解析：<video>是HTML5视频标签，本身不需要JavaScript代码连接接口。2、答案：A解析：选项A只是对<canvas>画布设置其CSS样式背景，并不是API的一部分。附录补充：常用学习网站指南常见的学习网站与工具网站见下面附表。附表常用学习网站序号网站名称网址备注一、学习网站1W3C学校/tags/index.asp入门级2菜鸟教程/入门级3Bootstrap响应式框架/4FontAwesome字体