<a>The label

<a>The Role of labels

  1. Jump to the external page.
  2. Jump to internal anchor point.
  3. Jump to email or phone.

<a>Attributes of tags

href

Contains the URL to which the hyperlink points.

The href property has the following values:

  1. The url

  • https://baidu.com

  • http://baidu.com

  • //baidu.com

//baidu.com is recommended. It automatically selects which protocol to use.

  1. The path

  • / a/b/c and the a/b/c

  • Index.html and. / index. HTML

  1. Pseudo agreement

(1) javascript: code;

JS code can be executed directly. This can be done by executing code , so that the browser does nothing after clicking the TAB.

Note that:

will refresh the page;

jumps to the top of the page;

will redirect the page to the element with id= XXX.

Clicking the TAB takes you to the mailbox and then to [email protected].

Click the < A > TAB to dial the interface and automatically fill in the number.

target

The target property specifies the page on which the link is opened.

  • _self: Opens on the current page, which is the default.
  • _blank: Open in a new window (click, the browser will create a new window, open the link in this window, and the new window has no name).
  • _parentOpen in the parent page.
  • _topThe top-level page opens.

Target =” XXX “opens the link in the XXX window; If the XXX window does not exist, the browser creates a new window named XXX and opens the link in that window.

<iframe>The label

The

<table>The label

Tables present data as rows and columns. The complete

tag contains the elements

, , and
.

<table>Label Usage

The header uses the tag and the data uses the < TD > tag.

< table > < thead > < tr > < th > name < / th > < th > native < / th > < / tr > < thead > < tbody > < tr > < td > * * < / td > < td > Beijing < / td > < / tr > < tr > < / td > < td >, dick, and harry Shanghai < / td > < td > < / tr > < tr > < td > two < / td > < td > shenzhen < / td > < / tr > < / tbody > < tfoot > < tr > < td > null < / td > < td > null < / td > < / tr > < / tfoot > < / table >Copy the code

The effect is as follows:

Table implementation of two table headers

Table as shown below

This can be done with the following code:

< table > < thead > < tr > < th > < / th > < th > * * < / th > < th > and < / th > < th > two < / th > < / tr > < thead > < tbody > < tr > < th > language < / th > < td > 88 < / td > 82 < / td > < td > < td > 91 < / td > < / tr > < tr > < th > mathematical < / th > 94 < / td > < td > < td > 89 < / td > < td > 86 < / td > < / tr > < tr > < th > English < / th > < td > 77 < / td > 89 < / td > < td > < td > 98 < / td > < / tr > < / tbody > < tfoot > < tr > < th > total score < / th > 259 < / td > < td > < td > 260 < / td > < td > 275 < / td > < / tr > < / tfoot > </table>Copy the code

<table>Common styles for tags

  • Table - layout: auto;: The browser ADAPTS the width to the length of the table content.
  • Table - layout: fixed;Each column of the table will be the same width, determined by the cell in the first row of the column.
  • border-collapse: used to determine whether the borders of the table are separated or merged. A value ofseparate, each cell has its own border, which is the default property; A value ofcollapse, adjacent cells share a border.
  • border-spacing: specifies the distance between adjacent cell borders.

The default style for

is set to:
table {
    table-layout: auto;
    border-collapse: collapse;
    border-spacing: 0;
}
Copy the code

<img>The label

role

Make a GET request to display the image.

attribute

  • src: Import the address of the image.
  • alt: is used to set the text description of the picture. This value will be displayed when the picture cannot be displayed.
  • width 和 height: is used to specify the width and height of the image. Specify one and the other will adapt.

responsive

Web pages can display well on different devices, which is called responsive design.

Max-width: 100%; Images can be adapted to different screen sizes.

<form>The label

role

Make a GET/POST request, then refresh the page.

attribute

  • action: URL from which the server receives requests.
  • method: The method to submit the request (GET/POST).
  • autocomplete: Indicates whether to fill it automatically. The desirable values areoff(not automatically filled) andon(Auto fill).
  • target: Specifies the window in which the page refreshed after submission is displayed.

<input>The label

role

The purpose of the tag is to let the user enter content.

attribute

  • type="text": used to enter plain text.
  • type="password": Password input box, input will be blocked, input characters will be displayed as*or,.
  • type="radio": Single box for selecting an item. As follows:
<input type="radio" name="gender"> male <input type="radio" name="gender"> femaleCopy the code

  • type="checkbox": check box (need to add the samename).
<input type="checkbox" name="fruit"> apple <input type="checkbox" name="fruit"> orange <input type="checkbox" name="fruit"> banana <input type="checkbox" name="fruit"Copy the code

  • type="file": Upload a single file.type="file multiple": Uploads multiple files.
<input type="file">
<input type="file" multiple>
Copy the code

<textarea>The label

Used to enter multiple lines of text. By default, it can be dragged at will. You can fix it with the style resize: None, and then specify the width and height in the style.

<textarea style="resize:none; width:500px; height:300px;" ></textarea>Copy the code

<select>The label

Used to generate drop-down menus.

option
Copy the code

Matters needing attention

  1. <input> 和 <button>The difference between:

    <input>There can be no more labels in it,

    <button>You can put anything in it.
  2. <form>In the form<input> 有 name.
  3. Generally not listeninginput 的 clickEvents.
  4. formThere has to be onetype=submit 的 <input>or<button>To set outsubmitEvents.