HTML5与CSS3 web前端开发技术习题答案.docx

HTML5与CSS3 web前端开发技术习题答案.docx

《HTML5与CSS3 web前端开发技术习题答案.docx》由会员分享，可在线阅读，更多相关《HTML5与CSS3 web前端开发技术习题答案.docx（73页珍藏版）》请在冰豆网上搜索。

HTML5与CSS3web前端开发技术习题答案

第一章

1．简答题

（1）在Web前端开发方面，HTML5与HTML4比较，主要解决哪几方面的问题？

HTML5的核心在于解决当前Web开发中存在的各种问题。

一是解决Web浏览器之间的兼容性问题。

在一个浏览器上正常显示的网页（或运行的Web应用程序），很可能在另一个浏览器上不能显示或显示效果不一致；

二是文档结构描述的问题。

HTML4之前的各版本中，HTML文档的结构一般用div元素描述，文档元素的结构含义不够清晰；

三是使用HTML+CSS+JavaScript开发Web应用程序时，开发功能受到很大的限制，比如本地数据存储功能、多线程访问、获取地理位置信息等，这些都影响了用户的体验。

（2）HTML5新增的全局属性有哪几个？

描述其主要功能。

HTML5新增的全局属性，是指可以对任何元素都使用的属性。

功能如下所示。

属性

描述

HTML5新增

accesskey

规定访问元素的键盘快捷键

class

规定元素的类名（用于规定样式表中的类）。

contenteditable

规定是否允许用户编辑内容。

是

contextmenu

规定元素的上下文菜单。

是

dir

规定元素中内容的文本方向。

draggable

规定是否允许用户拖动元素。

是

dropzone

规定当被拖动的项目/数据被拖放到元素中时会发生什么。

是

hidden

规定该元素是无关的。

被隐藏的元素不会显示。

是

id

规定元素的唯一ID。

lang

规定元素中内容的语言代码。

spellcheck

规定是否必须对元素进行拼写或语法检查。

是

style

规定元素的行内样式。

tabindex

规定元素的tab键控制次序。

title

规定有关元素的额外信息。

（3）HTML5是下一代Web语言的开发框架，典型特性有哪些？

HTML5从标记语言的功能提升到下一代Web语言的开发框架，他集成了HTML+CSS3+JavaScript的Web应用框架。

。

良好的语义特性。

HTML5支持微数据与微格式，增加的各种元素赋予网页更好的意义和结构，适于构建对程序、对用户都更有价值的数据驱动的Web应用。

HTML5增加了section元素、article元素、nav元素以及aside元素等结构元素。

强大的绘图功能。

通过使用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属性可以设置字符编码，如下所示。

从HTML5开始，对于HTML文件的字符编码推荐使用UTF-8。

操作题略。

第二章

1．简答题

（1）简述HTML文档的基本结构元素的功能。

HTML文档的基本结构元素包括、、等。

和标记表示该文档是HTML文档。

有时标记可省略，因为.html或.htm文件被Web浏览器默认为是HTML文档。

和标记表示的是文档头部信息，一般包括标题和主题信息，该部分信息不会显示在页面正文中。

一些CSS样式定义、JavaScript脚本也可以放到文档的头部。

和标记是网页的主体信息，是显示在页面上的内容，各种网页元素，包括文字、表格和图片等信息都将放到这个标记内。

如果为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源码中插入字符实体。

常见的字符实体如下。

显示结果

描述

实体名称

空格

<

小于号

<

>

大于号

>

&

和号

&

"

引号

"

'

撇号 

'（IE不支持）

§

节

§

©

版权

©

®

注册商标

®

×

乘号

×

÷

除号

÷

操作题略。

第三章

1．简答题

（1）定义列表的标记有哪几种？

各种列表标记之间都可以嵌套使用吗？

HTML中的列表元素有3种形式——有序列表、无序列表和自定义列表。

有序列表由

无序列表由成对的

自定义列表以

标记开始，自定义列表项目以

开始，自定义列表的解释以

开始。

各种列表标记之间都可以嵌套使用，例如，自定义列表的一个嵌套。

DOCTYPEHTML>

用户名

6~18个字符，需以字母开头

firstName

fdsdffddsfds

lastName

fdfdfdsdsssdf

密码

6~16个字符，区分大小写

（2）在HTML文档中插入图像使用什么标记？

该标记有哪些常用属性？

分别实现什么功能？

使用标记插入图像，语法格式如下。

该标记含有多个属性，具体的属性及功能如表所示。

其中，width属性、height属性、border属性、align属性已经不建议使用，而是通过CSS来描述。

属性名

说明

src

图像地址

title

添加图像的替代文字

width/height

设置图像宽度/高度

border

设置图像边框

align

设置图像对齐方式

（3）绝对路径、相对路径和根路径的区别是什么？

绝对路径指文件的完整路径，包括文件传输的协议HTTP、FTP等，一般用于网站的外部链接，

相对路径是指相对于当前文件的路径，它包含了从当前文件指向目的文件的路径，适用于网站的内部链接。

根路径的设置以“/”开头，后面紧跟文件路径，例如：

/download/index.html。

根路径的设置也适用于内部链接的建立，一般情况下不使用根路径。

根路径必须在配置好的服务器环境中才能使用。

（4）如何为网页添加超链接？

定义超链接时如何指定打开链接文件的目标窗口？

有几种目标窗口形式？

在HTML文件中，使用标记来定义超链接，具体链接对象通过标记中的href属性来设置。

定义超链接的语法格式如下。

链接标题

target属性指定用于打开链接的目标窗口，默认方式是原窗口，其属性值如表所示。

属性值

说明

parent

当前窗口的上级窗口，一般在框架中使用

blank

在新窗口中打开

self

在同一窗口中打开，和默认值一致

top

在浏览器的整个窗口中打开，忽略任何框架

2．操作题

（1）使用无序列表标记

和有序列表标记
定义如图3-23所示的嵌套列表，链接文件可自定义或输入“#”。

学生选课信息

1. 必修课

• 公共必修课

• 计算机基础
• 大学外语

• 专业必修课

2. 选修课
3. 公共选修课
4. 专业选修课

图3-23嵌套列表效果

（2）在网页中插入图像，并对图像做如下设置。

图像宽为浏览器窗口的一半，高为浏览器窗口的1/4；图像边框宽5像素；替代文字为“图片欣赏”；图像显示在文字左侧。

（3）使用表格及表格嵌套技术等，对网页做如图2-43所示的布局设计。

①表格宽度为600像素；

②可以先后插入4个2×2的表格，将每个表格第一行第一个单元格设置为跨2竖列，也可以根据图示，自定义表格结构；

③标题单元格的背景颜色可自定义。

图3-24表格示例

第四章

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表单示例

DOCTYPEhtml>

考试报名表

用户名：

文理选择：

文科理科综合

报考科目：

数学

语文

外语

物理

化学

生物

政治

历史

地理

报考级别：

A

B

C

第五章

1．简答题

（1）HTML5中插入视频使用什么标记？

描述其语法格式及含义、该标记的属性及功能。

HTML5提供了视频内容的标准接口，规定使用

替代文字

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

表5-1

属性

值

说明

src

url

要播放视频的URL

autoplay

autoplay

视频就绪后立刻播放

controls

controls

添加播放、暂停和音量等控件

width

像素

设置视频播放器的宽度

height

像素

设置视频播放器的高度

loop

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元素的子元素，标记必须被书写在video元素的开始标记与结束标记之间。

如果使用标记描述媒体文件，则标记必须被书写在标记之后。

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

2．操作题

在网页中插入视频，并对视频做如下设置。

①320像素宽，240像素高；

②显示视频播放器控件；

③循环播放；

④首选播放OGG格式文件，其次分别为MP4格式和WEBM格式（此处需准备3种不同格式的文件）；

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

DOCTYPEhtml>