<a>标签的基本使用详讲

  • herf 属性

       <!-- herf属性,指定打开的网页,引入链接用于跳转 -->
       <a href="http://www.baidu.com">11</a>
    
  • target属性

  <!-- 
        target属性:
             取值有:
                _self(默认值):直接跳转herf的链接,不会在打开另一个浏览器标签
                _blank:空白, 会打开另一个浏览器页面。
           和iframe一起使用时还有:
                _parent:在用iframe时候,self会在当前iframe显示新网页;
                                      blank会打开新标签;
                                      parent是在当前iframe的上一级打开新网页(不会新打开                                                                         标签页)
                _top:在使用多层iframe时,直接到顶层,也就是在当前标签页打开链接。
   -->
 <a href="http://www.baidu.com" target="_blank">1111</a>
  • a标签配合base使用

    <head>
        <meta charset="UTF-8">
        <!-- 
            base 是配合a使用的,a的属性都可以在这里配置
         -->
        <base href="https://www.baidu.com" target="_blank">   
    </head>
    <body>
        <!-- 这是访问的首页 -->
        <a href="">百度首页</a> 
        <!-- 若要访问拼接后的搜索地址 https://www.baidu.com/s?wd=aaa -->
        <a href="/s?wd=aaa">百度搜搜aaa</a>
    
        <!-- 如果再写一个全网址,则不会再自动拼接 -->
    
        <a href="https://www.jd.com/">京东</a>
    </body>
    
  • a 标签的锚(mao)点链接

    用a标签,使得当前页面跳转到对应的标题

    “#” 指的是跳转到原界面的顶端,不能省掉

    <body>
        <!-- 用a标签,使得当前页面跳转到对应的标题 -->
        <a href="#one">标题一</a>    “#” 指的是跳转到原界面的顶端,不能省掉
        <a href="#two">标题二</a>
        <a href="#three">标题三</a>
    
        <h2 id="one">标题一</h2>
        <p>11111111</p>
        <p>22222222</p>
        <p>11111111</p>
        <p>22222222</p>
        <p>11111111</p>
        <p>22222222</p>
        <p>11111111</p>
        <p>22222222</p>
        <p>11111111</p>
        <p>22222222</p>
        <!-- br 换行标签 -->
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    
        <h2 id="two">标题二</h2>
        <p>11111111</p>
        <p>22222222</p>
        <p>11111111</p>
        <p>22222222</p>
        <p>11111111</p>
        <p>22222222</p>
        <p>11111111</p>
        <p>22222222</p>
        <p>11111111</p>
        <p>22222222</p>
        <!-- br 换行标签 -->
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
       
        <h2 id="three">标题三</h2>
        <p>11111111</p>
        <p>22222222</p>
        <p>11111111</p>
        <p>22222222</p>
        <p>11111111</p>
        <p>22222222</p>
        <p>11111111</p>
        <p>22222222</p>
        <p>11111111</p>
        <p>22222222</p>
        <!-- br 换行标签 -->
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    
  • a 标签的伪链接

    点击a时候,不进行页面跳转,可以做一些其他事件,比如出发js事件

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,350评论 0 11
  • 第一章 1、使用浏览器去访问的程序,叫网页 2、web代码存放在服务器 代码分为两种:① 运行在浏览器端:前端代...
    fastwe阅读 3,487评论 0 2
  • 7.1 压缩图片 一、基础知识 1、图片的格式 jpg:最常见的图片格式。色彩还原度比较好,可以支持适当压缩后保持...
    AndroidMaster阅读 2,589评论 0 13
  • 概述 在网易云课堂学习李南江老师的《从零玩转HTML5前端+跨平台开发》时,所整理的笔记。笔记内容为根据个人需求所...
    墨荀阅读 2,393评论 0 7
  • 浏览器与服务器的基本概念 浏览器(安装在电脑里面的一个软件) 作用: ①将网页内容渲染呈现给用户查看。 ②让用户通...
    云还灬阅读 1,166评论 0 0