尧图网页设计 
HTML 链接完全指南绝对路径与相对路径、文档树导航与链接伪类状态curriculum 项目实战【免费下载链接】curriculumThe open curriculum for learning web development项目地址: https://gitcode.com/GitHub_Trending/cu/curriculum链接是维系整个 Web 的胶水——没有链接网页就是一盘散沙。本文以 curriculum 仓库中 HTML/CSS 课程体系的链接教学文档为核心系统讲解内部链接与外部链接的区别、绝对 URL 与相对路径的选用时机、如何通过../导航文档树、如何在新窗口打开链接以及:hover、:visited等链接伪状态的触发条件与样式定制并结合仓库中 Foundations 阶段的 links_and_images.md、中级 CSS 选择器课程 advanced_selectors.md 与无障碍课程 meaningful_text.md 做源码级印证。读完本文你将能够写出路径正确、行为安全、样式丰富且对屏幕阅读器友好的链接。一、链接的本质a元素与href属性在 HTML 中创建链接需要使用锚点元素anchor element即a标签。锚点元素通过把要变成链接的文本或其他 HTML 元素包裹在a标签中来实现aAbout The Odin Project/a仅凭一个a标签点击链接不会有任何反应——锚点元素自身并不知道要把用户带到哪里。你必须通过HTML 属性告诉它目的地。HTML 属性为元素提供附加信息总是写在元素的开始标签中通常由名称和值两部分组成并非所有属性都需要值。这里需要的是hrefhypertext reference超文本引用属性其值就是链接要跳转的目的地a hrefhttps://www.theodinproject.com/aboutAbout The Odin Project/a值得注意的是默认情况下没有href属性的锚点包裹文本看起来与普通文本无异一旦存在href属性浏览器默认会给文本加上蓝色与下划线以表明它是可点击的链接。此外锚点元素不仅可以链接其他 HTML 文档也可以链接视频、PDF、图片等任何网络资源。二、内部链接与外部链接何时用完整 URI何时用相对路径原课程文档archive/html_css/links.md提出的第一个核心问题是内部链接如/somepage与外部链接如http://www.somesite.com/somepage有什么区别概括来说Web 上的链接分为两大类指向互联网上其他网站的链接——称为绝对链接absolute links指向自己网站内其他页面的链接——称为相对链接relative links。2.1 绝对链接必须包含 scheme 与 domain一个典型的绝对链接由scheme://domain/path构成并且始终包含目标站点的 scheme协议与域名domain。例如前面创建的那个链接就是绝对链接https://www.theodinproject.com/about它同时携带了协议https、域名www.theodinproject.com与路径/about因此无论这段链接出现在哪个网站、哪个页面浏览器都能精确无误地定位到目标资源。链接指向站外资源、或需要在文档的其他位置复用比如写进配置、邮件、分享时使用完整 URI 是唯一可靠的选择。2.2 相对链接只写路径省略协议与域名指向自己网站内其他页面的链接称为相对链接。相对链接不包含域名——因为它指向同一站点上的另一个页面可以假定域名与当前页面相同只需写出相对于当前页面所在位置的文件路径即可。为了讲清这个概念仓库的 links_and_images.md 提供了一个可动手验证的实操场景新建目录odin-links-and-images其中创建index.html并写入 HTML 骨架与h1Homepage/h1在同一目录下再创建about.html在index.html中加入指向about.html的相对链接body h1Homepage/h1 a hrefhttps://www.theodinproject.com/aboutAbout The Odin Project/a a hrefabout.htmlAbout/a /body由于index.html与about.html位于同一目录直接用文件名about.html作为href值即可生效。但真实项目通常会把目录组织得更有条理index.html留在根目录其余 HTML 文件放进各自的子目录。此时若把about.html移入pages/目录原链接就会失效——因为目标文件的位置已经改变必须同步更新href值让它包含相对于当前文件的目录层级a hrefpages/about.htmlAbout/a在多数情况下这已经足够但更稳妥的做法是在路径前加上./前缀。./明确告诉浏览器从当前目录开始查找文件/目录可以避免许多因解析基准不明确而引发的意外问题a href./pages/about.htmlAbout/a2.3 理解绝对与相对的博物馆隐喻绝对路径与相对路径是比较抽象的概念仓库课程文档给出了一个形象的隐喻把域名如town.com想象成一座小镇网站所在目录/museum是一座博物馆网站中的每个页面则是博物馆里的一个房间如/museum/movie_room.html与/museum/shops/coffee_shop.html。相对链接如./shops/coffee_shop.html是从当前房间电影放映室/museum/movie_room.html出发、走向另一房间博物馆商店的指路说明绝对链接则是包含协议https、域名town.com与从域名出发的完整路径/museum/shops/coffee_shop.html的全程地址https://town.com/museum/shops/coffee_shop.html。三、用../导航文档树回到父目录课程原文档提出的另一个问题是如何用链接导航文档树如../../someotherpage答案在../这个特殊路径片段里——两个点表示上一级父目录。沿用上述练习如果要在about.html位于pages/目录中里引用位于项目根目录images/目录下的图片就必须先向上退出一层pages/目录才能再进入images/目录img src../images/dog.jpg将这段路径逐步拆解先从pages目录退到其父目录即odin-links-and-images再从父目录进入images目录最后访问images目录中的dog.jpg文件。沿用博物馆隐喻使用../就像从当前房间走到主走廊然后再进入另一间房间。层级嵌套越深需要叠加的../就越多例如从pages/sub/下访问根目录资源需写成../../。在构建多级目录结构的多页站点时能否正确书写../直接决定了内部链接是否可访问。四、在新窗口打开链接target与rel的安全组合默认情况下链接在当前标签页打开这是大多数浏览器的默认行为对应target属性的默认值_self。要改为在新标签页或新窗口打开需要添加target属性并设为_blanka hrefhttps://www.theodinproject.com/about target_blank relnoreferrerAbout The Odin Project/a注意示例中同时出现了rel属性。rel用于描述当前页面与链接目标之间的关系可以取多个值其中与本场景最相关的两个是noopener阻止新打开的标签页访问原页面window.opener从而杜绝被称为 tabnabbing 的反向标签劫持钓鱼攻击。现代浏览器对任何带target_blank的链接都会自动设置该行为但出于对旧浏览器兼容性的考虑你仍会经常看到手动书写它。noreferrer效果等同于noopener同时还阻止原页面的部分信息referrer 信息被传递给新页面——引用来源信息并非总是愿意共享的。因此在新窗口打开链接的正确姿势永远是target_blank与relnoopener noreferrer搭配使用既保证交互体验又守住安全底线。五、链接的伪状态pseudo-states:link、:visited、:hover、:active与:focus课程原文档的最后一个核心问题是链接都有哪些可能的伪状态如:hover它们分别在什么时机被激活如何基于这些状态改变样式5.1 为什么默认链接是蓝色、访问过变紫色未经过任何 CSS 修饰的 HTML 中链接默认是蓝色的点击访问后会变成紫色——这正是浏览器内置默认样式的作用结果。在 advanced_selectors.md 中给出了浏览器默认链接样式的一个简化实现/* 该规则作用于所有链接 */ a { text-decoration: underline; } /* 作用于未访问过的链接 */ a:link { color: blue; } /* 作用于用户点击过的链接 */ a:visited { color: purple; }通过这套伪类你可以完全接管链接的默认表现定制自己的链接主题。5.2 动态与用户行为伪类中级 CSS 课程文档把与用户交互相关的伪类归纳如下:focus作用于用户当前选中的元素——无论是通过鼠标点击还是键盘如 Tab 键聚焦。它是键盘可访问性的关键焦点样式缺失会让纯键盘用户迷失方向。:hover作用于鼠标指针悬停之下的元素。常用来强化按钮与链接的可交互感或触发下拉菜单等效果。:active作用于正在被点击按下尚未释放的元素特别适合为按钮和交互元素提供触觉般的即时反馈。5.3 结构伪类精确选中链接除了状态伪类CSS 还提供基于文档结构的选择能力例如:first-child、:last-child匹配第一个/最后一个兄弟元素:nth-child则支持更动态的定位.myList:nth-child(5) /* 选中第 5 个 class 为 myList 的元素 */ .myList:nth-child(3n) /* 每隔 3 个选中一个 */ .myList:nth-child(3n 3) /* 从第 3 个起每隔 3 个选中一个 */ .myList:nth-child(even) /* 选中所有偶数位置的元素 */5.4 用属性选择器按href精确命中链接中级课程还给出了按属性取值选择元素的工具这对链接场景非常实用[attribute]只要存在该属性即选中与取值无关selector[attributevalue]精确匹配指定属性的指定值[attribute^value]、[attribute$value]、[attribute*value]分别匹配以某字符串开头、结尾、或包含某字符串的属性值。例如可以用[href$.pdf]一次性选中所有指向 PDF 的链接并附加下载图标用[href^https://]区分站外链接——无需改动任何 HTML 结构。六、有意义的链接文本从规范到自动化校验6.1 无障碍视角下的链接文本meaningful_text.md 指出屏幕阅读器用户可以通过链接列表在页面中逐条跳转此时链接文本会脱离上下文被单独朗读。下面两种写法对无障碍用户而言差异巨大!-- 示例 1这里 是哪里 -- a href...Click here/a to start your career in web development! !-- 示例 2读起来一目了然 -- Visit a href...The Odin Project/a to start your career in web development!示例 1 被朗读时只会报出Click here, link脱离上下文后毫无意义若页面上多处链接文本相同用户会反复听到click here。课程文档给出了三条链接文本规则a元素的文本内容应能体现链接去向且保持简短约 100 字符内避免点击这里本页这类表述若链接会打开或下载文件应在文本中说明文件类型与大小若链接带有target_blank会自动新开标签页应通过文本向用户明示。!-- 示例 1用户能意识到这会打开/下载一个 PDF 文件 -- a href...2021 Sign Up Statistics (PDF, 1MB)/a !-- 示例 2用户知道此链接将在新标签页打开 -- a href...GitHub (opens in new tab)/a6.2 仓库中的自动化校验TOP001 链接描述文本规则curriculum 仓库不仅教链接写法还用 markdownlint 自定义规则强制校验课程文档自身的链接文本质量。查看 TOP001_descriptiveLinkTextLabels.js 的源码可以发现它维护了一个黑名单词表BLACKLISTED_LINK_TEXT包含video、article、the docs、documentation、page、homepage等过于宽泛、无法独立表达去向的链接文本同时用正则/.*?(?!(\w|))(this|here)(?!(\w|)).*?/i检测链接文本中是否出现this或here这类无信息量词汇一旦命中会给出错误提示请使用更能清晰传达链接目的或内容的描述性标签。这从工程实践层面印证了课程反复强调的理念——链接文本必须自解释。值得一提的是仓库还有一条 TOP007_useMarkdownLinks.js 规则要求文档中用 Markdown 链接语法而非裸 HTMLa标签来写导航链接并将a href...文本/a自动改写为文本格式——这也是你在仓库内阅读、编写文档时应遵循的约定。七、总结与自检清单回到课程原文档archive/html_css/links.md设定的学习目标你现在应该能回答内部链接/somepage省略协议与域名用于站内导航外部链接http://www.somesite.com/somepage必须包含完整 URI用于跨站跳转。页面内指向自己站点的资源用相对路径指向站外或需跨文档复用的资源用完整 URI。通过../逐级返回父目录即可在任意深度的目录树中书写正确的相对路径。用target_blank新开窗口并务必搭配relnoopener noreferrer防止 tabnabbing 与 referrer 泄露。:link、:visited、:hover、:active、:focus等伪类对应链接的不同状态可分别定制样式结构伪类与属性选择器还能实现按位置、按href特征的精确命中。书写链接时可遵循如下自检清单链接文本能否脱离上下文表达去向新开窗口是否已提示用户站内路径是否经得起目录结构调整键盘与屏幕阅读器用户能否顺畅使用对照仓库的 links_and_images.md 动手搭建一个包含多级目录的小站点并逐一验证上述行为是巩固这一课最有效的方式。【免费下载链接】curriculumThe open curriculum for learning web development项目地址: https://gitcode.com/GitHub_Trending/cu/curriculum创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 HTML 链接完全指南：绝对路径与相对路径、文档树导航与链接伪类状态（curriculum 项目实战）
HTML 链接完全指南绝对路径与相对路径、文档树导航与链接伪类状态curriculum 项目实战【免费下载链接】curriculumThe open curriculum for learning web development项目地址: https://gitcode.com/GitHub_Trending/cu/curriculum链接是维系整个 Web 的胶水——没有链接网页就是一盘散沙。本文以 curriculum 仓库中 HTML/CSS 课程体系的链接教学文档为核心系统讲解内部链接与外部链接的区别、绝对 URL 与相对路径的选用时机、如何通过../导航文档树、如何在新窗口打开链接以及:hover、:visited等链接伪状态的触发条件与样式定制并结合仓库中 Foundations 阶段的 links_and_images.md、中级 CSS 选择器课程 advanced_selectors.md 与无障碍课程 meaningful_text.md 做源码级印证。读完本文你将能够写出路径正确、行为安全、样式丰富且对屏幕阅读器友好的链接。一、链接的本质a元素与href属性在 HTML 中创建链接需要使用锚点元素anchor element即a标签。锚点元素通过把要变成链接的文本或其他 HTML 元素包裹在a标签中来实现aAbout The Odin Project/a仅凭一个a标签点击链接不会有任何反应——锚点元素自身并不知道要把用户带到哪里。你必须通过HTML 属性告诉它目的地。HTML 属性为元素提供附加信息总是写在元素的开始标签中通常由名称和值两部分组成并非所有属性都需要值。这里需要的是hrefhypertext reference超文本引用属性其值就是链接要跳转的目的地a hrefhttps://www.theodinproject.com/aboutAbout The Odin Project/a值得注意的是默认情况下没有href属性的锚点包裹文本看起来与普通文本无异一旦存在href属性浏览器默认会给文本加上蓝色与下划线以表明它是可点击的链接。此外锚点元素不仅可以链接其他 HTML 文档也可以链接视频、PDF、图片等任何网络资源。二、内部链接与外部链接何时用完整 URI何时用相对路径原课程文档archive/html_css/links.md提出的第一个核心问题是内部链接如/somepage与外部链接如http://www.somesite.com/somepage有什么区别概括来说Web 上的链接分为两大类指向互联网上其他网站的链接——称为绝对链接absolute links指向自己网站内其他页面的链接——称为相对链接relative links。2.1 绝对链接必须包含 scheme 与 domain一个典型的绝对链接由scheme://domain/path构成并且始终包含目标站点的 scheme协议与域名domain。例如前面创建的那个链接就是绝对链接https://www.theodinproject.com/about它同时携带了协议https、域名www.theodinproject.com与路径/about因此无论这段链接出现在哪个网站、哪个页面浏览器都能精确无误地定位到目标资源。链接指向站外资源、或需要在文档的其他位置复用比如写进配置、邮件、分享时使用完整 URI 是唯一可靠的选择。2.2 相对链接只写路径省略协议与域名指向自己网站内其他页面的链接称为相对链接。相对链接不包含域名——因为它指向同一站点上的另一个页面可以假定域名与当前页面相同只需写出相对于当前页面所在位置的文件路径即可。为了讲清这个概念仓库的 links_and_images.md 提供了一个可动手验证的实操场景新建目录odin-links-and-images其中创建index.html并写入 HTML 骨架与h1Homepage/h1在同一目录下再创建about.html在index.html中加入指向about.html的相对链接body h1Homepage/h1 a hrefhttps://www.theodinproject.com/aboutAbout The Odin Project/a a hrefabout.htmlAbout/a /body由于index.html与about.html位于同一目录直接用文件名about.html作为href值即可生效。但真实项目通常会把目录组织得更有条理index.html留在根目录其余 HTML 文件放进各自的子目录。此时若把about.html移入pages/目录原链接就会失效——因为目标文件的位置已经改变必须同步更新href值让它包含相对于当前文件的目录层级a hrefpages/about.htmlAbout/a在多数情况下这已经足够但更稳妥的做法是在路径前加上./前缀。./明确告诉浏览器从当前目录开始查找文件/目录可以避免许多因解析基准不明确而引发的意外问题a href./pages/about.htmlAbout/a2.3 理解绝对与相对的博物馆隐喻绝对路径与相对路径是比较抽象的概念仓库课程文档给出了一个形象的隐喻把域名如town.com想象成一座小镇网站所在目录/museum是一座博物馆网站中的每个页面则是博物馆里的一个房间如/museum/movie_room.html与/museum/shops/coffee_shop.html。相对链接如./shops/coffee_shop.html是从当前房间电影放映室/museum/movie_room.html出发、走向另一房间博物馆商店的指路说明绝对链接则是包含协议https、域名town.com与从域名出发的完整路径/museum/shops/coffee_shop.html的全程地址https://town.com/museum/shops/coffee_shop.html。三、用../导航文档树回到父目录课程原文档提出的另一个问题是如何用链接导航文档树如../../someotherpage答案在../这个特殊路径片段里——两个点表示上一级父目录。沿用上述练习如果要在about.html位于pages/目录中里引用位于项目根目录images/目录下的图片就必须先向上退出一层pages/目录才能再进入images/目录img src../images/dog.jpg将这段路径逐步拆解先从pages目录退到其父目录即odin-links-and-images再从父目录进入images目录最后访问images目录中的dog.jpg文件。沿用博物馆隐喻使用../就像从当前房间走到主走廊然后再进入另一间房间。层级嵌套越深需要叠加的../就越多例如从pages/sub/下访问根目录资源需写成../../。在构建多级目录结构的多页站点时能否正确书写../直接决定了内部链接是否可访问。四、在新窗口打开链接target与rel的安全组合默认情况下链接在当前标签页打开这是大多数浏览器的默认行为对应target属性的默认值_self。要改为在新标签页或新窗口打开需要添加target属性并设为_blanka hrefhttps://www.theodinproject.com/about target_blank relnoreferrerAbout The Odin Project/a注意示例中同时出现了rel属性。rel用于描述当前页面与链接目标之间的关系可以取多个值其中与本场景最相关的两个是noopener阻止新打开的标签页访问原页面window.opener从而杜绝被称为 tabnabbing 的反向标签劫持钓鱼攻击。现代浏览器对任何带target_blank的链接都会自动设置该行为但出于对旧浏览器兼容性的考虑你仍会经常看到手动书写它。noreferrer效果等同于noopener同时还阻止原页面的部分信息referrer 信息被传递给新页面——引用来源信息并非总是愿意共享的。因此在新窗口打开链接的正确姿势永远是target_blank与relnoopener noreferrer搭配使用既保证交互体验又守住安全底线。五、链接的伪状态pseudo-states:link、:visited、:hover、:active与:focus课程原文档的最后一个核心问题是链接都有哪些可能的伪状态如:hover它们分别在什么时机被激活如何基于这些状态改变样式5.1 为什么默认链接是蓝色、访问过变紫色未经过任何 CSS 修饰的 HTML 中链接默认是蓝色的点击访问后会变成紫色——这正是浏览器内置默认样式的作用结果。在 advanced_selectors.md 中给出了浏览器默认链接样式的一个简化实现/* 该规则作用于所有链接 */ a { text-decoration: underline; } /* 作用于未访问过的链接 */ a:link { color: blue; } /* 作用于用户点击过的链接 */ a:visited { color: purple; }通过这套伪类你可以完全接管链接的默认表现定制自己的链接主题。5.2 动态与用户行为伪类中级 CSS 课程文档把与用户交互相关的伪类归纳如下:focus作用于用户当前选中的元素——无论是通过鼠标点击还是键盘如 Tab 键聚焦。它是键盘可访问性的关键焦点样式缺失会让纯键盘用户迷失方向。:hover作用于鼠标指针悬停之下的元素。常用来强化按钮与链接的可交互感或触发下拉菜单等效果。:active作用于正在被点击按下尚未释放的元素特别适合为按钮和交互元素提供触觉般的即时反馈。5.3 结构伪类精确选中链接除了状态伪类CSS 还提供基于文档结构的选择能力例如:first-child、:last-child匹配第一个/最后一个兄弟元素:nth-child则支持更动态的定位.myList:nth-child(5) /* 选中第 5 个 class 为 myList 的元素 */ .myList:nth-child(3n) /* 每隔 3 个选中一个 */ .myList:nth-child(3n 3) /* 从第 3 个起每隔 3 个选中一个 */ .myList:nth-child(even) /* 选中所有偶数位置的元素 */5.4 用属性选择器按href精确命中链接中级课程还给出了按属性取值选择元素的工具这对链接场景非常实用[attribute]只要存在该属性即选中与取值无关selector[attributevalue]精确匹配指定属性的指定值[attribute^value]、[attribute$value]、[attribute*value]分别匹配以某字符串开头、结尾、或包含某字符串的属性值。例如可以用[href$.pdf]一次性选中所有指向 PDF 的链接并附加下载图标用[href^https://]区分站外链接——无需改动任何 HTML 结构。六、有意义的链接文本从规范到自动化校验6.1 无障碍视角下的链接文本meaningful_text.md 指出屏幕阅读器用户可以通过链接列表在页面中逐条跳转此时链接文本会脱离上下文被单独朗读。下面两种写法对无障碍用户而言差异巨大!-- 示例 1这里 是哪里 -- a href...Click here/a to start your career in web development! !-- 示例 2读起来一目了然 -- Visit a href...The Odin Project/a to start your career in web development!示例 1 被朗读时只会报出Click here, link脱离上下文后毫无意义若页面上多处链接文本相同用户会反复听到click here。课程文档给出了三条链接文本规则a元素的文本内容应能体现链接去向且保持简短约 100 字符内避免点击这里本页这类表述若链接会打开或下载文件应在文本中说明文件类型与大小若链接带有target_blank会自动新开标签页应通过文本向用户明示。!-- 示例 1用户能意识到这会打开/下载一个 PDF 文件 -- a href...2021 Sign Up Statistics (PDF, 1MB)/a !-- 示例 2用户知道此链接将在新标签页打开 -- a href...GitHub (opens in new tab)/a6.2 仓库中的自动化校验TOP001 链接描述文本规则curriculum 仓库不仅教链接写法还用 markdownlint 自定义规则强制校验课程文档自身的链接文本质量。查看 TOP001_descriptiveLinkTextLabels.js 的源码可以发现它维护了一个黑名单词表BLACKLISTED_LINK_TEXT包含video、article、the docs、documentation、page、homepage等过于宽泛、无法独立表达去向的链接文本同时用正则/.*?(?!(\w|))(this|here)(?!(\w|)).*?/i检测链接文本中是否出现this或here这类无信息量词汇一旦命中会给出错误提示请使用更能清晰传达链接目的或内容的描述性标签。这从工程实践层面印证了课程反复强调的理念——链接文本必须自解释。值得一提的是仓库还有一条 TOP007_useMarkdownLinks.js 规则要求文档中用 Markdown 链接语法而非裸 HTMLa标签来写导航链接并将a href...文本/a自动改写为文本格式——这也是你在仓库内阅读、编写文档时应遵循的约定。七、总结与自检清单回到课程原文档archive/html_css/links.md设定的学习目标你现在应该能回答内部链接/somepage省略协议与域名用于站内导航外部链接http://www.somesite.com/somepage必须包含完整 URI用于跨站跳转。页面内指向自己站点的资源用相对路径指向站外或需跨文档复用的资源用完整 URI。通过../逐级返回父目录即可在任意深度的目录树中书写正确的相对路径。用target_blank新开窗口并务必搭配relnoopener noreferrer防止 tabnabbing 与 referrer 泄露。:link、:visited、:hover、:active、:focus等伪类对应链接的不同状态可分别定制样式结构伪类与属性选择器还能实现按位置、按href特征的精确命中。书写链接时可遵循如下自检清单链接文本能否脱离上下文表达去向新开窗口是否已提示用户站内路径是否经得起目录结构调整键盘与屏幕阅读器用户能否顺畅使用对照仓库的 links_and_images.md 动手搭建一个包含多级目录的小站点并逐一验证上述行为是巩固这一课最有效的方式。【免费下载链接】curriculumThe open curriculum for learning web development项目地址: https://gitcode.com/GitHub_Trending/cu/curriculum创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考