What is the front-end:
Deal directly with the user, such as: mobile computer interface
What is the back-end:
Behind the scenes operator, does not deal directly with users
WEB service of nature:
Browser, enter the URL Enter to send a few things?
1, the browser sends the request towards the service side
2, the server receives a request
3, the server returns a response
4, the browser receives a response to the user to see the rendering in accordance with respective rules.
HTTP protocol:
Hypertext Transfer Protocol
It specifies the format of the browser and the server to transfer data
Four characteristics:
1, based on the request response
2, based on the role of a TCP / IP protocol in the application layer
3. stateless (the server does not save the user state, even if each user to have the same as the first time to respond)
4, no connection (in response to a client request once, immediately after disconnect, lost contact!)
Request data format:
1, the first line of the request (HTTP protocol version identifies the current request method)
2, the request header (lot k, v key-value pairs)
3、/n/r
4, the request body (carries sensitive information)
Response data format:
1, the first line of response (HTTP protocol version identifier, response status code)
2, in response to the head (lot k, v key-value pairs)
3、/n/r
4, in response to the body (the data back to the browser page, usually in response to the body of html page)
Response status codes: some simple complex numbers to represent the status or message
1XX: the server has been successfully received your request is being processed, you can continue to send some additional data
2XX: server you want a successful response data (request successful 200)
3XX: Redirection (When you visit a page you need to login, it will automatically jump to the login screen 301, 302)
4XX: request error (the requested resource does not exist or is not legitimate request does not comply with internal regulations or not Permissions 403)
5XX: internal server error (500)
Request mode:
1, get request:
To end toward the service resource (such as a browser window, enter www.baidu.com, the server will return a Baidu home page)
2, post request:
Towards the end of the service to submit data (such as user login to submit your username and password when towards the end of the service)
URL: Uniform Resource Locator (ie: URL)
HTML:
Hypertext Markup Language
I want you to write the page is properly displayed browser, then you write pages must comply with HTML markup syntax
That all pages can be displayed in the browser are normal HTML pages, it is inside the HTML code.
Browser only know: HTML, CSS, JS
WEB nature:
Browser
server
File (the file extension is .html at the end, that is the end of the file .html front page document, .html suffix is to give users see are binary data within a computer)
html comments:
<! - single-line comment ->
<! -
multi-line comment
multi-line comments
->
html under normal circumstances would comment written in the following manner
<-! Navigation bar style start ->
<! - end navigation bar style ->
HTML document structure:
<HTML>
<head> </ head>: tags within the head is not used to display to the user to see the definition of some configuration but mainly to see the browser's
<body> </ body>: tag within the body is the browser presented to the user to see the contents of
</ html>
Two kinds of HTML pages Open:
1, select the browser open in the file path
2, directly open the shortcut pycharm
Classification and labeling 1:
1, the ditag: <h1> uzi </ h1>
2, a single tag: <img src = "" alt = "">
the head used tags:
title: used to display the title of the page
style: used to control the style, internal support write CSS code
script: internal support write js code, also came to support external js file.
link: designed to include external CSS files
2 classification label:
1, a block-level tag (an exclusive browser entire row):
Such as: div, p, h
Block-level tags can be nested to any level block tag, but also block-level p tag while the tag but can not block-level nested tags (including itself), can be nested within the row label.
2, inline tag (content itself is what accounts for much space):
For example: span b: bold s: crossed i: italic u: Underline
div and span is typically used when used to build the page layout.
Commonly used in the body tag:
Basic tab:
h Tag: Title Tag
p Tags: paragraph tag
symbol:
Common Tags:
div、span、p、img
img:
src path used to store pictures, it can be local or may be online
1, you can put url (url automatically requesting the respective data automatically acquired)
2, binary data can also put pictures will be automatically converted into a picture
alt: When the image is loaded does not come out, show the message
title: prompt information when the mouse was suspended in the picture
height, width when you specify one another will be scaling, so generally do not specify both parameters at the same time.
a标签：<a href=""></a>
Url stored behind a href time, click to jump to the url
If the link is not clicked color is blue, just click once, the browser will be recorded in the future will not be purple.
target: the default is _self, the current page jumps. _blank represents a new blank page to jump.
Anchor point (Top):
href another can also be written to a tag id values, click will jump to a value corresponding to the id of the tag. As FIG.
Each tag should have three important attribute values:
1, id value: This value is similar to the ID number, id value a html document should be guaranteed to be unique
2, class value: This value is similar to the object-oriented inheritance. (Can inherit more)
So that you can have all the features c1 label
3, style (not necessarily required) to support their own label define your own CSS code, it is within the line of the highest priority.
Added: any label support custom properties.
List Tags:
Unordered list:
The results demonstrate:
Adjust the shape:
Ordered list:
List of titles:
Table tags:
basic structure:
<table>
<thead></thead>
<tbody></tbody>
</table>
tr represents a row
th and td are text
suggested th in thead
within a td tbody
Use of the label:
<table border="1"> <thead> <tr> <th>username</th> <th>pwd</th> <th>hoppy</th> </tr> </thead> <tbody> <tr> <td>cxk</td> <td>123</td> <td>篮球</td> </tr> <tr> <td>yyj</td> <td>123</td> <td>game</td> </tr> </tbody> </table> </body>
colspan represents the horizontal direction
It represents the vertical direction rowspan
usage:
Form Tags:
Role: receiving user input (input, select, upload) files and sent to the back-end.
Forms to register an example to explain form:
<form action="">
<label for="d1">username:<input type="text" id="d1"></label>
</form>
action: to control the destination of the data submitted
1, without written submission to the default path where the current page
2, write the full path (https://www.baidu.com)
3, the path suffix ((/ index /))
input tags: Similar to the front of Transformers
type:
text: plain text
password: ciphertext does not show expressly
date: Date
submit: submit trigger action
button: push button has no real meaning but can be achieved by binding events js custom action
reset: reset the contents of the form
radio: Radio can be checked control is selected by default (when the same attribute value and attribute names can be abbreviated case the checked) the checked = "the checked"
the CheckBox: multiple choice above can set default values
file: get users to upload files
select Tags:
The default for the radio, can become a multiple multiple selection, a default selection can be selected (selected = 'selected')
textarea tag (Profile)
To obtain a large section of text entered by the user
The default is to get a request form form you need to submit manually modify the post method parameters!
Form two ways to trigger form submission actions:
1, input the type specified to submit
2, the direct write button label
Get user input (input, select, upload ...) label must have a name attribute,
This is similar to the name attribute of key user input dictionary is the dictionary value
<input type="text" id="d1" name="username" value="默认值">
User-entered value will be placed in the value attribute
form form re-transmission of the document, you need to specify enctype attribute
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h2>注册页面</h2> <form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data"> <p><label for="d1">username:<input type="text" id="d1" name="username"></label></p> <p><label for="d2">password:<input type="password" id="d2" name="password"></label></p> <p> <label for="d3">birthday:</label> <input type="date" id="d3" name="birth"> </p> <p>性别: <input type="radio" name="gender" checked value="male">男 <input type="radio" name="gender" value="female">女 </p> <p>爱好: <input type="checkbox" name="hobby" value="basketball">篮球 <input type="checkbox" name="hobby" value="football">足球 <input type="checkbox" name="hobby" checked value="doublecolorball">双色球 </p> <p>省市: <select name="province" id=""> <option value="SH " the Option</Shanghai>> <option value="bj">北京市</option> <option value="sz">深圳市</option> </select> </p> <!--<p>伴侣:--> <!-- <select name="" id="" multiple>--> <!-- <option value="" selected>新垣结衣</option>--> <!-- <option value="" selected>斯嘉丽</option>--> <!-- <option value="">明老师</option>--> <!-- </select>--> <!--</p>--> <!--<p>省市1:--> <!-- <select name="" id="">--> <!-- <optgroup label="上海">--> <!-- <option value="">嘉定区</option>--> <!-- <option value="" selected>浦东新区</option>--> <!-- <option value="">静安区</option>--> <!-- </optgroup>--> <!-- <optgroup label="北京">--> <!- -> <Option value = ""> Haidian District </ Option><-!-> <Option value = ""> Chaoyang District </ Option> <!-- <option value="">昌平区</option>--> <!-- </optgroup>--> <!-- <optgroup label="安徽">--> <!-- <option value="">芜湖市</option>--> <!-- <option value="">合肥市</option>--> <!-- <option value="">安庆市</option>--> <!-- </optgroup>--> <!-- </select>--> <!--</p>--> <p>头像: <input type="file" name="avatar"> </p> <p>个人简介: <textarea name="info" id="" cols="30" rows="10"></textarea> </p> <!--<p>隐身--> <!-- <input type="hidden">--> <!-- --> <!--</p>--> <input type="submit" value="注册1"> <input type="button" value="注册2"> <input type="reset" value="注册3"> <button>button标签</button> </form> </body> </html>