Abstract:

  1. A label
  2. The iframe label
  3. Table label
  4. Img tags
  5. The form tag
  6. The input tag
  7. Other tags

The usage of a tag

Function: Hyperlinks

1. The attribute

1) href hyperlink

<a href="https://taobao.com">
    TB
</a>
Copy the code

Value ① Address

  • href=”taobao.com”
  • href=”taobao.com”
  • Href =”//taobao.com”

(2) path

  • Href =”/a/b/c.html” is an absolute path to the file in the directory where the HTTP service is currently enabled
  • Href =”a/b/c.html
  • Href = “index.html” or a href = “. / index. HTML”

(3) pseudo agreement

  • JavaScript pseudo agreement

href=”javascript:alert(1);” Alert (1) href=”javascript:;” “Nothing happens (no automatic refresh, no automatic roll back to top)

  • id

href=”#xxx”

  • email

href=”[email protected]”

  • The phone

Href =”tel:123456789xx” the A tag allows you to jump to external pages, internal anchors, mailboxes and phone numbers.

2) Target specifies that a hyperlink is opened on a page

<a href="https://taobao.com" target="_blank">
    TB
</a>
Copy the code

Value ① Built-in value

  • _blank opens in a new window
  • _self opens in the current window
  • _top opens in the top-level window
  • _parent opens in the parent window

(2) the name

  • The name of the window

Target =” YYy “If a window named YYy exists, open it. If not, create a window named yyy and open it

  • The name of the iframe

Provide a usage scenario: open multiple sites on one page

<a href="//taobao.com" target="xxx">
    TB
</a>
<a href="//baidu.com" target="xxx">
    BD
</a>
<iframe style="border:none"; width:100%; height:800px; src="" name="xxx">
</iframe>
Copy the code

3) Download the page (some browsers do not support it)

<a href="https://taobao.com" download>
    TB
</a>
Copy the code

4) Rel = Noopeaner

Ii. Iframe tag (not recommended)

Function: Inline window

3. Table tag usage

Purpose: Show table

Structure of 1.

<table>
    <thead>...</thead>
    <tbody>...</tbody>
    <tfoot>...</tfoot>
</table>
Copy the code

1) thead

<thead>
    <tr>Create a new row<th>English</th>Header with th<th>translation</th>
    </tr>
</thead>
Copy the code

2) tbody

<tbody>
    <tr>
        <td>hyper</td>Table with td<td>super</td>
    </tr>
    <tr>
        <td>target</td>
        <td>The target</td>
    </tr>
</tbody>
Copy the code

3) tfoot

<tfoot>
    <tr>
        <td>empty</td>
        <td>empty</td>
    </tr>
</tfoot>
Copy the code

Styles 2.

1) Cell width

<style>
    table{
        table-layout:auto; Automatic algorithmtable-layout:fixed; Equal width at first line}</style>
Copy the code

2) Cell borders

<style>
    td.th{
        border:1pxsolid blue; Add borders}table{
        border-spacing:20px; Specify the distance between adjacent cell borders}Copy the code
<style>
    td.th{
        border:1pxsolid blue; Add borders}table{
        border-collapse:collapse; Merges adjacent cell bordersborder-collapse:separate; Delimit adjacent cell borders}Copy the code

The use of the IMG tag

Purpose: Issue a GET request to display an image

1. The attribute

1) When Alt image loading fails, it will prompt image information

<img src="Cat. PNG" alt="A milk cat.">
Copy the code

2) Set the image size

<img src="Cat. PNG" width="400">
<img src="Cat. PNG" height="600">
Copy the code

Note: Do not distort the picture

3) SRC image address

<img src="Url, path (/ file)">
Copy the code

2. The events (JavaScript)

1) OnLoad is called when the image is successfully loaded

<img id="xxx" src="Cat. PNG">
<script>
    xxx.onload=function(){
        console.log("Image loaded successfully");
    };
</script>
Copy the code

2) OnError is called when the image load fails

<img id="xxx" src="Cat. PNG">
<script>
    xxx.onerror=function(){
        console.log("Image load failed");
        xxx.src-"/404.jpg"; Put a "save chart"} when loading fails;</script>
Copy the code

3. Response type

<style>
    img{
        max-width:100%;
    }
</style>
Copy the code

5. Use of the form tag

What it does: Sends a GET or POST request and then refreshes the page

1. The attribute

1) Action Specifies the request page

<form action="/xxx">
Copy the code

2) Method specifies GET/POST requests

(Default GET request is not written)

<form action="/xxx" method="POST">
Copy the code

3) Autocomplete fills automatically

<form action="/xxx" autocomplete="on">The browser can automatically complete entries<form action="/xxx" autocomplete="off">Browsers may not auto-complete entries<input name="username" type="text">
<input type="submit">
Copy the code

4) Target specifies that the form is opened on a page

<form action="/xxx" target="_blank">    
Copy the code

2. The event

Onsubmit triggered when the user submits

Use of the input tag

Effect: User input

1. The attribute

1) type type

<input type="text">The input text<input type="color">Input color<input type="password">Enter the password<input type="email">Enter your email<input type="tel">Enter the phone<input type="number">Enter the Numbers<input type="search">Enter a search<input type="hidden">Invisible inputCopy the code

The radio

<input type="radio" name="gender">male<input type="radio" name="gender">femaleCopy the code

multi-select

<input type="checkbox" name="Hobby">Sing dance<input type="checkbox" name="Hobby">Rap
<input type="checkbox" name="Hobby">basketballCopy the code

Upload a file

<input type="file">Upload a file<input type="file" multiple>Uploading multiple filesCopy the code

submit

<input type="submit">
<input type="submit" value="Blunt duck">The submit button is displayed as "Flush duck"Copy the code

or

<button type="submit">Blunt duck</button>
<button type="submit"><strong>Blunt duck</strong></button>Other tags are allowed, but input is notCopy the code

2) other

value,name,autofocus,checked,disable,maxlength,pattern,placeholder

2. Other input labels

1) the textarea label

Function: Enters multiple lines of text

<textarea>...</textarea>Drag the text box to resize it<textarea style="resize:none; width:50%; height:100px;">...</textarea>Fixed text box sizeCopy the code

2) Select + option tag

Role: Provides options

<select>
    <option value="0">- Please select -</option>
    <option value="1">Monday</option>
    <option value="2">Tuesday</option>
    <option value="3">Wednesday</option>
</select>
Copy the code

3) Label

3. The event

1) Onchange is triggered when user input changes

2) onFocus Triggers the user to focus the mouse on a place

3) Onchange is triggered when the user comes out of somewhere

4) Validator (new HTML5 feature)

For example, required indicates that input is required. If you submit without input, a prompt will pop up asking for input

<input name="username" type="text" required>
Copy the code

Vii. Other Labels (follow-up)

video,audio,canvas,svg