创建HTML跳转链接代码 - 极悦
专注Java教育14年 全国咨询/投诉热线:444-1124-454
极悦LOGO图
始于2009,口口相传的Java黄埔军校
首页 hot资讯 创建HTML跳转链接代码

创建HTML跳转链接代码

更新时间:2022-02-16 09:07:56 来源:极悦 浏览747次

创建HTML跳转链接

1.向锚元素添加一个id属性,为页面的部分命名。属性的值可以是单词或短语(使用短语时请记住不要有空格,请改用破折号或下划线)。

<a id="anchor-name">The  name where you want to jump</a>

或者,您还可以使用以下类型的锚:

标题中的锚点:<h2 id="anchor-name">部分名称</h2>

图像中的锚点:<img id="anchor-name" src="/images/imgname.jpeg"/>

段落中的锚点:<p id="anchor-name">段落名称</p>

请记住,每个id在页面上只能出现一次。

2.使用链接目标的id创建超链接,前面带有 #。

<a href="#anchor-name">Jump to the part of the page with the “anchor-name” id </a>

现在,只需添加首选文本,您就可以浏览页面部分。

创建跳跃锚链接的示例:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
    .main-content {
      height: 100vh;
      text-align: justify;
    }
    </style>
  </head>
  <body>
    <h2 id="Lorem_Ipsum">Lorem Ipsum</h2>
    <p class="main-content">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.
    </p>
    <p>Go to the
      <a href="#Lorem_Ipsum">top</a>.
    </p>
  </body>
</html>

设置跳跃锚链接的样式示例:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
    .main-content {
      height: 100vh;
      text-align: justify;
    }
    h2 {
      color: #1c87c9;
    }
    h2:target {
      color: white;
      background: #1c87c9;
    }
    </style>
  </head>
  <body>
    <h2 id="Lorem_Ipsum">Lorem Ipsum</h2>
    <div class="main-content ">
      <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      </p>
      <p>
        It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
      </p>
    </div>
    <p>Go to the
      <a href="#Lorem_Ipsum">top</a>.
    </p>
  </body>
</html>

从另一个网页链接到锚点

您也可以从其他网站链接到您的锚链接。为此,添加 URL 后跟 # 和锚值。这种用法有两种类型。

链接到同一域中的另一个页面:

<a href="/learn-html/html-links.html#html_links">Go to the HTML Links in our website.</a>

来自另一个网站的链接:

<a href="http://en.wikipedia.org/wiki/Main_Page#wikipedia">Go to the main page of Wikipedia .</a>

从另一个网页链接到锚点的示例:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2 id="Lorem_Ipsum">Lorem Ipsum</h2>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
    <p>
      <a href="/learn-html/html-links.html#html_links">Go to the HTML Links in our website.</a>
    </p>
    <p>
      <a href="http://en.wikipedia.org/wiki/Main_Page#wikipedia">Go to the main page of Wikipedia.</a>
    </p>
  </body>
</html>

通过上述介绍,相信大家对创建HTML跳转链接代码已经有所了解,大家如果对此比较感兴趣,想了解更多相关知识,不妨来关注一下极悦的Java极悦在线学习,里面的课程内容细致全面,从入门到精通,对大家的学习一定会有所帮助。

提交申请后,顾问老师会电话与您沟通安排学习

免费课程推荐 >>
技术文档推荐 >>