《网页设计与制作》建立网页超链接（1）（举一反三考点练）-讲义

举一反三考点练 《网页设计与制作》建立网页超链接-讲义 1. 掌握超链接类型与适用场景 2. 理解链接路径表达与选取策略 3. 掌握创建、管理与修复超链接全流程 知识点一 超链接类型与适用场景 1.站内导航 （1）内部链接 ① 目标在同一站点，用相对路径即可跳转。 ② 适用于导航菜单、面包屑、上下文关联。 ③ 移动文件后易被“断链”，需开启 DW 自动更新。 （2）锚点链接 ① 先对目标位置“命名锚记”，再用 #锚点名 跳转。 ② 可跨页锚定，实现 FAQ、长文档快速定位。 ③ 锚点名勿含空格与中文，防止兼容错误。 2.站外与通信 （1）外部链接 ① 给出完整 http(s):// 域名，打开其他网站。 ② 建议设 target="_blank" 保留原页面。 ③ 过多外链分散权重，SEO 可加 nofollow。 （2）E-mail 链接 ① href="mailto:邮箱?subject=主题" 一键启邮件客户端。 ② 可追加 &cc= &body= 预填抄送与正文。 ③ 需防范爬虫抓取，可用 JS 或实体编码混淆。 3.功能型链接 （1）下载链接 ① 指向 .zip/.exe/.pdf 等资源，浏览器自动弹出下载框。 ② 结合“文件大小+版本”提示，提升用户体验。 ③ 服务器需配置 MIME 类型，防止下载变打开。 （2）空链接与脚本链接 ① href="#" 或 javascript:; 用于绑定行为，如展开菜单。 ② javascript: 后可接函数，实现弹窗、计算等交互。 ③ 空链接勿滥用，防止页面跳动或 SEO 无效锚。 （多项选择题）以下关于超链接类型与适用场景的说法，正确的是（ ） A. 内部链接适用于站内页面跳转，使用相对路径 B. 外部链接需给出完整http(s)://域名，建议设target="\_blank" C. 锚点链接通过命名锚记实现页面内快速定位 D. E-mail链接通过mailto:协议一键启动邮件客户端 【答案】ABCD 【解析】内部链接目标在同一站点，用相对路径即可跳转，适用于导航菜单等；外部链接需给出完整http(s)://域名，建议设target="\_blank"保留原页面；锚点链接先对目标位置"命名锚记"，再用#锚点名跳转，可跨页锚定，实现FAQ、长文档快速定位；E-mail链接通过"mailto:邮箱?subject=主题"一键启动邮件客户端。 【要点】考查超链接类型与适用场景。 1.（单项选择题）在创建超链接时，若要链接到同一站点内其他页面，应使用（ ） A. 绝对路径 B. 文档相对路径 C. 站点根目录相对路径 D. 外部链接 【答案】B 【解析】对于同一站点内其他页面的链接，通常使用文档相对路径，这样在站点内移动文件时，链接依然有效。 【要点】考查链接路径的选择。 2.（单项选择题）以下哪种超链接类型适用于启动邮件客户端并发送邮件（ ） A. 内部链接 B. 外部链接 C. E-mail链接 D. 锚点链接 【答案】C 【解析】E-mail链接通过"mailto:邮箱?subject=主题"等格式，能够一键启动邮件客户端，方便用户发送邮件。 【要点】考查E-mail链接的功能。 3.（多项选择题）以下关于超链接的描述，正确的是（ ） A. 内部链接移动文件后易被"断链"，需开启DW自动更新 B. 外部链接过多会分散网站权重，SEO可加nofollow C. 锚点链接的锚点名可包含空格与中文 D. 空链接主要用于绑定行为，如展开菜单 【答案】ABD 【解析】内部链接移动文件后易被"断链"，需开启DW自动更新；外部链接过多会分散网站权重，SEO可加nofollow；锚点链接的锚点名勿含空格与中文，防止兼容错误；空链接主要用于绑定行为，如展开菜单。 【要点】考查超链接的细节与注意事项。 1.（填空题）在创建超链接时，若要实现页面内快速定位，可使用______链接。 【答案】锚点 【解析】锚点链接通过命名锚记实现页面内快速定位，适用于FAQ、长文档等场景。 【要点】考查锚点链接的应用场景。 2.（填空题）E-mail链接的格式为"mailto:邮箱?subject=主题"，其中"subject="后可追加______。 【答案】邮件主题 【解析】E-mail链接的格式为"mailto:邮箱?subject=主题"，其中"subject="后可追加邮件主题，方便用户发送邮件时预填主题。 【要点】考查E-mail链接的格式。 3.（判断题）在创建超链接时，外部链接需给出完整http(s)://域名（ ） 【答案】√ 【解析】外部链接的目标端点是本站点之外的站点或文档，需给出完整的http(s)://域名，才能正确跳转到其他网站。 【要点】考查外部链接的格式要求。 · 内部链：站内跳转，用相对路径，移动文件需自动更新。 · 外部链：完整http，设_blank防跳出；可写mailto一键发信。 · 锚点链：命名后#跳转，适合长页目录；下载链指向压缩包exe。 知识点二 链接路径表达与选取策略 1.绝对路径 （1）概念 ① 含协议与域名的完整 URL，如 http://www.adobe.com/cn/support/dreamweaver/contents.html。 ② 可引用外部图片、CDN 资源，不受本地文件移动影响。 （2）优缺点 ① 本地预览需联网；换域名后全部失效。 ② 适合统计代码、第三方库引用。 （3）使用场景 ① 跨站资源、邮件模板、RSS 输出必须采用绝对路径。 ② 在 Dreamweaver 中插入远程图像时可直接粘贴 URL。 2.文档相对路径 （1）写法规则 ① 同级直接写文件名：href="hours.html"。 ② 下级文件夹：href="support/contents.html"。 ③ 上级用 ../：href="../products/catalog.html"。 （2）优势 ① 整站迁移域名不变，链接依然有效。 ② 批量移动文件夹时，内部链接关系保持不变。 （3）维护技巧 ① 在“文件”面板内拖拽文件，DW 自动更新所有相对链接。 ② 避免手写 ../../ 过深层级，减少出错概率。 3.站点根目录相对路径 （1）格式 ① 以斜杠开头：href="/support/tips.html"。 ② 表示从站点根文件夹出发，与当前文件位置无关。 （2）适用环境 ① 大型多子站、同一服务器部署多个应用时路径统一。 ② 模板页、包含文件被不同层级页面引用时保证链接有效。 （3）注意点 ① 本地预览需定义测试服务器或启用“临时文件预览”。 ② 移动单文件不需更新，但若改根目录名则全站受影响。 （多项选择题）关于链接路径的表达方式，以下说法正确的是（ ） A. 绝对路径包含协议和域名，适合跨站资源引用，但域名变更后失效 B. 文档相对路径以当前文档所在位置为基准，移动文件夹时内部链接关系不变 C. 站点根目录相对路径以站点根文件夹为起点，适用于多子站统一路径管理 D. 站点根目录相对路径在本地预览时无需定义测试服务器或启用“临时文件预览” 【答案】ABC 【解析】绝对路径包含协议和域名，适合跨站资源引用，但域名变更后失效；文档相对路径以当前文档所在位置为基准，移动文件夹时内部链接关系不变；站点根目录相对路径以站点根文件夹为起点，适用于多子站统一路径管理。站点根目录相对路径在本地预览时需定义测试服务器或启用“临时文件预览”。 【要点】考查链接路径的三种表达方式及其特点。 1.（单项选择题）在创建内部链接时，通常推荐使用（ ） A. 绝对路径 B. 文档相对路径 C. 站点根目录相对路径 D. 任意路径 【答案】B 【解析】文档相对路径以当前文档所在位置为基准，移动文件夹时内部链接关系不变，适合创建内部链接。 【要点】考查内部链接的路径选择。 2.（单项选择题）若要从当前文件夹中的`index.html`链接到同级文件夹中的`about.html`，应使用（ ） A. 绝对路径 B. 文档相对路径`about.html` C. 站点根目录相对路径`/about.html` D. 空链接`#` 【答案】B 【解析】文档相对路径`about.html`直接指向同级文件夹中的`about.html`，适合这种情况。 【要点】考查文档相对路径的应用。 3.（多项选择题）关于站点根目录相对路径，以下说法正确的是（ ） A. 以斜杠`/`开头，表示从站点根文件夹出发 B. 适用于大型多子站站点，路径统一管理 C. 本地预览时需定义测试服务器或启用“临时文件预览” D. 移动单个文件时需更新路径，但移动整个文件夹时路径不变 【答案】ABC 【解析】站点根目录相对路径以斜杠`/`开头，表示从站点根文件夹出发，适用于大型多子站站点，路径统一管理。本地预览时需定义测试服务器或启用“临时文件预览”。移动单个文件时路径不变，但移动整个文件夹时路径也不变。 【要点】考查站点根目录相对路径的特点。 1.（填空题）在创建超链接时，若要从当前文件夹中的`index.html`链接到上一级文件夹中的`contact.html`，应使用文档相对路径______。 【答案】`../contact.html` 【解析】文档相对路径中，`../`表示上一级文件夹，因此从当前文件夹中的`index.html`链接到上一级文件夹中的`contact.html`，应使用`../contact.html`。 【要点】考查文档相对路径的写法规则。 2.（填空题）在创建超链接时，若要从当前文件夹中的`index.html`链接到子文件夹`pages`中的`about.html`，应使用文档相对路径______。 【答案】`pages/about.html` 【解析】文档相对路径中，直接写子文件夹名和文件名即可，因此从当前文件夹中的`index.html`链接到子文件夹`pages`中的`about.html`，应使用`pages/about.html`。 【要点】考查文档相对路径的写法规则。 3.（判断题）绝对路径在本地预览时无需联网即可查看（ ） 【答案】× 【解析】绝对路径包含协议和域名，本地预览时需要联网才能正确访问外部资源。 【要点】考查绝对路径的特点。 · 绝对：全URL，跨域资源必用，换域名失效。 · 文档相对：同级写文件名，上下级用../folder/，迁移域名不影响。 · 根相对：/开头，从站点根算起，多子站统一，预览需测试服务器。 知识点三 创建、管理与修复超链接全流程 1.创建步骤 （1）选对象 ① 可选取文字、图片、整行 DIV 等作为热区。 ② 给图片加链接时，Alt 文本利于 SEO 与无障碍。 （2）填路径 ① “属性”面板“链接”框直接输入或浏览选文件。 ② 下拉选“文档/站点根目录相对”，决定路径写法。 （3）定目标 ① _blank 新窗口，_self 当前窗口，_top 整页跳出框架。 ② 下载链接可配合 download 属性强制下载（HTML5）。 2.批量管理 （1）自动更新 ① “编辑—首选项”设“移动文件时更新链接”为总是/提示。 ② 站点内重命名或移动文件，DW 同步更新所有引用，防止断链。 （2）站点范围更改 ① “站点—改变站点范围的链接”一次性把旧地址换成新地址。 ② 保持原路径类型（相对/根相对），无需手工逐页修改。 （3）删除与检查 ① 选中文本/图片按 Delete 或清空“链接”框即可取消链接。 ② “窗口—结果—链接检查器”扫描断链、外部链、孤立文件。 3.修复与报告 （1）面板内快速修复 ① 在“断掉的链接”列直接输入正确路径或浏览选取。 ② 一键更新所有引用同一文件的页面，避免遗漏。 （2）属性面板修复 ① 双击“文件”列打开文档，在属性面板修改高亮路径。 ② 保存后链接检查器自动剔除已修复项。 （3）输出报告 ① 点击“保存报告”生成 CSV，供测试与归档。 ② 孤立文件可直接 Delete 清理，减少冗余资源。 （多项选择题）关于超链接的创建、管理与修复，以下说法正确的是（ ） A. 创建超链接时，可以选取文字、图片等作为热区 B. 在“属性”面板中可以直接输入链接路径或浏览选择文件 C. 使用“站点——改变站点范围的链接”可以一次性更改旧地址为新地址 D. 修复断开的链接可以在“链接检查器”面板中直接输入正确路径或浏览选取 【答案】ABCD 【解析】选项A正确，创建超链接时，可以选取文字、图片、整行DIV等作为热区。选项B正确，在“属性”面板中可以直接输入链接路径或浏览选择文件。选项C正确，使用“站点——改变站点范围的链接”可以一次性更改旧地址为新地址。选项D正确，修复断开的链接可以在“链接检查器”面板中直接输入正确路径或浏览选取。 【要点】考查超链接创建、管理和修复的基本操作。 1.（单项选择题）在创建超链接时，以下哪种目标属性表示在新窗口中打开链接（ ） A. \_blank B. \_self C. \_parent D. \_top 【答案】A 【解析】在创建超链接时，目标属性“\_blank”表示在新窗口中打开链接，“\_self”表示在当前窗口中打开，“\_parent”表示在父框架中打开，“\_top”表示在整个浏览器窗口中打开。 【要点】考查超链接目标属性的含义。 2.（单项选择题）在Dreamweaver中，以下哪种方法不能用于创建超链接（ ） A. 在“属性”面板的“链接”文本框中输入路径 B. 使用“站点——改变站点范围的链接”选项 C. 直接在文档窗口中键入链接的URL D. 通过“插入”菜单选择“超链接”选项 【答案】C 【解析】在Dreamweaver中，创建超链接可以通过在“属性”面板的“链接”文本框中输入路径、使用“插入”菜单选择“超链接”选项或直接在文档窗口中键入链接的URL。而“站点——改变站点范围的链接”选项用于批量更改链接地址，而不是创建超链接。 【要点】考查创建超链接的方法。 3.（多项选择题）关于超链接的管理与修复，以下说法正确的是（ ） A. 在“文件”面板中移动或重命名文件时，Dreamweaver会自动更新所有相关链接 B. 使用“站点——改变站点范围的链接”可以批量更改链接地址 C. 在“链接检查器”面板中可以检查断开的链接和孤立文件 D. 修复断开的链接只能在“链接检查器”面板中进行 【答案】ABC 【解析】选项A正确，在“文件”面板中移动或重命名文件时，Dreamweaver会自动更新所有相关链接。选项B正确，使用“站点——改变站点范围的链接”可以批量更改链接地址。选项C正确，在“链接检查器”面板中可以检查断开的链接和孤立文件。选项D错误，修复断开的链接可以在“链接检查器”面板中进行，也可以在“属性”面板中进行。 【要点】考查超链接管理与修复的方法和工具。 1.（填空题）在创建超链接时，如果希望链接在新窗口中打开，可以在“属性”面板的“目标”下拉列表中选择______。 【答案】\_blank 【解析】在创建超链接时，如果希望链接在新窗口中打开，可以在“属性”面板的“目标”下拉列表中选择“\_blank”。 【要点】考查超链接目标属性的设置。 2.（填空题）在Dreamweaver中，可以通过______面板检查断开的链接和孤立文件。 【答案】链接检查器 【解析】在Dreamweaver中，可以通过“链接检查器”面板检查断开的链接和孤立文件。 【要点】考查链接检查的工具。 3.（判断题）在Dreamweaver中，移动或重命名文件时，所有相关链接都会自动更新（ ） 【答案】× 【解析】在Dreamweaver中，移动或重命名文件时，如果在“文件”面板中操作，Dreamweaver会自动更新所有相关链接。但如果直接在文件系统中操作，则需要手动更新链接。 【要点】考查链接自动更新的条件。 · 创建：选文本/图→属性面板填路径→选目标_blank/_self。 · 管理：首选项设“移动更新链接”，批量改链用“站点范围链接”。 · 修复：链接检查器扫断链，面板内直接改路径，一键更新所有引用。 原创精品资源学科网独家享有版权，侵权必究！2 学科网（北京）股份有限公司 学科网（北京）股份有限公司 $