Front-end lesson 2, HTML, alt, title, width/height, border, <a> hyperlink, target, tr, td, th

Table of Contents

1. title:

?2. alt

3. width/height

4. border

5. Hyperlink

6. target

7. tr

8. td

9.th

10. rowspan

一、title: 

 Look at the beauty Yujie style <img src=" hhh.png" title=" like" >
As long as your mouse is there, it will display the title logo behind you

2. alt

My computer may have some small problems that prevent this number from being displayed

Look at the beauty Yu Jie Feng<img src=" hhh.pn" alt=" like" >
When the image cannot be loaded, like

will appear.

三、width/heigh

 Look at the beauty Yu Jie Feng <img src="hhh.png" width="1000",heigh="1000" >
width: width, height: height, (just change one of height and width, and the other will scale proportionally, otherwise the picture will be unbalanced.

Four. border

Border, the parameter is the width in pixels, one is set with CSS (just a brief introduction)

This is a link that represents a jump. This click will reach Baidu.

<a href="https://www.baidu.com">Jump to Baidu</a>
The following text jumps to Baidu. You must write it. I mean this text, because this text needs to be written before you can click.

Here is a jump to another project you wrote

 <a href="demo01.html">Jump to demo01 page</a>
The following text still needs to be written, just like Baidu

This page simply jumps to the original place (currently it feels useless)

At this point, click on the picture to jump to the page we want.

 <a href="https://www.baidu.com"><img src="hhh.png"></a>
I think this code is quite important

6. target

target

divided into two pieces

1.Default value, _self. Open in the original web page

2. If it is _blank, open it in a new tab

<a href="https://www.baidu.com" target="_self"> <img src="hhh.png" alt=""></ a>
This is opened on the original web page.
<a href="https://www.baidu.com" target="_blank"> <img src="hhh.png" alt=""></a>
This opens a new web page.

Seven, tr

tr: a row of the table

But this piece has no border, so it does look a bit silly, but add the border

This will make it look a little better and create a little gap.

八、td

td: A cell, you can look at the code to see the difference

There are basically no major problems now. It’s basically a table-like framework, but it’s not very pretty. The words on the first line should be placed in the middle.

Nine, th

th: In the middle of the table, center and bold.

The annoying border, I want it to become a line

 <table border="1" width="500" cellspacing="0">
cellspacing is responsible for the spacing. 1 means there is a border (that is, the border has a distance. The larger the number, the thicker the border. If you set it to 0, there will be no border)

thread: The header area of the table (note is distinguished from th, the range is larger than th, the content is centered and bold)

To be honest, I don’t think it’s useful at the moment. At most, it can be regarded as a good habit.

Form formally formed

<table border="1" width="500" cellspacing="0" cellpadding="50",align="center">
cellpadding: Indicates how many pixels are maintained with the surrounding border.

Then we generally like to put the table header in thead and the torso in tbody. This is the complete code.

<html>
    <head>
        <title>This is the page title</title>
    </head>
    <body>
        <table border="1" width="500" cellspacing="0" cellpadding="50",align="center">
            <thead>
            <tr>
                <td>Length</td>
                <th>width</th>
                <th>Purity</th>
            </tr>
        </thead>
          <tbody>
        <tr>
                 <td>10</td>
                 <td>12</td>
                 <td>14</td>
        </tr>
                <tr>
                    <td>11</td>
                    <td>13</td>
                    <td>16</td>
                </tr>
            </tbody>
        </table>
    </body>

</html>

十、rowspan

Merge cells vertically (from the current cell, merge downward)

 <td rowspan="2">10</td>
//rowspan=2 means it occupies two cells

colspan: Merge cells horizontally

From these two pictures, we can see that if they are originally aligned, there will be an extra one, so we need to make an alignment.

After merging, delete the one with more, just like in the picture below, delete the one with more, and it will naturally be aligned.