zoukankan      html  css  js  c++  java
  • HTML 超链接

    超链接可以让我们从一个页面跳转到另一个页面,或者是当前页面的某个指定位置

    超链接也是一个行内元素,但是在a 标签中可以嵌套除了它自身之外任何的元素,div也可以放

    注意:

      1、<a> 标签文本颜色不能继承;2、<a>下划线颜色跟随文本颜色变化进行变化;3、<a>标签不可嵌套a标签

    补充:(在编辑器中输入 lorem + Tab键 就会自动生成一段文字)

    关于路径

      绝对路径:完整的网址,例如  https://www.baidu.com/

      相对路径:当需要跳转服务器内部的页面时,一般都会使用相对路径。

    所有路径都是相对于当前目录的,所有以才叫当前目录。

    相对路径会使用  . 或者是  .. 开头,使用 / 斜杠隔开目录,一个 / 一级目录

      ./   表示当前文件所在目录。

    例如,当前文件是 index.html,那么 ./ 就是 index.html 所在目录

      ../  表示当前文件的上一级目录

    例如,当前文件是 index.html,那么 ../ 就是 index.html 所在的上一级目录

       ./ 目录名:表示当前目录的下一级目录

    例如,当前文件是 index.html,那么 ./image/one.jpg   就是 index.html 所在目录的同一目录的image文件夹中的 one.jpg

    ./ 可以忽略不写,如果不写./ 也不写 ../ 就相当于写了 ./

     

    使用a 标签定义超链接

    属性

    【href】 制定跳转的目标路径地址,如果没有指定链接,a标签将不是一个链接

      - 绝对URL,一个外部网站的的地址  <a href='http://www.baidu.com'>百度</a>

      - 相对URL,也可以是内部页面的地址 <a href='demo.html'>……</a>

      - 锚URL,指向页面中的锚 <a href='#page'>……</a>

    href的三种用法:

    1、链接到不同网址,跳转页面

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

    2、下载地址

        <a href="demo.zip">下载文件</a>

    3、锚点链接

    (1)回到页面顶部

    可以将超链接的 href 属性设置为 #,这样点击超链接之后页面不会发生跳转,而是跳转到当前页面的顶部位置

    #总是回到顶部

    可以使用 href=“#top” 或者 href=“#” 链接返回到页面顶部。这种行为是 HTML5新特性

    <a href="#top"></a>

    或是

    <a href="#"></a>

    (2)跳转到页面底部

    网页的底部就是最后一个标签所在的位置,就可以使超链接 href 属性值设置为 ‘ # + 最后一个元素 id属性值 ’。

    href:#id名

    <a href='#bottom'>跳转到页面底部</a>

    (3)跳转到页面任一个指定位置

    可以跳转到页面中的指定位置,只需要将 href属性设置为 '# + 目标元素的id属性值'

    id属性(唯一不重复的)

      - 每一个标签都可以添加一个 id属性

      - id 属性就是元素的唯一标识,同一个页面中不能出现重复的 id属性

    注意:

      在开发中可以将 # 作为超链接的路径的占位符使用,# 会跳转到页面的顶部

      可以使用  javascript:;  来作为 href 的属性,此时点击这个超连接什么都不会发生

      href 和 src 之间的区别(href 跳转/src 引入文件)

    • href(超文本引用 hypetext reference)表示当前页面引用了别处的内容
    • src(source)表示来源地址,把其他内容引入到当前页面中来,引入外部文件
    • 所以 <img>、<script>、<iframe>应该使用 src,<link> 和 <a> 使用 href

    【target】属性,用来指定超链接打开的位置

    可选值:

      _self 默认值,用来指定超链接打开的位置

      _blank 空白的,在一个新的标签页打开超链接

      _parent 在父框架集中打开

      _top 在整个窗口中打开

    【hreflang】该属性用于指定链接文档的语言种类

    【download】download 属性用来设置下载文件的名称

    <a href="test.zip" download="date">下载</a> 

    【rel】指定了目标对象到连接对象的关系。

    •   alternate 相当于当前文档的可替换呈现
    •   author  当前文档的作者
    •   bookmark  链接最近的父级元素的永久链接
    •   external  表明这个链接,是一个相对于当前网站的外部资源,点击链接会离开当前网站
    •   help 当前上下文相关的帮助链接
    •   license  当前文档的许可证
    •   next  后一篇文档
    •   prev 后一篇文档
    •   nofollow  当前文档
    •   prefetch   预加载链接指向的页面
    •   search   用于搜索当前文档或相关文档的资源
    •   tag   给当前文档加标签
    <a href="prev.html" rel="prev prefetch prerender">前一页</a>
    <a href="next.html" rel="next prefetch prerender">后一页</a>
        //当然prefetch也可以用于预加载其他类型的资源
    <link rel="prefetch prerender" href="test.img">
  • 相关阅读:
    js call
    正则简单学习
    第10天:apply和call、bind、函数作为参数、返回值使用、闭包、递归的样例
    第9天:原型、继承、函数使用推荐以及this的指向
    Identity Server introspect 调用 /connect/introspect
    windows forget jenkins password.
    转载(Asp.net Core 中试使用ZKWeb.System.Drawing)
    EFCore & Mysql migration on Production
    HTML to PDF pechkin
    Log4net
  • 原文地址:https://www.cnblogs.com/nyw1983/p/12404561.html
Copyright © 2011-2022 走看看