Skip to content
电脑工程师入门

电脑工程师入门

create tomorrow, create happiness

  • 实用软件教程
    • Excel
    • WordPress
    • Powerpoint
    • PowerApps
    • PowerAutomateDesk
  • 计算机语言入门
    • PHP
    • Bootstrap
    • JavaScript
    • Python
    • HTML
    • WordPress
  • 咨询
  • Home
  • HTML
  • 第四章 HTML的链接
  • HOME
  • HTML
  • 第四章 HTML的链接

第四章 HTML的链接

HTML

目录

4-1 到其他网站的链接
4-2 自己网站内的链接
4-3 相对链接
4-4 指定一个文件夹作为链接目标
4-5 跳转到页面的特定位置
4-6 在另一个窗口打开

4-1 到其他网站的链接

要链接到其他站点(例如 https://www.baidu.com),请按如下方式使用<a> 。

<a href="https://www.baidu.com/">百度</a>

百度部分将以蓝色下划线显示,您可以单击它跳转到该页面。

百度

4-2 自己网站内的链接

例如,要链接到页面 http://www.yyy.zzz/aaa/bbb/ccc.html:这通常意味着在名为 www.yyy.zzz 的服务器上 aaa 文件夹内的 bbb 文件夹中有一个名为 ccc.html 的文件。

<a href="http://www.yyy.zzz/aaa/bbb/ccc.html">页面</a>

当页面在同一个服务器时,你可以省略 http://~ 。

<a href=" /aaa/bbb/ccc.html ">页面</a>

此外,如果页面位于同一文件夹中,您还可以省略 /~…~/ 。

<a href="ccc.html">页面</a>

4-3 相对链接

例如,假设您的 HTML 文件放置在如下文件夹中:

◆folder
   ◆folderA
       ┗aaa.html
       ┗bbb.html
      ◆folderB
          ┗ccc.html
   ◆folderC
      ┗ddd.html

从 aaa.html 链接到 bbb.html:

<a href="bbb.html">跳转</a>

从 aaa.html 链接到 ccc.html:

<a href="folderB/ccc.html ">跳转</a>

从 aaa.html 链接到 ddd.html:圆点 ( ..) 表示“上面的一个文件夹”。

<a href=" ../folderC/ddd.html ">跳转</a>

4-4 指定一个文件夹作为链接目标

您还可以为链接目标指定文件夹名称而不是文件名称。

<a href=" ../folderC/ ">跳转</a> <a href=" http://xxx.yyy.zzz/ukeke/ ">
跳转</a>

在这种情况下,您通常会在该目录中看到“默认文件”。默认文件可以是 index.html、index.htm 或 default.htm。(取决于服务器类型和设置)

此外,如果默认文件不存在,则会显示该文件夹中的文件列表。(这也可能不显示,具体取决于服务器设置。)

4-5 跳转到页面的特定位置

您还可以跳转到页面中间的特定位置。首先,用id属性命名跳转目的地。浏览器上没有任何变化。单击 ~ 链接会跳转到具有该名称的位置。

<h4 id="LocalLink" >您网站内的链接</h4> 
     : 
→ <a href="#LocalLink ">
您网站内的链接</a>

请点击以下链接。

您网站内的链接

其他站点、文件夹和文件中特定位置的链接如下。

<a href="http://www.yyy.zzz/aaa.html#Link ">跳转</a>

4-6 在另一个窗口打开

通过指定目标属性,您可以在单独的窗口或选项卡中显示链接目标。

<a target="_blank" href="https://www.baidu.com/">百度</a>

请点击以下链接。

百度
标签:HTML

文章导航

❮ Previous Post: 第三章 在HTML中使用表格
Next Post: 第五章 HTML粘贴图像 ❯

关联内容

HTML
第一章 HTML的基础知识
HTML
第二章 基本HTML技术
HTML
第三章 在HTML中使用表格
HTML
第五章 HTML粘贴图像
HTML
第六章 创建HTML文件

实用软件教程

  • Powerpoint
  • Excel
  • PowerAutomateDesk
  • Wordpress
  • Powerapps

编程语言入门

  • JavaScript
  • HTML
  • PHP
  • Python
  • Bootstrap

Copy right by flashyonder.com