Html5程序设计基础教程

第1章HTML 5概述一、选择题1．A 2．D 3．C 4．C二、填空题1．HyperText Markup Language2．<img>3．HTML4．UTF-85．<menu>6．contextmenu7．async8．<details>9．Geolocation API10．Web Workers三、简答题1．答：<section> 标签用于定义文档中的区段。

<header>标签用于定义文档的页眉（介绍信息）。

<footer>标签用于定义区段（section）或文档的页脚。

通常，该元素包含作者的姓名、文档的创作日期或者联系方式等信息。

<nav>标签用于定义导航链接。

<article>标签用于定义文章或网页中的主要内容。

<aside>标签用于定义主要内容之外的其他内容。

<figure>标签用于定义独立的流内容（图像、图表、照片、代码等等）。

2．答：<mark>标签用于定义带有记号的文本。

<time>标签用于定义公历的时间（24小时制）或日期，时间和时区。

<meter>标签用于定义度量衡。

<progress>标签用于定义定义一个进度条。

3．答：在HTML 5中可以通过下面的方法进行绘图：使用Canvas API动态地绘制各种效果精美的图形；绘制可伸缩矢量图形（SVG）。

4．答：HTML5新增的与数据存储和数据处理相关的新功能如下：（1）Web通信在HTML 4中，出于安全考虑，一般不允许一个浏览器的不同框架、不同标签页、不同窗口之间的应用程序互相通信，以防止恶意攻击。

如果要实现跨域通信只能通过Web服务器作为中介。

但在桌面应用中，经常需要进行跨通信。

HTML 5提供了这种跨域通信的消息机制。

（2）本地存储HTML 4的存储能力很弱，只能使用Cookie存储很少量的数据，比如用户名和密码。

HTML 5扩充了文件存储的能力，可以存储多达5MB的数据。

而且还支持WebSQL和IndexedDB 等轻量级数据库，大大增强了数据存储和数据检索能力。

（3）离线应用传统Web应用程序对Web服务器的依赖程度非常高，离开Web服务器几乎什么都做不了。

而使用HTML 5可以开发支持离线的Web 应用程序，在连接不上Web服务器时，可以切换到离线模式；等到可以连接Web服务器时，再进行数据同步，把离线模式下完成的工作提交到Web服务器。

四、练习题略第2章JavaScript编程一、选择题1．C 2．B 3．A 4．A二、填空题1．js2．===3．continue4．break5．function6．return7．Object8．Array9．Event三、简答题Undefined当声明的变量未初始化时，该变量的默认值是undefinedNull空值，如果引用一个没有定义的变量，则返回空值Boolean布尔类型，包含true和falseString字符串类型，由单引号或双引号括起来的字符Number数值类型，可以是32位、64位整数或浮点数2．答：3．答:for(表达式1; 表达式2; 表达式3) {循环体}4．答:在函数中也可以定义变量，在函数中定义的变量被称为局部变量。

局部变量只在定义它的函数内部有效，在函数体之外，即使使用同名的变量，也会被看作是另一个变量。

相应地，在函数体之外定义的变量是全局变量。

全局变量在定义后的代码中都有效，包括它后面定义的函数体内。

如果局部变量和全局变量同名，则在定义局部变量的函数中，只有局部变量是有效的。

第3章HTML5表单及文件处理一、选择题1．C 2．B 3．A 4．B二、填空题1．<form>…</form>2．type3．<textarea>4．"submit"；"reset"；"button"5．checkValidity()6．FileList；File；Blob；FileReader三、简答题1. 答（1）email类型email 类型用于应该包含e-mail 地址的输入域。

在提交表单时，会自动验证email 域的值。

（2）url类型url类型用于应该包含URL地址的输入域。

在提交表单时，会自动验证URL域的值。

（3）number类型number类型用于应该包含数值的输入域。

可以通过表3-9所示的属性对数值进行限定。

（4）date类型date类型用于应该包含日期值的输入域，可以通过一个下拉日历来选择年/月/日。

（5）其他日期时间类型HTML 5还新增了如下的用于输入日期时间的input类型：month，用于选取月和年；week，用于选取周和年；time，用于选取时间（小时和分钟）；datetime，用于选取时间、日、月、年（UTC 时间）；datetime-local，用于选取时间、日、月、年（本地时间）。

（6）search类型search类型用于搜索域，比如站点搜索或Google 搜索。

search 域显示为常规的文本域。

（7）color类型color类型用于选择颜色。

2. 答（1）datalist元素datalist元素用于定义输入域的选项列表。

（2）keygen元素keygen元素用于提供一种验证用户的可靠方法。

它是一个密钥对生成器。

当提交表单时，会生成两个键，一个是私钥（private key），一个公钥（public key）。

私钥存储于客户端，公钥则被发送到服务器。

公钥可用于之后验证用户的客户端证书。

（3）output元素output元素用于用于不同类型的输出，例如比如计算或脚本的结果输出。

3. 答规定表单中的元素是否具有自动完成功能。

所谓自动完成功能就是表单会记忆用户在表单元素中输入数据的历史记录。

下次输入时会根据用户输入的字头提示匹配的历史数据，帮助用户完成输入。

autocomplete="on"表示启用自动完成功能；autocomplete="off"表示停用自动完成功能。

例如：<form action=" " method="get" autocomplete="on">4. 答规定在提交表单时不验证数据，例如：<form action="" method="get" novalidate>如果不使用novalidate，则会验证数据。

第4章最新版本的层叠样式表——CSS3一、选择题1．C 2．B 3．B 4．A 5．B二、填空题1．层叠样式表2．.css3．text-decoration 4．轮廓（outline）5．float 6．opacity；0~17．transition三、问答题1. 答：selector 选择器。

有3种选择器，第一种是HTML的标签，比如p、body、a等；第二种是class；第三种是ID。

，具体使用情况将在后面介绍。

property 就是那些将要被修改的属性，比如color。

value property的值，比如color的属性值可以是red。

2. 答：CSS3支持以HSL声明的形式表现颜色。

HSL色彩模式是工业界的一种颜色标准，是通过对色调（H）、饱和度（S）、亮度（L）三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的这个标准几乎包括了人类视力所能感知的所有颜色，是目前运用最广的颜色系统之一。

HSL声明的定义形式如下：hsl(色调值, 饱和度值, 亮度值)参数说明如下：色调值，用于定义色盘，0和360是红色，接近120的是绿色，240是蓝色；饱和度值，一个百分比，0%是灰度，100%饱和度最高；亮度值，个百分比：0%是最暗，50%均值，100%最亮。

HSLA声明在HSL颜色的基础上增加了一个A参数，设置该颜色的透明度。

与RGBA一样，A参数的取值范围也为0~1，0表示完全透明（即不可见），1表示完全不透明。

第5章HTML5拖放一、选择题1．A 2．C 3．A 4．D二、填空题1．拖拽（drag）; 放开（drop）2．Drop3．Dragend4．Event三、简答题1．答:copy，显示copy光标。

link，显示link光标。

move，显示move光标。

none，默认值，即没有指定光标。

2．答：当开始拖拽时，可以提供下面的息：（1）被拖拽的数据。

这可以是多种不同格式的数据，例如，包含字符串数据的文本对象。

（2）在拖拽过程中显示在鼠标指针旁边的反馈图像。

用户可以自定义此图像，但大多数时候只能使用默认图像。

默认图像将基于按下鼠标时鼠标指针指向的元素。

（3）运行的拖拽效果。

可以是以下3种拖拽效果：copy，指被拖拽的数据将从当前位置复制到放开的位置；move，指被拖拽的数据将从当前位置移动到放开的位置；link，指在源位置和放开的位置之间将建立某种关系或连接。

第6章使用Canvas API画图一、选择题1．B 2．A 3．A 4．B二、填空题1．lineTo() 2．arc()3．rgba() 4．strokeText()；fillText()5．rotate()三、简答题1．答strokeRect()方法与rect()方法都用于绘制矩形，它们的参数相同。

strokeRect()方法与rect()方法的区别在于调用strokeRect()方法时不需要使用beginPath()和stroke()即可绘图。

2．答：可以通过下面2种方法创建CanvasGradient对象：（1）以线性颜色渐变方式创建CanvasGradient对象。

使用CanvasRenderingContext2D对象createLinearGradient() 方法可以线性颜色渐变方式创建CanvasGradient对象。

线性颜色渐变方式创建CanvasGradient对象。

createLinearGradient() 方法的语法如下：createLinearGradient(xStart, yStart, xEnd, yEnd)参数xStart和yStart是渐变的起始点的坐标，参数xEnd和yEnd是渐变的结束点的坐标。

（2）以放射颜色渐变方式创建CanvasGradient对象。

使用CanvasRenderingContext2D对象createRadialGradient()方法可以放射颜色渐变方式创建CanvasGradient对象。

线性颜色渐变方式创建CanvasGradient对象。