HTML5期末考试题型

2023年8月1日发(作者：)

GB6017.1-20起重机械安全规程-第1部分

作业

一． 单项选项题

1. 以下哪个标记用来建立一个有序列表：( C )

A. B.

C.
D.

2. 在 HTML5 中，哪个元素用于组合标题元素？ （ D ）

A. B.

C. D.

3. HTML5 中不再支持下面哪个元素？ （ D ） PPT查看其他不再支持元素

A. B. C.

D.

4. 新的 HTML5 全局属性，"contenteditable" 用于： （ B ）

A.规定元素的上下文菜单。该菜单会在用户点击右键点击元素时出现。 B.规定元素内容是否是可编辑的。 C.从服务器升级内容。 D.返回内容在字符串中首次出现的位置。

5. HTML5新增一种非常重要的功能是可以在客户端本地存数据的Web Storage功能。其中( A )持久化本地存储，类似于Cookie，但没有有效期，除非主动删除数据：

A. localStorageB. SessionStorage (数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁，非持久化) D.创建可拖动的元素

6. 在 HTML5 中，哪个属性用于规定输入字段是必填的？ （ A ）

ed lidate te older

7. 哪种输入类型定义滑块控件？ （ D ）

ls

8. (100,100,100,0,*2,true) Canvas绘制圆形的arc方法中，参数说明正确的是：（ D ）

A. 圆半径，圆心X坐标，圆心Y坐标，开始角度，结束角度，是否顺时针 trun 逆时针

B. 圆心Y坐标，圆心X坐标，圆半径，开始角度，结束角度，是否顺时针

C. 圆心X坐标，圆心Y坐标，圆半径，开始角度，结束角度，是否顺时针

D. 圆心X坐标，圆心Y坐标，圆半径，开始角度，结束角度，是否逆时针

9. 读取localStorage数据的方法是：（ B ）

1h GB6017.1-20起重机械安全规程-第1部分

A. m("键值");

B. m("键名");

C. em("键值");

em("键名");

10. 在一个标记中决定图片文件位置的是哪个属性：（ C ）

A: alt B: title C: src D: href

11. Canvas 用于填充颜色的属性是：（ A ）

A. fillStyle 填充色

B. fillRect

C. lineWidth 线条宽度

D. strokeRect

12. 不是HTML5特有的存储类型是：（ B ）

A、localStorageB、CookieC、Application Cache 应用缓存D、sessionStorage

二、填空题

1. 在标签中将type属性设置为radio即可定义单选按钮。 查看关于INPUT标记的属性

2. 为了使元素可拖动，把draggable属性设置为true。

3. 在拖放过程，开始拖动元素会触发dragstar事件，松开鼠标时会触发drop事件。元素拖动

4. 在CSS3中，可以使用border-raidus属性实现圆角效果。盒子阴影 透明度等新增的

5. 如下图为一个border为1px 的div块，总宽度为300px（包括border），阴影区为padding-left:50px左侧内边距;，那么此div的width应设置为248 px。

6. 在CSS3中可以使用transitaion属性和其他CSS属性（颜色、宽高、变形、位置等）配合实现动画效果。

三、简答题

1. 写出标准的html5页面结构。

2h GB6017.1-20起重机械安全规程-第1部分

网页内容

2. 分别写出HTML5新增的语义标签及作用

答：

元素名 作用

表示页面中的一个内容区块，比如章节、页眉、页脚或页面中的其他部分。它可以与h1、h2、h3、section

article

aside

header

hgroup

footer

nav

figure

标记定义图片

标记定义一个下拉列表

标记定义一个元素的详细内容

标记定义一个命令按钮

等元素结合起来使用标记文档结构。

表示页面中的一块与上下文不相关的独立内容，例如博客中的一篇文章。

表示article元素内容之外的，与article元素内容相关的辅助信息。

表示页面中一个内容区块或整个页面的标题。

用于整个页面或页面中一个内容区块的标题进行组合。

表示整个页面或页面中一个内容区块的脚注。一般来说，它会包含创作者的姓名，创建日期及创作者表示页面中导航链接的部分

表示一段独立的流内容，一般表示文档主体流内容中的一个独立单元，使用figcaption元素为figure标题。

标记定义一个对话框(会话框)

标记定义外部的可交互的内容或插件

标记定义表单里一个生成的键值

标记定义有标记的文本

3h GB6017.1-20起重机械安全规程-第1部分

标记定义 measurement within apredefined range

标记定义一些输出类型

标记定义任务的过程

标记是用在Ruby annotations 告诉那些不支持 Ruby元素的浏览器如何去显示

标记定义对rubyannotations的解释

标记定义 ruby annotations.

标记定义一个区域

标记定义媒体资源

标记定义一个日期/时间

3. 简述

标记中method和action属性的作用。

答：method属性作用是将表单数据从客户端传送到服务器的方法，分别

为post和get方法，post方法比较安全和常用；action属性作用是指定处

理表单的服务端程序，可以是程序或脚本的一个完整URL。

4. HTML5中新增了类型的新表单元素？作用分别是什么？

答：

类型：作用

text：设置单行文本框元素

email：表示当前input标签接受一个邮箱的输入

tel：接受电话输入

url：只接受输入网址

nunber：表示当前标签只接受数字类型输入

rang：设置滑块控件元素

clolr：颜色选择

date：日期选择器类型

password： 设置密码元素

file ：设置文件元素

hidden： 设置隐藏元素，不会被浏览者看到，用于在不同页面中传递域中所设定的值

radio：设置单选框元素

checkbox： 设置复选框元素

4h GB6017.1-20起重机械安全规程-第1部分

button ：设置普通按钮元素

submit ：设置提交按钮元素

reset： 设置重置按钮元素

Image： 设置图像域（图像按钮）元素

5. 写出HTML5表单中新增的属性及其作用。

答：

【属性：作用】

min和max:HTML5新增加的属性，表示当前输入框输入的最小和最大值

step： HTML5新增加的属性，是步长的意思，也就是在点击增大或者减小的时候的增加或减少的步长

placeholder，提示信息

autocomplete：form或input域是否拥有自动完成功能（值为on和off）。适用于以下类型的

标签：text, search, url, telephone, email, password, datepickers, range 以及 color。

autofocus：页面加载时，域自动地获得焦点。适用所有 标签的类型。

max、min、step：适用以下类型的 标签：date pickers、number 以及 range。

placeholder：提示信息属性。

multiple：输入域中可选择多个值，用于文件上传控件，设置此属性后，允许上传多个文件。适用于以下类型的 标签：email 和 file。

required： 当前文本框在提交前必须有数据输入。适用于以下类型的 标签：text, search, url,

telephone, email, password, date pickers, number, checkbox, radio 以及 file。

pattern：规定用于验证输入字段的模式。pattern 属性适用于以下类型的 标签：text, search,

url, telephone, email 以及 password。

6. Canvas中画圆形、画矩形边框、画位图分别用什么方法

答：arc、 stokeRect、 drawImage。

7. 什么是拖放？

答：拖放可以分为两个动作，即拖拽（drag）和放开（drop）。

5h GB6017.1-20起重机械安全规程-第1部分

拖拽（drag）：移动鼠标到指定对象，按下左键，然后拖动。

放开（drop）：放开鼠标左键，放下对象。

8. 行内样式表、内部样式表和外部样式表分别在HTML页面的什么位置引用？如何引用？

答：在HTML文档中应用CSS 有三种样式表，分别是：行内样式表、内部样式表和外部样式表 。其中最常用的是内部样式表和外部样式表。

1) 内部样式表：在网页中可以使用style元素定义一个内部样式表，指定该网页内元素的CSS样式，内部样式一般添加到头部。在style元素中通常可以使用type属性定义内容的类型（一般取值"text/css"）。格式如下：

2) 外部样式表：

① 含义：在HTML文档中可以使用元素引用外部样式表。元素的属性有：href（指定被链接文档【样式表文件】的位置）、hreflang（指定在被链接文档中的文本的语言）、rel（指定当前文档与被链接文档之间的关系。stylesheet，指向要导入的样式表的 URL；）、media（指定被链接文档将被显示在什么设备上。all，默认值，适用于所有设备；）、type（指定被链接文档的 MIME 类型）

外部样式表种类：一种是文件专门是布局用的样式，另一种是添加外部内容的样式一般命名为

② 添加外部样式表有多种方法：本实验介绍用到的其中一种方法，第一步：选择菜单栏中的文件功能 - 选择新建CSS - 命名；第二步：选择菜单栏中的格式功能 - css样式 - 添加附加css样式表-在弹出的链接外部样式表窗口中添加外部样式文件URL路径： - 点击确定。在本次实验的注册页面就是采用外部样式表进行CSS样式设计，格式如下：

添加外部内容的样式一般命名为，操作方法同上，格式如下：

6h GB6017.1-20起重机械安全规程-第1部分

3) 行内样式表：在HTML元素中使用style属性可以指定该元素的CSS样式，这种应用称为行内样式表。

直接在body标签中添加,如：

网页的背景为蓝色

9. CSS中的padding、margin和float各表示什么属性 中英文背

答：分别表示：内填充、 外边距、 浮动。

10. 简单描述一下什么是css盒子模型

答：CSS给HTML元素都赋予了内容(content)、内填充(padding)、边框(border)和

外边距(margin) 属性，这些属性形成CSS盒模型。整个盒模型在页面中所占的

宽度是由左边界 + 左边框 + 左填充 + 内容 + 右填充 + 右边框 + 右边界组成。

11. 简述CSS3有哪些新特性？-

HSL颜色表现方法。

1) 八大属性：

圆角效果（border-radius）

多彩边框

阴影（box-shadow）

背景图片尺寸 （background-size）

多列（column-count ）

嵌入字体（@font-face）

透明度（opacity）

HSL和HSLA颜色表现方法

2) 四大类（关系选择器、伪类选择器、属性选择器、伪元素选择器）

① 关系选择器

选择符

E F

名称

包含选择符

版本

CSS1

简介

选择所有被E元素包含的F元素。

就可以把这几个相同设定的选择器合并在一起，中间用逗号隔开

选择所有作为E元素的子元素F。

选择紧贴在E元素之后F元素。

E,F 分组选择器 CSS1

E>F

E+F

子选择符

相邻选择符

CSS2

CSS2

7h GB6017.1-20起重机械安全规程-第1部分

E~F 兄弟选择符 CSS3 选择E元素所有兄弟元素F。

② 伪类选择器

a. 结构性伪类选择器

b. UI元素状态伪类选择器

③ 属性选择器

8h GB6017.1-20起重机械安全规程-第1部分

④ 伪元素选择器

3) CSS添加了三个动画效果属性（transform 、taansition、 animation）

① transform字面上就是变形，改变的意思。在CSS3中transform主要

包括以下几种：旋转rotate、扭曲skew、缩放scale和移动translate以

及矩阵变形matrix。

② Animation只应用在页面上已存在的DOM元素上，我们使用CSS3

的Animation制作动画我们可以省去复杂的js,jquery代码。

12. CSS3.0选择器都有哪些类型，并且分别说明其作用及举例语法格式在HTML标签中使用的方法。

1) 元素选择器

选择符 类型

*

版本 简介

通配符选择器

E

CSS2 所有元素对象。

CSS1 以HTML标签作为选择符。

CSS1 以唯一标识符id属性等于myid的E对象作为选择符。

标签(HTML)选择器

E#myid id选择器

s class选择器 CSS1 以class属性包含myclass的E对象作为选择符。

2) 关系选择器

选择符 类型 版本 简介

E,F 分组选择器 CSS1 就可以把这几个相同设定的选择器合并在一起，中间用逗号隔开

E F 包含(后代)选择器 CSS1 选择所有被E元素包含的F元素

9h GB6017.1-20起重机械安全规程-第1部分

E>F 子选择器 CSS2 选择所有作为E元素的子元素F

E+F 相邻选择器 CSS2 选择紧贴在E元素之后F元素

E~F 兄弟选择符 CSS3 选择E元素所有兄弟元素F

3) 伪类选择器

伪类用于向某些选择器添加特殊的效果。伪类对元素进行分类是基于特征而不是它们的名字、属性或者内容。

选择符 类型

a:link

简介

链接伪类选择器 设置超链接a在未被访问前的样式

a:visited 链接伪类选择器 设置超链接a在其链接地址已被访问过时的样式

E:hover 用户操作伪类选择器 设置元素在其鼠标悬停时的样式

E:active 用户操作伪类选择器 设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式

E:focus 用户操作伪类选择器 设置元素在成为输入焦点（该元素的onfocus事件发生）时的样式

E:lang() :lang()伪类选择器 匹配使用特殊语言的E元素

a. 结构性伪类选择器

选择符 版本

E:root

简介

CSS3 匹配E元素在文档的根元素。

CSS2 匹配父元素的第一个子元素E。

CSS3 匹配父元素的最后一个子元素E。

E:first-child

E:last-child

E:only-child CSS3 匹配父元素仅有的一个子元素E。

E:nth-child(n) CSS3 匹配父元素的第n个子元素E。

E:nth-last-child(n) CSS3 匹配父元素的倒数第n个子元素E。

E:first-of-type CSS3 匹配同类型中的第一个同级兄弟元素E。

E:last-of-type CSS3 匹配同类型中的最后一个同级兄弟元素E。

E:only-of-type CSS3 匹配同类型中的唯一的一个同级兄弟元素E。

E:nth-of-type(n) CSS3 匹配同类型中的第n个同级兄弟元素E。

CSS3 匹配同类型中的倒数第n个同级兄弟元素E。 E:nth-last-of-type(n)

E:empty CSS3 匹配没有任何子元素（包括text节点）的元素E。

b. UI元素状态伪类选择器

选择符 版本

E:checked

E:enabled

E:disabled

E:read-only

简介

CSS3 匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)

CSS3 匹配用户界面上处于可用状态的元素E。

CSS3 匹配用户界面上处于禁用状态的元素E。

CSS3 匹配用户界面上处于只读状态的元素E

10h GB6017.1-20起重机械安全规程-第1部分

E:read-write CSS3 匹配用户界面上处于读写状态的元素E

3) 属性选择器

选择符 版本 简介

E:checked CSS3 匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)

E:enabled CSS3 匹配用户界面上处于可用状态的元素E。

E:disabled CSS3 匹配用户界面上处于禁用状态的元素E。

E:read-only CSS3 匹配用户界面上处于只读状态的元素E

E:read-write CSS3 匹配用户界面上处于读写状态的元素E

4) 伪元素选择器

选择符 版本 简介

E:checked CSS3 匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)

E:enabled CSS3 匹配用户界面上处于可用状态的元素E。

E:disabled CSS3 匹配用户界面上处于禁用状态的元素E。

E:read-only CSS3 匹配用户界面上处于只读状态的元素E

E:read-write CSS3 匹配用户界面上处于读写状态的元素E

13. HTML5用什么标记播放音频？主要支持的音频格式有哪些？

答：标记：

14. HTML5用什么标记播放视频？主要支持的视频格式有哪些？

答：标记：

15. 简述什么是HTML5的 Web Storage功能？包括哪些技术？它们的区别是什么？

答：HTML5新增一种非常重要的功能是可以在客户端本地存数据的Web Storage功能。

其中localStorage持久化本地存储，类似于Cookie，但没有有效期，除非主动删除

数据。另一种sessionStorage用于本地存储一个会话中的数据，这些数据只在同一

个会话中的页面才能访问并且当会话结束后数据也随之销毁，类似于session。

四．编程题

1. 编写一个form表单，实现一个学生信息输入。包含学号、姓名、性别、爱好、出生年月等。（11h

注GB6017.1-20起重机械安全规程-第1部分

意首行缩进）

答：

学号：


名字：


密码：


性别：男

女


电话：


邮箱：


生日：


兴趣爱好：篮球

足球

舞蹈

看电影




颜色爱好：1

2

3




12h GB6017.1-20起重机械安全规程-第1部分

建议： </p><p> 请输入对本课程的建议 </p><p>


2. 绘制一个边框为蓝色粗细为2个像素，填充为红色，宽和高分别是300，200的矩形。要写出HTML5代码和相应的JavaScript代码。

答：

您的浏览器不支持 canvas。

3. 写出实现下图所示表格的HTML代码。

表格的宽和高分别是500，80。

第1列、第2列及第3列的比例为1：3：1。

跨越竖直方向两行用rowspan，跨越水平方向两列用colspan。

答：

单元格1	(); //绘制路径 ();//绘制填充 14h GB6017.1-20起重机械安全规程-第1部分 单元格2	单元格3
单元格4		单元格5
	单元格6

15h GB6017.1-20起重机械安全规程-第1部分

班前教育记录

日期:

工程名称

教育性质 班前安全教育

施工单位

安全员

(班组长)

安全教育内容

1、施工人员必须严格执行“安全生产，预防为主”的基本方针。还应执行项目部关于安全生产的各项规章制度。

2、施工工人必须佩戴合格的安全帽，并系好帽扣，防止安全帽脱落失去防护作用。

3、高空作业人员必须佩戴合格的安全带，作业时，应高挂低用，高空或构件上行走时，安全带必须与钢丝缆绳或稳定牢固的构件连接，更不得在无安全措施和设施的情况下冒险作业或行走。登高作业时，必须从安全爬梯上下，禁止从钢柱上攀登和滑下。不得在无安全保障的作业面施工作业。

4、施工人员应学会自我保护，做到不伤害他人，不被他人伤害，保证自己安全，不伤害自己。

5、施工人员不得酒后上班，不得宿醉上班。

6、上下交叉作业时，尽量避开统一垂直方向作业，上下应保持安全距离或设置安全防护层，并安排专人进行监护。

7、施工作业时，工人间应相互配合、相互呼应、相互提醒、协调一致。

当前工序安全性注意事项:

1、严禁违章

2、防高处坠落

3、防物体打击伤害

16h GB6017.1-20起重机械安全规程-第1部分

参加人员签名:

17h

2023年8月1日发(作者：)

GB6017.1-20起重机械安全规程-第1部分

作业

一． 单项选项题

1. 以下哪个标记用来建立一个有序列表：( C )

A. B.

C.
D.

2. 在 HTML5 中，哪个元素用于组合标题元素？ （ D ）

A. B.

C. D.

3. HTML5 中不再支持下面哪个元素？ （ D ） PPT查看其他不再支持元素

A. B. C.

D.

4. 新的 HTML5 全局属性，"contenteditable" 用于： （ B ）

A.规定元素的上下文菜单。该菜单会在用户点击右键点击元素时出现。 B.规定元素内容是否是可编辑的。 C.从服务器升级内容。 D.返回内容在字符串中首次出现的位置。

5. HTML5新增一种非常重要的功能是可以在客户端本地存数据的Web Storage功能。其中( A )持久化本地存储，类似于Cookie，但没有有效期，除非主动删除数据：

A. localStorageB. SessionStorage (数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁，非持久化) D.创建可拖动的元素

6. 在 HTML5 中，哪个属性用于规定输入字段是必填的？ （ A ）

ed lidate te older

7. 哪种输入类型定义滑块控件？ （ D ）

ls

8. (100,100,100,0,*2,true) Canvas绘制圆形的arc方法中，参数说明正确的是：（ D ）

A. 圆半径，圆心X坐标，圆心Y坐标，开始角度，结束角度，是否顺时针 trun 逆时针

B. 圆心Y坐标，圆心X坐标，圆半径，开始角度，结束角度，是否顺时针

C. 圆心X坐标，圆心Y坐标，圆半径，开始角度，结束角度，是否顺时针

D. 圆心X坐标，圆心Y坐标，圆半径，开始角度，结束角度，是否逆时针

9. 读取localStorage数据的方法是：（ B ）

1h GB6017.1-20起重机械安全规程-第1部分

A. m("键值");

B. m("键名");

C. em("键值");

em("键名");

10. 在一个标记中决定图片文件位置的是哪个属性：（ C ）

A: alt B: title C: src D: href

11. Canvas 用于填充颜色的属性是：（ A ）

A. fillStyle 填充色

B. fillRect

C. lineWidth 线条宽度

D. strokeRect

12. 不是HTML5特有的存储类型是：（ B ）

A、localStorageB、CookieC、Application Cache 应用缓存D、sessionStorage

二、填空题

1. 在标签中将type属性设置为radio即可定义单选按钮。 查看关于INPUT标记的属性

2. 为了使元素可拖动，把draggable属性设置为true。

3. 在拖放过程，开始拖动元素会触发dragstar事件，松开鼠标时会触发drop事件。元素拖动

4. 在CSS3中，可以使用border-raidus属性实现圆角效果。盒子阴影 透明度等新增的

5. 如下图为一个border为1px 的div块，总宽度为300px（包括border），阴影区为padding-left:50px左侧内边距;，那么此div的width应设置为248 px。

6. 在CSS3中可以使用transitaion属性和其他CSS属性（颜色、宽高、变形、位置等）配合实现动画效果。

三、简答题

1. 写出标准的html5页面结构。

2h GB6017.1-20起重机械安全规程-第1部分

网页内容

2. 分别写出HTML5新增的语义标签及作用

答：

元素名 作用

表示页面中的一个内容区块，比如章节、页眉、页脚或页面中的其他部分。它可以与h1、h2、h3、section

article

aside

header

hgroup

footer

nav

figure

标记定义图片

标记定义一个下拉列表

标记定义一个元素的详细内容

标记定义一个命令按钮

等元素结合起来使用标记文档结构。

表示页面中的一块与上下文不相关的独立内容，例如博客中的一篇文章。

表示article元素内容之外的，与article元素内容相关的辅助信息。

表示页面中一个内容区块或整个页面的标题。

用于整个页面或页面中一个内容区块的标题进行组合。

表示整个页面或页面中一个内容区块的脚注。一般来说，它会包含创作者的姓名，创建日期及创作者表示页面中导航链接的部分

表示一段独立的流内容，一般表示文档主体流内容中的一个独立单元，使用figcaption元素为figure标题。

标记定义一个对话框(会话框)

标记定义外部的可交互的内容或插件

标记定义表单里一个生成的键值

标记定义有标记的文本

3h GB6017.1-20起重机械安全规程-第1部分

标记定义 measurement within apredefined range

标记定义一些输出类型

标记定义任务的过程

标记是用在Ruby annotations 告诉那些不支持 Ruby元素的浏览器如何去显示

标记定义对rubyannotations的解释

标记定义 ruby annotations.

标记定义一个区域

标记定义媒体资源

标记定义一个日期/时间

3. 简述

标记中method和action属性的作用。

答：method属性作用是将表单数据从客户端传送到服务器的方法，分别

为post和get方法，post方法比较安全和常用；action属性作用是指定处

理表单的服务端程序，可以是程序或脚本的一个完整URL。

4. HTML5中新增了类型的新表单元素？作用分别是什么？

答：

类型：作用

text：设置单行文本框元素

email：表示当前input标签接受一个邮箱的输入

tel：接受电话输入

url：只接受输入网址

nunber：表示当前标签只接受数字类型输入

rang：设置滑块控件元素

clolr：颜色选择

date：日期选择器类型

password： 设置密码元素

file ：设置文件元素

hidden： 设置隐藏元素，不会被浏览者看到，用于在不同页面中传递域中所设定的值

radio：设置单选框元素

checkbox： 设置复选框元素

4h GB6017.1-20起重机械安全规程-第1部分

button ：设置普通按钮元素

submit ：设置提交按钮元素

reset： 设置重置按钮元素

Image： 设置图像域（图像按钮）元素

5. 写出HTML5表单中新增的属性及其作用。

答：

【属性：作用】

min和max:HTML5新增加的属性，表示当前输入框输入的最小和最大值

step： HTML5新增加的属性，是步长的意思，也就是在点击增大或者减小的时候的增加或减少的步长

placeholder，提示信息

autocomplete：form或input域是否拥有自动完成功能（值为on和off）。适用于以下类型的

标签：text, search, url, telephone, email, password, datepickers, range 以及 color。

autofocus：页面加载时，域自动地获得焦点。适用所有 标签的类型。

max、min、step：适用以下类型的 标签：date pickers、number 以及 range。

placeholder：提示信息属性。

multiple：输入域中可选择多个值，用于文件上传控件，设置此属性后，允许上传多个文件。适用于以下类型的 标签：email 和 file。

required： 当前文本框在提交前必须有数据输入。适用于以下类型的 标签：text, search, url,

telephone, email, password, date pickers, number, checkbox, radio 以及 file。

pattern：规定用于验证输入字段的模式。pattern 属性适用于以下类型的 标签：text, search,

url, telephone, email 以及 password。

6. Canvas中画圆形、画矩形边框、画位图分别用什么方法

答：arc、 stokeRect、 drawImage。

7. 什么是拖放？

答：拖放可以分为两个动作，即拖拽（drag）和放开（drop）。

5h GB6017.1-20起重机械安全规程-第1部分

拖拽（drag）：移动鼠标到指定对象，按下左键，然后拖动。

放开（drop）：放开鼠标左键，放下对象。

8. 行内样式表、内部样式表和外部样式表分别在HTML页面的什么位置引用？如何引用？

答：在HTML文档中应用CSS 有三种样式表，分别是：行内样式表、内部样式表和外部样式表 。其中最常用的是内部样式表和外部样式表。

1) 内部样式表：在网页中可以使用style元素定义一个内部样式表，指定该网页内元素的CSS样式，内部样式一般添加到头部。在style元素中通常可以使用type属性定义内容的类型（一般取值"text/css"）。格式如下：

2) 外部样式表：

① 含义：在HTML文档中可以使用元素引用外部样式表。元素的属性有：href（指定被链接文档【样式表文件】的位置）、hreflang（指定在被链接文档中的文本的语言）、rel（指定当前文档与被链接文档之间的关系。stylesheet，指向要导入的样式表的 URL；）、media（指定被链接文档将被显示在什么设备上。all，默认值，适用于所有设备；）、type（指定被链接文档的 MIME 类型）

外部样式表种类：一种是文件专门是布局用的样式，另一种是添加外部内容的样式一般命名为

② 添加外部样式表有多种方法：本实验介绍用到的其中一种方法，第一步：选择菜单栏中的文件功能 - 选择新建CSS - 命名；第二步：选择菜单栏中的格式功能 - css样式 - 添加附加css样式表-在弹出的链接外部样式表窗口中添加外部样式文件URL路径： - 点击确定。在本次实验的注册页面就是采用外部样式表进行CSS样式设计，格式如下：

添加外部内容的样式一般命名为，操作方法同上，格式如下：

6h GB6017.1-20起重机械安全规程-第1部分

3) 行内样式表：在HTML元素中使用style属性可以指定该元素的CSS样式，这种应用称为行内样式表。

直接在body标签中添加,如：

网页的背景为蓝色

9. CSS中的padding、margin和float各表示什么属性 中英文背

答：分别表示：内填充、 外边距、 浮动。

10. 简单描述一下什么是css盒子模型

答：CSS给HTML元素都赋予了内容(content)、内填充(padding)、边框(border)和

外边距(margin) 属性，这些属性形成CSS盒模型。整个盒模型在页面中所占的

宽度是由左边界 + 左边框 + 左填充 + 内容 + 右填充 + 右边框 + 右边界组成。

11. 简述CSS3有哪些新特性？-

HSL颜色表现方法。

1) 八大属性：

圆角效果（border-radius）

多彩边框

阴影（box-shadow）

背景图片尺寸 （background-size）

多列（column-count ）

嵌入字体（@font-face）

透明度（opacity）

HSL和HSLA颜色表现方法

2) 四大类（关系选择器、伪类选择器、属性选择器、伪元素选择器）

① 关系选择器

选择符

E F

名称

包含选择符

版本

CSS1

简介

选择所有被E元素包含的F元素。

就可以把这几个相同设定的选择器合并在一起，中间用逗号隔开

选择所有作为E元素的子元素F。

选择紧贴在E元素之后F元素。

E,F 分组选择器 CSS1

E>F

E+F

子选择符

相邻选择符

CSS2

CSS2

7h GB6017.1-20起重机械安全规程-第1部分

E~F 兄弟选择符 CSS3 选择E元素所有兄弟元素F。

② 伪类选择器

a. 结构性伪类选择器

b. UI元素状态伪类选择器

③ 属性选择器

8h GB6017.1-20起重机械安全规程-第1部分

④ 伪元素选择器

3) CSS添加了三个动画效果属性（transform 、taansition、 animation）

① transform字面上就是变形，改变的意思。在CSS3中transform主要

包括以下几种：旋转rotate、扭曲skew、缩放scale和移动translate以

及矩阵变形matrix。

② Animation只应用在页面上已存在的DOM元素上，我们使用CSS3

的Animation制作动画我们可以省去复杂的js,jquery代码。

12. CSS3.0选择器都有哪些类型，并且分别说明其作用及举例语法格式在HTML标签中使用的方法。

1) 元素选择器

选择符 类型

*

版本 简介

通配符选择器

E

CSS2 所有元素对象。

CSS1 以HTML标签作为选择符。

CSS1 以唯一标识符id属性等于myid的E对象作为选择符。

标签(HTML)选择器

E#myid id选择器

s class选择器 CSS1 以class属性包含myclass的E对象作为选择符。

2) 关系选择器

选择符 类型 版本 简介

E,F 分组选择器 CSS1 就可以把这几个相同设定的选择器合并在一起，中间用逗号隔开

E F 包含(后代)选择器 CSS1 选择所有被E元素包含的F元素

9h GB6017.1-20起重机械安全规程-第1部分

E>F 子选择器 CSS2 选择所有作为E元素的子元素F

E+F 相邻选择器 CSS2 选择紧贴在E元素之后F元素

E~F 兄弟选择符 CSS3 选择E元素所有兄弟元素F

3) 伪类选择器

伪类用于向某些选择器添加特殊的效果。伪类对元素进行分类是基于特征而不是它们的名字、属性或者内容。

选择符 类型

a:link

简介

链接伪类选择器 设置超链接a在未被访问前的样式

a:visited 链接伪类选择器 设置超链接a在其链接地址已被访问过时的样式

E:hover 用户操作伪类选择器 设置元素在其鼠标悬停时的样式

E:active 用户操作伪类选择器 设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式

E:focus 用户操作伪类选择器 设置元素在成为输入焦点（该元素的onfocus事件发生）时的样式

E:lang() :lang()伪类选择器 匹配使用特殊语言的E元素

a. 结构性伪类选择器

选择符 版本

E:root

简介

CSS3 匹配E元素在文档的根元素。

CSS2 匹配父元素的第一个子元素E。

CSS3 匹配父元素的最后一个子元素E。

E:first-child

E:last-child

E:only-child CSS3 匹配父元素仅有的一个子元素E。

E:nth-child(n) CSS3 匹配父元素的第n个子元素E。

E:nth-last-child(n) CSS3 匹配父元素的倒数第n个子元素E。

E:first-of-type CSS3 匹配同类型中的第一个同级兄弟元素E。

E:last-of-type CSS3 匹配同类型中的最后一个同级兄弟元素E。

E:only-of-type CSS3 匹配同类型中的唯一的一个同级兄弟元素E。

E:nth-of-type(n) CSS3 匹配同类型中的第n个同级兄弟元素E。

CSS3 匹配同类型中的倒数第n个同级兄弟元素E。 E:nth-last-of-type(n)

E:empty CSS3 匹配没有任何子元素（包括text节点）的元素E。

b. UI元素状态伪类选择器

选择符 版本

E:checked

E:enabled

E:disabled

E:read-only

简介

CSS3 匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)

CSS3 匹配用户界面上处于可用状态的元素E。

CSS3 匹配用户界面上处于禁用状态的元素E。

CSS3 匹配用户界面上处于只读状态的元素E

10h GB6017.1-20起重机械安全规程-第1部分

E:read-write CSS3 匹配用户界面上处于读写状态的元素E

3) 属性选择器

选择符 版本 简介

E:checked CSS3 匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)

E:enabled CSS3 匹配用户界面上处于可用状态的元素E。

E:disabled CSS3 匹配用户界面上处于禁用状态的元素E。

E:read-only CSS3 匹配用户界面上处于只读状态的元素E

E:read-write CSS3 匹配用户界面上处于读写状态的元素E

4) 伪元素选择器

选择符 版本 简介

E:checked CSS3 匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)

E:enabled CSS3 匹配用户界面上处于可用状态的元素E。

E:disabled CSS3 匹配用户界面上处于禁用状态的元素E。

E:read-only CSS3 匹配用户界面上处于只读状态的元素E

E:read-write CSS3 匹配用户界面上处于读写状态的元素E

13. HTML5用什么标记播放音频？主要支持的音频格式有哪些？

答：标记：

14. HTML5用什么标记播放视频？主要支持的视频格式有哪些？

答：标记：

15. 简述什么是HTML5的 Web Storage功能？包括哪些技术？它们的区别是什么？

答：HTML5新增一种非常重要的功能是可以在客户端本地存数据的Web Storage功能。

其中localStorage持久化本地存储，类似于Cookie，但没有有效期，除非主动删除

数据。另一种sessionStorage用于本地存储一个会话中的数据，这些数据只在同一

个会话中的页面才能访问并且当会话结束后数据也随之销毁，类似于session。

四．编程题

1. 编写一个form表单，实现一个学生信息输入。包含学号、姓名、性别、爱好、出生年月等。（11h

注GB6017.1-20起重机械安全规程-第1部分

意首行缩进）

答：

学号：


名字：


密码：


性别：男

女


电话：


邮箱：


生日：


兴趣爱好：篮球

足球

舞蹈

看电影




颜色爱好：1

2

3




12h GB6017.1-20起重机械安全规程-第1部分

建议： </p><p> 请输入对本课程的建议 </p><p>


2. 绘制一个边框为蓝色粗细为2个像素，填充为红色，宽和高分别是300，200的矩形。要写出HTML5代码和相应的JavaScript代码。

答：

您的浏览器不支持 canvas。

3. 写出实现下图所示表格的HTML代码。

表格的宽和高分别是500，80。

第1列、第2列及第3列的比例为1：3：1。

跨越竖直方向两行用rowspan，跨越水平方向两列用colspan。

答：

单元格1	(); //绘制路径 ();//绘制填充 14h GB6017.1-20起重机械安全规程-第1部分 单元格2	单元格3
单元格4		单元格5
	单元格6

15h GB6017.1-20起重机械安全规程-第1部分

班前教育记录

日期:

工程名称

教育性质 班前安全教育

施工单位

安全员

(班组长)

安全教育内容

1、施工人员必须严格执行“安全生产，预防为主”的基本方针。还应执行项目部关于安全生产的各项规章制度。

2、施工工人必须佩戴合格的安全帽，并系好帽扣，防止安全帽脱落失去防护作用。

3、高空作业人员必须佩戴合格的安全带，作业时，应高挂低用，高空或构件上行走时，安全带必须与钢丝缆绳或稳定牢固的构件连接，更不得在无安全措施和设施的情况下冒险作业或行走。登高作业时，必须从安全爬梯上下，禁止从钢柱上攀登和滑下。不得在无安全保障的作业面施工作业。

4、施工人员应学会自我保护，做到不伤害他人，不被他人伤害，保证自己安全，不伤害自己。

5、施工人员不得酒后上班，不得宿醉上班。

6、上下交叉作业时，尽量避开统一垂直方向作业，上下应保持安全距离或设置安全防护层，并安排专人进行监护。

7、施工作业时，工人间应相互配合、相互呼应、相互提醒、协调一致。

当前工序安全性注意事项:

1、严禁违章

2、防高处坠落

3、防物体打击伤害

16h GB6017.1-20起重机械安全规程-第1部分

参加人员签名:

17h