mooc界面设计技术基础章节答案(慕课2023课后作业答案)
79 min readmooc界面设计技术基础章节答案(慕课2023课后作业答案)
1、界面技术基础【多选题】网页的设计设计技术发展经历了哪些阶段？
A、纯文本形式的章节作业网页
B、以表格作为主要布局手段的答案答案网页
C、以Flash实现的慕课网页
D、以XHTML+CSS+JavsScript实现的课后网页
2、【多选题】对于网页的界面技术基础组成表述正确的是（）
A、XHTML标签用于设计网页的设计结构
B、CSS用于设计网页的章节作业表现形式
C、JavaScript用于设计网页的答案答案动态行为效果
D、三者是慕课相互独立，没有关联
3、课后【判断题】XHTML决定了网页“是界面技术基础什么”，它是设计网页的基础结构，CSS是章节作业以XHTML标签为基础来添加的。
4、【判断题】CSS决定了网页是“什么样子”，不同的设计师可以给网页设计出千变万化的表现形式。
5、【判断题】JavaScript可以让原本静止的网页增加丰富实用的功能。
1.2搭建网页基础标签
1、【多选题】对HTML的理解正确的是（）
A、一种超文本标记语言
B、是一种编程语言
C、是一套标记标签
D、可用于描述网页的结构
2、【多选题】对于XHTML的理解正确的是（）
A、可扩展超文本标签语言
B、融合了HTML与XML的优点
C、与HTML互不兼容
D、可以方便网页移植到各种设备上
3、【多选题】任何一张网页必须具备的标签包括（）
A、<html>
B、<head>
C、<body>
D、<div>
1.3添加网页样式的方法
1、【多选题】以下对CSS的作用描述正确的是（）
A、CSS依赖于HTML而存在，只能应用于当前网页
B、CSS只负责设计网页的表现形式
C、CSS的使用提高了网页的开发效率和降低了维护成本
D、相同的一张网页可以使用不同的CSS，从而展现出多样的外观
2、【多选题】对CSS中的选择器理解正确的是（）
A、选择器必须写在样式的开头位置
B、选择器表示样式作用的目标对象
C、选择器后面必须使用{ }来书写具体样式
D、选择器只有一种
3、【多选题】以下对外部样式表的描述正确的是（）
A、外部样式表适用于将CSS应用于多张页面的情况
B、采用<link>标签来表示，具体写法如<link rel="stylesheet" type="text/css" src="mystyle.css">
C、具有一处更新，处处更新的有点
D、外部样式表必须存放在网站的文件夹内，确保网页可以正确链接到
4、【多选题】以下对内部样式表的描述正确的是（）
A、如果样式仅局限于当前网页，可以采用内部样式表
B、使用<style>标签来表示
C、可以放置在网页中的任何位置
D、内部样式表与网页标签同处一张网页，使得网页的源代码过多，不利于后期维护
5、【多选题】以下对内联样式的描述正确的是（）
A、内联样式只能作用在一个标签上
B、内联样式是将样式和标签混合在一起的
C、内联样式简单方便，在网页设计中鼓励采用此方式
D、内联样式丢失了CSS的灵活与多样性的特点，不鼓励采用
1.4我的第一张网页
1、【多选题】以下对h1~h6标签的描述正确的是（）
A、块状元素，拥有独立的高度和宽度
B、搜索引擎对其有较高的敏感度，其中对h1的敏感度最高，随后依次降低
C、标题标签具有默认的样式，包括字号、margin和padding
D、标题标签的默认样式是不可以修改的
2、【多选题】以下对p标签的描述正确的是（）
A、行内元素，按顺序一行一行排列
B、块状元素，不允许其他元素与其位于同一行
C、段落标签，用于显示网页中的正文段落
D、p标签有默认的margin和padding
3、【多选题】以下对于id选择符和标签选择符的描述正确的是（）
A、id选择符只能选中一个标签作为目标对象
B、id选择符能够将多个标签选中作为目标对象
C、标签选择符只能选中一个标签作为目标对象
D、标签选择符能够将多个标签选中作为目标对象
4、【判断题】样式中的color属性用于设置元素的背景色
5、【判断题】样式中的line-height用于设置行高
6、【判断题】margin:10px 20px;表示左右边距为10像素，上下边距为20像素
7、【判断题】padding:5px 6px 7px 8px;表示上边距5像素，右边距6像素，下边距7像素，左边距8像素
8、【简答题】请告诉我，你在完成第一张网页后有什么样的感受？存在哪些难点？
9、【其它】动手做一做： 1.边看视频边动手完成“我的第一张网页”的制作 2.以附件形式提交网页
2.1网页文字的排版规则
1、【多选题】对于网页中的字体使用说法正确的是（）
A、字体可以任意选择
B、字体应该根据文字的用途来决定
C、网页中的字体不宜太多
D、特殊效果的字体可采用图片替代
2、【多选题】对于网页中的字号使用说法正确的是（）
A、标题字号应大于正文字号
B、字号越大越好，便于用户浏览
C、字号越小越好，可以容纳更多信息量
D、随着显示器越来越大，分辨率越来越高，正文可以适当采用大一些的字号
3、【多选题】对于网页中文字颜色的使用说法正确的是（）
A、使用的文字颜色越多，越有利于网页的阅读
B、标题和正文的字体颜色应该有所区别
C、标题可以采用辨识度高的颜色来吸引眼球
D、正文应该选择柔和的颜色便于阅读
4、【多选题】以下对于网页文字的排版规则描述正确的是（）
A、每行间距太小，读者浏览文章时容易串行；如果行距过宽，阅读时就会感觉文章不够连贯。
B、行距没有固定的值，通常是根据字体大小来定义的。
C、不鼓励使用闪烁的文字
D、最好使用左对齐，符合浏览者的阅读习惯
5、【简答题】请尝试分析以下这张网页的文字排版设计存在哪些问题？
2.2文字排版基础案例
1、【简答题】说说“最美乡村医生”网页案例的实现过程中，你觉得有疑惑的地方，或者不理解的难点。
2、【其它】动手做一做： 1.边看视频边动手，完成“最美乡村医生”网页 2.以附件形式提交网页 最美乡村医生素材.zip
2.3文字排版进阶案例
1、【简答题】说说你在该案例实现过程中遇到了哪些理解上的难点？
2、【其它】动手做一做： 1.边看视频边动手，完成“互联网的起源和发展”网页 2.以附件形式提交网页 素材.zip
2.4文字排版提升案例
1、【简答题】你觉得本案例“奥林匹克运动会”网页中的文字排版设计有哪些地方可以改进？
2、【其它】动手做一做： 1.边看视频边动手，完成“奥林匹克运动会”网页 2.以附件形式提交网页 奥林匹克素材.rar
3.1图文混排的基本原则
1、【多选题】关于图文混排中的比例问题说法正确的是（）
A、图文比例要根据网站的主题来决定
B、娱乐性为主题的网站通常图片所占比例较大
C、新闻性或专业技术性网站文字所站的比例较大
D、网页的图文比例可以根据设计师的个人设计风格来调整
2、【多选题】对于图文混排中的间距问题说法正确的是（）
A、间距可以随意设置
B、图片和文本之间的间距可以体现出两者的关系
C、图文单元的内部间距应该大于外部间距
D、图文单元的内部间距应该小于外部间距
3、【多选题】对于实现图文混排的方法描述正确的是（）
A、可以使用表格来实现
B、可以使用无序列表实现
C、表格实现的图文混排布局固定，难以修改
D、无序列表实现的图文混排布局较为复杂，但是可以灵活适应页面的变化
4、【简答题】说说你以前所制作的网页采用什么方法实现图文混排？有何优缺点？
3.2图左文右的混排
1、【多选题】以下对流动布局的理解正确的是（）
A、默认的网页布局模式
B、根据元素出现的先后顺序从上往下排列
C、通常借助表格来实现复杂的网页布局效果
D、简单直观，易理解
2、【多选题】以下对浮动布局的理解错误的是（）
A、浮动布局可以实现多个元素左右排列
B、浮动布局可以实现多个元素环绕排列
C、浮动布局与流动布局是不能同时存在于一张网页中的
D、浮动布局是一种固定的布局结构，不能根据网页的变化自适应调整
3、【简答题】谈谈例子中，你对浮动布局的使用有什么心得？
4、【其它】动手做一做： 边看视频边动手，完成“图左文右的混排”网页 以附件形式提交网页 图左文右混排素材.zip
3.3图上文下的混排
1、【多选题】对于浮动的理解正确的是（）
A、浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
B、浮动时，不需要设置元素的宽度
C、由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
D、在 CSS 中，我们通过 float 属性实现元素的浮动。
2、【多选题】对于盒子模型的理解正确的是（）
A、在 CSS 中，width 和 height 指的是内容区域（element）的宽度和高度。
B、增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
C、增加内边距、边框和外边距会影响内容区域的尺寸。
D、盒子可以互相嵌套，形成灵活多变的布局结构
3、【论述题】说说你对图上文下这种混排方式的理解，并告诉我本案例中你所遇到的问题。
4、【其它】动手做一做： 边看视频边动手，完成“图上文下的混排”实例 以附件形式提交网页 图上文下素材.zip
3.4双层浮动的复杂混排
1、【简答题】说说这个案例对你来说有哪些难点？
2、【其它】动手做一做： 边看视频边动手，完成“双层浮动的复杂混排”案例 以附件形式提交网页 双层浮动素材.zip
4.1成功导航的特征
1、【单选题】关于网页中的导航理解错误的是
A、一个成功的导航主要关注的是美观，动态效果要吸引眼球，而内在的信息结构设计并不重要。
B、简洁高效的导航菜单设计，能够有效优化搜索，改善用户体验。
C、最好的导航就是用户感觉不到导航的存在，很自然的找到目标页面。
D、鼠标悬停时要有变化，明确定位，帮助用户选择和点击导航。
2、【论述题】请选取你认为在导航设计上成功的2张网页（参考资源里的网页除外），并将网页的整体截图上传； 请详细说明你认为它们成功的理由。
4.2水平导航条
1、【多选题】对于伪类选择符的说法正确的是（）
A、在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
B、在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
C、伪类名称对大小写不敏感。
D、超链接的4种状态可以在样式a{ ...}中公用样式
2、【多选题】对于display属性的理解正确的是（）
A、所有主流浏览器都支持 display 属性。
B、这个属性用于定义建立布局时元素生成的显示框类型。
C、如果使用 display 不谨慎会很危险，因为可能违反 HTML 中已经定义的显示层次结构。
D、该属性可以把行内元素显示为块状元素
3、【其它】动手做一做： 边看视频边动手，完成“水平导航条”案例 以附件形式提交网页
4.3垂直导航条
1、【多选题】对于选择符的理解正确的是（）
A、我们可以根据需要灵活的设计选择符
B、同一个样式效果可以采用不同的选择符来实现
C、选择符决定了样式作用的目标对象
D、通过合理设计选择符可以简化样式的复杂度
2、【其它】动手做一做： 边看视频边动手，完成“垂直导航条”案例 以附件形式提交网页 素材下载： 垂直导航条素材.zip
4.4滑动门技术
1、【多选题】对于滑动门导航条的描述正确的是（）
A、能够根据导航条菜单文本长度自动调节宽度
B、可以用简单背景小图来实现炫彩的导航条风格，大大减少网页载入内容
C、实现滑动门效果的导航条通常需要更多的标签
D、滑动门技术是通过在标签上设计双层背景图，保持左右两端的背景图形不变，中间背景图形可以根据内容自动调节
2、【简答题】滑动门导航条实现过程中，你觉得难点在哪里？
3、【其它】动手做一做： 边看视频边动手，完成“滑动门技术”案例 以附件形式提交网页 素材下载： 滑动门技术素材.rar
5.1表格的标签结构
1、【单选题】以下哪个不属于组成表格的必备标签（）
A、caption
B、table
C、tr
D、td
2、【单选题】定义表格的表头需要用到的标签不包括（）
A、thead
B、tr
C、td
D、th
3、【多选题】以下对表格相关标签的说法错误的是（）
A、<table>标签是表格必不可少的
B、表格标签中不需包含th标签
C、<tr>表示表格中的一行
D、每一对<tr>标签内包含的<td>标签数量是一样的
4、【多选题】关于表格应用的发展描述正确的是（）
A、表格在出现的早期主要服务于网页中的数据显示
B、表格出现的中期在网页布局上发挥了很大作用
C、目前而言，表格在网页布局上的应用地位已经被div+css方式所取代
D、表格将来会逐步被淘汰，所以不需要掌握表格的用法
5.2规则表格的设计
1、【多选题】关于规则表格的作用描述正确的是（）
A、主要用于组织和显示网页中的数据信息
B、主要用于实现网页的布局设计
C、只能显示数据结构规范、清晰的信息
D、能够显示复杂数据结构的信息
2、【其它】动手做一做： 边看视频边动手，完成“规则表格的设计”案例 以附件形式提交网页
5.3不规则表格的设计
1、【多选题】关于不规则表格的说法正确的是（）
A、不规则表格中每一对<tr>里面包含的<td>标签数量是一样的
B、可以通过表格的嵌套设计出更为复杂的不规则表格
C、不规则表格多用于复杂数据结构的显示
D、不规则表格与规则表格的标签结构大体上是相同的
2、【多选题】对于如何设计一个高效的表格，说法正确的是（）
A、坚持使用简单的方格
B、不要留空白单元格
C、高亮强调重要的行和列
D、使用图标
3、【判断题】实现单元格可以横跨多列，需要添加rowspan属性。
4、【其它】动手做一做： 边看视频边动手，完成“不规则表格的设计”案例 以附件形式提交网页
6.1固定宽度布局
1、【多选题】对于固定宽度布局的说法正确的是（）
A、主要依靠浮动来实现多列主体内容的排列
B、适合网页内容相对固定，布局不需要自适应调整
C、可以采用表格来实现布局
D、由于使用了浮动，会出现父元素塌陷的情况
2、【多选题】由于使用浮动后产生父元素塌陷，解决的方法有（）
A、在父div里加入height属性，该方法适用于子元素高度已知并且固定的情况。
B、父div也一起浮动
C、在最后一个子元素后加入<div class="clearFloat"></div>，样式中clearFloat{ clear:both;}清除浮动元素。
D、在父div里加入overflow:hidden属性
3、【其它】动手做一做： 边看视频边动手，完成“固定宽度布局”案例 以附件形式提交网页
6.2单侧列宽固定的变宽布局
1、【多选题】对于网页的布局发展趋势描述正确的是（）
A、分割屏幕
B、去界面化
C、基于模块或网格
D、一屏以内
2、【多选题】对于“单侧列宽固定的变宽布局”说法正确的是（）
A、固定的列一般用于放置垂直导航条
B、用户所用的浏览器、显示器、分辨率大多都是不一样的，变宽布局就是为了确保不同用户持有不同设备所看到同一个网址的页面显示内容相同。
C、通过margin负值和浮动的结合可以实现变宽布局
D、变宽布局相比较固定布局而言更为复杂
3、【其它】动手做一做： 边看视频边动手，完成“单侧列宽固定的变宽布局”案例 以附件形式提交网页
6.3双侧列宽固定的变宽布局
1、【简答题】说说你对变宽布局的实现原理是如何理解的？
2、【其它】任务：观看视频，并完成“双侧列宽固定布局”案例
7.1认识JavaScript
1、【单选题】以下对JavaScript的主要用途描述不正确的是（）
A、网页中的交互式菜单
B、网页中的图片展示特效
C、网页样式的设计
D、表单的数据验证
2、【单选题】对于JavaScript的理解错误的是
A、JavaScript 是可插直接嵌入HTML 页面
B、JavaScript 可以在服务器端执行，完成对数据库的操作
C、JavaScript主要用来给html网页添加交互行为
D、JavaScript写成单独的js文件有利于结构和行为的分离
3、【单选题】JavaScript与HTML、CSS三者的关系描述错误的是（）
A、JavaScript是独立于HTML、CSS而存在的
B、JavaScript以HTML、CSS为基础
C、JavaScript可以操作HTML标签
D、JavaScript可以操作CSS样式
7.2网页中添加脚本方法一
1、【多选题】对于网页中添加JS的方法描述正确的是
A、使用<script>标签来嵌套JS
B、<script>标签必须放在<head>内部
C、一张网页里面只能出现一次<script>标签
D、一张网页里面可以多次使用<script>标签
2、【简答题】说说你之前学过哪些程序设计类课程？
3、【简答题】你对编写程序的态度是（可以从以下提示中选择回答，也可以用其他文字描述）： A.比较讨厌和恐惧 B.不太喜欢，因为比较难以理解 C.课堂上的内容还可以接受，但是没法自己编写 D.喜欢程序，乐于尝试自己编写 E.能够快速消化课堂内容，还可以自己动手编写
7.3网页中添加脚本方法二
1、【单选题】将JavaScript保存为js文件来使用的这种方法不适用于（）
A、JavaScript代码量比较大
B、JavaScript代码在多张网页中被使用
C、JavaScript代码需要反复调试和修改
D、JavaScript代码只在当前页面实现简单功能
2、【单选题】调用外部js文件中的函数方法错误的是（）
A、通过script标签的src属性链接js文件
B、链接js文件的script标签必须放在head标签内
C、js文件中需要加入script标签
D、通过函数名来调用js文件中的函数
7.4网页中添加脚本方法三
1、【简答题】请说说添加JavaScript的三种方法各有何优缺点？
7.5变量使用
1、【单选题】以下变量名命名正确的是
A、book+6
B、book 6
C、book6
D、6book
2、【多选题】JS中对变量的描述正确的是
A、用于存放程序运行过程中的数据
B、变量中的数据是可以改变的
C、使用var关键字来声明变量
D、通过变量名来使用变量
3、【多选题】关于变量的作用域说法正确的是
A、变量在整个网页范围都是可用的
B、全局变量在整个网页范围都是可用的
C、局部变量通常定义在函数里面，只在函数内有效
D、全局变量和局部变量是根据变量声明的位置来决定
7.6数据类型与转换
1、【单选题】要在网页上输出以下内容："张三"，欢迎您的光临！ 已知s="张三"；正确的输出语句是（）
A、document.write(s+"，欢迎您的光临！");
B、document.write("s，欢迎您的光临！");
C、document.write(\"s\"+"，欢迎您的光临！");
D、document.write("\"+s+\"+"，欢迎您的光临！");
2、【多选题】number类型的取值包括哪些（）
A、整数
B、浮点数
C、Infinity
D、NaN
3、【多选题】以下数据类型转换的结果等于123的是（）
A、parseInt("123bcd")
B、parseFloat("123bcd")
C、Number("123bcd")
D、parseInt("bcd123")
7.7if语句
1、【多选题】对以下if结构的说法正确的是 if(a>b){ ...} if(a==b){ ...} if(a<b){ ...}
A、3个if语句都会被执行
B、3个if语句只有一个会被执行
C、3个if语句相互独立
D、3个if语句相互关联
2、【多选题】对以下if结构的说法正确的是 if(a>b){ ... }else if(a==b){ ... }else{ ... }
A、该if语句能够完成3种条件的判断
B、该if语句有3条分支，且相互关联
C、如果第一个条件a<b满足，则后面的判断将不再执行
D、尽管第一个条件a<b满足，但后面的判断依然会执行
3、【其它】动手做一做： 边看视频边动手，完成“根据成绩给出学生考评”网页 以附件形式提交网页 素材下载： 根据成绩给出学生考评.html 网页效果图：
7.8switch语句
1、【多选题】对以下的switch语句说法正确的是 switch(num){ case 1: ...break; case 0: ...break;case 2: ...break; default: ...break;}
A、num变量的数据类型是数字
B、以上的switch语句只能判断4种情况
C、case分支是相互关联的
D、case分支是相互独立的
2、【其它】动手做一做： 边看视频边动手，完成“显示每一天的问候语”网页 以附件形式提交网页 素材下载： 显示每一天的问候语.html 网页效果图：
7.9数组
1、【简答题】说说你对案例“根据下标访问数组元素”的程序设计思路是如何理解的？
2、【其它】任务：完成“根据下标访问数组元素”的程序设计 要求： 能够判断用户输入是否正确 能够根据用户的输入给出对应的输出结果
7.12函数与事件
1、【其它】任务：完成简易计算器的制作 要求： 可进行+、-、*、/四则运算 当分母为0时，给出错误提示 当输入非数字字符时，给出错误提示 素材下载： 简易计算器.zip
7.14网页文档对象模型（HTML DOM）
1、【单选题】<html>节点的最后一个儿子节点是（）
A、<head>
B、<title>
C、<div>
D、<body>
2、【单选题】关于HTML DOM以下说法错误的是（）
A、每个节点都有父节点
B、兄弟节点拥有相同的父节点
C、节点树的根结点是<html>
D、通过Javascript可以访问节点树中的任何节点
3、【其它】任务：根据标签结构绘制节点树（只需绘制元素节点） 要求：以插入图片的形式（不要使用“上传附件”）提交结果 标签如下：
8.2表单数据验证
1、【其它】任务：请完成“用户注册”表单中的信息验证 要求： 1。实现用户名、密码长度的验证 2。实现两次密码是否一致的验证 3。实现邮箱格式的验证 4。实现个人网址的验证
