As a front-end handsome guy/pretty girl, I always deal with HTML tags when developing. I’m going to introduce you to the dry stuff, the dry stuff, the dry stuff, and uh, uh, uh, that’s what HTML tags are, so get to know them.

Before we get started, here are the words you need to know!Mnemonic bar can help you remember, pronunciation can refer toEuropean dictionary.

A Usage of labels

1. First let’s write an A tag

<a href="Url of the hyperlink">Hyperlink description</a>
Copy the code

herf ： hypertxtx refrence(Hypertext reference)

Effect of 2.

3. What is the target of A

Target specifies which page to open the hyperlink on, so you can get a feel for these uses. The domestic front end will open the window blank page again, the foreign front end most will choose to open the current page.

<a href="//baidu.com" target="_blank">baidu</a>Open on a blank page<a href="//baidu.com" target="_self">baidu</a>Current page open<a href="//baidu.com" target="_parent">baidu</a>The parent window of the current page opens<a href="//baidu.com" target="_top">baidu</a>The top-level window of the current page opensCopy the code

The use of the IMG tag

<img width="600" height="700" src="OIP.jpg" alt="Don't go">
Copy the code

  1. Purpose: Issue a get request to display an image

  2. Alt/height/wigth/SRC attribute

    • Alt displays images when they can’t be found

    • Height and wight is the height and width of the image. Do not write px after the image, because only pixels are supported by default.

      When we write only one of them, the other one ADAPTS,

      If I did it all, it would be distorted.

    • SRC source meaning in Chinese

    The bottom line for front end engineers – never distort the image

  3. Onlad/onerror event

In short, if the image of the IMG tag does not load successfully, what is displayed in the background?

  1. responsive

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

Usage of the table tag

  1. Syntax: Table contains only 3 tags, head, body and tail
    • thead
    • tbody
    • tfoot
<body>
    <table>
        <thead>
            <tr>// table row<th>English</th>
                <th>translation</th>
                <th>pronunciation</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>hyper</td>// table date List data<td>super</td>
                <td>Afraid of</td>
            </tr>
        </tbody>
        <tfoot></tfoot>
    </table>
</body>
Copy the code
  1. Table related styles
    • able-layout: fixed;
    • table-layout: auto;
    • border-collapse: collapse; // Control whether the border is merged, default is not merged
    • border-spacing: 60px; // Control the distance between the border
    • The example effect is as follows: Auto will always be adaptive to the word count and other attributes, while fixed is as average as possible.
    table { table-layout: auto; Automatic table - layout: fixed; Try to average}Copy the code

    This is done with Fixde, the pixels in the three red areas don’t change with the number of bytes of the name, but if you use Auto, you’ll notice a difference.

Other thoughts

Those of you who have just started to learn HTML, as long as you take notes carefully, understand the commonly used tags, and make several web pages, I believe you will be able to do it easily. Next class, I will share a website project to build, and we will see you next time!