A (Anchor) Label hyperlink

role

  • The use of the href

    Defines hyperlinks to link from one page to another

    will automatically add WWW first, and will automatically match HTTP or HTTPS. # same as above, specify HTTPS.

    The href attribute can also represent the path to the file to jump to

    # jumps to the a.html file in the server’s current access page file path, which is the relative path; # # This time represents a jump to a.html files one level above the current file directory

    #

    The href attribute can also execute pseudo-protocol, javascript code

    #” #” #” #

    # # [email protected]”>[email protected] # These two are empty javascript code that executes to prevent the page from refreshing and thus listening for the click event

    The target property specifies where the linked document is opened (where the page is opened from) and can be as follows:

    The browser always loads the target document in a new, unnamed window. Parent # opens on the parent page. Top # opens on the top-level page target=”_blank|_self|_parent|_top|framename”>

    The Download properties

    <a href="/images/myw3schoolimage.jpg" download="w3logo">

    There is no limit to this value. The browser will automatically detect the correct file extension and add it to the file (.img,.pdf,.txt,.html, etc.).

    The use of the img

    <img SRC ="dog.jpg" Alt ="dog.jpg" >

    SRC: indicates the address or link of the image. Alt: Used by screen readers to read to people with dyslexia and, if the image loads incorrectly, to display the line telling the user what the image should have been.

    If the image is not loaded successfully

    <body> <img id="a_photo" SRC ="a.jpg" Alt =""> <script> a_photo. Onload = function() {console.log(' image.load success! '); }; A_photo.onerror = function() {console.log(' Picture loaded successfully! '); a_photo.src = "/404.jpg"; }; </script> </body>Copy the code

    There are two loading methods for the IMG tag. If the loading fails, you can replace the image that failed to be loaded to display 404 images, which improves product usability.

    Fit the image size on mobile as well

    <style lang="css"> * { margin: 0; padding: 0; box-sizing: border-box; } img { max-width: 100%; } </style> for mobile devices, you can set the img tag to a maximum width of 100% in the CSS file, so that the left and right sides will not be overscreen, and will not affect the normal display. Thead and tfoot can each have only one table, while tBody can have more than one. Tfoot must appear before tBody so that the browser can render the end of the table before receiving the body data, which helps speed up the display of the table. This is especially important for large tables. Border-collapse: collapse represents border consolidationCopy the code