张访 发表于 2021-4-17 17:31:54

超链接

超链接非常重要-它们使Web成为Web。本文介绍了建立链接所需的语法,并讨论了链接最佳实践。
先决条件:基本的HTML熟悉程度,如HTML入门中所述。HTML文本格式,如HTML文本基础知识所述。
客观的:学习如何有效地实现超链接,以及将多个文件链接在一起。

什么是超链接?超链接是网络必须提供的最令人兴奋的创新之一。从一开始,它们就一直是Web的功能,也是使Web成为Web的原因。超链接允许我们将文档链接到其他文档或资源,链接到文档的特定部分,或使应用程序可在网址上使用。几乎所有的Web内容都可以转换为链接,以便在单击或以其他方式激活时,Web浏览器可以转到另一个Web地址(URL)。注意:URL可以指向HTML文件,文本文件,图像,文本文档,视频和音频文件,或Web上存在的任何其他内容。如果网络浏览器不知道如何显示或处理文件,它将询问您是否要打开文件(在这种情况下,打开或处理文件的职责会传递给设备上合适的本机应用程序)或下载文件(在这种情况下,您可以稍后再尝试处理)。
例如,BBC主页包含许多链接,这些链接不仅指向多个新闻报道,而且指向站点的不同区域(导航功能),登录/注册页面(用户工具)等等。
链接剖析基本链接是通过包装文本或其他内容来创建的,请参阅元素内的块级链接,<a>并使用包含网址的href属性(也称为超文本引用)或target。这给我们以下结果:我正在创建指向Mozilla主页的链接。
添加带有标题属性的支持信息
您可能要添加到链接中的另一个属性是title。标题包含有关链接的其他信息,例如页面包含的信息类型或网站上应注意的事项。这给了我们以下结果,将鼠标悬停在链接上会显示标题作为工具提示。我正在创建指向Mozilla主页的链接。注意:链接标题仅在鼠标悬停时显示,这意味着依靠键盘控件或触摸屏浏览网页的人将难以访问标题信息。如果标题的信息对于页面的可用性确实很重要,则应以所有用户都可以访问的方式显示标题,例如,将其放在常规文本中。

主动学习:创建自己的示例链接使用本地代码编辑器和我们的入门模板创建HTML文档。
[*]在HTML正文中,添加一个或多个段落或您已经知道的其他类型的内容。
[*]将某些内容更改为链接。
[*]包括标题属性。

块级链接
如前所述,几乎所有内容都可以做成链接,甚至块级元素也可以。如果您有要链接<a>的图像,请使用元素,并使用该元素引用图像文件<img>。URL和路径快速入门
要完全了解链接目标,您需要了解URL和文件路径。本节为您提供实现此目的所需的信息。URL或统一资源定位符是一串字符串,用于定义某些内容在Web上的位置。例如,Mozilla的英语主页位于https://www.mozilla.org/en-US/。URL使用路径查找文件。路径指定您感兴趣的文件在文件系统中的位置。让我们来看一个目录结构的示例,请参见creation-hyperlinks目录。此目录结构的根称为creating-hyperlinks。在本地使用网站时,您将拥有一个包含整个网站的目录。在根内部,我们有一个index.html文件和一个contacts.html。在真实的网站中,index.html将是我们的主页或登录页面(充当网站或网站特定部分的入口点的网页)。在我们的根目录下还有两个目录-pdfs和projects。它们每个内部都有一个文件-分别为PDF(project-brief.pdf)和一个index.html文件。请注意,您可以index.html在一个项目中拥有两个文件,只要它们位于不同的文件系统位置即可。第二个index.html可能是与项目相关的信息的主要登录页面。
[*]同一目录:如果要在指向的内部index.html(顶层index.html)包括超链接contacts.html,则应指定要链接的文件名,因为该文件名与当前文件位于同一目录中。您将使用的URL是contacts.html:
[*]您将在网上遇到两个术语:绝对URL和相对URL:绝对URL:指向由其在网络上的绝对位置定义的位置,包括协议和域名。例如,如果某个index.html页面被上载到projects位于Web服务器根目录内的目录,并且该网站的域为https://www.example.com,则该页面将位于https://www.example.com/projects/index.html(甚至只是https://www.example.com/projects/,因为大多数Web服务器只是在寻找登录页面)例如index.html如果未在网址中指定则进行加载。)无论使用在哪里,绝对URL都始终指向相同的位置。relative 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。相对网址会根据您引用的文件的实际位置指向不同的位置-例如,如果我们将index.html文件移出projects目录并移至网站的根目录(顶层,不在任何目录中),现在,其中的pdfs/project-brief.pdf相对URL链接将指向处的文件https://www.example.com/pdfs/project-brief.pdf,而不是处的文件https://www.example.com/projects/pdfs/project-brief.pdf。
当然,project-brief.pdf文件和pdfs文件夹的位置不会因为您移动index.html文件而突然改变-这会使您的链接指向错误的位置,因此如果单击该链接将无法使用。你要小心点!





页: [1]
查看完整版本: 超链接