HTML5及CSS3web前端开发技术习题答案解析 下载本文

第四章

1.简答题

(1)表单中文本框和密码框在定义方法和实现效果上有什么区别?

标记中的type属性值设置为text,就可以在表单中插入文本框。在此文本框中可以输入任何类型的数据,但输入的数据将以单行显示,不会换行。例如,使用标记输入姓名的代码如下。

姓名:

其中,name属性用于定义文本框的名称。maxlength和size属性用于指定文本框的宽度和允许用户输入最大的字符数,更多情况下,采用CSS设置。value指定文本框的默认值。

标记中的type属性值设置为password,就可以在表单中插入密码框,涉及到各属性的含义与文本框相同。在此密码框中可以输入任何类型的数据,这些数据都将以实心圆点的形式显示,以保护密码的安全,例如:

密码:

(2)在表单中定义一组单选按钮和一组复选按钮在方法上有什么区别?

复选框允许在一组选项中选择任意多个选项。将标记中的type属性值设置为checkbox,就可以在表单中插入复选框。通过复选框,用户可以在网页中实现多项选择。例如,

请选择:

其中,value属性指定的复选框被选中是该控件的值,checked用来设置复选框默认被选中。

单选按钮表示互相排斥的选项。在某单选按钮组(由两个或多个同名的按钮组成)中选择一个按钮时,就会取消对该组中其他所有按钮的选择。将标记中的type属性值设置为radio,就可以在表单中插入一个单选按钮。在选中状态时,按钮中心会有一个实心圆点。

(3)简述HTML5新增加的form属性、formmethod属性、placeholder属性、autocomplete属性的功能。

在HTML5中,可以将表单元素写在页面上的任何位置,然后给该元素指定一个form属性,属性值为该表单的id(id是表单的惟一属性标识),通过这种方式声明该元素属于哪个具体的表单。

HTML5中使用formmethod属性对每个表单元素分别指定不同的提交方法。

placeholder是指当文本框

autocomplete属性是辅助输入的自动完成功能,其值为“on”“off”与“”三类值。不指定时,使用浏览器的默认值(取决于各浏览器的设定)。该属性设置为on时,可以显式指定待输入的数据列表。如果使用datalist元素与list属性提供待输入的数据列表,自动完成时,可以将该 datalist元素中的数据作为待输入的数据在文本框中自动显示。

(4)HTML5中input标记的type属性增加的类型包括number、range、date、time等,说明其功能。

将input标记中的type属性设置为number,可以在表单中插入数值输入域,还可以限定输入数字的范围。

将input标记中的type属性设置为range,可以在表单中插入表示数值范围的滑动条,还可

以限定可接受数值的范围。

只要将input标记中的type属性设置为date、time,可以完成网页中日期选择器的定义。

2.操作题

制作如图4-11所示的表单。

图4-11 表单示例

2.操作题(4)-表单

考试报名表

用户名:

文理选择:

报考科目:

历史

报考级别:

第五章

1.简答题

(1)HTML5中插入视频使用什么标记?描述其语法格式及含义、该标记的属性及功能。 HTML5提供了视频内容的标准接口,规定使用

如果浏览器不支持url指定的video元素,将显示替代文字。

表5-1 属性 src autoplay controls width height loop preload startTime currentTime duration volume muted 值 url autoplay controls 像素 像素 loop auto/none/metadata 0~1 true/false

说明 要播放视频的URL 视频就绪后立刻播放 添加播放、暂停和音量等控件 设置视频播放器的宽度 设置视频播放器的高度 设置视频是否循环播放 视频在页面加载时开始加载,并预备播放 读取媒体的开始播放时间,通常为0 读取或修改媒体的当前播放位置 读取媒体总的播放时间 读取或修改媒体的播放音量 读取或修改媒体的静音状态 (2)简述video元素常用方法和事件(各列出3种即可)。 video元素还有一系列重要的方法和事件。调用这些方法和事件可以访问和控制video对象。表5-3给出了部分video元素常用的方法和事件。

表5-3

方法/事件

功能

play() pause() load() play事件 pause事件 error事件 timeupdate事件 durationchange事件 播放媒体,paused属性的值自动修改为false 暂停播放,paused属性的值自动修改为true 重新载入媒体进行播放 执行play()方法时触发 执行pause()方法时触发 获取媒体数据错误时触发 当前播放位置发生改变时触发 播放时长被改变 (3)简述track元素的功能和常用的属性。 track元素可以为使用video元素播放的视频或使用audio元素播放的音频添加字幕、标题或章节等文字信息。track元素为视频添加字幕的过程和为音频添加字幕的过程是相同的。track元素是video元素的子元素,标记必须被书写在 video元素的开始标记与结束标记之间。如果使用标记描述媒体文件,则标记必须被书写在标记之后。track元素是一个空元素,其开始标记与结束标记之间不包含任何内容。表5-6给出了标记的常用属性及说明。

表5-6 属性 src属性 srclang属性 default属性 kind属性 说明 src属性用于指定字幕文件的存放路径,该属性是一个必须使用的属性。src属性的属性值可以是一个绝对URL路径,也可以是一个相对URL路径。 srclang属性用于指定字幕文件的语言。例如,srclang=\和srclang=\分别表示字幕文件为英语和汉语。 default属性用于通知浏览器在用户没有选择使用其他字幕文件的时候可以使用当前 track文件 kind属性用于指定字幕文件(即用于存放字幕、章节标题、说明文字或元数据的文件) 的种类。可以对kind属性指定的属性值为subtitles、captions、descriptions、chapters与metadata 标记的常用属性及说明

2.操作题

在网页中插入视频,并对视频做如下设置。 ① 320像素宽,240像素高; ② 显示视频播放器控件; ③ 循环播放;

④ 首选播放OGG格式文件,其次分别为MP4格式和WEBM格式(此处需准备3种不同格式的文件);

⑤ 若不支持video元素,则显示提示文字“请选用其他高版本浏览器尝试播放此视频”。

(2)使用HTML5视频字幕制作工具创建 WebVTT文件,并通过track元素为一个视频文件添加字幕。

创建的WebVTT文件文件如下:

WEBVTT

00:00.000 --> 00:31.844 茫茫的天涯茫茫的路

00:31.844 --> 00:36.047 茫茫的草原碧蓝的天

00:36.047 --> 00:39.807 草原上有你我的爱恋

00:39.807 --> 00:42.664 爱你的心永在心田

00:42.664 --> 00:46.449 草原的姑娘洁白雪莲

00:46.449 --> 00:50.462 奔驰的骏马越过山涧

00:50.462 --> 00:54.019 清澈的河水映着你的脸

00:54.019 --> 00:58.152 就像晚霞惹人留恋

00:58.152 --> 01:01.700 你带我飞驰在草原

01:01.700 --> 01:05.581 我和你飞翔在蓝天

01:05.581 --> 01:09.297 你送我美丽的格桑花

01:09.297 --> 01:12.896 我送你幸福和祝愿

01:12.896 --> 01:16.797 你带我飞驰在草原

01:16.797 --> 01:20.558 我和你飞翔在蓝天

01:20.558 --> 01:24.204 你我的爱情在草原

01:24.204 --> 01:27.965 草原在你我的心田

01:27.965 --> 01:47.375 草原的姑娘洁白雪莲