Common HTML tags

A label

<a href= “jump target” target= “target window pop-up mode” > text or image

An abbreviation of the word anchor, meaning: anchor

<a> href value

• Web site:

gooogle.com

google.com

Google.com – This // will automatically select HTTP or HTTPS (recommended)

• The path

/a/b/c and a/b/c — are relative paths that start with a/, but are different from file directories

Index.html and. / index. HTML

• Pseudo agreement

Javascript: code; To execute JS directly. I don’t use it much right now, but I can

<a href="javascript:;" > view < / a >

This line of code makes the link empty and does nothing when clicked, neither refreshing the page nor jumping.

If the href value is empty, the page is refreshed; A value of # jumps to the top of the page.

Maito: Email address — Click to send an email to the email address

Tel: Mobile phone number — Click to make a call

• id

Jump to a location on the page (using a unique ID)

</p> <a href="# XXX ">Copy the code

The iframe label

The embedded label can be set; Use less, do not need to pay too much attention

The use of the img

• Function:

Issue a GET request to display an image

• Properties:

SRC: indicates the file path address attribute

Alt: replaces the text attribute, which is the description content of the image

Height /width: write only one, the other one will adapt; Do not recommend to write, may be deformed.

• Events:

onload/onerror

It is used to monitor whether the load is successful and is generally used for testing

<img id=" XXX "SRC ="pics.png" Alt =" here is a picture "> <script> xxx.onload = function () {console.log(" picture loaded successfully "); }; Xxx.onerror = function () {console.log(" image failed to load "); xxx.src = "/404.png"; }; </script>Copy the code

If successful, pics.png image is displayed. If not, the 404.png image is displayed

Response:

img {
       max-width: 100%;
     }
Copy the code

— Images on the phone are adaptive

Table label

• table
• Thead — no
• tbody
• Tfoot — no
• Tr – a table row
• Td – table data
• Th — table head (default bold)

Note that if you do not write thead, tbody, and tfoot, HTML will automatically correct the contents of tr, TD, and th into tbody. If thead, tbody, and tfoot are not in order, HTML will correct them.

The relevant styles

table-layout

table-layout:auto; (automatically calculate its length and width according to the content) (Automatic calculation, but relatively average length and width)Copy the code

Border-collapse and border-spacing – Recommended initial Settings are as follows

border-collapse: collapse; (border whether to merge) border-spacing: 0px; (Border spacing)Copy the code

The form tag

• Function:

Make a GET or POST request and refresh the page

• Properties:

Action – similar to image SRC, the background will be given an address, directly called

Method — Controls get/ POST

Autocomplete — Whether to populate automatically

Target – Which page to submit to, which page to refresh

• Events:

Form must have a type=submit button;

Default if you don’t write; Otherwise, the form cannot be submitted

Input&button – Button can have other tags, but input can’t!

<input type="submit" value="input tag ">< button type="submit"> </strong><img src="404.png" alt=""></button>Copy the code

The input tag

• Function:

Let the user enter content

• Properties:

Type the type: Button (button)/radio(select)/checkbox(select)/email/file(select file)/hidden(hidden)/number/password/search(search) / Submit/tel/text/week/data/range/color/reset

Others :name(select group by name)/autofocus/checker/disabled/maxLength/pattern/value/placeholder

• Events:

onchange / onfocus / onblur

• Validation:

Required (HTML5 comes with its own validation. If set to required, you cannot submit without completing the form.)

Other tags

Other Input Labels

Textarea label

The label tag

Select + option label

<select name="location" id="">
        <option value=""> - 请选择 - </option>
        <option value="1">成都</option>
        <option value="2">重庆</option>
</select>
Copy the code

Multimedia, etc. (Note compatibility)

Video, video

Audio – the audio

Canvas images –

SVG — Vectorization

Tips

• Focus does not listen for input click time
• The input in the form must have a name
• The form must contain a type=submit to trigger the Submit event