模块2任务2.2和2.3：使用页面格式化标签组织课程概况和使用图像展示课程特色（练习）-《网页设计与制作》（电子工业出版社）上好课

模块2任务2.2和2.3：使用页面格式化标签组织课程概况和使用图像展示课程特色 一、单项选择题（每题2分，共36分） 1．HTML提供了6个等级的标题标签，其中级别最高、常用于页面主标题的是（ ） A. <h6> B. <h3> C. <p> D. <h1> 【答案】D 【解析】HTML提供<h1>～<h6>六级标题，字体大小依次递减；<h1>级别最高、字号最大，常用于页面主标题，<h6>级别最低、常用于次要说明。 2．标题标签<hn>的align属性用于设置对齐方式，下列不属于其常用取值的是（ ） A. left B. right C. center D. middle 【答案】D 【解析】align属性的常用取值为left、right、center三种；middle是<img/>标签align属性的取值。 3．在HTML中，用于定义段落、并且段落在浏览器中会自动换行的标签是（ ） A. <hr/> B. <br/> C. <p> D. <pre> 【答案】C 【解析】<p>标签用于定义网页中的段落，段落在浏览器中会自动换行；语法为<p align="对齐方式">段落文本</p>。 4．若要在网页的段落与段落之间添加一条水平线，使文档结构更清晰，应使用的标签是（ ） A. <pre> B. <p> C. <br/> D. <hr/> 【答案】D 【解析】<hr/>是水平线标签，会在网页中默认添加一条水平线，常用于分隔段落、使层次分明。 5．关于水平线标签<hr/>，下列说法正确的是（ ） A. <hr/>是单标签，默认在网页中添加一条水平线 B. <hr/>是双标签，必须成对出现 C. <hr/>必须写在<head>标签内部 D. <hr/>只能设置颜色，不能设置宽度 【答案】A 【解析】<hr/>为单标签，语法为<hr 属性="属性值"/>；常用属性有align、size、color、width，分别控制对齐、粗细、颜色与宽度。 6．在代码<hr width="80%" align="center" color="#FF0000" size="1"/>中，width="80%"表示（ ） A. 水平线距离页面顶部80% B. 水平线的宽度为浏览器窗口的80% C. 水平线的粗细为80像素 D. 水平线的颜色透明度为80% 【答案】B 【解析】width属性用于设置水平线宽度，可以取像素值，也可以取浏览器窗口的百分比；size设置粗细，color设置颜色，align设置对齐。 7．关于换行标签<br/>与段落标签<p>的区别，下列说法正确的是（ ） A. <br/>仅实现换行，不会在前后添加空白间距 B. 两者都会在前后添加明显的空白间距 C. <br/>是双标签，<p>是单标签 D. <p>不会产生任何换行效果 【答案】A 【解析】<p>定义段落，段前段后自动换行并留出间距；<br/>只实现强制换行，不添加空白间距，且为单标签。 8．在VS Code中编写HTML代码时直接按回车键换行，浏览器中的显示结果是（ ） A. 正常换行，与<br/>的效果完全相同 B. 页面报错，无法正常打开 C. 并不会真正换行，只会显示为一个空格 D. 显示为一条水平线 【答案】C 【解析】浏览器会把多个回车符和空格默认为单个空格，要实现换行必须使用<br/>标签或<p>标签。 9．要在网页中原样保留一首诗在源码中的换行与空格排版，最合适的标签是（ ） A. <p> B. <pre> C. <br/> D. <hr/> 【答案】B 【解析】<pre>是预格式化标签，可将标记的文本按源码中的换行与空格原样显示，可替代大量的<br/>和&nbsp;，提高排版效率。 10．下列文本格式化标签中，表示“内容非常重要，搜索引擎与读屏软件会识别为重点信息”的是（ ） A. <i> B. <b> C. <u> D. <strong> 【答案】D 【解析】<strong>表示文本非常重要，搜索引擎与读屏软件会将其识别为重点信息；<b>只是单纯的加粗样式，不具有语义强调。 11．制作动态表情包、动态图标等会动的图像，网页中最适合选用的图像格式是（ ） A. JPG B. BMP C. GIF D. PNG 【答案】C 【解析】GIF最突出的特点是支持动画，且为无损压缩、支持透明，常用于Logo、小图标等色彩单一的图像和动态图像。 12．下列关于常见网页图像格式的说法，错误的是（ ） A. WebP由Google开发，有损压缩比JPEG小25%～34% B. JPG是有损压缩格式，专为照片图像设计 C. PNG采用有损压缩，修改后画质会有损失 D. PNG是无损压缩格式，支持透明但不支持动画 【答案】C 【解析】PNG是无损压缩格式，修改后图像质量没有损失；JPG才是有损压缩格式，每修改一次都会丢失部分图像数据。 13．图像标签<img/>中，用于指定图像文件路径和文件名的必备属性是（ ） A. src B. title C. border D. alt 【答案】A 【解析】src属性用于指定图像文件的路径和文件名，是<img/>标签的必备属性；语法为<img src="图像URL"/>。 14．当图像因路径写错或文件名错误而无法显示时，浏览器中显示的替代文字由哪个属性设置（ ） A. alt B. title C. align D. src 【答案】A 【解析】alt属性设置图像不能显示时的替代文本；图像无法显示时会出现“裂图”，并显示alt设置的文字。 15．鼠标悬停在图像上时弹出的提示文字，由<img/>的哪个属性设置（ ） A. hspace B. title C. border D. alt 【答案】B 【解析】title属性用于设置鼠标悬停时显示的内容；alt是图像不能显示时的替代文本，二者作用不同。 16．在相对路径中，“../”表示（ ） A. 返回上一级文件夹 B. 网站根目录 C. 图像所在的子文件夹 D. 当前HTML文件所在的文件夹 【答案】A 【解析】相对路径以HTML网页文件为起点，“../”表示返回上一级文件夹 17．若网页文件与图像文件logo.gif在同一文件夹中，下列相对路径写法正确的是（ ） A. src="../logo.gif" B. src="images/logo.gif" C. src="D:\website\logo.gif" D. src="logo.gif" 【答案】D 【解析】图像与网页在同一文件夹时直接写图像文件名；在子文件夹写“文件夹名/文件名”；在上一级文件夹写“../”；带盘符的写法属于绝对路径。 18．下列路径中，属于绝对路径的是（ ） A. ../images/logo.gif B. D:\website\images\logo.gif C. logo.gif D. images/logo.gif 【答案】B 【解析】绝对路径是文件在硬盘上的完整路径或完整的网络地址；相对路径不含盘符，通常以HTML网页文件为起点。 二、判断题（每题2分，共24分，对打√，错打×） 1．HTML提供6级标题，从<h1>到<h6>字体大小依次递减，其中<h6>级别最高。（ ） 【答案】× 【解析】<h1>级别最高、字号最大，常用于页面主标题；<h6>级别最低、字号最小，常用于次要说明。 2．<hr/>是单标签，在网页中默认添加一条水平线，不需要结束标签。（ ） 【答案】√ 【解析】<hr/>为单标签，语法为<hr 属性="属性值"/>，常用属性有align、size、color、width。 3．<br/>与<p>一样，都会在文本前后添加明显的空白间距。（ ） 【答案】× 【解析】<br/>仅实现换行，不会在前后添加空白间距；只有<p>定义段落时才会在段前段后留出间距。 4．使用<pre>标签可以让文本按照源码中的换行与空格原样显示在浏览器中。（ ） 【答案】√ 【解析】<pre>为预格式化标签，保留源码中的换行与空格，可替代大量的<br/>和&nbsp;。 5．<strong>与<b>在浏览器中的显示效果都是加粗，但<strong>具有“内容重要”的语义。（ ） 【答案】√ 【解析】两者外观相同，但<strong>会被搜索引擎与读屏软件识别为重点信息，<b>只是样式、无语义。 6．<del>标签表示文档中新增、增补进来的内容。（ ） 【答案】× 【解析】<del>表示被删除、废弃的旧内容；表示新增、增补内容的是<ins>。 7．GIF格式支持动画且无损压缩，PNG格式支持透明但不支持动画。（ ） 【答案】√ 【解析】GIF支持动画、无损压缩、支持透明；PNG无损压缩、支持透明但不支持动画，静态图像可用PNG-8取代GIF。 8．JPG格式是无损压缩格式，反复修改与保存都不会丢失图像数据。（ ） 【答案】× 【解析】JPG是有损压缩格式，每修改一次都会造成部分图像数据丢失；它专为照片设计，适合Banner、商品照片等。 9．图像标签<img/>的src属性可以省略，浏览器会自动查找并显示图像。（ ） 【答案】× 【解析】src是<img/>的必备属性，用于指定图像文件的路径和文件名，缺省则图像无法显示。 10．相对路径中不含盘符，通常以HTML网页文件为起点描述图像文件的位置。（ ） 【答案】√ 【解析】相对路径以当前HTML文件为起点，通过层级关系描述目标图像位置；含盘符或完整网址的是绝对路径。 11．从网上下载的图像可以直接用于公开发布的网站，无需确认授权与出处。（ ） 【答案】× 【解析】用于公开发布的网站必须确认图像授权与出处，遵守知识产权相关规定，养成合法使用素材的职业习惯。 12．在<img/>中只设置width而不设置height，图像可能因宽高比例改变而变形。（ ） 【答案】√ 【解析】单独设置width会按原比例等比缩放，若与height同时设置为与原图比例不同的值，图像就会变形。 三、名词解释题（每题4分，共20分） 1．语义化标签 【答案】HTML5 新增的具有明确功能含义的标签，替代传统<div>+id 方式，使网页结构更清晰、代码更具可读性。 2．预格式化标签<pre> 【答案】用于将其标记的文本内容按源码中的换行与空格原样显示在浏览器中的标签；未使用该标签时，浏览器会把多个回车符和空格默认为单个空格，需借助<br/>换行、&nbsp;表示空格，使用<pre>可保留原有排版效果并提高排版效率。 3．文本格式化标签 【答案】HTML中专门用于设置文本显示样式的标签，常用的有<b>或<strong>使文本加粗、<u>或<ins>加下划线、<i>或<em>使文本倾斜、<s>或<del>加删除线；其中<strong>表示内容重要、<ins>表示新增内容、<em>表示语气着重、<del>表示已删除内容，而<b>、<i>只表示样式、不具有语义强调。 4．相对路径 【答案】相对于当前 HTML 文件的资源路径，无盘符，通过层级关系描述目标文件位置 5．图像标签<img/> 【答案】用于在网页中插入图像的单标签，语法为<img src="图像URL"/>；src为必备属性，指定图像文件的路径和文件名；常用属性还有alt：图像不能显示时的替代文本、title：鼠标悬停时显示的内容：、width、height、border、align、hspace等。 四、简答题（每题4分，共20分） 1．简述标题标签<hn>的等级规律、align属性的常用取值，并写出其语法格式。 【答案】①HTML提供<h1>～<h6>共6级标题，n取1～6，字体大小依次递减，<h1>级别最高、常用于页面主标题，<h6>级别最低、常用于次要说明；②align为可选属性，常用取值有left、right、center；③语法格式为<hn align="对齐方式">文本标题</hn>。 2．比较段落标签<p>与换行标签<br/>的区别，说明在VS Code中按回车键换行的结果，并指出<pre>标签的作用。 【答案】 ①<p>定义段落，浏览器中段前段后自动换行并留出空白间距，语法为<p align="对齐方式">段落文本</p>； ②<br/>仅实现强制换行，不会在前后添加空白间距，属于单标签； ③在VS Code中直接按回车键换行，浏览器中并不会真正换行，只会显示为一个空格，必须借助<br/>或<p>实现换行； ④<pre>标签可让文本按源码中的换行与空格原样显示，可替代大量的<br/>和&nbsp;。 3．写出4组常用文本格式化标签及其显示效果，并说明<strong>与<b>、<em>与<i>的语义区别及“语义优先”的意义。 【答案】 ①4组标签：<b>或<strong>加粗，<u>或<ins>加下划线，<i>或<em>倾斜，<s>或<del>加删除线； ②<strong>表示内容非常重要，搜索引擎与读屏软件会识别为重点信息，<em>表示语气上需要着重强调的词，而<b>、<i>只是单纯加粗与倾斜，不代表语义上的强调； ③两者外观相同但语义不同，语义正确的标签有利于搜索引擎收录、读屏软件识别与后期维护，编码时应坚持“语义优先”。 4．列举网页中4种常见图像格式，说明各自的特点与适用场景。 【答案】 ①GIF：支持动画，无损压缩且支持透明，适合Logo、小图标等色彩单一的图像； ②PNG：无损压缩、支持透明但不支持动画，静态图像可用PNG-8取代GIF，半透明图像用真彩色PNG； ③JPG：有损压缩但色彩丰富，专为照片设计，适合Banner、商品照片与较大的插图； ④WebP：Google开发的高效格式，有损压缩比JPEG小25%～34%，无损压缩优于PNG，支持透明与动画；选用原则：小图或网页元素用GIF、PNG-8，半透明图像用PNG32，色彩丰富的图像用JPG或WebP，动态图像用GIF或WebP。 5．写出相对路径的4种书写方式，假设图像名为：logo.gif,可能在images文件夹中，如果images文件夹中有子文夹banner，那图像就在子文夹下，也有可能与网页文件在同一个文件夹，也有可能在上一级文件夹。（各举一例）。 【答案】 相对路径4种写法： 同一文件夹——src="logo.gif"； 子文件夹——src="images/logo.gif"； 多级子文件夹——src="images/banner/logo.gif"； 上一级文件夹——src="../images/logo.gif"。 原创精品资源学科网独家享有版权，侵权必究！ 学科网（北京）股份有限公司 $ 模块2任务2.2和2.3：使用页面格式化标签组织课程概况和使用图像展示课程特色 一、单项选择题（每题2分，共36分） 1．HTML提供了6个等级的标题标签，其中级别最高、常用于页面主标题的是（ ） A. <h6> B. <h3> C. <p> D. <h1> 2．标题标签<hn>的align属性用于设置对齐方式，下列不属于其常用取值的是（ ） A. left B. right C. center D. middle 3．在HTML中，用于定义段落、并且段落在浏览器中会自动换行的标签是（ ） A. <hr/> B. <br/> C. <p> D. <pre> 4．若要在网页的段落与段落之间添加一条水平线，使文档结构更清晰，应使用的标签是（ ） A. <pre> B. <p> C. <br/> D. <hr/> 5．关于水平线标签<hr/>，下列说法正确的是（ ） A. <hr/>是单标签，默认在网页中添加一条水平线 B. <hr/>是双标签，必须成对出现 C. <hr/>必须写在<head>标签内部 D. <hr/>只能设置颜色，不能设置宽度 6．在代码<hr width="80%" align="center" color="#FF0000" size="1"/>中，width="80%"表示（ ） A. 水平线距离页面顶部80% B. 水平线的宽度为浏览器窗口的80% C. 水平线的粗细为80像素 D. 水平线的颜色透明度为80% 7．关于换行标签<br/>与段落标签<p>的区别，下列说法正确的是（ ） A. <br/>仅实现换行，不会在前后添加空白间距 B. 两者都会在前后添加明显的空白间距 C. <br/>是双标签，<p>是单标签 D. <p>不会产生任何换行效果 8．在VS Code中编写HTML代码时直接按回车键换行，浏览器中的显示结果是（ ） A. 正常换行，与<br/>的效果完全相同 B. 页面报错，无法正常打开 C. 并不会真正换行，只会显示为一个空格 D. 显示为一条水平线 9．要在网页中原样保留一首诗在源码中的换行与空格排版，最合适的标签是（ ） A. <p> B. <pre> C. <br/> D. <hr/> 10．下列文本格式化标签中，表示“内容非常重要，搜索引擎与读屏软件会识别为重点信息”的是（ ） A. <i> B. <b> C. <u> D. <strong> 11．制作动态表情包、动态图标等会动的图像，网页中最适合选用的图像格式是（ ） A. JPG B. BMP C. GIF D. PNG 12．下列关于常见网页图像格式的说法，错误的是（ ） A. WebP由Google开发，有损压缩比JPEG小25%～34% B. JPG是有损压缩格式，专为照片图像设计 C. PNG采用有损压缩，修改后画质会有损失 D. PNG是无损压缩格式，支持透明但不支持动画 13．图像标签<img/>中，用于指定图像文件路径和文件名的必备属性是（ ） A. src B. title C. border D. alt 14．当图像因路径写错或文件名错误而无法显示时，浏览器中显示的替代文字由哪个属性设置（ ） A. alt B. title C. align D. src 15．鼠标悬停在图像上时弹出的提示文字，由<img/>的哪个属性设置（ ） A. hspace B. title C. border D. alt 16．在相对路径中，“../”表示（ ） A. 返回上一级文件夹 B. 网站根目录 C. 图像所在的子文件夹 D. 当前HTML文件所在的文件夹 17．若网页文件与图像文件logo.gif在同一文件夹中，下列相对路径写法正确的是（ ） A. src="../logo.gif" B. src="images/logo.gif" C. src="D:\website\logo.gif" D. src="logo.gif" 18．下列路径中，属于绝对路径的是（ ） A. ../images/logo.gif B. D:\website\images\logo.gif C. logo.gif D. images/logo.gif 二、判断题（每题2分，共24分，对打√，错打×） 1．HTML提供6级标题，从<h1>到<h6>字体大小依次递减，其中<h6>级别最高。（ ） 2．<hr/>是单标签，在网页中默认添加一条水平线，不需要结束标签。（ ） 3．<br/>与<p>一样，都会在文本前后添加明显的空白间距。（ ） 4．使用<pre>标签可以让文本按照源码中的换行与空格原样显示在浏览器中。（ ） 5．<strong>与<b>在浏览器中的显示效果都是加粗，但<strong>具有“内容重要”的语义。（ ） 6．<del>标签表示文档中新增、增补进来的内容。（ ） 7．GIF格式支持动画且无损压缩，PNG格式支持透明但不支持动画。（ ） 8．JPG格式是无损压缩格式，反复修改与保存都不会丢失图像数据。（ ） 9．图像标签<img/>的src属性可以省略，浏览器会自动查找并显示图像。（ ） 10．相对路径中不含盘符，通常以HTML网页文件为起点描述图像文件的位置。（ ） 11．从网上下载的图像可以直接用于公开发布的网站，无需确认授权与出处。（ ） 12．在<img/>中只设置width而不设置height，图像可能因宽高比例改变而变形。（ ） 三、名词解释题（每题4分，共20分） 1．语义化标签 2．预格式化标签<pre> 3．文本格式化标签 4．相对路径 5．图像标签<img/> 四、简答题（每题4分，共20分） 1．简述标题标签<hn>的等级规律、align属性的常用取值，并写出其语法格式。 2．比较段落标签<p>与换行标签<br/>的区别，说明在VS Code中按回车键换行的结果，并指出<pre>标签的作用。 3．写出4组常用文本格式化标签及其显示效果，并说明<strong>与<b>、<em>与<i>的语义区别及“语义优先”的意义。 4．列举网页中4种常见图像格式，说明各自的特点与适用场景。 5．写出相对路径的4种书写方式，假设图像名为：logo.gif,可能在images文件夹中，如果images文件夹中有子文夹banner，那图像就在子文夹下，也有可能与网页文件在同一个文件夹，也有可能在上一级文件夹。（各举一例）。 原创精品资源学科网独家享有版权，侵权必究！ 学科网（北京）股份有限公司 $