A label:

<a href=""></a>

Function:

  • Go to external page
  • Jump to internal anchor point
  • Jump to email/phone

Attributes (parts) : href, target

1. Href: Hyper reference

ULR address used to point to a page, where the href value can be url, path, or pseudo protocol, as shown in the following example:

  • <a href="//baidu.com">
  • <a href="a/b/c.html">c.html</a>
  • <a href="javascript:alert(1);" </a>

Website :(third kind recommended)

  • https://baidu.com
  • http://baidu/com
  • //baidu.com

1. Target: specifies where to display the linked resource. The target values include _blank, _self, _top, _parent.

(Note that Google does not allow iframe to be nested, so the following iframe will fail to open the Google search page)

  • Open Google in a new page:<a href="https://google.com" target="_blank">google</a>
  • If you open Google in the current page and do not write target, the default is target=_self:<a href="https://google.com" target="_self">google</a>
  • Open Google on the topmost page (this only works if there are nested pages, and if there is only one page, it works the same as target=_self) :<a href="https://google.com" target="_top">google</a>
  • For multiple nested pages (≥2), open Google on the page above the current page (if the nested page is 2, the same effect as target=_top)) : <a href="https://google.com" target="_parent"> Google </a>
  • You can customize the value of target, for example, set the value of target to yyy
    <a href="//google.com" target="yyy">google</a>
    <a href="//baidu.com" target="yyy">baidu</a>
Copy the code

So when you click Google to open Google window, then click Baidu to open Baidu window, baidu will replace the Google window opened previously

(In this case, the browser will open a page called YYy. Verify method: Open developer tool in baidu page, click Console, input window.name, then you can see “YYy”)

  • You can also name an iframe as a value of Target, and you can create a page that switches between Google and Baidu
    <a href="//google.com" target="yyy">google</a>
    <a href="//baidu.com" target="yyy">baidu</a>
    <hr>
    <iframe style="border: none; width:100%; height: 800px;" src="" name="yyy"></iframe>
    <iframe style="border: none; width:100%; height: 800px;" src="" name="yyy"></iframe>
Copy the code

The table tag:

Purpose: Mainly used for table making

Related tags:

  • thead
  • tbody
  • tfoot
  • Tr: table row
  • Th: short for table head, the table header is bold by default
  • Td: short for table data

Simple application:

 <table>
        <thead>
            <tr>
                <th>English</th>
                <th>translation</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>hyper</td>
                <td>Excited, highly strung, super</td>
            </tr>
            <tr>
                <td>target</td>
                <td>The target</td>
            </tr>
            <tr>
                <td>reference</td>
                <td>reference</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>empty</td>
                <td>empty</td>
            </tr>
        </tfoot>
    </table>
Copy the code

The relevant styles

  • Table-layout: an algorithm that determines the rows and columns of a table. Its values include auto and fixed. Auto is the default, which makes the width of the table cells vary with the amount of data in the table; Fixed Causes the width of a table cell to vary with the number of cells.
  • Table-collapse: When table cells have boundaries, to eliminate gaps between cell boundaries.
  • table-spacing: When the table cell has a boundary, its value is used to determine the size of the cell boundary gap; whenborder-spacing: 0;, the cell boundaries disappear, but the overlapped part of the cell boundaries will appear thicker.

Simple application:

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <style>
        table {
            width: 300px;
            table-layout: auto;
            /* Table layout */
            border-spacing: 0;
            /* Cell spacing size */
            border-collapse: collapse;
            /* Eliminate cell spacing */
        }

        td.th {
            border: 2px solid thistle;
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th></th>
                <th>The little red</th>
                <th>Xiao Ming</th>
                <th>xiaoying</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>mathematics</th>
                <td>61</td>
                <td>91</td>
                <td>85</td>
            </tr>
            <tr>
                <th>Chinese language and literature</th>
                <td>70</td>
                <td>82</td>
                <td>92</td>
            </tr>
            <tr>
                <th>English</th>
                <td>100</td>
                <td>97</td>
                <td>87</td>
            </tr>
        </tbody>
        <tfoot>
            <th>Total score</th>
            <td>231</td>
            <td>270</td>
            <td>264</td>
        </tfoot>
    </table>
</body>
Copy the code

Img tags:

Function:

Issue a GET request to display an image. (Visible under Method of Network in developer tools)

Attributes (part) :

  • SRC: the path to the image, which is mandatory
  • Alt: short for alternative, a term used to describe the content of an image if the image does not load
  • height: Determines the height of the image, for example< img SRC = "..." alt="XX" height="100" />
  • width: Determines the height of the image, for example< img SRC = "..." alt="XX" width="100" />. It’s worth noting that,If the height (width) of the picture is specified, its width (height) will be automatically set; If the width and height of the picture are specified at the same time, the picture may be distorted

Events:

  • Onload: Image loading error
  • Onerror: The image is loaded successfully

Usage:

<img id="xxx" src="cat.png" alt="A little cat." width="300" />
    <script>
        xxx.onload = function(){
            console.log("Image loaded successfully");
        };
        xxx.onerror = function(){
            console.log("Image load failed");
            xxx.src = "/404.png"; 
            /* 404.png is a self-set image, which is used to display the image in case the cat image fails to load */
        };
    </script>
Copy the code

Response:

Word-wrap: break-word! Important; “> < span style =” max-width: 100%

Usage: Write in head

<style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        img {
            max-width: 100%;
        }
    </style>
Copy the code

Write at the end:

HTML tag learning focuses on practice and memorization. It took me an afternoon to memorize the simple uses of these three labels, but I gained a point by memorizing them.