8、HTML入门——创建超链接

目录1. 什么是超链接2. 链接的解析2.1 块级链接2.2 图片链接2.3 使用title属性添加支持信息3. 统一资源定位符URL与路径path快速入门3.1 文档片段3.2 绝对URL和相对URL4. 链接最佳实践4.1 使用清晰的链接措辞4.2 链接到非HTML资源——留下清晰的指示4.3 下载链接时使用download属性5. 电子邮件链接5.1 指定详细信息参考1. 什么是超链接超链接是互联网提供的最令人兴奋的创新之一它们从一开始就一直是互联网的一个特性使互联网称为互联的网络。超链接使我们能够将我们的文档链接到任何其他文档也可以链接到文档的指定部分我们可以在一个简单的网址上提供应用程序。几乎任何网络内容都可以转换为链接点击超链接将使网络浏览器转到另一个网址URL。2. 链接的解析通过将文本或其他内容包裹在a元素内并给它一个包含网址的href属性(超文本引用或目标)来创建一个基本的链接。p我创建了一个指向ahrefhttps://www.mozilla.org/zh-CN/Mozilla 主页/a的链接。/p2.1 块级链接块级元素都可以作为链接出现。如果想让标题元素变为链接就把它包裹在锚点元素a中ahrefhttps://developer.mozilla.org/zh-CN/h1MDN Web 文档/h1/ap自从2005年起就开始记载包括CSS、HTML、JavaScript等网络技术。/p2.2 图片链接如果有需要作为链接的图片使用a元素来包裹引用图片的img元素。ahrefhttps://developer.mozilla.org/zh-CN/imgsrctest.pngalt测试图片/a2.3 使用title属性添加支持信息title旨在补充关于链接的信息。p我创建了一个指向ahrefhttps://www.mozilla.org/zh-CN/title了解Mozilla使命以及如何参与贡献的最佳站点。Mozilla 主页/a的超链接p3. 统一资源定位符URL与路径path快速入门统一资源定位符Uniform Resource LocatorURL是一个定位了在网络上的位置的一个文本字符串。URL使用路径查找文件。路径指定文件系统中你感兴趣的文件所在的位置。在根目录中有index.html和contracts.html文件。在真实的网站中index.html将会成为我们的主页或着陆页。根目录中还有两个目录——pdfs和projects它们分别包含一个PDF文件和一个index.html文件。请注意你可以在同一个项目中有两个index.html文件前提是他们在不同的文件系统目录下。第二个index.html或许是项目相关信息的着陆页。指向当前目录如果你想在index.html(顶层index.html)中包含一个指向contacts.html的超链接你只需要指定想要链接到的文件名。因为它与当前文件是在同一个目录的所以你应该使用的URL是contracts.htmlp要联系某位工作人员请访问我们的ahrefcontracts.html联系人页面/a。/p指向子目录如果想在index.html(顶层index.html)中包含一个指向projects/index.html的超链接你需要先进入projects项目目录然后通过指定目录的名称然后是正斜杠然后是文件的名称指明要链接的文件index.html。因此你要使用的URL是projects/index.html。p请访问我的ahrefprojects/index.html项目主页/a。/p指向上级目录如果你想在projects/index.html中包含一个指向pdfs/project-brief.pdf的超链接你必须先返回上级目录然后再回到pdfs目录。因此你应该使用的URL是…/pdfs/project-brief.pdf。p点击打开ahref../pdfs/project-brief.pdf项目简介/a。/p3.1 文档片段超链接除了可以链接到文档外也可以链接到HTML文档的特定部分。要做到这一点你必须首先给要链接到的元素分配一个id属性。通常情况下链接到一个特定的标题是有意义的。h2idMailing_address邮寄地址/h2为了链接到那个特定的id要将它放在URL的末尾并在前面包含#号。p要提供意见和建议请将信件寄送至ahrefcontracts.html#Mailing_address我们的地址/a/p甚至可以在同一份文档下通过链接文档片段来链接到当前文档的另一部分。p本页面底部可以找到ahref#Mailing_address公司邮寄地址/a。/p3.2 绝对URL和相对URL绝对URL指向由其在Web上的绝对位置定义的位置包括协议和域名。如果index.html页面上传到了projects这一个目录。并且projects目录位于web服务站点的根目录web站点的域名为https://www.example.com那么这个页面就可以通过https://www.example.com/projects/index.html访问或通过https://www.example.com/projects来访问因为在没有指定特定的URL情况下大多数web服务器会默认访问加载index.html这类页面。不管绝对URL在哪里使用它总是指向确定的相同位置。相对URL指向与你链接的文件相关的位置。如果我们想从示例文件链接https://www.example.com/projects/index.html转到相同目录下的一个PDF文件URL就是文件名project-brief.pdf。如果PDF文件能够在projects的子目录pdfs中访问到相对路径就是pdfs/project-brief.pdf对应的绝对URL是https://www.example.com/projects/pdfs/project-brief.pdf。一个相对URL将指向不同的位置这取决于引用的文件的实际位置。4. 链接最佳实践4.1 使用清晰的链接措辞将链接放在你的页面上很容易。这还不够。我们需要让所有的读者都可以使用链接无论他们当前的环境和用于访问的工具。使用屏幕阅读器的用户喜欢从页面上的一个链接跳到另一个链接并且脱离上下文来阅读链接。搜索引擎使用链接文本来索引目标文件所以在链接文本中包含关键词是一个很好的注意以有效地描述与之相关的信息。读者往往会浏览页面而不是阅读每一个字他们的眼睛会被页面的特征所吸引比如链接。他们会找到描述性的链接。好的链接文本pahrefhttps://www.mozilla.org/zh-CN/firefox/下载 Firefox/a/p不好的链接文本pahrefhttps://www.mozilla.org/zh-CN/firefox/点击这里/a下载 Firefox/p不要重复URL作为链接文本的一部分。不要在链接文本说链接或链接到。保持你的链接标签尽可能短。尽量减少相同文本的多个副本链接到不同地方的情况。4.2 链接到非HTML资源——留下清晰的指示当链接到一个需要下载的资源或流媒体或有另一个潜在的意想不到的效果你应该添加明确的措辞以减少混乱。pahrefhttps://www.example.com/large-report.pdf下载销售报告PDF大小为10 MB/a/ppahrefhttps://www.example.com/video-stream/target_blank观看视频将在新标签页中播放HD画质/a/p4.3 下载链接时使用download属性当你链接到要下载的资源而不是在浏览器中打开时你可以使用download属性来提供一个默认的保存文件名。ahrefhttps://download.mozilla.org/?productfirefox-latest-ssloswin64langzh-CNdownloadfirefox-latest-64bit-installer.exe下载最新的 Firefox 中文版 - Windows64位/a5. 电子邮件链接当点击一个链接或按钮时可能会开启新的邮件的发送而不是连接到一个资源或页面。这种情况可以使用a元素和mailto: URL协议实现。其最基本和最常用的使用形式为一个指明收件人电子邮件地址的mailto:链接。ahrefmailto:nowheremozilla.org向 nowhere 发邮件/a实际上电子邮件地址是可选的。如果你省略了它发送新的电子邮件的窗口也会被用户的邮件客户端打开只是没有收件人的地址信息这通常在分享链接时很有用的用户可以给他们选择的地址发送邮件。5.1 指定详细信息除了提供电子邮件地址你还可以提供其他信息。事实上任何标准的邮件头字段可以被添加到你提供的mailto URL中。其中最常见的是主题subject抄送cc和主体body(这不是一个真正的标头字段但允许你为新邮件指定一个简短的内容消息)。每个字段及其值被指定为查询项。ahrefmailto:nowheremozilla.org?ccname2rapidtables.combccname3rapidtables.comsubjectThe%20subject%20of%20the%20emailbodyThe%20body%20of%20the%20email发送含有cc、bcc、主题和主体的邮件/a每个字段的值必须使用URL编码即使用百分号转义的非打印字符和空格。同时注意使用?来分隔主URL与参数值以及使用符来分隔mailto: URL中的各个参数。这是标准的URL查询标记方法。参考1、创建超链接