HTML5与CSS3web前端开发技术复习题答案解析Word文件下载.docx
《HTML5与CSS3web前端开发技术复习题答案解析Word文件下载.docx》由会员分享，可在线阅读，更多相关《HTML5与CSS3web前端开发技术复习题答案解析Word文件下载.docx（88页珍藏版）》请在冰点文库上搜索。
通过使用CanvasAPI动态地绘制各种效果精美的图形，也可以通过SVG绘制可伸缩矢量图形。
增强的音视频播放和控制功能。
新增了audio和video元素，可以不依赖任何插件而播放音频和视频。
HTML5的数据存储和数据处理的功能。
包括离线应用、Web通信、本地存储等功能，HTML5还支持WebSQL和IndexedDB等轻量级数据库，增强了数据存储和数据检索能力。
获取地理位置信息。
HTML5新增了GeolocationAPI规，应用于移动设备中的地理定位。
提高页面响应的多线程。
HTML5新增了WebWorkers来实现多线程功能。
通过WebWorkers，将耗时较长的处理交给后台线程，降低Web服务的响应时间，有利于增强用户体验。
方便用户处理文件和访问文件系统的文件文件API。
HTML5的文件API包括FileReaderAPI和FileSystemAPI。
除了上面介绍的HTML5的特性之外，HTML5还有管理浏览器历史记录的HistoryAPI。
HTML5可以通过脚本语言在浏览器历史记录中添加项目，以及在不刷新页面的前提下显示地改变浏览器地址栏中的URL地址；
而HTML5的拖放功能可以使用mousedown、mousemove、mouseup等方法来实现拖放操作。
（4）HTML5文档结构的HTML4之前的文档结构有哪些变化？
容类型（ContentType）。
HTML5的文件扩展名与容类型与之前的HTML版本相同。
但.DOCTYPE声明做了简化，该声明适用所有HTML。
声明如下：
<
!
DOCTYPEhtml>
在HTML5中，直接指定meta标记的charset属性可以设置字符编码，如下所示。
metacharset="
utf-8"
>
从HTML5开始，对于HTML文件的字符编码推荐使用UTF-8。
操作题略。
第二章
（1）简述HTML文档的基本结构元素的功能。
HTML文档的基本结构元素包括<
html>
、<
head>
body>
等。
和<
/html>
标记表示该文档是HTML文档。
有时<
标记可省略，因为.html或.htm文件被Web浏览器默认为是HTML文档。
和<
/head>
标记表示的是文档头部信息，一般包括标题和主题信息，该部分信息不会显示在页面正文中。
一些CSS样式定义、JavaScript脚本也可以放到文档的头部。
/body>
标记是网页的主体信息，是显示在页面上的容，各种网页元素，包括文字、表格和图片等信息都将放到这个标记。
如果为body元素设置CSS样式，还可以实现背景、边距、字体等样式的变化。
（2）HTML5增加的article、section、nav、aside等结构元素功能。
HTML5增加了article、section、nav、aside、header、footer等布局元素，以实现更好的语义解释。
但这些结构元素定义的是增强了语义的div块，是HTML页面按逻辑进行分割后的单位，并没有显示效果
article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的容。
例如，一篇博客或报刊中的文章、一篇论坛帖子、一段用户评论或独立的插件等。
section元素用于定义文档中的节。
比如章节、页眉、页脚或文档中的其它部分。
一般用于成节的容，会在文档流中开始一个新的节。
nav元素是一个可以用作页面导航的组，其中的导航元素到其他页面或当前页面的其他部分。
aside标签用来承载非正文的容，被视为页面里面一个单独的部分。
它包含的容与页面的主要容是分开的，可以被删除，而不会影响到网页的容、章节或是页面所要传达的信息。
header元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面的一个容区域的标题，但也可以包括表格、logo图片等容。
footer元素一般作为其上层容器元素的脚注
（3）HTML为什么要使用字符实体？
列举出5个常用的字符实体名称。
一些字符在HTML中拥有特殊的含义，比如小于号（<
）用于定义HTML标记的开始。
如果用户希望浏览器正确地显示这些字符，需要在HTML源码中插入字符实体。
常见的字符实体如下。
显示结果
实体名称
空格
&
nbsp;
小于号
lt;
大于号
gt;
和号
amp;
"
引号
quot;
'
撇号
apos;
（IE不支持）
§
节
sect;
©
copy;
®
注册商标
reg;
×
乘号
times;
÷
除号
divide;
第三章
（1）定义列表的标记有哪几种？
各种列表标记之间都可以嵌套使用吗？
HTML中的列表元素有3种形式——有序列表、无序列表和自定义列表。
有序列表由<
ol>
/ol>
标记对实现，在<
标记之间使用成对的<
li>
/li>
标记添加列表项目。
无序列表由成对的<
ul>
/ul>
标记对实现，<
标记可添加列表项目。
自定义列表以<
dl>
标记开始，自定义列表项目以<
dt>
开始，自定义列表的解释以<
dd>
开始。
各种列表标记之间都可以嵌套使用，例如，自定义列表的一个嵌套。
DOCTYPEHTML>
metacharset=utf-8>
title>
自定义列表示例<
/title>
<
用户名<
6~18个字符，需以字母开头
<
firstName<
fdsdffddsfds
<
lastName<
fdfdfdsdsssdf
/dl>
/dt>
密码<
6~16个字符，区分大小写<
（2）在HTML文档中插入图像使用什么标记？
该标记有哪些常用属性？
分别实现什么功能？
使用<
img>
标记插入图像，语法格式如下。
imgsrc="
url"
title="
description"
/>
该标记含有多个属性，具体的属性及功能如表所示。
其中，width属性、height属性、border属性、align属性已经不建议使用，而是通过CSS来描述。
属性名
说明
src
图像地址
添加图像的替代文字
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元素，则显示提示文字“请选用其他高版本浏览器尝试播放此视频”。
UTF-8"
videowidth="
320"
height="
240"
loop="
loop"
sourcesrc="
movie.ogg"
video/ogg"
movie.mp4"
video/mp4"
movie.webm"
video/webm"
请选用其他高版本浏览器尝试播放此视频
br>
升级会员 