Common HTML Tags

• Jump to the external page.
• Jump to internal anchor point
• Switch to email or phone

---

aCommon attributes of the tag

• href— > hyperlink, a link to a web page.
athe
hrefThe value of
• The url
• https://google.com
• http://google.com

The first two are protocol access

• //google.com

This is unlimited access, the highest level, will jump automatically

• The path
• /a/b/cAs well asa/b/c
• index.htmlAs well as./index.html
• Pseudo agreement
• Javascript: code;
• Mailto: email
• Tel: mobile phone number

Can automatically jump to the specified label, automatically fill in the email or mobile phone number, the user only need to confirm.

---

• target— > specify which window to open the hyperlink in.
athe
targetThe value of
• The built-in name
• _blank— > Open on a new blank page.
• _top— > Open on the top-level page.
• _parent— > Opens in the parent window page, i.e. when the layer page is on a layer.
• _self— > is actually the default and opens on the current page.

This is an example of multi-layer nesting



• Programmer naming

Often used in conjunction with subsequent JS, the functions are described below.

• windowsthename

If you have a name
windows.name>
xxxWhile the,
xxxThe window opens the page. If I don’t name it
xxxPage,
windows.namenew
xxxPage, and then open in this page.

• iframethename

Can be specified to
iframeNamed page opens (digression: can implement Goobai page ~!) .

---

• download— > Download hyperlinked web pages in theory. (No longer supported, not recommended)
• role

Instead of opening the page, download the page.

• The problem

Not all browsers support it, especially mobile browsers.

---

• rel=noopener— > Prevent bugs. (There is a specific explanation in JS)

• Make a GE request to display an image.



---

imgCommon attributes of the tag

• alt— > IfsrcIf the load fails, the system displaysaltAfter connect withsrcThe same.
• height— > Set the image height. (Only set height, width is adaptive)
• width— > Set the image width. (Width only, height is adaptive)
• src— >source: network address, relative path, absolute path

imgTwo important events in the tag JS


Listen to whether the picture is loaded successfully.

• If the load is successfulonload
• If the load failsonerror

Function is: can be saved when the picture load failure.

imgThe tag is reactive



max-width: 100%;


The old Iphone5 can also view the full image

imgThe label is
Replaceable element

tableOnly the common ones in the label can be
thead.
tbody.
tfootThese three tags.


T’s are short for table.
• table— > Table tag
• thead— > Head of the table
• tbody— > table drive
• tfoot— > end of table
• tr— >table raw, a row of the table
• td— >table data
• th— >table head, the head of a column

Note: if the first three tags are not written in order, the browser’s powerful error correction ability will automatically complete the code in order. (Bad habits)


The sample

    <table>
        <thead>
            <tr>
                <th></th>
                <th>Xiao Ming</th>
                <th>The little red</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>Chinese language and literature</th>
                <td>98</td>
                <td>95</td>
            </tr>
            <tr>
                <th>mathematics</th>
                <td>94</td>
                <td>99</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>Total score</th>
                <td>192</td>
                <td>194</td>
            </tr>
        </tfoot>
    </table>
Copy the code

Related styles

• table-layout— > Usually has two Settings
• table-layout: auto;Automatic table layout algorithm for table layout. The width of tables and cells depends on what they contain.
• table-layout: fixed;Table and column widths are set by the width of the table, and the width of a column is determined only by the first row cell.
• border-collapse— > Cell border merge Settings.
• border-spacing— > Cell border distance Settings.

• Use a tool such as HTTP-server or parcel to preview the HTML file. In this case, the file where the service port is enabled is the root directory.
• Pseudo agreementjavascript:;Can satisfy the A label of doing nothing.
• The iframe labelBuilt-in Windows. It’s rarely used. Some of the older systems are still in use. (Hard to use)
• border-collapseandborder-spacingIt is often written to reset.css.
• There are several tags that are commonly used but understood with subsequent CSS and JS
• formThe label form
attribute
• actoin— > make a page request, control which page is used, and use it with subsequent JS.
• autocomplete– > on/off. Enter the content as prompted by the name value, so that users can enter the user name.
• method— > controls whether pages are requested using GET or Post
• target— > Control which page to submit to.

The event

• onsubmitTrigger on submission
• inputThe tag lets the user enter content
attribute
• typetype:button/checkbox/email/file/hidden/color/number/password/radio/search/submit/tel/text

other

• name/autofocus/checked/disabled/maxlength/pattern/value/placedholder

The event

• onchangeRewrite /onfocusFocus /onblurOut of focus

Note: generally do not listen to the onclick event, not easy to use.


The validator

• HTML5 added built-in features.
• Other Input Labels
• select+option
• textarea
• label
• Other tags
• video
• audio
• canvas
• svg

Note: Be sure to check the documentation for compatibility of these labels.

These will be specially studied in combination with other follow-up courses.

Learning to feel


HTML tags are boring, but also combined with subsequent courses to deepen understanding. To sum up, I need to write the code myself and copy the excellent test answers of teachers or classmates. After passing, whether you forget HTML or not, you will need to spend more time studying related lessons in the future. These lessons are not independent, but interrelated, and the time allocated is sufficient to deal with the forgetting curve.