美文网首页
HTML Links

HTML Links

作者: 春暖花开奇奇乐乐 | 来源:发表于2018-07-03 16:58 被阅读11次

    Note: A link does not have to be text. It can be an image or any other HTML element.

    Syntax

    In HTML, links are defined with the <a> tag:
    <a href="url">link text</a>

    Web Links

    Example: <a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>

    Note: Without a forward slash at the end of subfolder addresses, you might generate two requests to the server. Many servers will automatically add a forward slash to the end of the address, and then create a new request.

    Local Links

    The example above used an absolute URL (a full web address).

    A local link (link to the same web site) is specified with a relative URL (without http://www....).

    <a href="html_images.asp">HTML Images</a>

    HTML Link Colors

    By default, a link will appear like this (in all browsers):

    • An unvisited link is underlined and blue
    • A visited link is underlined and purple
    • An active link is underlined and red
      You can change the default colors, by using CSS:
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    a:link {
        color: green;
        background-color: transparent;
        text-decoration: none;
    }
    a:visited {
        color: pink;
        background-color: transparent;
        text-decoration: none;
    }
    a:hover {
        color: red;
        background-color: transparent;
        text-decoration: underline;
    }
    a:active {
        color: yellow;
        background-color: transparent;
        text-decoration: underline;
    }
    </style>
    </head>
    <body>
    
    <h2>Link Colors</h2>
    
    <p>You can change the default colors of links</p>
    
    <a href="html_images.asp" target="_blank">HTML Images</a> 
    
    </body>
    </html>
    

    HTML Links - The target Attribute

    The target attribute specifies where to open the linked document.

    The target attribute can have one of the following values:

    • _blank - Opens the linked document in a new window or tab
    • _self - Opens the linked document in the same window/tab as it was clicked (this is default)
    • _parent - Opens the linked document in the parent frame
    • _top - Opens the linked document in the full body of the window
    • framename - Opens the linked document in a named frame

    This example will open the linked document in a new browser window/tab:
    <a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

    Tip: If your webpage is locked in a frame, you can use target="_top" to break out of the frame: <a href="https://www.w3schools.com/html/" target="_top">HTML5 tutorial!</a>

    HTML Links - Image as Link

    It is common to use images as links:

    <a href="default.asp">
      <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
    </a>
    

    Note: border:0; is added to prevent IE9 (and earlier) from displaying a border around the image (when the image is a link).

    Link Titles

    The title attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element.

    <a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML section">Visit our HTML Tutorial</a>

    HTML Links - Create a Bookmark

    HTML bookmarks are used to allow readers to jump to specific parts of a Web page.

    Bookmarks can be useful if your webpage is very long.

    To make a bookmark, you must first create the bookmark, and then add a link to it.

    When the link is clicked, the page will scroll to the location with the bookmark.

    First, create a bookmark with the id attribute:
    <h2 id="C4">Chapter 4</h2>

    Then, add a link to the bookmark ("Jump to Chapter 4"), from within the same page:
    <a href="#C4">Jump to Chapter 4</a>

    Or, add a link to the bookmark ("Jump to Chapter 4"), from another page:
    <a href="html_demo.html#C4">Jump to Chapter 4</a>

    External Paths

    External pages can be referenced with a full URL or with a path relative to the current web page.

    This example uses a full URL to link to a web page:
    <a href="https://www.w3schools.com/html/default.asp">HTML tutorial</a>

    This example links to a page located in the html folder on the current web site:
    <a href="/html/default.asp">HTML tutorial</a>

    This example links to a page located in the same folder as the current page:
    <a href="default.asp">HTML tutorial</a>

    Chapter Summary

    • Use the <a> element to define a link
    • Use the href attribute to define the link address
    • Use the target attribute to define where to open the linked document
    • Use the <img> element (inside <a>) to use an image as a link
    • Use the id attribute (id="value") to define bookmarks in a page
    • Use the href attribute (href="#value") to link to the bookmark

    相关文章

      网友评论

          本文标题:HTML Links

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