HTML5与CSS3web前端开发技术习题答案Word文档下载推荐.docx
《HTML5与CSS3web前端开发技术习题答案Word文档下载推荐.docx》由会员分享，可在线阅读，更多相关《HTML5与CSS3web前端开发技术习题答案Word文档下载推荐.docx（71页珍藏版）》请在冰豆网上搜索。
标记之间使用成对的<
li>
/li>
标记添加列表项目。
无序列表由成对的<
ul>
/ul>
标记对实现，<
标记可添加列表项目。
自定义列表以<
dl>
标记开始，自定义列表项目以<
dt>
开始，自定义列表的解释以<
dd>
开始。
各种列表标记之间都可以嵌套使用，例如，自定义列表的一个嵌套。
!
DOCTYPEHTML>
html>
head>
metacharset=utf-8>
title>
自定义列表示例<
/title>
/head>
body>
<
用户名<
6~18个字符，需以字母开头
<
firstName<
fdsdffddsfds
<
lastName<
fdfdfdsdsssdf
/dl>
/dt>
密码<
6~16个字符，区分大小写<
/body>
/html>
（2）在HTML文档中插入图像使用什么标记？
该标记有哪些常用属性？
分别实现什么功能？
使用<
img>
标记插入图像，语法格式如下。
imgsrc="
url"
title="
description"
/>
该标记含有多个属性，具体的属性及功能如表所示。
其中，width属性、height属性、border属性、align属性已经不建议使用，而是通过CSS来描述。
属性名
说明
src
图像地址
title
添加图像的替代文字
width/height
设置图像宽度/高度
border
设置图像边框
align
设置图像对齐方式
（3）绝对路径、相对路径和根路径的区别是什么？
绝对路径指文件的完整路径，包括文件传输的协议HTTP、FTP等，一般用于网站的外部链接，
相对路径是指相对于当前文件的路径，它包含了从当前文件指向目的文件的路径，适用于网站的内部链接。
根路径的设置以“/”开头，后面紧跟文件路径，例如：
/download/index.html。
根路径的设置也适用于内部链接的建立，一般情况下不使用根路径。
根路径必须在配置好的服务器环境中才能使用。
（4）如何为网页添加超链接？
定义超链接时如何指定打开链接文件的目标窗口？
有几种目标窗口形式？
在HTML文件中，使用标记<
a>
来定义超链接，具体链接对象通过标记中的href属性来设置。
定义超链接的语法格式如下。
ahref="
target="
target-windows"
>
链接标题<
/a>
target属性指定用于打开链接的目标窗口，默认方式是原窗口，其属性值如表所示。
属性值
parent
当前窗口的上级窗口，一般在框架中使用
blank
在新窗口中打开
self
在同一窗口中打开，和默认值一致
top
在浏览器的整个窗口中打开，忽略任何框架
2．操作题
（1）使用无序列表标记<
和有序列表标记<
定义如图3-23所示的嵌套列表，链接文件可自定义或输入“#”。
嵌套列表示例<
学生选课信息
必修课<
公共必修课<
#"
计算机基础<
大学外语<
专业必修课<
选修课<
oltype="
a"
公共选修课<
专业选修课<
图3-23嵌套列表效果
（2）在网页中插入图像，并对图像做如下设置。
图像宽为浏览器窗口的一半，高为浏览器窗口的1/4；
图像边框宽5像素；
替代文字为“图片欣赏”；
图像显示在文字左侧。
（3）使用表格及表格嵌套技术等，对网页做如图2-43所示的布局设计。
①表格宽度为600像素；
②可以先后插入4个2×
2的表格，将每个表格第一行第一个单元格设置为跨2竖列，也可以根据图示，自定义表格结构；
③标题单元格的背景颜色可自定义。
图3-24表格示例
第四章
（1）表单中文本框和密码框在定义方法和实现效果上有什么区别？
将<
input>
标记中的type属性值设置为text，就可以在表单中插入文本框。
在此文本框中可以输入任何类型的数据，但输入的数据将以单行显示，不会换行。
例如，使用<
标记输入姓名的代码如下。
姓名：
inputname="
username"
type="
text"
maxlength="
12"
size="
8"
value="
myname"
其中，name属性用于定义文本框的名称。
maxlength和size属性用于指定文本框的宽度和允许用户输入最大的字符数，更多情况下，采用CSS设置。
value指定文本框的默认值。
标记中的type属性值设置为password，就可以在表单中插入密码框，涉及到各属性的含义与文本框相同。
在此密码框中可以输入任何类型的数据，这些数据都将以实心圆点的形式显示，以保护密码的安全，例如：
密码：
pwd"
password"
（2）在表单中定义一组单选按钮和一组复选按钮在方法上有什么区别？
复选框允许在一组选项中选择任意多个选项。
标记中的type属性值设置为checkbox，就可以在表单中插入复选框。
通过复选框，用户可以在网页中实现多项选择。
例如，
请选择：
check1"
check"
football"
checked/>
其中，value属性指定的复选框被选中是该控件的值，checked用来设置复选框默认被选中。
单选按钮表示互相排斥的选项。
在某单选按钮组（由两个或多个同名的按钮组成）中选择一个按钮时，就会取消对该组中其他所有按钮的选择。
标记中的type属性值设置为radio，就可以在表单中插入一个单选按钮。
在选中状态时，按钮中心会有一个实心圆点。
（3）简述HTML5新增加的form属性、formmethod属性、placeholder属性、autocomplete属性的功能。
在HTML5中，可以将表单元素写在页面上的任何位置，然后给该元素指定一个form属性，属性值为该表单的id（id是表单的惟一属性标识），通过这种方式声明该元素属于哪个具体的表单。
HTML5中使用formmethod属性对每个表单元素分别指定不同的提交方法。
placeholder是指当文本框<
inputtype="
处于未输入状态时文本框中显示的输入提示。
例如：
placeholder＝"
defaulttext"
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，可以完成网页中日期选择器的定义。
制作如图4-11所示的表单。
图4-11表单示例
DOCTYPEhtml>
2.操作题（4）-表单<
metahttp-equiv="
Content-Type"
content="
text/html;
charset=gbs2312"
/>
h2>
考试报名表<
/h2>
formname="
form1"
method="
post"
action="
p>
用户名：
name="
textfield1"
/p>
文理选择：
radio"
rad"
rad1"
文科<
rad2"
理科<
rad3"
综合
报考科目：
checkbox"
shu"
数学
check2"
yu"
语文
check3"
wai"
外语
check4"
wu"
物理<
check5"
hua"
化学
check6"
sheng"
生物
check7"
zheng"
政治
check8"
li"
历史
check9"
di"
地理<
报考级别：
selectname="
menu2"
3"
optionvalue="
1"
A
2"
B
C
/select>
sub"
submit"
提交"
reset"
重置"
button"
确定"
/form>
第五章
（1）HTML5中插入视频使用什么标记？
描述其语法格式及含义、该标记的属性及功能。
HTML5提供了视频内容的标准接口，规定使用<
video>
标记来描述和播放视频。
标记语法格式如下：
videosrc="
controls="
controls"
替代文字<
/video>
如果浏览器不支持url指定的video元素，将显示替代文字。
标记常用的属性及说明如表5-1所示。
表5-1<
标记常用属性及说明
属性
值
url
要播放视频的URL
autoplay
视频就绪后立刻播放
controls
controls
添加播放、暂停和音量等控件
width
像素
设置视频播放器的宽度
height
设置视频播放器的高度
loop
设置视频是否循环播放
preload
auto/none/metadata
视频在页面加载时开始加载，并预备播放
startTime
读取媒体的开始播放时间，通常为0
currentTime
读取或修改媒体的当前播放位置
duration
读取媒体总的播放时间
volume
0~1
读取或修改媒体的播放音量
muted
true/false
读取或修改媒体的静音状态
（2）简述video元素常用方法和事件（各列出3种即可）。
video元素还有一系列重要的方法和事件。
调用这些方法和事件可以访问和控制video对象。
表5-3给出了部分video元素常用的方法和事件。
表5-3<
标记常用方法和事件
方法/事件
功能
play（）
播放媒体，paused属性的值自动修改为false
pause（）
暂停播放，paused属性的值自动修改为true
load（）
重新载入媒体进行播放
play事件
执行play（）方法时触发
pause事件
执行pause（）方法时触发
error事件
获取媒体数据错误时触发
timeupdate事件
当前播放位置发生改变时触发
durationchange事件
播放时长被改变
（3）简述track元素的功能和常用的属性。
track元素可以为使用video元素播放的视频或使用audio元素播放的音频添加字幕、标题或章节等文字信息。
track元素为视频添加字幕的过程和为音频添加字幕的过程是相同的。
track元素是video元素的子元素，<
track>
标记必须被书写在video元素的开始标记与结束标记之间。
如果使用<
source>
标记描述媒体文件，则<
标记必须被书写在<
标记之后。
track元素是一个空元素，其开始标记与结束标记之间不包含任何内容。
表5-6给出了<
标记的常用属性及说明。
表5-6<
标记的常用属性及说明
src属性
src属性用于指定字幕文件的存放路径，该属性是一个必须使用的属性。
src属性的属性值可以是一个绝对URL路径，也可以是一个相对URL路径。
srclang属性
srclang属性用于指定字幕文件的语言。
例如，srclang="
en"
和srclang="
zh-cn"
分别表示字幕文件为英语和汉语。
default属性
default属性用于通知浏览器在用户没有选择使用其他字幕文件的时候可以使用当前track文件
kind属性
kind属性用于指定字幕文件（即用于存放字幕、章节标题、说明文字或元数据的文件）的种类。
可以对kind属性指定的属性值为subtitles、captions、descriptions、chapters与metadata
在网页中插入视频，并对视频做如下设置。
①320像素宽，240像素高；
②显示视频播放器控件；
③循环播放；
④首选播放OGG格式文件，其次分别为MP4格式和WEBM格式（此处需准备3种不同格式的文件）；
⑤若不支持video元素，则显示提示文字“请选用其他高版本浏览器尝试播放此视频”。
DOCTYPEhtml>
metacharset="
UTF-8"
videowidth="
320"
height="
240"
loop="
loop"
sourcesrc="
movie.ogg"
video/ogg"
movie.mp4"
video/mp4"
movie.webm"
video/webm"
请选用其他高版本浏览器尝试播放此视频
br>
（2）使用HTML5视频字幕制作工具创建WebVTT文件，并通过track元素为一个视频文件添加字幕。
创建的WebVTT文件文件如下：
WEBVTT
00:
00.000-->
00:
31.844
茫茫的天涯茫茫的路
31.844-->
36.047
茫茫的草原碧蓝的天
36.047-->
39.807
草原上有你我的爱恋
39.807-->
42.664
爱你的心永在心田
42.664-->
46.449
草原的姑娘洁白雪莲
46.449-->
50.462
奔驰的骏马越过山涧
50.462-->
54.019
清澈的河水映着你的脸
54.019-->
58.152
就像晚霞惹人留恋
58.152-->
01:
01.700
你带我飞驰在草原
01:
01.700-->
05.581
我和你飞翔在蓝天
05.581-->
09.297
你送我美丽的格桑花
09.297-->
12.896
我送你幸福和祝愿
12.896-->
16.797
16.797-->
20.558
20.558-->
24.204
你我的爱情在草原
24.204-->
27.965
草原在你我的心田
27.965-->
47.375
47.375-->
50.627
50.627-->
54.109
54.109-->
58.011
58.011-->
02:
01.818
02:
01.818-->
05.580
05.580-->
09.340
09.340-->
13.080
13.080-->
16.818
16.818-->
20.440
20.440-->
24.364
24.364-->
28.010
28.010-->
31.793
31.793-->
37.715
37.715-->
41.198
41.198-->
44.936
44.936-->
48.791
48.791-->
52.459
52.459-->
56.221
56.221-->
59.982
引用的文件如下：
body>
videocontrolswidth="
400"
300"
images/caoyuan.mp4"
tracksrc="
geci.vtt"
srclang="
zh"
kind="
subtitles"
label="
中文"
default>
English"
第六章
（1）使用CanvasAPI绘图时，直线有几种线帽形态？
lineCap属性有哪些取值？
分别表示什么含义？
lineCap用于设置或返回线帽（线条的结束端点）样式，可以有以下三种取值。
butt：
默认属性值，不为直线添加端点
round：
为直线添加圆形端点
square：
为直线添加正方形端点
（2）Canvas使用什么方法在网页中绘制圆形？
其中需要几个参数？
每个参数的含义是什么？
CanvasAPI使用绘制图形路径来绘制圆形。
绘制图形路径时，需要使用绘图上下文对象ctx的arc（）方法。
该方法的定义如下。
ctx.arc（x,y,radius,startAngle,endAngle,anticlockwise）
其中，x、y分别为绘制圆形的圆心横坐标和纵坐标，radius为圆形半径，startAngle为开始角度，endAngle为结束角度，anticlockwise为是否按逆时针方向进行绘制。
arc（）方法通过指定开始角度与结束角度，除了可以用来绘制圆形，还可以绘制圆弧，这两个角度就决定了绘制的弧度。
anticlockwise为布尔值参数，参数值为true时，按逆时针绘制；
参数值为false时，则按顺时针绘制。
（3）路径创建完成后，为什么要使用图形上下文对象的closePath（）方法关闭路径？
路径创建完成后，使用绘图上下文对象的closePath（）方法关闭路径。
如果绘制路径时未使用closePath（）方法，则绘制出的是没有封闭的路径，除非使用beginPathj（）开始新的路径绘制。
（4）Canvas定义颜色值有哪几种方法？
Canvas绘图时，绘图上下文的fillStyle属性与strokeStyle属性用来指定填充的颜色或边框的颜色，颜色定义方法与CSS中颜色定义方法基本相同。
下面是定义颜色的各种方法。
∙颜色
升级会员 