第5单元 第13练 制作简单网页《计算机网络基础》(高教版第二版) 一课一练

编写说明：考虑到中职学生普遍基础知识相对薄弱的情况，我们依据支架式教学理念，精心编制了《计算机网络基础》(高教版第二版)一课一练。专辑里的每一份练习，都与课堂所授知识点紧密相关，题目围绕课堂所学知识点呈现。目的在于激发学生的学习兴趣，培养他们的学习自觉性，帮助学生扎实掌握课程的基本概念与基本方法，为他们后续的进一步提升奠定坚实基础。 本卷是《计算机网络基础》(高教版第二版)一课一练的第5单元的第13练，内容涵盖第5单元网页制作 任务2 制作简单网页。 《计算机网络基础》(高教版第二版)第13练 第5单元 网页制作 任务2 制作简单网页 1、 单项选择题（本题共5小题） 1.HTML5文档中，文档类型声明<!DOCTYPE html>的位置要求是（ ） A.位于HTML文档的最前面 B.位于<head>标签内部 C.位于<body>标签内部 D.位于</html>标签之后 2.某学生在HBuilder中新建了一个名为"美食天地"的项目。项目中包含index.html文件，以及img文件夹（存放图片）和files文件夹（存放子页面）。在index.html中，需要引用img文件夹中的图片food.jpg，同时创建一个超链接指向files文件夹中的intro.html。以下写法正确的是（ ） A.<img src="img/food.jpg">和<a href="files/intro.html">介绍</a> B.<img src="./food.jpg">和<a href="./intro.html">介绍</a> C.<img src="../img/food.jpg">和<a href="./files/intro.html">介绍</a> D.<img src="food.jpg">和<a href="intro.html">介绍</a> 3.某学生在制作"葱包烩的故事"分页面时，在页面底部设置了"回到顶部"链接，希望点击后能跳转到页面顶部的<h1>标题位置。以下关于锚记链接的实现，描述正确的是（ ） A.只需在<a>标签的href属性中填写href="回到顶部"即可 B.需在<h1>标签中添加id属性，如<h1 id="top">葱包烩的故事</h1>，然后在<a>标签中设置href="#top"进行跳转 C.需在<h1>标签中添加name属性，如<h1 name="top">葱包烩的故事</h1>，然后在<a>标签中设置href="#top"进行跳转 D.锚记链接只能跳转到其他页面，不能跳转到当前页面的指定位置 4.某学生在制作"舌尖上的杭州"首页时，使用<p>标签定义了一段介绍文字，并在文字中使用了&nbsp;来实现段落首行缩进。但在浏览器预览时，发现缩进效果与预期不符。以下关于该现象的分析，最合理的是（ ） A.&nbsp;是HTML中的换行符，不能用于缩进 B.在默认情况下，4个&nbsp;不换行空格在浏览器中可能只占1个汉字大小，因此缩进效果不明显 C.&nbsp;符号只能用于版权声明，不能用于文字缩进 D.使用&nbsp;缩进后需要同时设置font-size属性才能生效 5.以下HTML代码片段中，有两处使用了自闭合标签。以下关于这两处标签的描述，正确的是（ ） A.<br>和<hr/>是自闭合标签，<img>是成对标签 B.<br>、<hr/>和<img>都是自闭合标签，不需要结束标签 C.自闭合标签必须使用<br />的写法，不能写成<br> D.自闭合标签可以包含文字内容，如<br>换行</br><p>葱包烩是杭州特色小吃</p> <img src="cbh.jpg" alt="葱包烩"> <br> <hr/> <h3>准备食材</h3> 2、 判断题（本题共5小题） 1.<html>…</html>标签用来标识HTML文档的根元素，所有网页内容都必须放置在这两个标签之间。（ ） 2.<!DOCTYPE html>声明位于HTML文档的最前面，用于告诉浏览器当前文档所使用的HTML规范。该声明不区分大小写。（ ） 3.锚记链接的创建需要两步：先创建锚记，再设置链接。（ ） 4.超链接标签<a>的target属性中，_self表示在不同的新窗口或新标签页中打开链接；_blank表示在当前窗口或标签页中打开链接。（ ） 5. 在"舌尖上的杭州"系列页面中，首页index.html的版权信息使用了<p>&copy;网页设计与制作组。保留所有权利。</p>来输出带有版权的段落，其中&copy;会在浏览器中显示为"©"符号。（ ） 原创精品资源学科网独家享有版权，侵权必究！ 学科网（北京）股份有限公司 $ 编写说明：考虑到中职学生普遍基础知识相对薄弱的情况，我们依据支架式教学理念，精心编制了《计算机网络基础》(高教版第二版)一课一练。专辑里的每一份练习，都与课堂所授知识点紧密相关，题目围绕课堂所学知识点呈现。目的在于激发学生的学习兴趣，培养他们的学习自觉性，帮助学生扎实掌握课程的基本概念与基本方法，为他们后续的进一步提升奠定坚实基础。 本卷是《计算机网络基础》(高教版第二版)一课一练的第5单元的第13练，内容涵盖第5单元网页制作 任务2 制作简单网页。 《计算机网络基础》(高教版第二版)第13练 第5单元 网页制作 任务2 制作简单网页 1、 单项选择题（本题共5小题） 1.HTML5文档中，文档类型声明<!DOCTYPE html>的位置要求是（ ） A.位于HTML文档的最前面 B.位于<head>标签内部 C.位于<body>标签内部 D.位于</html>标签之后 【答案】A 【解析】万文档类型声明（DOCTYPE）必须以感叹号开始，位于HTML文档的最前面，是HTML文档的必需部分，用于告诉浏览器当前文档所使用的HTML规范，且不区分大小写。HTML5的声明很简单，就是<!DOCTYPE html>，所以A选项正确。 2.某学生在HBuilder中新建了一个名为"美食天地"的项目。项目中包含index.html文件，以及img文件夹（存放图片）和files文件夹（存放子页面）。在index.html中，需要引用img文件夹中的图片food.jpg，同时创建一个超链接指向files文件夹中的intro.html。以下写法正确的是（ ） A.<img src="img/food.jpg">和<a href="files/intro.html">介绍</a> B.<img src="./food.jpg">和<a href="./intro.html">介绍</a> C.<img src="../img/food.jpg">和<a href="./files/intro.html">介绍</a> D.<img src="food.jpg">和<a href="intro.html">介绍</a> 【答案】A 【解析】当index.html位于项目根目录时，引用同级的img文件夹中的图片应使用img/food.jpg（相对路径），指向files文件夹中的页面应使用files/intro.html。B项错误，./food.jpg表示当前目录下的food.jpg，而图片在img子文件夹中；C项错误，../img/food.jpg中的../表示上一级目录，但index.html在根目录；D项错误，未指定文件夹路径，无法找到目标文件，因此选A。 3.某学生在制作"葱包烩的故事"分页面时，在页面底部设置了"回到顶部"链接，希望点击后能跳转到页面顶部的<h1>标题位置。以下关于锚记链接的实现，描述正确的是（ ） A.只需在<a>标签的href属性中填写href="回到顶部"即可 B.需在<h1>标签中添加id属性，如<h1 id="top">葱包烩的故事</h1>，然后在<a>标签中设置href="#top"进行跳转 C.需在<h1>标签中添加name属性，如<h1 name="top">葱包烩的故事</h1>，然后在<a>标签中设置href="#top"进行跳转 D.锚记链接只能跳转到其他页面，不能跳转到当前页面的指定位置 【答案】B 【解析】锚记链接的创建方法：①在需要跳转到的位置，给相应的HTML元素添加id属性，如<h1 id="top">；②设置链接的格式为<a href="#top">回到顶部</a>。A项错误，直接在href中填写中文文本无效；C项错误，name属性已不推荐使用，现代HTML使用id属性；D项错误，锚记链接既可用于同一页面内跳转，也可跳转到其他页面的指定位置。 4.某学生在制作"舌尖上的杭州"首页时，使用<p>标签定义了一段介绍文字，并在文字中使用了&nbsp;来实现段落首行缩进。但在浏览器预览时，发现缩进效果与预期不符。以下关于该现象的分析，最合理的是（ ） A.&nbsp;是HTML中的换行符，不能用于缩进 B.在默认情况下，4个&nbsp;不换行空格在浏览器中可能只占1个汉字大小，因此缩进效果不明显 C.&nbsp;符号只能用于版权声明，不能用于文字缩进 D.使用&nbsp;缩进后需要同时设置font-size属性才能生效 【答案】B 【解析】"在段落开头处添加' '特殊符号（注意：若不定义文字样式，在默认情况下，4个不换行空格在浏览器中可能只占1个汉字大小）来达到缩进的目的"。A项错误，&nbsp;是不换行空格而非换行符；C项错误，&nbsp;可以用于多种场景，如缩进和防止文字换行；D项错误，&nbsp;缩进不需要同时设置font-size才能生效。 5.以下HTML代码片段中，有两处使用了自闭合标签。以下关于这两处标签的描述，正确的是（ ） A.<br>和<hr/>是自闭合标签，<img>是成对标签 B.<br>、<hr/>和<img>都是自闭合标签，不需要结束标签 C.自闭合标签必须使用<br />的写法，不能写成<br> D.自闭合标签可以包含文字内容，如<br>换行</br><p>葱包烩是杭州特色小吃</p> <img src="cbh.jpg" alt="葱包烩"> <br> <hr/> <h3>准备食材</h3> 【答案】B 【解析】<img>、<br>、<hr>都属于自闭合标签（Void Tags），不需要结束标签。A项错误，<img>也是自闭合标签；C项错误，自闭合标签可以写成<br>或<br />两种形式，在HTML5中均可接受；D项错误，自闭合标签不能包含元素内容，它们的作用是插入或执行特定功能。 2、 判断题（本题共5小题） 1.<html>…</html>标签用来标识HTML文档的根元素，所有网页内容都必须放置在这两个标签之间。（ ） 【答案】正确 【解析】<html>元素由<html>标签开始、</html>标签结束，包裹了整个HTML文档的内容。这两个标签必须成对使用，所有网页内容（包括文本和其他HTML标签）都必须放置在它们之间。<html>元素通常包含<head>和<body>两个主要部分,表述正确。 2.<!DOCTYPE html>声明位于HTML文档的最前面，用于告诉浏览器当前文档所使用的HTML规范。该声明不区分大小写。（ ） 【答案】正确 【解析】文档类型声明（DOCTYPE）位于HTML文档的最前面，用于告诉浏览器当前文档所使用的HTML规范，同时该声明不区分大小写，描述正确。 3.锚记链接的创建需要两步：先创建锚记，再设置链接。（ ） 【答案】正确 【解析】锚记链接创建方法为：①创建锚记，如<h1 id="top">或<div id="锚记名称"></div>；②设置链接，如<a href="#锚记名称">回到顶部</a>。教材任务实施中，通过<h1 id="top">创建锚记、<a href="#top">回到顶部</a>实现页内跳转，表述正确。 4.超链接标签<a>的target属性中，_self表示在不同的新窗口或新标签页中打开链接；_blank表示在当前窗口或标签页中打开链接。（ ） 【答案】错误 【解析】两者说反了。target="_blank"表示在不同的新窗口或新标签页中打开链接；target="_self"表示在当前窗口或标签页中打开链接（默认值）。表述错误。 5. 在"舌尖上的杭州"系列页面中，首页index.html的版权信息使用了<p>&copy;网页设计与制作组。保留所有权利。</p>来输出带有版权的段落，其中&copy;会在浏览器中显示为"©"符号。（ ） 【答案】正确 【解析】版权符号实体&copy;的使用，该实体在浏览器中会被渲染为"©"符号，用于版权声明。表述正确。 原创精品资源学科网独家享有版权，侵权必究！ 学科网（北京）股份有限公司 $