模块2任务2.5和2.6：使用超链接完成页面跳转和使用语义化标签搭建课程页面框架（练习）-《网页设计与制作》（电子工业出版社）上好课

任务2.5、2.6：使用超链接完成页面跳转和使用语义化标签搭建课程页面框架 一、单项选择题（每题2分，共38分） 1．超链接标签<a>中的元素名“a”是下列哪个英文单词的首字母简写（ ） A. article B. anchor C. aside D. address 2．在默认状态下，未被访问的链接文本显示为（ ） A. 带下画线的紫色字体 B. 带下画线的绿色字体 C. 带下画线的蓝色字体 D. 不带下画线的蓝色字体 3．在<a>标签中，用于指定链接目标URL地址的属性是（ ） A. href B. target C. src D. alt 4．要使单击链接后在新窗口中打开目标页面，target属性应取下列哪一个值（ ） A. target="_parent" B. target="_blank" C. target="_self" D. target="_top" 5．target属性值中，表示“顶层框架”的是（ ） A. _blank B. _self C. _parent D. _top 6．target属性的默认值是（ ） A. _top B. _parent C. _self D. _blank 7．按路径划分，下列不属于超链接分类的是（ ） A. 外部链接 B. 内部链接 C. 锚点链接 D. 图像链接 8．锚点链接中，href属性值最前面的“#”表示（ ） A. 当前页面内的某个位置 B. 外部网站的网址 C. 电子邮箱地址 D. 图片文件的路径 9．关于锚点链接中id属性的说法，正确的是（ ） A. 同一页面中id的值可以重复 B. id的值只能写在<a>标签上 C. 同一页面中id的值必须唯一 D. 不写id属性，锚点链接也能精确定位 10．目标页面底部“返回首页”链接，可以使用的代码是（ ） A. <a href="index.html" target="_self">返回首页</a> B. <a href="#home" target="_blank">返回首页</a> C. <a href="index.html" target="_blank">返回首页</a> D. <a href="#" name="index">返回首页</a> 11．制作横向导航栏时，超链接<a>必须完整嵌套在哪个标签内部（ ） A. <ul> B. <ol> C. <li> D. <dl> 12．关于href中相对路径的书写，下列说法错误的是（ ） A. 目标页面必须与导航页放在同一个文件夹里 B. 文件名要与href中写的一字不差 C. 文件名的大小写写错不影响跳转 D. 目标页面漏建会导致单击后提示找不到页面 13．设置空链接时，href属性应写为（ ） A. href="#" B. href=" " C. href="null" D. href="home" 14．下列标签中，属于块级元素、浏览器会在其前后自动放置换行符的是（ ） A. <span> B. <div> C. <a> D. <em> 15．关于<span>标签，下列说法正确的是（ ） A. 是块级元素，浏览器会在其前后自动换行 B. 用于定义网页文档的页脚 C. 通常作为文本的容器，只有与CSS同时使用时才可以为指定文本设置样式 D. 专门用于定义网页的导航栏 16．用于定义网页文档或节的页头、通常为网站名称的语义化标签是（ ） A. <footer> B. <nav> C. <main> D. <header> 17．用于定义网页导航栏、内部放置一组超链接的语义化标签是（ ） A. <nav> B. <header> C. <aside> D. <section> 18．用于包裹页面核心主题内容、与导航栏和页脚等辅助内容区分的标签是（ ） A. <article> B. <main> C. <section> D. <aside> 19．用于定义正文两侧的相关内容、常用于文章侧边栏的标签是（ ） A. <footer> B. <section> C. <nav> D. <aside> 二、判断题（每题1分，共10分，对打√，错打×） 1．超链接标签<a>的元素名a是英文单词anchor的首字母简写，因此超链接又称锚链接。（ ） 2．在默认状态下，被单击访问后的链接文本会变成带下画线的紫色字体。（ ） 3．target="_blank"表示在原窗口中打开目标页面，会覆盖当前页。（ ） 4．锚点链接只能跳转到其他网站的页面，不能在同一页面内定位。（ ） 5．同一页面中，多个元素的id属性值可以重复。（ ） 6．<div>是块级元素，浏览器会在其前后自动放置一个换行符。（ ） 7．<span>是内联元素，浏览器不会在其前后自动换行，默认在同一行中显示。（ ） 8．<section>标签用于定义独立的专题区域，里面包含一篇或多篇文章。（ ） 9．使用语义化标签会降低代码可读性，也不利于搜索引擎优化。（ ） 10．我们要想把页面繁杂的内容按照区域划分，排列整齐，我们可以用<div>和<span>标签来定义。（ ） 三、名词解释题（每题5分，共25分） 1．<a>标签 2．锚点链接 3．块级元素 4．<div>标签 5．<span>标签 四、简答题（每题5分，共25分） 1．写出超链接标签<a>的基本语法格式，并说明href与target两个属性的作用。 2．写出target属性四个取值的含义。 3．简述实现锚点链接的两步做法并举例。 4．单击导航项后浏览器提示“找不到页面”，请分析可能的原因并说明排查方法。 5．简述HTML5新增的七个语义化标签各自对应的功能分区，并说明语义化标签的三条优势。 原创精品资源学科网独家享有版权，侵权必究！ 学科网（北京）股份有限公司 $ 任务2.5、2.6：使用超链接完成页面跳转和使用语义化标签搭建课程页面框架 一、单项选择题（每题2分，共38分） 1．超链接标签<a>中的元素名“a”是下列哪个英文单词的首字母简写（ ） A. article B. anchor C. aside D. address 【答案】B 【解析】元素名a是英文单词anchor的首字母简写，因此超链接又称锚链接。 2．在默认状态下，未被访问的链接文本显示为（ ） A. 带下画线的紫色字体 B. 带下画线的绿色字体 C. 带下画线的蓝色字体 D. 不带下画线的蓝色字体 【答案】C 【解析】默认状态下，未被访问的链接文本显示为带下画线的蓝色字体；被单击访问后变为带下画线的紫色字体；鼠标指针悬停时变成手形。 3．在<a>标签中，用于指定链接目标URL地址的属性是（ ） A. href B. target C. src D. alt 【答案】A 【解析】href属性用于指定链接目标的URL地址；target属性用于指定链接目标的页面打开方式。 4．要使单击链接后在新窗口中打开目标页面，target属性应取下列哪一个值（ ） A. target="_parent" B. target="_blank" C. target="_self" D. target="_top" 【答案】B 【解析】_blank表示新窗口，单击后新开一个窗口打开目标页面，保留当前页，适合站外链接；_self为默认值，在原窗口覆盖当前页。 5．target属性值中，表示“顶层框架”的是（ ） A. _blank B. _self C. _parent D. _top 【答案】D 【解析】教材表2-8：_self为自身：默认值，_blank为新窗口，_top为顶层框架，_parent为父框架。 6．target属性的默认值是（ ） A. _top B. _parent C. _self D. _blank 【答案】C 【解析】_self是target属性的默认值，表示在原窗口打开目标页面。 7．按路径划分，下列不属于超链接分类的是（ ） A. 外部链接 B. 内部链接 C. 锚点链接 D. 图像链接 【答案】D 【解析】按路径分为内部链接、锚点链接和外部链接；文本超链接与图像超链接是按形态划分的，不属于路径分类。 8．锚点链接中，href属性值最前面的“#”表示（ ） A. 当前页面内的某个位置 B. 外部网站的网址 C. 电子邮箱地址 D. 图片文件的路径 【答案】A 【解析】href值最前面的“#”表示“当前页面内的某个位置”，单击后页面直接滚动到该标记处。 9．关于锚点链接中id属性的说法，正确的是（ ） A. 同一页面中id的值可以重复 B. id的值只能写在<a>标签上 C. 同一页面中id的值必须唯一 D. 不写id属性，锚点链接也能精确定位 【答案】C 【解析】id是目标位置的“楼层标记”，同一页面中id的值必须唯一，否则浏览器无法确定跳转目标，锚点链接会失效。 10．目标页面底部“返回首页”链接，可以使用的代码是（ ） A. <a href="index.html" target="_self">返回首页</a> B. <a href="#home" target="_blank">返回首页</a> C. <a href="index.html" target="_blank">返回首页</a> D. <a href="#" name="index">返回首页</a> 【答案】A 【解析】在课本教材示例页尾写<p align="center"><a href="index.html" target="_self">返回首页</a></p>，index.html是导航首页文件名，站内返回用_self在原窗口打开。 11．制作横向导航栏时，超链接<a>必须完整嵌套在哪个标签内部（ ） A. <ul> B. <ol> C. <li> D. <dl> 【答案】C 【解析】用<ul>承载导航项，每个<li>对应一个导航项，<a>必须完整嵌套在<li>内部并成对闭合，写成<li><a href="…">…</a></li>。 12．关于href中相对路径的书写，下列说法错误的是（ ） A. 目标页面必须与导航页放在同一个文件夹里 B. 文件名要与href中写的一字不差 C. 文件名的大小写写错不影响跳转 D. 目标页面漏建会导致单击后提示找不到页面 【答案】C 【解析】文件名的大小写、后缀都要与实际文件完全一致，写错即提示“找不到页面”；同时要与导航页放在同一文件夹并逐一新建，不能漏建。 13．设置空链接时，href属性应写为（ ） A. href="#" B. href=" " C. href="null" D. href="home" 【答案】A 【解析】教材44页的中“试一试”中的第4项：要求添加“更多功能”选项，可以使用href="#"作为占位链接，即空链接。 14．下列标签中，属于块级元素、浏览器会在其前后自动放置换行符的是（ ） A. <span> B. <div> C. <a> D. <em> 【答案】B 【解析】<div>是块级元素，浏览器会在<div>和</div>所标记的区域前后自动放置一个换行符；<span>与<a>属于内联元素。 15．关于<span>标签，下列说法正确的是（ ） A. 是块级元素，浏览器会在其前后自动换行 B. 用于定义网页文档的页脚 C. 通常作为文本的容器，只有与CSS同时使用时才可以为指定文本设置样式 D. 专门用于定义网页的导航栏 【答案】C 【解析】<span>通常作为文本的容器，没有特定的含义和样式，只有与CSS同时使用时才可以为指定文本设置样式；它是内联元素，默认在同一行显示。 16．用于定义网页文档或节的页头、通常为网站名称的语义化标签是（ ） A. <footer> B. <nav> C. <main> D. <header> 【答案】D 【解析】页头标签<header>用于定义网页文档或节的页头，常放网站名称与标语，是页面最上面的区域。 17．用于定义网页导航栏、内部放置一组超链接的语义化标签是（ ） A. <nav> B. <header> C. <aside> D. <section> 【答案】A 【解析】导航栏标签<nav>用于定义网页文档的导航栏，可以通过超链接跳转到其他页面，通常包含<ul><li><a>组成的菜单。 18．用于包裹页面核心主题内容、与导航栏和页脚等辅助内容区分的标签是（ ） A. <article> B. <main> C. <section> D. <aside> 【答案】B 【解析】主题标签<main>用于包裹页面核心的主题内容，与导航栏、侧边栏、页脚等辅助内容明确区分。 19．用于定义正文两侧的相关内容、常用于文章侧边栏的标签是（ ） A. <footer> B. <section> C. <nav> D. <aside> 【答案】D 【解析】侧边栏标签<aside>用于定义正文两侧的相关内容，常用于文章侧边栏，如“相关课程推荐”；<footer>只放版权、联系方式等页脚信息。 二、判断题（每题1分，共10分，对打√，错打×） 1．超链接标签<a>的元素名a是英文单词anchor的首字母简写，因此超链接又称锚链接。（ ） 【答案】√ 【解析】元素名a是英文单词anchor：锚的首字母简写，所以超链接又称锚链接。 2．在默认状态下，被单击访问后的链接文本会变成带下画线的紫色字体。（ ） 【答案】√ 【解析】默认状态：未访问为带下画线的蓝色字体，鼠标指针悬停变成手形，已访问为带下画线的紫色字体。 3．target="_blank"表示在原窗口中打开目标页面，会覆盖当前页。（ ） 【答案】× 【解析】_blank是在新窗口中打开，保留当前页；在原窗口覆盖当前页的是默认值_self。 4．锚点链接只能跳转到其他网站的页面，不能在同一页面内定位。（ ） 【答案】× 【解析】锚点链接恰恰用于解决同一页面内的快速定位，用href="#区域名"配合目标位置的id属性实现，跨页面跳转才用href="文件名.html"。 5．同一页面中，多个元素的id属性值可以重复。（ ） 【答案】× 【解析】同一页面中id的值必须唯一，重复后浏览器无法确定跳转目标，锚点链接会失效。 6．<div>是块级元素，浏览器会在其前后自动放置一个换行符。（ ） 【答案】√ 【解析】<div>可将页面分隔成不同的独立部分，是块级元素，浏览器会在<div>和</div>所标记的区域前后自动放置换行符。 7．<span>是内联元素，浏览器不会在其前后自动换行，默认在同一行中显示。（ ） 【答案】√ 【解析】内联元素与块级元素相反，浏览器不会在内联元素前后自动放置换行符，因此<span>默认在同一行显示。 8．<section>标签用于定义独立的专题区域，里面包含一篇或多篇文章。（ ） 【答案】√ 【解析】节标签<section>定义独立的专题区域，里面包含一篇或多篇文章；<article>定义独立的文章区域，里面包含一个或多个<p>。 9．使用语义化标签会降低代码可读性，也不利于搜索引擎优化。（ ） 【答案】× 【解析】恰恰相反，语义化标签的三条优势是：代码可读性强、有利于搜索引擎优化、提升无障碍访问能力。 10．我们要想把页面繁杂的内容按照区域划分，排列整齐，我们可以用<div>和<span>标签来定义。（ ） 【答案】√ 三、名词解释题（每题5分，共25分） 1．<a>标签 【答案】超链接是指用<a>标签在网页中标记文本或图像而形成的链接，访问者单击后跳转到另一个指定的页面，从而实现浏览空间的跨越。元素名a是英文单词anchor（锚）的首字母简写，故又称锚链接。 2．锚点链接 【答案】超链接的一种特殊形式，通过 “#”+ 目标区域标识，实现页面内指定位置的快速跳转，适用于长页面导航。 3．块级元素 【答案】默认独占一行的 HTML 元素:如<div>、<p>、<hn>，可设置宽高，浏览器会自动在其前后添加换行符。 4．<div>标签 【答案】<div>是一种容器标签，可以将页面分隔成不同的独立部分，通常用于定义文档中的区域或节。它是一个块级元素，浏览器会在<div>和</div>所标记的区域前后自动放置一个换行符；每个标签都可以有独立的id属性值。 5．<span>标签 【答案】<span>是一种容器标签，通常作为文本的容器，它没有特定的含义和样式。它是一个内联元素，与块级元素相反，浏览器不会在其前后自动放置换行符，因此内联元素会默认在同一行中显示。 四、简答题（每题5分，共25分） 1．写出超链接标签<a>的基本语法格式，并说明href与target两个属性的作用。 【答案】基本语法格式：<a href=" " target="目标页面打开方式">文本或图像</a>。①href属性：用于指定链接目标的URL地址，跨页面跳转写href="文件名.html"，同一页面内定位写href="#区域名"。②target属性：用于指定链接目标的页面打开方式。 2．写出target属性四个取值的含义。 【答案】 ①_self：自身，为默认值，在当前窗口打开目标页面并覆盖当前页，适合站内跳转； ②_blank：新窗口，单击后新开一个窗口或标签页打开目标页面，保留当前页，适合站外链接； ③_top：顶层框架； ④_parent：父框架。 3．简述实现锚点链接的两步做法并举例。 【答案】。两步做法： ①先在目标位置用id属性做一个“楼层标记”，例如<h3 id="one">李四光</h3>； ②再在导航处用href="#标记名"设置一个“楼层按钮”，例如<li><a href="#one">李四光</a></li>。 单击按钮，页面即直达对应位置。同一页面中id的值必须唯一，不能重复。 4．单击导航项后浏览器提示“找不到页面”，请分析可能的原因并说明排查方法。 【答案】原因有三类： ①href中写的目标文件名与实际文件名不一致，包括大小写、后缀写错； ②要求的目标页面漏建； ③目标页面与导航页不在同一文件夹，或href写成了绝对路径。也就是路径写错 5．简述HTML5新增的七个语义化标签各自对应的功能分区，并说明语义化标签的三条优势。 【答案】功能分区： ①<header>定义网页文档或节的页头，通常为网站名称与标语； ②<nav>定义导航栏，可通过超链接跳转； ③<main>包裹页面核心主题内容； ④<article>定义独立的文章区域，里面可包含一个或多个段落标签<p>； ⑤<section>定义独立的专题区域，里面包含一篇或多篇文章； ⑥<aside>定义正文两侧的相关内容，常用于文章侧边栏； ⑦<footer>定义整个文档或节的页脚，包含作者、版权、联系方式等信息。 三条优势： ①代码可读性强，开发者通过标签名即可理解区域功能； ②有利于搜索引擎优化（SEO），搜索引擎能更准确地识别核心内容； ③提升无障碍访问能力，屏幕阅读器可更好地解析结构，辅助残障用户浏览。 原创精品资源学科网独家享有版权，侵权必究！ 学科网（北京）股份有限公司 $