html5网页前端设计课后习题答案

第一章习题答案1.什么是Internet和万维网，它们的区别在哪里？答：Internet是由成千上万台计算机设备互相连接，基于TCP/IP协议进行通信从而形成的全球网络。

万维网是Internet上最重要的服务之一，也常被简称为“W3”或“Web”。

万维网主要使用HTTP协议将互联网上的资源结合在了一起，并在浏览器中以Web页面的方式呈现给用户。

2.请简单描述用户上网浏览网页的原理。

答：用户打开Web浏览器并输入需要访问的URL地址，该地址将发送给对应的Web服务器。

Web服务器然后将该地址对应的文本、图片等内容发送给用户并显示在用户使用的Web浏览器中。

3.Web前端技术的三大核心基础是哪些内容？答：HTML、CSS和JavaScript。

4.Web前端新技术HTML5与HTML有什么关系?答：HTML来源于Hypertext Markup Language（超文本标记语言）的首字母缩写，是用于架构和呈现网页的一种标记语言，也是万维网上应用最广泛的核心语言。

HTML5是HTML的第五次修改版，也是目前HTML语言的最新版。

第二章习题答案1.HTML5的文档注释是怎样的？答：HTML5使用<!--...-->标签为文档进行注释，注释标签以“<!--”开头，以“-->”结束，中间的“...”替换为注释文字内容即可。

<!--...-->标签支持单行和多行注释。

2.HTML5中列表标签有哪些，它们之间有什么区别？答：包括有序列表标签、无序列表标签和定义列表标签三种。

有序列表标签<ol>和</ol>用于定义带有编号的有序列表；无序列表标签<ul>和</ul>用于定义不带编号的无序列表；定义列表标签<dl>和</dl>是用于进行词条定义的特殊列表，每条表项需要结合词条标签<dt>和定义标签<dd>一起使用。

3.HTML5中块级元素与内联元素的区别是什么？分别列举有哪些标签属于块级元素或内联元素。

答：块级元素会默认在前后自动放置一个换行符；内联元素不会自动在前后自动放置换行符，默认在同一行显示。

属于块级元素的有区域元素<div>、段落标签<p>、表格标签<table>、标题标签<h1>-<h6>等；属于内联元素的有容器标签<span>，超链接标签<a>等。

4.HTML5新增的文档结构标签有哪些？答：<header>、<nav>、<section>、<article>、<aside>、<footer>。

5.HTML5新增的格式标签有哪些？答：记号标签<mark>、进度标签<progress>、度量标签<meter>等。

6.HTML5有哪些新增的功能API，分别起什么作用？答：常用的HTML5功能性API列举如下：●拖放：实现元素的拖放；●画布：实现2D和3D绘图效果；●音频和视频：实现自带控件播放音频和视频；●表单：新增一系列输入类型，例如电话号码、数字范围、email地址等；●地理定位：使用浏览器进行地理位置经纬度的定位；●Web存储：实现本地持久化存储大量数据；●Web Worker：实现线程效果第三章习题答案1.CSS样式表有哪几种类型？它们的层叠优先级关系是？答：外部样式表、内部样式表和内联样式表。

优先级由低到高分别为：外部样式表-->内部样式表-->内联样式表。

2.常用的CSS选择器有哪些？答：元素选择器、id选择器、类选择器、属性选择器。

3.CSS的注释语句写法是？答：CSS的注释以“/*”开头，以“*/”结尾，支持单行和多行注释。

4.CSS颜色值有哪几种表达方式？答：常见有如下几种表达方式：●使用RGB颜色的方式：例如rgb(0,0,0)表示黑色、rgb(255,255,255)表示白色等；●RGB的十六进制表示法：例如#000000表示黑色、#FFFFFF表示白色等；●直接使用英文单词名称：例如red表示红色、blue表示蓝色等。

5.CSS背景图像的平铺方式有哪几种？答：repeat-x（水平方向平铺），repeat-y（垂直方向平铺），repeat（水平和垂直方向都平铺）以及no-repeat（不平铺，只显示原图）。

6.如何使用CSS为文本添加下划线？答：text-decoration: underline。

7.如何使用CSS为列表选项设置自定义标志图标？1.答：list-style-image: url(图标文件的URL)。

8.如何使用CSS实现表格为单线条框样式？答：border-collapse: collapse。

9.如何使用CSS设置元素的层叠效果？答：使用属性z-index可以为元素规定层次顺序，其属性值为整数，并且该数值越大将叠放在越靠上的位置。

10.元素可以向哪些方向进行浮动？如何清除浮动效果？答：在CSS中float属性可以用于令元素向左或向右浮动。

常用clear:both来清除之前元素的浮动效果。

第四章习题答案1.引用JavaScript外部脚本的正确写法是？在HTML页面中直接插入JavaScript代码的正确做法是何种标签？答：外部脚本引用方法为：<script src="JavaScript文件URL"></script>。

在HTML页面中直接插入JavaScript代码的正确做法是<script>标签。

2.以下哪个属于JavaScript注释的正确写法？(1)<!--被注释掉的内容-->(2)//被注释掉的内容(3)“被注释掉的内容”答：（2）为正确内容。

3.请分别说出下列内容中变量x运算结果。

(1)var x = 9+9;(2)var x = 9+"9";(3)var x = "9"+"9";答：（1）18，（2）99，（3）99。

4.在JavaScript中有哪些常用的循环语句？答：for循环和for-in循环、while循环和do-while循环。

5.如何使用警告对话框显示“Hello JavaScript”？答：alert("Hello JavaScript");6.如何创建与调用自定义名称的JavaScript函数？答：使用关键词function来创建自定义函数，例如：function welcome(){alert("Welcome to JavaScript World");}函数可以通过使用函数名称的方法进行调用，例如welcome()。

7.如何使用JavaScript对浮点数进行四舍五入获取最接近的整数值？答：使用Math.round()方法。

8.如何获取用户当前浏览器的名称和版本？答：navigator.appName以及navigator.appVersion。

第五章习题答案1.如何将元素设置为允许拖放的状态？答：设置元素的draggable属性值为true。

2.元素被拖拽直到放置在指定区域的完整过程中依次触发了哪些拖放事件？答：dragstart->drag->dragenter->dragover->dragleave->drop->dragend。

3.可在拖放过程中被传递的常见数据类型有哪些？答：可用于传递的常用数据类型如下：●纯文本类型：text/plain●超链接类型：text/uri-list●HTML代码类型：text/html4.使用DataTransfer对象中的何种方法可以自定义拖放图标？答：setDragImage()方法。

5.如何将指定元素设置为允许放置元素的目标区域？答：作为可放置区域的元素必须带有ondragover事件。

6.在进行本地文件的拖放时，DataTransfer对象中的哪个属性可以用于获取文件列表？答：直接在放置文件时使用DataTransfer对象的files属性即可获取文件列表，里面包含了所有文件。

第六章习题答案1.<form>标签的method属性可以取哪些属性值？分别表示什么含义？答：表单的method属性用于规定了发送表单数据的两种HTTP方法：GET和POST 方法。

其中表单标签默认的提交方式为GET方法。

●GET方法：提交表单数据时，GET方法会将表单组件的数据名称和值转换为文本形式的参数并直接加原URL地址后面，点击提交按钮后可以直接从浏览器地址栏看到全部内容。

这种方式适用于传递一些安全级别要求不高的数据，并且有传输大小限制，每次不能超过2KB。

●POST方法：这种方法传递的表单数据会放在HTML的表头中，不会出现在浏览器地址栏里，用户无法直接看到参数内容，适用于安全级别相对较高的数据。

并且对于客户端而言没有传递数据的容量限制，完全取决于服务器的限制要求，总体来说传输的数据量比GET方法大。

2.HTML5中新增了哪些<input>标签的常用类型？分别表示什么含义？答：HTML5中新增的常用类型如下表所示。

3.按钮标签<button>有哪些类型？分别表示什么含义？答：有三种类型，分别是提交（submit）、重置（reset）或无动作按钮（button）类型。

提交（submit）用于提交表单数据；重置（reset）用于重置表单填写的内容；无动作按钮（button）本身没有任何动作，需要配合JavaScript代码使用。

4.HTML5表单新增multiple属性可以用于何种类型的<input>标签？答：该属性只适用于2种类型的<input>标签：email（电子邮箱）和file（上传文件控件）。

5.HTML5表单新增width和height属性可以用于何种类型的<input>标签？答：width和height属性只能用于类型为image的<input>标签。

6.如何使用HTML5表单新增pattern属性限制用户只允许输入6位阿拉伯数字？答：关于正则表达式有多种用法，这里选择其中一种参考答案列举如下：<input type="text" name="number" pattern="[0-9]{6}" title="请输入6位数字" /> 第七章习题答案1.创建画布使用的HTML5标签名称是？为何要给画布定义ID？答：在HTML5中创建画布需要使用<canvas>元素。