美文网首页JavaWeb
001_a标签用法全解析

001_a标签用法全解析

作者: 53b3f4658edc | 来源:发表于2017-10-03 08:51 被阅读8次

    大家对a标签的认识,大概就是知道a标签可以做链接的跳转,但是下面的用法你都知道吗?今天小甜甜就带领大家一起感受一下a标签的强大功能。

    a标签的用法:

    • 常规跳转链接
    • 假链接(跳转到本页面)
    • 锚点(在当前页面的不同位置进行跳转/跳转到另一个页面的指定位置)
    • 下载源

    欢迎补充新的用法

    格式:
    <a href="http://www.baidu.com">百度一下</a>

    作用:
    用于从一个页面链接到另一个页面
    注意事项:
    在a标签之间一定要写上文字, 如果没有, 那么在页面上找不到这个标签a标签也叫做超级链接或超链接

    a标签的属性:


    测试代码:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title></title>
            <!--
                作者:273496225@qq.com
                时间:2017-08-29
                描述:
                    base标签:
                    -格式: <base target="_blank" />
                    -作用:一次性指定所有的a标签打开方式
                    -注意事项:
                        +base必须嵌套在head标签里面
                        +如果标签上指定了target,base中也指定了target,那么会按照标签上指定的来执行
                        -base标签和a标签结合使用
                            如果每个a标签都想在新页面中打开,那么逐个设置a标签的target属性比较麻烦, 这时我们可
                            以使用base和a标签结合的方式,一次性设置有a标签都在新页面中打开
            -->
            <base target="_blank" />
            
        </head>
        <body>
            <!--
                作者:273496225@qq.com
                时间:2017-08-28
                描述:
                    a标签(anchor):
                        -格式:<a href="http://www.it666.com">江哥博客</a>
                    -作用: 用于从一个页面链接到另一个页面
                    -注意事项:
                        +在a标签之间一定要写上文字, 如果没有, 那么在页面上找不到这个标签(包含的内容都可以进行点击)
                        +a标签也叫做超级链接或超链接
                        +a标签不换行显示
                        +去公网网页,要加上http://或者https://,本地网页可以直接使用相对路径/绝对路径
    
                    -a标签的属性
                        属性名称                            作用
                        href(hypertext reference)           指定跳转的目标地址
                        target                              告诉浏览器是否保留原始界面, _blank保留, _self不保留
                        title                               悬停文本(介绍这个链接, 只有在鼠标移动到超链接上时才会显示)
            -->
            <!-- 1.去别的网页:href属性 -->
            <a href="http://www.baidu.com">去百度</a>
            
            <!-- 2.跳转形式:target属性-->
            <!-- 2.1.给跳转的网页打开新的页面:target="_blank" -->
            <a href="http://www.baidu.com" target="_blank">再去百度</a>
            <!-- 2.2.跳转的网页在当前页面打开(默认就是这样的):target="_self" -->
            <a href="http://www.baidu.com" target="_self">再再去百度</a>
            
            <!-- 3.点击图片进行跳转:a标签包含的的内容,都可以进行点击 -->
            <a href="http://www.baidu.com">
                    ![](img/baidu.png)
            </a>
            
            <!-- 4.鼠标悬停在链接上显示提示信息:title="提示信息" -->
            <a href="http://www.baidu.com" title="这是去百度的链接">再再再去百度</a>
    
            <!-- 
                5.假链接跳转到本页:href="#"/href="javascript:" 
                    -使用场景:
                        +刚刚写网页的时候,还不能进行真实的跳转(别的网页还没有写出来),就使用假链接占位
                        +返回顶部
                    -javascript:;:
                        点击之后停留在本页面的当前位置
                    -#:
                        点击之后回到本页面的顶部位置(所以回到顶部功能就可以使用这个)
            -->
            <a href="#">假链接1</a>
            <a href="javascript:;">假链接2</a>
            
            <!--
                6.锚点:href="[HTML文件位置]#id名"
                    -使用场景:做目录
                    -跳转到当前页面指定位置(锚点链接)
                        +格式<a href="#location">跳转到指定位置</a>
                        +在页面的指定位置给任意标签添加一个id属性
                        +例如 <p id="location">这个是目标</p>
                    -跳转到指定页面的指定位置
                        +格式: <a href="01-锚点链接.html#location">跳转到指定位置</a>
                        +只需要在01-锚点链接.html页面添加一个id位置即可
            -->
            <!-- 6.1.去到本页面的指定位置:href="#id名" -->
            <a href="#">回到开头</a>                    <!-- 一个#,回到本页面开头 -->
            <a href="#test">去到test位置</a>            <!-- #id名,去到对应这个id的标签的位置,如果后面足够长,它将显示在最顶部 -->
            <!-- 6.2.去指定页面的指定位置:href="HTML文件名#id名" -->
            <a href="second.html#look">指定页面的指定位置</a>
            
            <!-- 7.做文件的下载:href="girl.zip"-->
            <a href="a.zip">打包下载</a>        <!-- 直接在href里面写上文件的路径就行 -->
            
            <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />哈哈
            <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />嘿嘿
            
            <h1 id="test">TEST</h1>
            <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />嘿嘿
            <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />嘿嘿
            <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />嘿嘿
            <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />嘿嘿
        </body>
    </html>
    
    

    更多信息:www.itcourse.top

    效果展示与源码下载:点击这里

    相关文章

      网友评论

        本文标题:001_a标签用法全解析

        本文链接:https://www.haomeiwen.com/subject/impxyxtx.html