HTML and CSS Basics------transferred from Mr. Yuan

an HTTP overview

HTTP(Hypertext Transport Protocol), which is the Hypertext Transfer Protocol. This protocol details the rules for communicating with each other between the browser and the World Wide Web server.

HTTP is a communication rule that specifies the format of the content that the client sends to the server, as well as the content format that the server sends to the client. In fact, we have to learn this two format! The format that the client sends to the server is called the " Request Protocol "and the format that the server sends to the client is called " response protocol ."

Characteristics:

• HTTP is called Hypertext Transfer Protocol, based on request/Response mode!
• HTTP is a stateless protocol.

URL: Uniform Resource Locator, which is a URL: protocol Name: //Domain : port / path, for example:http://www.oldboy.cn:80/index.html

Two Request Agreement

The format of the request agreement is as follows:

Request the first line;/  / Request Path protocol and version, for example: get/index.html http/1.1 request header information;//  Request Header name: request header content, which is key: The value format, for example: Host:localhost blank line;     //  used to separate the request body from the request body .   //  get no request body, only post has request body. 

The browser sends the contents of the server to this format, if not this format the server will not be able to interpret! In the HTTP protocol, there are many request methods for requests, the most common of which is GET and POST. The difference between the different request methods is followed by a 1.1-point introduction.

2.1GET request 　

The HTTP default request method is get
* No request body
* Data must be within 1K!
* GET request data is exposed in the browser's address bar

Get requests commonly used actions:
1. Give the URL directly in the address bar of the browser, then it must be a GET request
2. Clicking on a hyperlink on the page must also be a GET request
3. When submitting a form, the form uses the GET request by default, but can be set to post

accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*; q=0.8accept-encoding: gzip, deflate, sdchaccept-language:zh-cn,zh;q=0.8cache-control:no-cacheconnection:keep-alivecookie:csrftoken= Z5h43zwarx7aij82oeizbowbsaqa2lpkhost:127.0.0.1:8090pragma:no-cacheupgrade-insecure-requests:1user-agent: mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_1) applewebkit/537.36 (khtml, like Gecko) chrome/53.0.2785.89 SAFARI/537.36NAMELOGIN/1 requests??? 737? B transferred??? Finish:5?ms??? Domcontentloaded:14?ms??? Load:14?ms

• Get 127.0.0.1:8090/login http/1.1:get request, Request server path is 127.0.0.1:8090/login, protocol is 1.1;
• Host:localhost: The requested host name is localhost;
• *user-agent:mozilla/5.0 (Windows NT 5.1; rv:5.0) gecko/20100101 firefox/5.0: with browsers and OS -related information. Some websites will display the user's system version and browser version information, which is obtained by obtaining the user-agent header information;
• accept:text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8: tell the server, The current client can receive the document type, in fact, this contains the */*, it means that anything can be received;
• accept-language:zh-cn,zh;q=0.5: The current client supports the language that can be used in Browser tools ? Option to find language-related information;
• Accept-encoding:gzip, deflate: supported compression format. When data is passed on the network, the server may compress the data before sending it;
• accept-charset:gb2312,utf-8;q=0.7,*;q=0.7: The encoding supported by the client;
• Connection:keep-alive: The client supports the link mode, maintains a period of time link, defaults to 3000ms;
• Cookie:jsessionid=369766fdf6220f7803433c0b2de36d98: because it is not the first time that this address is accessed, the Cookie sent over the last server response in the request sent in a concurrent request; the name of the Cookie is jsessionid.

2.2POST request 　

(1). Data does not appear in the address bar
(2). There is no limit to the size of the data
(3). There is a request body
(4). If Chinese is present in the request body, URL encoding will be used!

Username=%e5%bc%a0%e4%b8%89&password=123

We all know that the transmission of the parameters in the HTTP protocol is a "Key=value" in the form of a, if you want to pass multiple parameters, you need to use the "&" symbol to split the key value pairs. such as "? Name1=value1&name2=value2", so that when the server receives the string, it will use "&" to separate each parameter, and then use "="to split the parameter values. For the name1=value1&name2=value2 "Let's take a look at the conceptual parsing process for client-to-server: The above string is expressed as ASCII in the computer: 6e616d6531 3D 76616c756531266e616d6532 3D 76616c756532. 6E616D6531:NAME1:=76616c756531:value126:&6e616d6532:name2:=76616c756532:value2 Server After receiving this data can traverse the stream, first a byte of a byte to eat, when eating to 3D this byte, the server will know the front to eat byte to indicate a key, then want to eat after, if encountered 26,   Note that from the 3D to 26 sub-section just eaten is the value of the previous key, and so on can parse out the parameters passed by the client. Now there is a problem if my parameter value contains= or &What to do when this special character. For example, "Name1=value1 ", where the value of value1 is the" Va&lu=e1 "string, then the actual transfer process will become such" name1=va&lu=E1 ". Our intention is that there is only one key-value pair, but the server will parse into two key-value pairs, which produces a singular. How to solve the ambiguity caused by the above problems? The solution is to URL-encode the parameters URL encoding is simply a special character in front of each byte plus%, for example, we have a URL encoding for the above-mentioned characters that will produce a singularity: "name1=va%26lu%3d", so that the server will treat the bytes immediately after "%" as normal bytes, which will not be treated as delimiters for each parameter or key-value pair.

Why URL encoding

Use a form to send a POST request, but the form defaults to get

<form action= "" method= "POST" >  keywords: <input type= "text" name= "keyword"/> <input  type= "Submit" Value= "Submit"/></form>

After entering Yuan , click Submit to view the request content as follows:

Request headersaccept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*
           applewebkit/537.36 (khtml, like Gecko) chrome/53.0.2785.89 safari/537.36
Form Datausername:yuan

A POST request can have a body, and a GET request cannot have a request body.

• Referer : http://localhost:8080/hello/index.jsp: which page does the request come from, such as when you click on Baidu to link to this place, then referer:http:// Www.baidu.com: If you enter the address directly in the address bar of the browser, then there is no Referer the request header;
• content-type:application/x-www-form-urlencoded: The data type of the form, indicating that the data is encoded using URL format, and that the URL -encoded data is " % " is prefixed, followed by the two-bit decimal system.
• Content-length:13: The length of the request body, which is represented as a byte.
• Keyword=hello: Request body content! Hello is the data entered in the form,keyword is the name of the form field.

Referer request header is a useful request header, it can be used to do statistical work, can also be used to do anti-theft chain. Statistics work: My company's website in Baidu did the advertisement, but do not know in Baidu advertising on our site's traffic has an impact, then can be in each request Referer analysis, if referer for many Baidu, then the user is to find our company through Baidu website. Anti-theft chain: My company's website has a download link, and other sites hotlinking this address, for example, on my Site index.html page has a link, click to download JDK7. 0, but there is a person's microblog hotlinking this resource, it also has a link to our site JDK7.0, that is, login to its micro-blog, click on the link can download from my Site JDK7.0, which led to our website ads did not look, but the download is my site resources. At this time can use Referer for anti-theft chain, before the resources are downloaded, we judge Referer, if the request from the site, then allow the download, if not this site, first jump to this site to see ads, and then allow the download.

Application of Referer three response protocol 3.1 response content

The format of the response protocol is as follows:

Responds to the first line; response header information; blank line; response body.

The response content is the content sent by the server to the browser, which is displayed according to the response content. Encounter will open a new line loads load, so sometimes the picture is more, the content will be displayed first, and then the image is loaded out of a sheet.

 Request url:http:// 127.0.0.1:8090/login/  request method:getstatus Code:  200 Okremote Address:  127.0.0.1:8090response headersview sourcecontent -type : text/html; charset=utf-8date:wed, Oct 06:48:50 gmtserver:wsgiserver /0.2 cpython/ 3.5.2x -frame-options:sameorigin  <! DOCTYPE html> user name:  < Input type= "text" name= "username"/> <input type= "Submit" value= "Submit"/></form> </body>
 
 

  
  

  
http/1.1 OK: The response protocol is HTTP1.1, the status code is, the request is successful,OK is the interpretation of the status code;     
  
  

  
server:wsgiserver/0.2 cpython/3.5.2: version information of the server;
  
  

  
Content-type:text/html;charset=utf-8: The encoding used by the response body is UTF-8;   
  
  

  
content-length:724: The response body is 724 bytes;   
  
  

  
SET-COOKIE:JSESSIONID=C97E2B4C55553EAB46079A4F263435A4; Path=/hello: A Cookie that responds to the client ;   
  
  

  
date:wed, Sep 04:15:03 GMT: response time, which may have a 8 -hour time zone difference;   
 
 
3.2 Status code 　 
The response header is important to the browser, which illustrates the true meaning of the response. For example , the response is successful,302 indicates redirection, which means that the browser needs to send a new request. 

 
 

  
  

  
A: The request succeeds, the browser will display the response body content (usually HTML) in the browser;  
  
  

  
404: The requested resource was not found, indicating that the client failed to request a resource that does not exist;
  
  

  
: The request resource was found, but there was an error inside the server;
  
  

  
302: Redirect, when the response code is 302 , indicates that the server requires the browser to resend a request, the server sends a response headerlocation, which specifies the URL address of the new request  ; 
  
  

  
304:
  When the user first requests index.html, the server adds a response header called last-Modified, which indicates the  last modification time of the index.html, and the browser caches the index.html content and the last response time. When the user  requests index.html two times, the request contains a request header called if-modified-since, and its value is the first time the  server throughlast-  Modified responds to the value that the hair sends to the browser, that is, index.html last modification time,  if-modified-since the request header is telling the server, I here browser cache index.html Last modified time is this,  you see now index.html last modified time is not this, if still, then you will not have to respond to this index.html  content, I will display the contents of the cache directly. And the server will get the IF-modified-since value, and index.html  the current last modified time, if the same, the server will send a response code 304, indicating index.html with the browser last cached phase  with, no need to send again, the browser can display its own cache page, if the comparison is different, then the index.html has been  modified, the server will respond 200. 
 
 
         3.3 Other response headers 
Tell the browser not to cache the response headers:

 
 

  
  
 
   
Expires:-1;
 
   
Cache-control:no-cache;
 
   
Pragma:no-cache;
 
  
 
 
The response header is automatically refreshed and the browser requests http://www.baidu.com after 3 seconds :   

 
 

  
  
 
   
refresh:3;url=http://www.baidu.com  
 
  
 
 
3.4 Specifies the response header in HTML　 
In the HTMl page, you can use <meta http-equiv= "" content= "> to specify the response header, for example, in the index.html page <meta http-equiv= "Refresh" content= "3;url=http://www.baidu.com" >, indicating that the browser will only display the index.html page  for 3 seconds, Then automatically jumps to http://www.baidu.com.            
HTML and CSS Basics------transferred from Mr. Yuan