HTML |链接

5113

什么是链接？

null

它是从一个web资源到另一个web资源的连接。链环有两端，锚和方向。链接从“源”锚点开始，指向“目标”锚点，该锚点可以是任何Web资源，例如图像、视频剪辑、声音片段、程序、HTML文档或HTML文档中的元素。

HTML链接语法

在HTML中使用“a”标记指定链接。

图片[1]-HTML |链接-yiteyi-C++库

语法解释： 

href : The href attribute is used to specify the destination address of the link used.Text link : The text link is the visible part of the link.

输入：

html

<!DOCTYPE html>
< html >
< h3 >Example Of Adding a link</ h3 >
< body >
< p >Click on the following link</ p >
< a href = " https://www.geeksforgeeks.org " >GeeksforGeeks</ a >
</ body >
</ html > 





                  














     输出：     


  图片[2]-HTML |链接-yiteyi-C++库 




     内部链接   


  内部链接是一种超链接，其目标或目的地是同一网站或域上的资源，如图像或文档。       输入：     






    html   












                           


         


                                                           


         


                             


         


                                                                                         






















                           <!DOCTYPE html>                         


                           <                                        html                                        >                         


                           <                                        h3                                        >Internal Link And External Link Example</                                        h3                                        >                         


                           <                                        body                                        >                         


            


                           <                                        p                                        ><                                        a                                        href                                        =                                        "html_contribute.asp/"                                        >GeeksforGeeks Contribute                         


                           </                                        a                                        > It is a link to the contribute page on GeeksforGeeks' website.</                                        p                                        >                         


            


            


            


                           <                                        p                                        ><                                        a                                        href                                        =                                        "                             https://www.geeksforgeeks.org                            "                                        >GeeksforGeeks                         


                           </                                        a                                        > It is a link to the GeeksforGeeks website on the World Wide Web.</                                        p                                        >                         


            


            


                           </                                        body                                        >                         


                           </                                        html                                        >                         












     






                  






                  














     输出：     


  图片[3]-HTML |链接-yiteyi-C++库 




   




     更改HTML中的链接颜色   


  不同类型的链接以不同的格式出现，例如：   


    

  1.    默认情况下，未访问的链接会显示下划线和蓝色。  
    2. 

  2.    默认情况下，已访问的链接会显示下划线和紫色。  
    3. 

  3.    默认情况下，活动链接会显示下划线和红色。  
    4. 



  使用CSS可以改变链接的外观。       输入：     






    html   












                           


         


                                                           


         


                             


         


                                                                                         






















                           <!DOCTYPE html>                         


                           <                                        html                                        >                         


                           <                                        head                                        >                         


                           <                                        style                                        >                         


                           a:link {                         


                                                     color: red;                         


                                                     background-color: transparent;                         


                           }                         


                           a:visited {                         


                                                     color: green;                         


                                                     background-color: transparent;                         


                           }                         


                           a:hover {                         


                                                     color: blue;                         


                                                     background-color: transparent;                         


                           }                         


                           a:active {                         


                                                     color: yellow;                         


                                                     background-color: transparent;                         


                           }                         


                           </                                        style                                        >                         


                           </                                        head                                        >                         


                           <                                        body                                        >                         


            


            


                           <                                        p                                        >Changing the default colors of links</                                        p                                        >                         


            


            


            


                           <                                        p                                        >Visited Link</                                        p                                        >                         


            


                           <                                        a                                        href                                        =                                        "                             https://www.geeksforgeeks.org                            "                                        >GeeksforGeeks</                                        a                                        >                         


            


            


                           <                                        p                                        >Link</                                        p                                        >                         


            


            


                           <                                        a                                        href                                        =                                        "                             https://facebook.com                            "                                        >facebook</                                        a                                        >                         


            


            


                           <                                        p                                        >hovering effect</                                        p                                        >                         


            


            


                           <                                        a                                        href                                        =                                        "                             https://www.geeksforgeeks.org                            "                                        >GeeksforGeeks</                                        a                                        >                         


            


                           </                                        body                                        >                         


                           </                                        html                                        >                         












     






                  






                  














     输出：     


  图片[4]-HTML |链接-yiteyi-C++库 




     链接中的目标属性   


  目标属性用于指定打开链接文档的位置。下表列出了可在目标属性中使用的各种选项：   


  图片[5]-HTML |链接-yiteyi-C++库 


     输入：     






    html   












                           


         


                                                           


         


                             


         


                                                                                         






















                           <!DOCTYPE html>                         


                           <                                        html                                        >                         


                           <                                        body                                        >                         


            


                           <                                        h3                                        >Various options available in the Target Attribute</                                        h3                                        >                         


            


            


                           <                                        p                                        >If you set the target attribute to "_blank",                         


                           the link will open in a new browser window or tab.</                                        p                                        >                         


            


                           <                                        a                                        href                                        =                                        "                             https://www.geeksforgeeks.org                            "                                        target                                        =                                        "_blank"                                        >GeeksforGeeks</                                        a                                        >                         


            


            


                           <                                        p                                        >If you set the target attribute to "_self",                         


                           the link will open in the same window or tab.</                                        p                                        >                         


            


                           <                                        a                                        href                                        =                                        "                             https://www.geeksforgeeks.org                            "                                        target                                        =                                        "_self"                                        >GeeksforGeeks</                                        a                                        >                         


            


            


                           <                                        p                                        >If you set the target attribute to "_top",                         


                           the link will open in the full body of the window.</                                        p                                        >                         


            


                           <                                        a                                        href                                        =                                        "                             https://www.geeksforgeeks.org                            "                                        target                                        =                                        "_top"                                        >GeeksforGeeks</                                        a                                        >                         


            


            


                           <                                        p                                        >If you set the target attribute to "_parent",                         


                           the link will open in the parent frame.</                                        p                                        >                         


            


                           <                                        a                                        href                                        =                                        "                             https://www.geeksforgeeks.org                            "                                        target                                        =                                        "_parent"                                        >GeeksforGeeks</                                        a                                        >                         


            


                           </                                        body                                        >                         


                           </                                        html                                        >                         












     






                  






                  














     输出：     


  图片[6]-HTML |链接-yiteyi-C++库 




   




     在HTML中使用图像作为链接   


  图像可用于创建指向指定url的链接。       输入：     






    html   












                           


         


                                                           


         


                             


         


                                                                                         






















                           <!DOCTYPE html>                         


                           <                                        html                                        >                         


                           <                                        body                                        >                         


            


                           <                                        h3                                        >Using Image as a link</                                        h3                                        >                         


            


            


                           <                                        p                                        >Click on the image to visit GeeksforGeeks homepage.</                                        p                                        >                         


            


            


                           <                                        a                                        href                                        =                                        "                             https://www.geeksforgeeks.org                            "                                        >                         


                                                     <                                        img                                        src                                        =                                        "gfg_200X200.jpeg"                                        alt                                        =                                        "GeeksforGeeks"                         


                           style                                        =                                        "width:80px;height:80px;border:0"                                        >                         


                           </                                        a                                        >                         


            


                           </                                        body                                        >                         


                           </                                        html                                        >                         












     






                  






                  














     输出：     


  图片[7]-HTML |链接-yiteyi-C++库 




   




     为网页创建书签链接   


  书签是一个链接，可以用来跳转到网页的指定部分。如果网页很长，书签非常有用。       创建书签的步骤包括：         1.使用id属性创建书签。     


  图片[8]-HTML |链接-yiteyi-C++库 


     2.将网页的指定部分添加到书签。     


  图片[9]-HTML |链接-yiteyi-C++库 


     输入：     






    html   












                           


         


                                                           


         


                             


         


                                                                                         






















                           <!DOCTYPE html>                         


                           <                                        html                                        >                         


                           <                                        body                                        >                         


            


            


                           <                                        p                                        ><                                        a                                        href                                        =                                        "#T11"                                        >Jump to Topic 11</                                        a                                        ></                                        p                                        >                         


            


            


                           <                                        p                                        ><                                        a                                        href                                        =                                        "#T17"                                        >Jump to Topic 17</                                        a                                        ></                                        p                                        >                         


            


            


                           <                                        p                                        ><                                        a                                        href                                        =                                        "#T20"                                        >Jump to Topic 20</                                        a                                        ></                                        p                                        >                         


            


                           <                                        h2                                        >Topic 1</                                        h2                                        >                         


            


                           <                                        p                                        >paragraph 1                         


                           .....</                                        p                                        >                         


            


                           <                                        h2                                        >Topic 2</                                        h2                                        >                         


            


                           <                                        p                                        >paragraph 1                         


                           .....</                                        p                                        >                         


            


                           <                                        h2                                        >Topic 3</                                        h2                                        >                         


            


                           <                                        p                                        >paragraph 1                         


                           .....</                                        p                                        >                         


            


                           <                                        h2                                        >Topic 4</                                        h2                                        >                         


            


                           <                                        p                                        >paragraph 1                         


                           .....</                                        p                                        >                         


            


                           <                                        h2                                        >Topic 5</                                        h2                                        >                         


            


                           <                                        p                                        >paragraph 1                         


                           .....</                                        p                                        >                         


            


                           <                                        h2                                        >Topic 6</                                        h2                                        >                         


            


                           <                                        p                                        >paragraph 1                         


                           .....</                                        p                                        >                         


            


                           <                                        h2                                        >Topic 7</                                        h2                                        >                         


            


                           <                                        p                                        >paragraph 1                         


                           .....</                                        p                                        >                         


            


                           <                                        h2                                        >Topic 8</                                        h2                                        >                         


            


                           <                                        p                                        >paragraph 1                         


                           .....</                                        p                                        >                         


            


                           <                                        h2                                        >Topic 9</                                        h2                                        >                         


            


                           <                                        p                                        >paragraph 1                         


                           .....</                                        p                                        >                         


            


                           <                                        h2                                        >Topic 10</                                        h2                                        >                         


            


                           <                                        p                                        >paragraph 1                         


                           .....</                                        p                                        >                         


            


                           <                                        h2                                        id                                        =                                        "T11"                                        >Topic 11</                                        h2                                        >                         


            


                           <                                        p                                        >paragraph 1                         


                           .....</                                        p                                        >                         


            


                           <                                        h2                                        >Topic 12</                                        h2                                        >                         


            


                           <                                        p                                        >paragraph 1                         


                           .....</                                        p                                        >                         


            


                           <                                        h2                                        >Topic 13</                                        h2                                        >                         


            


                           <                                        p                                        >paragraph 1                         


                           .....</                                        p                                        >                         


            


                           <                                        h2                                        >Topic 14</                                        h2                                        >                         


            


                           <                                        p                                        >paragraph 1                         


                           .....</                                        p                                        >                         


            


                           <                                        h2                                        >Topic 15</                                        h2                                        >                         


            


                           <                                        p                                        >paragraph 1                         


                           .....</                                        p                                        >                         


            


                           <                                        h2                                        >Topic 16</                                        h2                                        >                         


            


                           <                                        p                                        >paragraph 1                         


                           .....</                                        p                                        >                         


            


                           <                                        h2                                        id                                        =                                        "T17"                                        >Topic 17</                                        h2                                        >                         


            


                           <                                        p                                        >paragraph 1                         


                           .....</                                        p                                        >                         


            


                           <                                        h2                                        >Topic 18</                                        h2                                        >                         


            


                           <                                        p                                        >paragraph 1                         


                           .....</                                        p                                        >                         


            


                           <                                        h2                                        >Topic 19</                                        h2                                        >                         


            


                           <                                        p                                        >paragraph 1                         


                           .....</                                        p                                        >                         


            


                           <                                        h2                                        id                                        =                                        "T20"                                        >Topic 20</                                        h2                                        >                         


            


                           <                                        p                                        >paragraph 1                         


                           .....</                                        p                                        >                         


            


            


                           </                                        body                                        >                         


                           </                                        html                                        >                         












     






                  






                  














     输出：     


   


     在HTML中创建下载链接      可以创建pdf、doc或zip文件的文本链接，使其可下载。       输入：     






    html   












                           


         


                                                           


         


                             


         


                                                                                         






















                           <!DOCTYPE html>                         


                           <                                        html                                        >                         


                                      


                           <                                        h3                                        >Creating a download link</                                        h3                                        >                         


            


                                                     <                                        body                                        >                         


                                                     <                                        a                                        href                                        =                                        "GeeksforGeeks | A computer science portal for geeks.pdf"                                        >Download PDF File</                                        a                                        >                         


                                                     </                                        body                                        >                         


                                      


                           </                                        html                                        >                         












     






                  






                  














     输出：：     


   


     支持的浏览器：   


    

  •    谷歌浏览器  
    • 

  •    微软边缘  
    • 

  •    火狐  
    • 

  •    歌剧  
    • 

  •    游猎  
    • 



 


                    

        
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
Html
    

    
喜欢就支持一下吧
点赞13
        分享

        

            

                
                
CPPKU的头像-yiteyi-C++库

                
            

            
VS调试报错：f:\dd\vctools\vc7libs\ship\atlmfc\src\occcont.cpp line:925的原因-yiteyi-C++库
VS调试报错：f:\dd\vctools\vc7libs\ship\atlmfc\src\occcont.cpp line:925的原因
VS调试报错：f:\dd\vctools\vc7libs\ship\atlmfc\src\occcont.cpp li...
8年前 2.6W+
关于”PostgreSQL错误：关系[表]不存在“问题的原因和解决方案-yiteyi-C++库
关于”PostgreSQL错误：关系[表]不存在“问题的原因和解决方案
关于”PostgreSQL错误：关系[表]不存在“问题的原因和解决方案
7年前 9287
Easylogging++入门教程（三）Easylogging++ 配置-yiteyi-C++库
Easylogging++入门教程（三）Easylogging++ 配置
Easylogging++入门教程（三）Easylogging++ 配置
9年前 9054
常见的小波基函数有哪些？如何选择合适的小波基函数？-yiteyi-C++库
常见的小波基函数有哪些？如何选择合适的小波基函数？
常见的小波基函数有哪些？如何选择合适的小波基函数？
8年前 8484
TiXmlDocument变量LoadFile()加载XML文档失败的原因有哪些？-yiteyi-C++库
TiXmlDocument变量LoadFile()加载XML文档失败的原因有哪些？
TiXmlDocument变量LoadFile()加载XML文档失败的原因有哪些？
10年前 6675
Easylogging++入门教程（一）Easylogging++日志库简介-yiteyi-C++库
Easylogging++入门教程（一）Easylogging++日志库简介
Easylogging++入门教程（一）Easylogging++日志库简介
9年前 6608

        

    
    

        
    



            

                
相关推荐

            
什么是index.html？如何创建和使用index.html？-yiteyi-C++库
什么是index.html？如何创建和使用index.html？
什么是index.html？如何创建和使用index.html？
4年前 405
“HTTP 404找不到”错误代码及解决方案-yiteyi-C++库
“HTTP 404找不到”错误代码及解决方案
“HTTP 404找不到”错误代码及解决方案
4年前 189
编程中的源代码是什么？-yiteyi-C++库
编程中的源代码是什么？
编程中的源代码是什么？
4年前 143
HTML和Word中的项目符号类型和创建-yiteyi-C++库
HTML和Word中的项目符号类型和创建
HTML和Word中的项目符号类型和创建
4年前 136
如何在HTML中用CSS改变字体颜色？-yiteyi-C++库
如何在HTML中用CSS改变字体颜色？
如何在HTML中用CSS改变字体颜色？
4年前 133
如何定义Html表？-yiteyi-C++库
如何定义Html表？
如何定义Html表？
4年前 127