任务7.1 网页超链接的基本应用

模块七网页超链接设计任务7.1网页超链接的基本应用网页设计项目教程（HTML5+CSS3+JavaScript）学习目标围绕“任务7.1网页超链接的基本应用”，明确以下三维目标。知识目标了解超链接的概念、作用；理解<a>标签作为超链接载体的基础原理；掌握超链接的基本使用。能力目标能用<a>标签创建文本链接与图片链接；能按需求正确选择相对路径或绝对路径；能创建带自定义文件名的下载链接。素养目标增强用户体验意识，关注视觉反馈与操作便捷；提升通过路径检查、属性调试排查链接失效的能力；培养系统思维，理解超链接在网站架构中的作用。任务描述超链接是网页实现内容互联的核心元素，本任务聚焦超链接的基本应用。学会创建文本链接与图片链接；用相对路径引用本地资源、绝对路径引用外部资源；设置target属性控制打开位置；实现文件下载功能。相关知识和技能任务7.1涵盖以下3个核心知识点：▪7.1.1文本和图片超链接的创建▪7.1.2下载链接创建与应用▪7.1.3设置链接目标打开窗口7.1.1文本和图片超链接的创建超链接（Hyperlink，简称“链接”）是网页实现内容互联的核心元素。▪概念：超链接能让用户点击后从当前内容快速跳转到另一相关内容——可为同页锚点、其他网页、文件或外部网站资源。▪作用：打破单一网页的局限，将分散资源连接成整体；浏览器按链接设置自动加载目标，无需手动输入地址。▪载体：文字、图片、按钮甚至动画，只要被<a>标签包裹，即可成为可点击的链接。▪<a>标签：通过href属性指定跳转目标，支持文字、图片等多种元素作为链接载体。▪状态识别：未访问蓝色下划线、已访问紫色下划线、激活红色下划线；鼠标悬停时指针自动变为小手。7.1.1基本语法超链接由<a>标签定义，href指定目标，开始与结束标签之间为可见链接文字。基本语法：<ahref="目标地址">链接文字</a><!--文字链接--><ahref="">访问示例网站</a><!--图片链接（嵌套<img>）--><ahref="about.html"><imgsrc="logo.png"alt="网站logo"width="100"></a>说明href指定跳转目标地址；链接文字即用户可见内容。<img>必需属性：src（图像URL）、alt（替代文本）。在<a>中嵌套<img>，即可让图片成为链接载体。实例代码7-1超链接创建示例文字链接与图片链接综合示例（观察未访问/已访问状态与悬停小手）。<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><title>超链接知识点演示</title></head><body><!--1.基本文字链接--><divclass="section"><h2>1.文字链接基础</h2><divclass="link-demo"><p>点击下方链接观察效果：</p><!--外部链接--><ahref=""target="_blank">百度搜索（新窗口打开）</a><br><br><p><small>知识点：href指定目标，target="_blank"新窗口打开；观察未访问（蓝）、已访问（紫）状态</small></p></div></div><!--2.图片链接--><divclass="section"><h2>2.图片作为链接载体</h2><divclass="link-demo"><ahref=""target="_blank"><imgsrc="/i/eg_tulip.jpg"alt="郁金香图片"width="200"></a><p><small>知识点：<a>嵌套<img>；src指定路径，alt为替代文本；悬停显示小手</small></p></div></div></body></html>提示点击“百度链接”在新窗口打开；点击图片跳转学习资源。对照图7-1查看浏览器实际效果。7.1.1路径：相对路径与绝对路径路径指引用资源的位置；错误的文件路径会导致引用失效。相对路径（relativepath）源文件与引用文件在同一目录时，直接写引用文件名即可。适用于本地资源引用，迁移方便、结构清晰。绝对路径（absolutepath）完整描述文件位置的路径；网页制作中带域名的文件才是完整路径。适用于外部资源引用（含http(s)://域名）。经验法则：本地资源用相对路径，外部资源用绝对路径（含域名）。7.1.2下载链接创建与应用HTML5中<a>标签新增download属性，用于触发文件下载（主流现代浏览器均支持）。▪作用：规定超链接的下载目标，使用时需同时为<a>设置href属性。▪自定义文件名：download的属性值即下载后的文件名，浏览器自动补全正确扩展名。▪应用：下载服务器静态文件（PDF手册、Excel模板、压缩包等）；结合后端接口下载动态生成内容；配合URL.createObjectURL()下载前端动态内容。<adownload="filename">链接文本</a>其中filename指定下载文件名要点download不写值：使用href原文件名下载。download="文件名"：下载为指定名称。常用于PDF/Excel/压缩包等静态资源。实例代码7-2下载链接示例基础下载（使用原文件名）与自定义文件名下载。<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"></head><body><!--示例1：基础下载（不指定文件名）--><divclass="example"><h3>示例1：基础下载（使用文件原名称）</h3><p>点击链接下载文件，文件名默认使用href指向的原文件名：</p><ahref="sample-document.pdf"download>下载PDF文件</a></div><!--示例2：指定下载文件名--><divclass="example"><h3>示例2：自定义下载文件名</h3><p>通过download属性值指定下载后的文件名：</p><ahref="sample-document.pdf"download="课程资料.pdf">下载并重命名为"课程资料.pdf"</a></div></body></html>提示示例1：download不写值，沿用原文件名。示例2：download指定名称，下载为“课程资料.pdf”。对照图7-2查看浏览器下载效果。7.1.3设置链接目标打开窗口<a>标签的target属性用于指定被链接文档的打开位置。▪常用值：_blank（新窗口/新选项卡）、_self（当前窗口，默认）、_parent（父框架）、_top（整个窗口，跳出框架）。▪早期HTML可指定框架名（如target="frame1"），但frame与frameset标签已被HTML5废弃；如今主要通过命名iframe（内联框架）配合target使用。▪self/parent/top多与仍在使用的iframe配合，用于控制链接在嵌套结构中的打开位置。表7-1target属性的选项及其描述target常用选项及具体说明如下表所示。选项描述_blank在新窗口或浏览器新选项卡中打开链接文档（日常开发最常用场景）。_self在当前窗口/框架中打开链接文档，为默认值（若不指定target则默认为此）。_parent在父框架中打开链接文档；若当前页面没有父框架，则效果与_self一致。_top在整个浏览器窗口的主体区域打开链接文档，忽略所有框架嵌套（即“跳出”框架）。实例代码7-3target属性演示基础用法（_blank/_self）与配合iframe（_self/_parent/_top）。<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>target属性演示</title><style>.demo-box{margin:20px;padding:15px;border:2pxsolid#ccc;}iframe{width:80%;height:200px;border:2pxsolid#666;margin-top:10px;}</style></head><body><h2>target属性演示</h2><!--第一部分：基础用法--><divclass="demo-box"><h3>1.基础用法（无框架场景）</h3><ul><li><ahref=""target="_blank">_blank：新窗口/新标签打开</a></li><li><ahref=""target="_self">_self：当前窗口打开（默认）</a></li></ul></div><!--第二部分：与iframe配合--><divclass="demo-box"><h3>2.与iframe（内联框架）配合</h3><iframesrcdoc='<h4>这是iframe内部页面</h4><ul><li><ahref=""target="_self">_self：当前iframe内打开</a></li><li><ahref=""target="_parent">_parent：父页面打开</a></li><li><ahref=""target="_top">_top：整个窗口打开（跳出框架）</a></li></ul>'></iframe></div></body></html>任务实施设计“个人资源导航页”，整合多种链接类型，综合运用本任务知识点。▪实施目标：创建个人资源导航页，包含外部网站、内部页面、同页锚点、文件下载4类链接。▪步骤1需求与规划：建项目文件夹、主页面、内部页面、files文件夹与图片资源。▪步骤2基础结构：编写resource-nav.html的HTML框架（header/nav/容器/footer）。▪步骤3实现链接：外部（绝对路径+target=_blank）、内部（相对路径）、锚点（#id）、下载（download）。▪步骤4样式布局：为链接加标识（↗/↓），导航与卡片网格布局。▪步骤5内部页面：创建personal-profile.html等子页面并互