HTML basics to add form elements and HTTP protocol

1. New elements of H5

Datalist label

<input type="text" list="xxx">
    <datalist id="xxx">
        <option>xxx</option>
    </datalist>
Copy the code

To be selected: The value of the input list attribute is the same as the ID of the datalistCopy the code

progress

<progress value="70" max="100">70%</progress>
Copy the code

Max is used to define the amount of work required by the progress element. The default value is 1. Value Defines the amount of work that has been completed.Copy the code

email

<input type="email">
Copy the code

Function: Automatically verifies whether the input content conforms to the mailbox formatCopy the code

The domain name

<input type="url">
Copy the code

Function: Automatically verifies whether the entered content is a URLCopy the code

digital

<input type="number">
Copy the code

Function: Only numbers can be entered in the input boxCopy the code

time

<input type="date">
Copy the code

What it does: You can select the time from your calendarCopy the code

color

<input type="color">
Copy the code

Function: You can choose the color by taking the swatchesCopy the code

2. HTTP protocol

Form: Submit data
Interaction: HTTP protocol
Client large front-end request ——>
<—— Response server back end

HTTP packets are classified into request packets and response packets. As the name implies, a request packet is a signal that the client sends a request to the server, and a response packet is a signal that the server sends a response back to the client.

The request message

Request line, request header, blank line, request bodyCopy the code

Request way

What is the difference between GET and POST requests? Post: A large amount of data is transferred. A large amount of data is carried in the request body. The data is protected. A record of the user's preferences is created locally on the computer. When the user visits the same web page next time, he or she will get cookies locally on the computer and make preferences screening and recommendationsCopy the code

Request header

Host: Indicates the Host name of the request. Multiple domain names are allowed to have the same IP address, that is, virtual Host blank line: used as the content separation between the request header and the request bodyCopy the code

Request body

A include request carries data, so get has no request bodyCopy the code

The response message

Status line, response header, blank line, response bodyCopy the code

The status line

4XX Front-end request error (URL/request data format error/syntax error /...) 5XX server error, contact background personnel to solveCopy the code

Response headers

Content-type: Specifies the resource Type (MIME) to be returned. Connection: Connection mode; Close: The connection is closed. Keep-alive: The connection has been held and is waiting for a subsequent request for the connection.Copy the code

A blank line

Separate response header from response bodyCopy the code

Response body

Data returned to the front end, response informationCopy the code