Front-end presentation
That web front tip of the tip section, to run the show pages viewed on the pc, mobile terminal and other browsers. Software development framework has C / S architecture and B / S structure of the points. In fact, all / C / S architecture, which is the customer service end client and server server. That b / s architecture is c / s architecture.
Browser works: Enter the URL of your browser ---> send a request to the server ---> server receives the request and queries the browser you want to address back to the browser ---> The browser will display the data through front-end processing in page
HTTP protocol
Hypertext Transfer Protocol, HTTP is a simple request - response protocol, which typically runs on top of TCP. It specifies the client may send a message to the server, and what kind of response obtained. Agreement customer service side and server data exchange to follow. This protocol specifies the data format.
Four characteristics http protocol
1) based on a request response
2) Based on the TCP / IP protocol application layer protocol
3) stateless (client can not save the user state)
4) No connection (corresponding to a request time, immediately after the disconnection, there is no relationship between the two)
Fourth supplement knowledge-based characteristic: websocket is a patch under the HTTP protocol, support long connection.
URL: Uniform Resource Locator (URL)
Request data format:
1) Request the first row (labeled versions of the same households of html, statement request mode!)
2) the first request (put some k, v key-value pairs)
(/r/n)
3) the request body (carries sensitive information!)
Response data format:
1) in response to the first line (marked with html version households, response status code) (response status code:! Represented by a string of simple numbers, some complex status message)
2) response header (put some k, v key-value pairs)
(/r/n)
3) response body (return to the information page)
There are two ways request:
1) get request: To resources to the server
2) post request: submit the data to the server.
HTML file
HTML is a markup language used to create web page markup language.
The first html file,
1) file header <! DOCTYPE html>, the document declares that it is an indication about which web browser HTML version of the page using the instructions written.
2) file body <html> </ html>, markup document begins and ends. Documents vivo in turn contains the file header <head> </ head>, and <body> </ body> display text, <title> </ tittle> page title
1] between the <head> </ head> document does not show, may be processed <body> </ body> document showing the effect of
2] <body> </ body> will show documents
3] <title> </ title> Display page title
<! DOCTYPE HTML > < HTML > < title > lalalla </ title > < head > <-! Head drop files the user can not see -> </ head > > < body > the Hello Word <-! Here content is displayed -> <! - this is a single-line comment -> <! - this is a multi-line comment -> </ body > </ HTML > >
Html file open in two ways, 1) Open 2) is opened by using pycharm file path.
Tag syntax
Which is surrounded by angle brackets have keywords,
1) pairs of <div> </ div>
2) a single occurrence, <hr />, <img src = '1.png'> etc.
, The syntax is: <attribute name tag = 1 'attribute'> content </ tag name>
There are commonly used in the property id: define the unique ID tags, HTML documents only
class: defining one or more class name for the html element (classname) (CSS style class name)
style : the provisions of element styles
head the tag:
meta tags
<Meta> element may be provided
< B > bold </ B > < I > italics </ I > < U > underline </ U > < S > Delete </ S > < P > paragraph tag </ P > < h1 of > Title. 1 </ h1 of > < H2 > title 2 </ H2 > < H3 > title. 3 </ H3 > <h4>Title. 4 </ H4 > < H5 > Title. 5 </ H5 > < H6 > Title. 6 </ H6 > <-! Newline -> < br > <-! Horizontal -> < HR >
Special characters
div tags and labels span
div tag: definition of a block element.
sqan Tags: inline elements
note!!!
About nested tags: block elements may typically contain some inline elements or block elements, but the elements can not contain inline block elements, it can contain other inline elements.
p can not contain block-level tag label, the label can not contain p p tag.
a label
Hyperlink tags: page points to another target connection relationship, it can be a URL
<a href="http://www.oldboyedu.com" target="_blank" >点我</a>
a tab target Keywords:
_blank means open the target URL in a new tab
_self means to open the current page URL
List
1) an ordered list
In front of alphanumeric characters and other orderly logo
property type:
- A list of numbers, the default value
- A capital letter
- a lowercase letters
- Ⅰ capital Rome
- Ⅰ lowercase Roman
< OL type = ". 1" Start = "2" > < Li > first </ Li > < Li > second </ Li > </ OL >
2) unordered list
property type:
- disc (solid circles, the default value)
- circle (open circles)
- square (solid squares)
- none (no style)
< UL type = "Disc" > < Li > first </ Li > < Li > second </ Li > </ UL >
3) 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 >
form
<table> <thead> <tr> <th>序号</th> <th>姓名</th> <th>爱好</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Egon</td> <td>杠娘</td> </tr> <tr> <td>2</td> <td>Yuan</td> <td>日天</td> </tr> </tbody> </table>
- border: table border.
- cellpadding: padding
- cellspacing: margins.
- width: percentage of pixels (length and width is preferably set by css).
- rowspan: How much vertical cross-cell line
- colspan: how many columns the cell spans (that is, merged cells
form form
Form Properties
input label
There are keyword type property values control
name: the key is submitted, id is the identification tag identity.
value: a value corresponding to the key submitted after punctuation
type="button","reset","submit",为按钮显示的内容
type="text","password", 是显示框内初始值
type="checkbox","radio","file",是输入相关联的值,
####
checked：radio和checkbox默认被选中的项
disabled：禁用
selected：默认选中该项
value：定义提交时的选项值
label标签
<form action=""> <label for="username">用户名</label> <input type="text" id="username" name="username"> </form>
属性说明：
name：名称
rows：行数
cols：列数
disabled：禁用