习题答案HTML5+CSS3+JavaScript 网页设计案例开发吕云翔清华大学出版社.docx

1、习题答案HTML5+CSS3+JavaScript 网页设计案例开发吕云翔清华大学出版社习题答案第一章1.学习HTML/CSS/JavaScript的使用通常要准备哪些工具？IDE主要有：Sublime, VS code, Dreamweaver, Atom2.HTML中、标签的基本含义是什么？ 声明必须是 HTML 文档的第一行，位于 标签之前。它是指示web浏览器关于页面使用哪个HTML版本进行编写的指令。如果添加html，标明使用的是HTML5的版本。 此元素可告知浏览器其自身是一个 HTML 文档。 标签用于定义文档的头部，它是所有头部元素的容器。 中的元素可以引用脚本、指示浏览器在哪

2、里找到样式表、提供元信息等等。 元素可定义文档的标题。 元素定义文档的主体,包含文档的所有内容（比如文本、超链接、图像、表格和列表等等）。 标签定义一级标题。 标签定义段落。3.现代网页设计思路经常将网页分成哪三个层次？主要有：结构层、表示层、行为层。结构层（structural layer）由HTML或 XHTML之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。表示层（presentation layer）由CSS负责创建，对“如何显示有关内容”的问题做出了回答。行为层（behavior layer

3、）负责“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM 主宰的领域。4.简单概括HTML/CSS/JavaScript的特点。JavaScript是一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言的内置支持类型。CSS的三个特性是指层叠性、继承性以及优先级。HTML的特性是简易性，可扩展性，平台无关性，通用性。5.CSS有几种使用形式，分别是哪几种？主要有3种，分别是内联样式，嵌入式样式，外部样式。第二章1.学习HTML/CSS/JavaScript的使用通常要准备哪些工具？需要IDE：Notepad+、Sublime、Hbuilder、VS cod

4、e、Atom等。需要主要浏览器：Chrome、Safari、FireFox、Edge等。2.简单概括HTML诞生背景及其特点。在1989年开发出了世界上第一个Web服务器与Web客户端，并将这项发明取名为world wide web，也就是我们现在所说的WWW万维网。HTML也因此诞生。HTML的特性是简易性，可扩展性，平台无关性，通用性。3.HTML最简单的开发环境是（B）A.Windows + IE浏览器B.任何浏览器+文本编辑器C.手机+浏览器D.Dreamweaver+IE浏览器4.什么是HTML元素，什么是元素的属性？HTML 元素指的是从开始标签（start tag）到结束标签（e

5、nd tag）的所有代码。为HTML元素提供各种附加信息的就是HTML属性，它总是以属性名=属性值这种名值对的形式出现，而且属性总是在HTML元素的开始标签中进行定义。第三章1.CSS 规则由哪两个主要的部分构成？CSS 划定由两个首要的一小块组成：决议器，以及一条或多条声明。2.简要说明CSS的三种样式的特点及其使用方式。CSS样式分为：内联式css样式、嵌入式css样式、外部式css样式。 内联式css样式：把css代码直接写在现有的HTML标签中，例如 这是一个段落标记嵌入式css样式：在HTML文档中的中使用标记，被称为内嵌式。外部式css样式(也可称为外联式)就是把css代码写一个单

6、独的外部文件中，这个css样式文件以“.css”为扩展名（也可以为调用其他网站CSS）第四章1.学习HTML/CSS/JavaScript的使用通常要准备哪些工具？需要IDE：Notepad+、Sublime、Hbuilder、VS code、Atom等。需要主要浏览器：Chrome、Safari、FireFox、Edge等。2.简单说明JavaScript的特点。解释性执行的脚本语言，基于对象的脚本语言，简单弱类型脚本语言，相对安全脚本语言，事件驱动脚本语言，跨平台性脚本语言。3.JavaScript的每行代码应当以（D）结尾A. 逗号B. 分号C.换行D.分号或换行4.什么是JavaScr

7、ipt对象？JavaScript对象是拥有属性和方法的数据。第五章1.尝试使用HTML/CSS/JavaScript实现一个简单的时钟功能（Time标签）。略2.尝试使用HTML/CSS/JavaScript实现一个带有界面的时钟功能。略第六章1.什么是标记语言？。标记语言（也称置标语言、标记语言、标志语言、标识语言）是一种将文本（Text）以及文本相关的其他信息结合起来，展现出关于文档结构和数据处理细节的计算机文字编码。2.HTML与标记语言之间有什么关系？HTML是标记语言的一种，HTML是世界通用的、用于描述一个网页的信息的标记语言。第七章1.HTML元素基本语法有哪几点？1. HTML

8、元素以开始标签起始2. HTML元素以结束标签终止3. 元素的内容是开始标签与结束标签之间的内容4. 某些HTML元素具有空内容（empty content）5. 空元素在开始标签中进行关闭（以开始标签的结束而结束）6. 大多数HTML元素可拥有属性2.没有结束标签HTML一定会显示错误么？即使忘记了使用结束标签，大多数浏览器也会补上并正确地显示 HTML。3.下列哪个是HTML空元素（C）A. 123B. alert(“Hello”); C. D. null4.下列哪个不是img属性（D）A. src=”././”B. filter:C. Alpha:D. Colspan=5.什么是CSS内

9、联样式？内联式css样式：把css代码直接写在现有的HTML标签中.例如 这是一个段落标记6.什么是？ 元素是块级元素，它可用于组合其他 HTML 元素的容器。 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。第八章1.如何定义表单？表单是一个包含表单元素的区域， 表单使用 标签创建。表单能够包含 a target=_blank title=HTML input 元素，比如文本字段、复选框、单选框、提交按钮等等。表单还可以包含a target=_blank title=HTML menus、a target=_blank title=HTML textarea、a

10、target=_blank title=HTML fieldset、a target=_blank title=HTML legend 和 a target=_blank title=HTML label 元素。注意，元素是块级元素，其前后会产生折行。2.表单有哪些常见属性？主要有Action、Method、Target、Title、Enctype、Name。3.HTML视频和音频都可以使用哪些标签？主要有embed、object、audio、video。4.什么是Div+CSS，这种模式有什么好处？DIV+CSS是网站标准（或称WEB标准）中常用术语之一，DIV+CSS 是一种网页的布局方法

11、，这一种网页布局方法有别于传统的HTML网页设计语言中的表格（table）定位方式，可实现网页页面内容与表现相分离。主要好处有：使页面载入得更快，降低流量费用，修改设计时更有效率，保持视觉的一致性，更好地被搜索引擎收录，对浏览者和浏览器更具亲和力。第九章1.简单概述一下HTML缩进与换行规范。缩进：使用4个空格做为一个缩进层级，不允许使用2个空格或tab字符。换行：每行不得超过 120 个字符。2.HTML按钮代码规范注意事项有哪些？使用button元素时必须指明type属性值；尽量不要使用按钮类元素的name属性；负责主要功能的按钮在DOM中的顺序应靠前；当使用JavaScript进行表单提

12、交时，如果条件允许，应使原生提交功能正常工作；在针对移动设备开发的页面时，根据内容类型指定输入框的type属性。3.HTML模板使用最大好处是什么？规范地使用模板不仅会加快开发进度，也让项目的可维护性大大提高。第十章1.修改提供的简历源码，加入自己的个人内容。略2.尝试创建一个自己的HTML简历。略第十一章1.CSS语言特点有哪些？主要的特点有: 丰富的样式定义，易于使用和修改，多页面应用，层叠，页面压缩。2.什么是CSS选择器？选择器可以帮助我们选中需要添加样式的标签。第十二章1.请简单概述一下CSS语法规则。CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。选择器通常是您需要改

13、变样式的 HTML 元素。每条声明由一个属性和一个值组成。2.简述Class选择器和id选择器的区别？id选择器可以为标有特定id的HTML元素指定特定的样式，HTML元素以id属性来设置id选择器,CSS中id选择器以#来定义。class选择器用于描述一组元素的样式，class选择器有别于id选择器，class可以在多个元素中使用。class选择器在HTML中以class属性表示,在CSS中，类选择器以一个点.号显示。3.如何设置CSS字体大小？通过font-size设置字体大小。4.根据CSS知识，判断下面哪个字体大小更大（A）A. h1 font-size:2.5em;B. h1 fon

14、t-size:30px;C. h1 font-size:100%;D. 无法比较5.下列哪个CSS颜色是不合法的（）:答案均合法A. #FF0000B. #FFFFFFC. rgb(0,0,0)D. rgb(249,249,249)6.CSS控制背景如何实现？通过background属性进行背景控制，而且background可以拆分成更多的子属性，进行单独设置。第十三章1.简要说明一下CSS盒子模型。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。盒子模型(Box Model)：不同部分的说明

15、：Margin(外边距) - 清除边框外的区域，外边距是透明的。Border(边框) - 围绕在内边距和内容外的边框。Padding(内边距) - 清除内容周围的区域，内边距是透明的。Content(内容) - 盒子的内容，显示文本和图像。2.CSS有哪几种常用的边框样式，简单说明其功能。主要的样式有一下几种：none: 默认无边框dotted: dotted:定义一个点线边框dashed: 定义一个虚线边框solid: 定义实线边框double: 定义两个边框。 两个边框的宽度和 border-width 的值相同groove: 定义3D沟槽边框。效果取决于边框的颜色值ridge: 定义3D

16、脊边框。效果取决于边框的颜色值inset:定义一个3D的嵌入边框。效果取决于边框的颜色值outset: 定义一个3D突出边框。 效果取决于边框的颜色值3.CSS Margin设置为auto是什么含义？该值得设置为元素外侧边距，设置浏览器边距。设置为auto的结果会依赖于浏览器。4.padding:25px 50px含义是：（A）A. 上下填充为25px，左右填充为50pxB. 上下填充为50px，左右填充为15pxC. 上下填充为25pxD. 左右填充为15px第十四章1.CSS有几种定位属性？定位有以下四种: static、relative、fixed、absolute。2.什么是CSS F

17、loat属性，它有什么功能？CSS的Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。Float（浮动），往往是用于图像，但它在布局时一样非常有用。3.什么是CSS Align属性，它有什么功能？align 属性规定div元素中的内容的水平对齐方式。主要是设置显示对齐的作用。第十五章1.谈谈对CSS CSS3 keyframes的理解。keyframes 规则用于创建动画。在 keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。2.CSS动画属性中animation-play-state有什么含义？规定动画是否正在运行或暂停。默认是 r

18、unning。3.响应式网页的优缺点是什么？优点：面对不同分辨率设备灵活性强,能够快捷解决多设备显示适应问题,根据不同的显示器调整设计最适合用户浏览习惯的页面。缺点：兼容各种设备工作量大，效率低下。代码累赘，会出现隐藏无用的元素，加载时间加长其实这是一种折衷性质的设计解决方案，多方面因素影响而达不到最佳效果，一定程度上改变了网站原有的布局结构，会出现用户混淆的情况。4.什么是Viewport？viewport 是用户网页的可视区域。viewport 翻译为中文可以叫做视区。手机浏览器是把页面放在一个虚拟的窗口（viewport）中，通常这个虚拟的窗口（viewport）比屏幕宽，这样就不用把每

19、个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。第十六章1.CSS属性缩写规则有哪些？CSS文件使用无BOM的UTF-8编码；选择器与“”之间必须包含空格；列表性属性书在单行时，“,”后必须跟一个空格；每行不得超过 120 个字符，除非单行不可分割；当一个 rule 包含多个 selector 时，每个选择器声明必须独占一行；操作符选择器的两边各保留一个空格；属性选择器中的值必须用双引号包围。2.CSS值与单位有什么代码规范规定？文本内容必须用双引号包围；当数值为0-1之间的小数时，省略整数部分的0；url()函数中的路径不加引

20、号；长度为0时须省略单位；RGB颜色值必须使用十六进制记号形式#rrggbb；2D位置必须同时给出水平和垂直方向的位置。3.列举几个常见的CSS字体族。宋体 (中易宋体)、黑体 (中易黑体)、微软雅黑、微软正黑、华文黑体、冬青黑体、文泉驿正黑、文泉驿微米黑等。4.使用CSS模板编写一个简单网页。略第十七章1.什么是JavaScript？JavaScript是一种web前端的描述语言，也是一种基于对象（object）和事件驱动（Event Driven）的、安全性好的脚本语言。它运行在客户端从而减轻服务器的负担。2.JavaScript执行原理是什么？第十八章1.下面哪项JavaScript 变

21、量定义是非法的（C）A. var x = 2;B. var pi = 3.1415;C. var str = “Hello”D. var z = z + 12.JavaScript局部变量和全局变量的区别是什么？局部变量能在函数内部访问它，在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。3.JavaScript如何调用带参的函数？在调用函数时，您可以向其传递值，这些值被称为参数。这些参数可以在函数中使用。您可以发送任意多的参数，由逗号 (,) 分隔。4.JavaScript有哪几种对象创建方法？主要有：Object构造函数、对象变量创建一个对象、工厂模式创建对象、自定义构造函数

22、、原型模式、组合使用原型模式和构造函数、动态原型模式。5.什么是JavaScript事件？JavaScript使我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为。网页中的每个元素都可以产生某些可以触发JavaScript函数的事件。第十九章1.创建一个长度为10的数组，并对其进行排序，输出排序前和排序后的结果。代码如下：var arr = 1, 3, 5, 2, 4, 6;console.log(arr);arr.sort();console.log(arr)/ 1, 3, 5, 2, 4, 6/ 1, 2, 3, 4, 5, 62.打印当前日期到控制台。console.

23、log(new Date();3.需要使用表单接受请求的URL，应该使用表单的什么方法实现（B）A. actionB. submitC. resetD. send4.下列哪个是jQuery的类选择器语法（C）A. $(p)B. $(#test)C. $(.test)D. $(:button)5.尝试为一个网页编写简单的脚本，使用jQuery移除网页上所有内容（提示：使用remove和遍历功能）。略第二十章1.JavaScript推荐使用什么样的编码模式，并解释这样使用的原因。JavaScript文件使用无BOM的UTF-8编码。UTF-8编码具有更广泛的适应性。BOM在使用程序或工具处理文件时

24、可能造成不必要的干扰。2.JavaScript主要有哪两种注释方式？单行注释、多行注释第二十一章1.分析俄罗斯方块实例代码 21-1和计算器实例代码 21-2，它们都使用了哪些JavaScript技术？eval方法、数组、对象、函数、事件、原型等。2.分析计算器实例代码 21-2，分析其CSS如何控制页面显示的？通过设置position设置显示位置属性，设置每个元素的样式，设置需要运动元素的动画。第二十二章1.查看了解BootStrap-Table在Github上的源码略2.分析工程中管理系统另外几个页面的源码，观察这些网页运用了什么共同的HTML/CSS/JavaScript技术。使用了jQuery、bootstrap、bootstrap-table等开源js、css库文件。第二十三章1.尝试改变游戏难度，让出现1024时即判定胜利。添加元素时，在下方出现的概率大点，并且出现除2以外的4、8、16等元素。判断胜利：修改alert(you win!)之前的判断条件为1024。2.改变游戏界面，将游戏方块颜色变成红色。修改有数值的cell的背景颜色。第二十四章1.按照教程建立一个自己的个人网站。略2.自定义个人网站里的内容，完成网站搭建。略