The nature of a .web services
Enter key in the browser URL occurred a few things?
The browser sends a request toward the server
2. The server accepts requests
3. The server returns a corresponding response
4. The browser accepts the response, and render the page display to the user according to specific rules to see
Two .HTTP agreement
What is the protocol 1.http
HTTP protocol is a hypertext transfer protocol
It specifies the format of messages transmitted between the browser and the server
Four characteristics 2.http agreement
1. Based on the request response
2. The top of TCP / IP based application layer protocol and acts on the
3. No state (the server can not save the user's status, regardless of the user to how many times when he was the first time)
4. No connection (first request, a response, a response immediately after disconnect, no longer have any relationship between them)
Supplementary: websocket module, is a large patch of the HTTP protocol that supports long connection
3. The data format of request and response
request:
The first line of the request (HTTP protocol version identifies the current request method)
Request header (a bunch of k, v key-value pairs)
(/ R / n blank lines)
Request body (carries the sensitive information, such as a password, ID number, etc.)
response:
The first line of response (HTTP protocol version identifier, the response status code)
Response header (pile k, v key-value pairs)
(/ R / n blank lines)
Response body (the data back to the browser page, usually the response body are html page)
4. Request embodiment the first row
1.get request
To end toward the service resource (such as input www.baidu.com in the browser, the server returns the corresponding page data)
2.post request
Submit data (such as when the user logs submitted by the user names and passwords, etc.) towards the service side
The first line in response to the response status code
By a string of simple numbers to represent some complex state or message
1xx: server successfully received data being processed, you can continue to submit data
2xx: Success response to the server returns the corresponding data (the request was successful 200)
3xx: Redirection (for example, when accessing a page after a login is required to access the page will automatically jump to the login status code: 301, 302)
4xx: Request error (when the requested resource does not exist will return 404, 403 requests to return illegal or access is not enough time)
5xx: Server internal error (500)
6.URL
url is the Uniform Resource Locator, the popular talk is URL
. 1 Import Socket 2 . 3 Server = socket.socket () . 4 server.bind (( ' 127.0.0.1 ' , 8080 )) . 5 server.listen () . 6 . 7 the while True: . 8 Conn, addr = server.accept () . 9 Data conn.recv = (1024 ) 10 Print (Data) . 11 conn.send (B ' HTTP / 1.1 200 is the OK \ R & lt \ n-\ R & lt \ n- ' ) # after sending the HTTP protocol version and status code in response to successful transmission 12 is Conn .send (B ' Hello ' )
Three .HTML
What is 1.HTML
HTML is an HTML is a markup language used to create web pages, it is not a programming language
Rule browser is recognizable in essence, to the page is displayed correctly, you must follow the HTML tag syntax
Page file extensions are: htm or html
2.HTML document structure
The basic document structure
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> </body> </html>
1. <! DOCTYPE html> is declared as a document of HTML5
2. <html> </ html> is the opening and closing tags of the document, is the root element html page, among them the head of the document (head) and topic (body)
3. <head> <head> defines the beginning of the html document, their content will not appear in the document window browser here contains the document's metadata (meta)
4. <title> <title> defines the title of the page, in the title bar of the browser display
Text between 5. <body> </ body> are the subject matter of the page
3.HTML comments
Note the code of the mother
Single-line comments <-! Footnotes -> multi-line comments <-! Footnotes footnotes ->
Generally, html comments are written in the following manner
<! - begin navigation bar style ->
<! - end navigation bar style
4.HTML label
Classification and labeling 1:
1. ditag (<h1> </ h1>, <a> </a>)
2. Single-label (and self-closing tags <img />)
2 classification label:
1. The lump-level label (exclusive line of browser)
div,p,h
1. The label can modify the length and width pieces level
2. The label pieces may be nested to any level inside the block-level tag
Special case: p Although the label pieces-level tagging, but it can not be nested level tagging other pieces, including itself, but it can be nested within the tag line
Summary: p tag can only be nested within the tag line, other pieces can be nested to any level of lump-level tag
2. inline tag (how much text itself accounted for much)
span,b,s,i,u
div and span are often used to build web page layouts
The head used tags
title to display the page title
style for style control, internal support write css code
Internal script writing support js code, also supports importing external js file
dedicated link for introducing external css file
Commonly used labels within 5.body
Each label should have three important attributes
1.id value, similar to the human ID number, in the same html document id should ensure that only non-repeat
2.class value, which is similar in object-oriented inheritance, you can write more
3.style (not necessary), supports direct write css code in the tag belongs to inline styles, the highest priority
Added: any label support custom properties !!!
1. Basic tab
h Tags: Tags title
p Tags: Tags paragraph
b Tags: bold
i Tags: italic
u Tags: Underline
s Tags: Delete
br: Wrap
hr: generating a horizontal
2. special symbols
| content | Code corresponding |
|---|---|
| Blank | |
| > | > |
| < | < |
| & | & |
| ¥ | ¥ |
| copyright | © |
| registered | ® |
< P > & gt; & Copy; Look at this face, & amp; his long and wide, & nbsp; & nbsp;; & nbsp; & nbsp; & nbsp Look this bowl, & Yen; he big round & REG; & lt; </ P >
3. Common Tags
div tag:
Pieces used to define a class element, there is no practical significance, to impart real meaning by css
span tags:
It is used to define elements within a row, no practical significance, to impart practical significance by css
img tag:
<img src="" alt="" title="" height="" width="">
src is stored in the path of the picture, can be local, it can be online, you can also store binary image data, it will be automatically converted into a picture
alt stored message is loaded when the picture does not come out of the show when
title information is displayed when the mouse was suspended in the picture
height and width when only one parameter is specified, the image will be scaling, two parameters are displayed in accordance with the specified parameters specified
a label
<a href="" target="" id="">点击我</a>
Herf can be stored behind the url, then click on the jump to the url, if the link has not been too point, the default is blue, purple will be compiled after the point had
The default target is _self page jump in current, _blank is a new page Jump
Anchor point (back to top)
Herf with the addition can be followed by a further addition url value id tag, after clicking will jump to the corresponding tag value id
List tab
1. unordered list
<ul type="square"> <li>aaa</li> <li>bbb</li> <li>ccc</li> </ul>
property type:
disc: solid circles, the default value
circle: open circles
square: solid square
none: No Style
2. ordered list
<ol type="A" start="1"> <li>111</li> <li>222</li> <li>333</li> </ol>
property type:
A list of numbers, the default value
A capital letter
a lowercase letters
I capitalized Rome
i lowercase Roman
start attributes: start value specified list
3. The list of titles
< DL > < dt > Title. 1 </ dt > < dd > contents. 1 </ dd > < dt > Title 2 </ dt > < dd > contents. 1 </ dd > < dd > SUMMARY 2 </ dd > </ DL >
Table tags
<table border="1"> <thead> <tr> <td>username</td> <td>password</td> <td>hobby</td> </tr> </thead> <tbody> <tr> <td>sxc</td> <td></123td> <td rowspan="2" >read</td> </tr> <tr> <td>zzj</td> <td>123</td> <!--<td>jump</td>--> </tr> <tr> <td>zzp</td> <td colspan="2">123</td> <!--<td>sing</td>--> </tr> </tbody> </table>
Attributes:
border: Table Borders
cellpadding: padding
cellspacing: Margin
width: pixels, percent
rowspan: How much vertical cross-cell line
colspan: how many columns the cell spans
form Form Properties
Features:
Form data for transfer to the server, enabling a user to interact with the Web server
Forms can contain a series of input labels, such as text fields, check boxes, radio buttons, submit buttons and so on.
Forms may also contain textarea, select, fieldset and label tags.
Form Properties
| Attributes | description |
|---|---|
| accept-charset | Character set (default: page character set) specified for use in the submission form. |
| action | Address (URL) where the prescribed form is submitted (submission page). |
| autocomplete | The provisions of the browser should automatically complete a form (default: on). |
| enctype | Submitted predetermined encoded data (default: url-encoded). |
| method | Regulations when submitting forms use HTTP method (default: GET). |
| name | Name recognition predetermined form (for use DOM: document.forms.name). |
| novalidate | Provisions browser does not validate the form. |
| target | The objectives set out in the action attribute address (default: _self). |
Form elements
The basic concept:
HTML is HTML form elements more complex parts, often forms and scripts, dynamic pages, data processing and other functions combined, so it is very important to create dynamic website content.
Enter the general information form is used to collect user
form works:
visitors have while browsing the web form, you can fill in the necessary information, and then press a button to submit. This information is transmitted to the server via the Internet.
A special program on the server to process the data, if there is an error returns an error message and ask to correct the error. When the data are complete and correct, the input server complete a feedback information.
input
<Input> element will be different according to the type attribute is changed to various forms.
| Value of the type property | Manifestations | Code corresponding |
|---|---|---|
| text | Single-line text input | <input type=text" /> |
| password | Password input box | <input type="password" /> |
| date | Date input box | <input type="date" /> |
| checkbox | Check box | <input type="checkbox" checked="checked" /> |
| radio | Single box | <input type="radio" /> |
| submit | Submit button | <input type="submit" value="提交" /> |
| reset | Reset button | <input type="reset" value="重置" /> |
| button | Push button | <Input type = "button" value = "push button" /> |
| hidden | Hidden input box | <input type="hidden" /> |
| file | Text selection box | <input type="file" /> |
Property Description:
- Difference when the form is submitted, "key", and note the id: name
- value: the value of the corresponding item of the form is submitted
- When type = "button", "reset", "submit", the text of the content is displayed on the button
- type = "text", "password", when the "hidden", as initial value input box
- type = "checkbox", "radio", "file", the value associated with the input
- checked: radio and checkbox is selected by default entry
- readonly: text and set read-only password
- disabled: All input apply
select tag
<form action="" method="post">
<select name="city" id="city">
<option value="1">北京</option>
<option selected="selected" value="2">上海</option>
<option value="3">广州</option>
<option value="4">深圳</option>
</select>
</form>
Property Description:
- multiple: Boolean property, and set it to multiple choice, otherwise the default radio
- disabled: Disable
- selected: default checked
- value: the value of the option when submitting definition
label label
Definitions: <label> tag is defined as an input element label (tag).
Description:
- The label element does not present any special effects to the user.
- <Label> for a tag property value should be the same as the id attribute value of the relevant elements.
<form action=""> <label for="username">用户名</label> <input type="text" id="username" name="username"> </form>
textarea multiple lines of text
<textarea name="memo" id="memo" cols="30" rows="10"> 默认内容 </textarea>
Property Description:
- name: Name
- rows: the number of lines
- cols: number of columns
- disabled: Disable