A tag – Jumps to the specified content

  • The href attribute values
<a href="#id">

<! -- Jump to the page, recommend the third kind, the principle is automatic will complement the protocol, find the suitable protocol -->
<a href="https//google.com">
<a href="http//google.com">
<a href="//google.com">

<! Absolute path and relative path -->
<a href="/a/b/c">
<a hred="a/b/c">

<! -- Pseudo-agreement -->
<a href="Javascript: code;">
<a href="Mailto: email">
<a href="Tel: Mobile phone number">


Copy the code
  • Target property value – How to open a new page
<! -- Open in a new page -->
<a href="#" target="_blank">
<! -- Open it in its own page -->
<a href="#" target="_self">
<! -- Open the first page when multiple pages are nested -->
<a href="#" target="_top">
<! -- Open the parent page of the page where the a tag is located -->
<a href="#" target="_parent">
<! --window name and iframe name-->
<hr/>
<a href="//baidu.com" target="xxx"><! Name =" XXX "-->
<! -- Iframe is an inline frame tag that allows an HTML page to be nested within the current page.
<iframe src="" name="xxx"></iframe><! -- Baidu page will open in iframe frame named XXX -->
Copy the code
  • Download property value – is used to download pages, compatibility is not good, mobile browsers do not support

Table tag — table

<table><! --thead/tbody/tfood can be changed position, display order does not change -->
    <thead>
        <tr><! --text row-->
            <th>Table header, default bold center effect</th>
            <td>Text data can only be nested in tr</td>
        </tr>
    </thead>
    <tbody>
        <tr><td></td></tr>
    </tbody>
    <tfood>
        <tr><td></td></tr>
    </tfood>
</table>
Copy the code
table{
    table-layout:auto/fixed;/* Auto indicates that the row width and height are calculated according to the content. Fixed indicates the average row width and height */
    border-collapse:collapse;/* Merge the edges of the cells */
    border-spacing:0;/* Sets the spacing of cells */
}
td.th{
    border:1px soild red;
}
Copy the code

Img tag — image Image

Send a GET request to show an image

<img id="xxx" src="Picture address" width="Picture width" height="Picture height" alt="Picture display failure prompt content"/>
Copy the code
/* The maximum image width is determined by the maximum display page width */
img{
    max-width:100%;
}
Copy the code

Js event

// Display the output in the console when the image is successfully loaded
xxx.onload=function(){
    console.log("Image loaded successfully");
}
// Display output in console when image load fails
xxx.onerror=function(){
    console.log=("Image load failed");
}
Copy the code

Form tag — the form

Make get and POST requests, then refresh the page — what do two requests mean

<! -- The autocomplete property will fill in automatically, i.e. the text box named username will suggest the name you have used -->
<form action="Requested page arrived" method="GET/POST" autocomplete="on/off" target="Which way to open the page you arrive at?">
    <input name="username" type="text"/>
    <! -- The difference between input Submit and button. The former can't add other content, while button can add content and tags. The form must have a tag of type="submit". The onSubmit event must be submitted and triggered. The button default type="submit"-->
    <input type="submit" value="Button name"/>
    <button type="submint/button">The button name</button>
    <! - color - >
    <input type="color"/>
    <! -- Password, hidden by default -->
    <input type="password"/>
    <! -- Single click box, same name -->
    <input name="gender" type="radio"/>male<input name="gender" type="radio"/>female<! -- Checked indicates the default check box, name is the same group -->
    <input name="sz"type="checkbox" checked/>one<input name="sz"type="checkbox"/>two<! Select multiple files from multiple files -->
    <input type="file" multiple/>
    <! -- Hide input -->
    <input type="hidden"/>
    <! -- A multi-line text box, which can be dragged to change the height and width by default, resize: None; Table drag prohibited -->
    <textarea style="resize:none;"></textarea>
    <! -- Select list -->
    <select>
        <option value="fruit">fruit<option/>
        <option value="pg">apple<option/>
        <option vavlue="xj">banana<option/>
    <select/>
</form>
Copy the code
  • Events triggered by input, onchange — when the input box changes, onfocus — when the mouse focuses on the input box, and onblur — when the mouse exits from the input box
  • Matters needing attention
    • Input click events are generally not listened for
    • The input in the form must have a name
    • The form must have a type=”submit” to trigger the Submit event