The front has nothing to do with python
? What is the front-end
of any deal directly with the user interface can be called front-end
such as: computer interface, mobile phone interface, tablet interface
What is the back end?
Being the first to understand the behind the scenes who
do not deal directly with users
Why study the front end
because you are a full-stack Development Engineer
The front end of the learning process
Software development framework
c / S
b / S
The nature of Web services:
? Enter URL knockin browser transmits a few things
1. The browser sends a request to the server
2. The server receives the request
3. The server returns a corresponding response
4. According to a particular browser receives the response the rules render the page displayed to the user to see
HTTP protocol #
Hypertext Transfer Protocol
specifies the data format of the message transmission between the browser and the server
Four characteristics:
1. Based on the request response
2. Based on the role of TCP / IP protocol on the application layer in the
state 3. No state (the server can not save the user, a person to a thousand times I still can not remember when you as shown signs)
4. no connection (request response time after time I flew off the connection between the two no longer have any relationship)
a large patch websocket is equivalent to the HTTP protocol that supports long connection
Format request data
requesting the first row (HTTP protocol version identifier, the current mode request)
request header (lot k, v key-value pairs)
Request body (carrying some sensitive information such as passwords, social security numbers ...)
Response data format
in response to the first row (HTTP protocol version identifier, response status code)
in response header (lot k, v key-value pairs)
Response body (back to the browser page data are usually the response body html page)
Response status code
with a simple string of numbers to represent some complex state or message
1XX: the server has successfully received your data is being processed you can continue to submit additional data
2XX: a successful response data server you want ( the request was successful 200)
3XX: redirection (when the page you need to log in after a visit to visit you will find that the window will be automatically transferred to the login page 302 301)
4XX: request error (there is no resource request 404, the request does not meet the legal internal regulations will not permissions 403)
5XX: internal server error (500)
Request method
1.get request
towards the service side to resources (such as the browser window, enter www.baidu.com)
2.post request
submitted data towards the server (such as user login to submit your username and password)
URL: Uniform Resource Locator (URL is vernacular)
HTML#
HTML
to get your page can be displayed properly browser page you write must follow html markup syntax
means that all internal pages can be displayed in the browser are html code
Browser only know html css js
web nature #
Browser
server
file (the file extension is .html at the end, which means that they see the end of the .html file then it is a front-end page file)
file extension just does not matter because the posters are binary computer data
HTML comments #
Write a standard set of web pages
Note the code of the mother
html notes are written in the following general manner
HTML document structure #
: tags within the head is not used to display to the user to see but mainly to define the configuration of your browser to see
: the label within the body is presented to the user browser to see content
Two ways to open the html page #
1. Locate the file browser to open the path selection
2.pycharm shortcut to directly open
HTML tags #
Classification and labeling 1: #
1. ditag (<h1></h1> <a></a>)(ditag, from beginning to end)
2. Single-label ( autistic and labels )
the head common tag #
title to display the page title
style to control the internal support css styles to write the code
inside script writing support js code also supports importing external js file
css file link devoted to the introduction of external
2 classification label: #
1. pieces level tag (an exclusive browser line)
div pH
A. Tag pieces stage may modify the length and width
b. Internal label pieces can be nested to any level of the block-level tag
, but the tag, although block p child-level tagging, but he was not able to include other pieces of level tag itself
can be nested inside the tag-line
summary:
as long as the pieces are nested row level label in the label
p tag can only be embedded within other pieces of level nested row tag sets arbitrary pieces stage
2. inline label (text itself accounts for how much)
span BSIUdiv和span通常都是用来构建网页布局的
within the body commonly used tags #
Basic tab #
h tags: Title Tags
p Tags: paragraph tag
symbol
Common tag #
div
span
p
img
src is stored in the image path (the path can be local or may be online)
1 may be put url (url automatically requesting the respective data acquisition)
2 can also directly put data is binary image automatically converted into a picture
message when the alt image loading out of the show when
title when the mouse hovers over the image prompt information
height, width only when you specify a parameter when another will wait for a zoom ratio
a
When stored behind href url click to jump to the url
If the link has not been out past then the default is blue, as long as the points are over after the turn purple
The current default target is _self page jump
_blank New Page Jump
Anchor point (Top)
href can also write another a tag id values, click id value will jump to a corresponding label
Each label should have three important attributes
1.id This value is similar to a person's ID number in a html document id should ensure that only non-repeat
2.class This value is similar to the inside of the object-oriented inheritance can write multiple
3.style (not essential) support css code is written directly in the tag belongs to the style of the highest priority within the lines
complement any label support custom properties !!!
List tag #
Table tags ( *****) #
<table>
<thead></thead> <tbody></tbody> </table>tr represents a row
th and td are text
Recommended th in thead
within a td tbody
colspan horizontal direction indicated by
the vertical direction indicated rowspan
Form labels (******) #
Capable of receiving user input (input select upload) and send it to the backend
Examples Example-bit register to explain form form
Destinations action to control the data submitted
by default 1. No written submissions to the path where the current page
2. Write the full path ( https://www.baidu.com )
3. path suffix (/ index /)
input input tag is similar to the front-end Transformers
of the 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 implement a custom action binding event by JS
the RESET: Heavy form content opposing
radio: radio control can be checked by default selection (when the value of the attribute property name and the same situation can be abbreviated checked) checked = "checked"
CheckBox: multi-set default values may be selected from the above
file: Gets the file uploaded by the user
select the tab
default by multiple radio can become multiple choice
if you want to use the default choice selected (selected = "selected")
textarea tag
to obtain a large section of text entered by the user
The default form is the form you need to get a request submitted by the method parameter replaced POST
form submit the form in order to trigger the action
only two cases can
1.input label type specified as the Submit
2. Direct write button label
Get user input (input select to upload ...) the label must have a name attribute
the name attribute is similar to key dictionary, while the value of the label to obtain the user to write on the dictionary of similar value
name is the equivalent of a dictionary Key
value is the value of the dictionary
to obtain all user input will be placed in property value
form form transfer files when you need to specify enctype parameter
emmet plug
Foolproof measures xxxxxxxxxx foolproof measures
The front has nothing to do with python
? What is the front-end
of any deal directly with the user interface can be called front-end
such as: computer interface, mobile phone interface, tablet interface
What is the back end?
Being the first to understand the behind the scenes who
do not deal directly with users
Why study the front end
because you are a full-stack Development Engineer
The front end of the learning process
Software development framework
c / S
b / S
The nature of Web services:
? Enter URL knockin browser transmits a few things
1. The browser sends a request to the server
2. The server receives the request
3. The server returns a corresponding response
4. According to a particular browser receives the response the rules render the page displayed to the user to see
HTTP protocol #
Hypertext Transfer Protocol
specifies the data format of the message transmission between the browser and the server
Four characteristics:
1. Based on the request response
2. Based on the role of TCP / IP protocol on the application layer in the
state 3. No state (the server can not save the user, a person to a thousand times I still can not remember when you as shown signs)
4. no connection (request response time after time I flew off the connection between the two no longer have any relationship)
a large patch websocket is equivalent to the HTTP protocol that supports long connection
Format request data
requesting the first row (HTTP protocol version identifier, the current mode request)
request header (lot k, v key-value pairs)
Request body (carrying some sensitive information such as passwords, social security numbers ...)
Response data format
in response to the first row (HTTP protocol version identifier, response status code)
in response header (lot k, v key-value pairs)
Response body (back to the browser page data are usually the response body html page)
Response status code
with a simple string of numbers to represent some complex state or message
1XX: the server has successfully received your data is being processed you can continue to submit additional data
2XX: a successful response data server you want ( the request was successful 200)
3XX: redirection (when the page you need to log in after a visit to visit you will find that the window will be automatically transferred to the login page 302 301)
4XX: request error (there is no resource request 404, the request does not meet the legal internal regulations will not permissions 403)
5XX: internal server error (500)
Request method
1.get request
towards the service side to resources (such as the browser window, enter www.baidu.com)
2.post request
submitted data towards the server (such as user login to submit your username and password)
URL: Uniform Resource Locator (URL is vernacular)
HTML#
HTML
to get your page can be displayed properly browser page you write must follow html markup syntax
means that all internal pages can be displayed in the browser are html code
Browser only know html css js
web nature #
Browser
server
file (the file extension is .html at the end, which means that they see the end of the .html file then it is a front-end page file)
file extension just does not matter because the posters are binary computer data
HTML comments #
Write a standard set of web pages
Note the code of the mother
html notes are written in the following general manner
HTML document structure #
: tags within the head is not used to display to the user to see but mainly to define the configuration of your browser to see
: the label within the body is presented to the user browser to see content
Two ways to open the html page #
1. Locate the file browser to open the path selection
2.pycharm shortcut to directly open
HTML tags #
Classification and labeling 1: #
1. ditag (<h1></h1> <a></a>)(ditag, from beginning to end)
2. Single-label ( autistic and labels )
the head common tag #
title to display the page title
style to control the internal support css styles to write the code
inside script writing support js code also supports importing external js file
css file link devoted to the introduction of external
2 classification label: #
1. pieces level tag (an exclusive browser line)
div pH
A. Tag pieces stage may modify the length and width
b. Internal label pieces can be nested to any level of the block-level tag
, but the tag, although block p child-level tagging, but he was not able to include other pieces of level tag itself
can be nested inside the tag-line
summary:
as long as the pieces are nested row level label in the label
p tag can only be embedded within other pieces of level nested row tag sets arbitrary pieces stage
2. inline label (text itself accounts for how much)
span BSIUdiv和span通常都是用来构建网页布局的
within the body commonly used tags #
Basic tab #
h tags: Title Tags
p Tags: paragraph tag
symbol
Common tag #
div
span
p
img
src is stored in the image path (the path can be local or may be online)
1 may be put url (url automatically requesting the respective data acquisition)
2 can also directly put data is binary image automatically converted into a picture
message when the alt image loading out of the show when
title when the mouse hovers over the image prompt information
height, width only when you specify a parameter when another will wait for a zoom ratio
a
When stored behind href url click to jump to the url
If the link has not been out past then the default is blue, as long as the points are over after the turn purple
The current default target is _self page jump
_blank New Page Jump
Anchor point (Top)
href can also write another a tag id values, click id value will jump to a corresponding label
Each label should have three important attributes
1.id This value is similar to a person's ID number in a html document id should ensure that only non-repeat
2.class This value is similar to the inside of the object-oriented inheritance can write multiple
3.style (not essential) support css code is written directly in the tag belongs to the style of the highest priority within the lines
complement any label support custom properties !!!
List tag #
Table tags ( *****) #
<table>
<thead></thead> <tbody></tbody> </table>tr represents a row
th and td are text
Recommended th in thead
within a td tbody
colspan horizontal direction indicated by
the vertical direction indicated rowspan
Form labels (******) #
Capable of receiving user input (input select upload) and send it to the backend
Examples Example-bit register to explain form form
Destinations action to control the data submitted
by default 1. No written submissions to the path where the current page
2. Write the full path ( https://www.baidu.com )
3. path suffix (/ index /)
input input tag is similar to the front-end Transformers
of the 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 implement a custom action binding event by JS
the RESET: Heavy form content opposing
radio: radio control can be checked by default selection (when the value of the attribute property name and the same situation can be abbreviated checked) checked = "checked"
CheckBox: multi-set default values may be selected from the above
file: Gets the file uploaded by the user
select the tab
default by multiple radio can become multiple choice
if you want to use the default choice selected (selected = "selected")
textarea tag
to obtain a large section of text entered by the user
The default form is the form you need to get a request submitted by the method parameter replaced POST
form submit the form in order to trigger the action
only two cases can
1.input label type specified as the Submit
2. Direct write button label
Get user input (input select to upload ...) the label must have a name attribute
the name attribute is similar to key dictionary, while the value of the label to obtain the user to write on the dictionary of similar value
name is the equivalent of a dictionary Key
value is the value of the dictionary
to obtain all user input will be placed in property value
form form transfer files when you need to specify enctype parameter
emmet plug
Foolproof measures xxxxxxxxxx foolproof measures