HTML common tags

Posted by daniellynn2000 on Sun, 27 Feb 2022 07:29:52 +0100

html common tags

a label

a label function

Jump to external page
Jump to internal anchor
Jump to email and phone

Value of herf of a

 <!-- a attribute <a herf="" target="" ></a>
    href Hyperlinks
    rel=noopener Prevent one bug
    -->
<!-- Open link on another page -->
 <a href="//baidu. com" target="_ Blank "> hyperlink</a>
    <a href="a/b/c.html">C</a>
    <!-- click a The tag will execute javascript -->
    <a href="javascript:alert(1);">JavaScript Pseudo protocol</a>
    <!-- javascript:;  Empty pseudo protocol Click a Nothing happened -->
    <a href="javascript:;">Empty pseudo protocol</a>
    <!-- herf Leave blank and click a Tab page refresh -->
    <a href="">Refresh</a>
    <!-- Empty link Click a Label (this page opens) the page returns to the top -->
    <a href="#"> return to the top of the page</a>
    <!-- click a Label return to id="xxx"Location view   -->
    <a href="#XXX "> View XXX</a>
    <!-- click a Tag email -->
    <a href="mailto:1353008829@qq.com">Email to Ting</a>
    <!-- click a Tag call -->
    <a href="tel:138xxxxxxxx">phone</a>

Value of target of a

<!-- a attribute
    href Hyperlinks
    target Select which window to open
     _blank Open on a blank page
     _self The default value opens on the current page
     -top There are two windows open on the top page, which can clearly see the effect
     -partent Open in parent window
     target="xxx" If there is a window called xxx,Then in xxx Open the page; If not, create one xxx Windows and pages are in xxx Window open
    rel=noopener Prevent one bug
    -->
    <a href="http://baidu. com" target="_ Blank "> Baidu (open on a blank page)</a>
    <a href="http://baidu. com" target="_ Self "> Baidu (open on current page)</a>
    <a href="http://baidu. com" target="_ Top "> Baidu (open on the top page)</a>
    <hr>
    <!-- use iframe After that, you can make Baidu 1 in the page xxx The window opens Baidu 2 on the page yyy Window open -->
    <a href="http://baidu. Com "target =" XXX "> Baidu 1</a>
    <a href="http://baidu. Com "target =" YYY "> Baidu 2</a>
    <hr>
    <iframe src="" name="xxx"></iframe>
    <hr>
    <iframe src="" name="yyy"></iframe>

table label

The table tag is a block level tag. All table contents should be placed in this tag.
The table tag should include thead tag (header), tbody tag (table body) and tfoot tag (footer)
These three labels can contain tr label, th label and td label. Tr label represents a row of the table. Both th tag and td tag are used to define the cells of the table. Th tag is the header cell and td tag is the data cell.

<body>
    <table>
        <thead></thead>
        <tbody> </tbody>
        <tfoot>  </tfoot>
    </table>
</body>

img tag

img tags are used to insert pictures. It is used alone and has no closed label. By default, it is an in line element on the same line as the front and back text.
img attribute alt / height / width / src

alt attribute
Used to set the text description of the picture. When the picture is not displayed (for example, the download fails, or the user turns off the picture loading), the text will be displayed on the position of the picture.

<img src="xxx.jpg" alt="Sample picture">

height and width attributes
By default, the picture is inserted into the web page in its original size. The height and width properties can specify the width and height of the picture when it is displayed, in pixels or percentages. Note that once these two properties are set, the browser will reserve this size of space in the web page in advance, regardless of whether the image is loaded successfully or not. However, since the display size of the image can be set with CSS, these two properties are not recommended. A special case is that only one of the width attribute and the height attribute is set, and the other is not set. At this time, the browser will automatically set the width or height of the picture in the corresponding proportion according to the original size of the picture.

<img src="xxx.jpg" width="400" height="300">

Responsive image

Web pages can produce good display effects on devices of different sizes, which is called "responsive design". The web image of responsive design is "responsive image"

img {
max-width : 100%
}

If you want to effectively remember a large number of html tags, it is obviously a waste of time to knock them one by one. You can remember them more deeply only by using them on the page and then focusing on practicing the frequently used tags.

Topics: html

Programmer Think