front end

What is the front-end?

Any deal directly with the user interface can be called a front end

The nature of web services

Browser window, enter a URL press the Enter both those things happened

Sending a request towards the end of the specified service
Server receives a corresponding request
The server returns a corresponding response
The browser receives the response, rendering the page display in accordance with specific rules to the user to see

HTTP protocol

HTTP protocol: HyperText Transfer Protocol, specifies the format of data transmission between the browser and the server

Four characteristics of the HTTP protocol

Response based on the request (a request corresponding to the primary response)
Protocol is based on TCP / IP over the role of the application layer
Stateless (no reservation status of the client)
no connection

Long link websocket (similar to HTTP protocol large patch) related chat rooms

Data Format

Request format

①: the first line of the request (request mode protocol version)

②: request header (lot k, v key-value pairs)

③: blank line

④: Request body (carrying the data are not always, and sometimes may be empty, depending on the request method)

Response format

①: The first line of response (response status codes)

②: request header (lot k, v key-value pairs)

③: blank line

④: response body (browser displayed to the user to see the data)

Response status code (a number on a lot of message)

1XX: the server has been successfully received client data is being processed, you can continue to submit

2XX: 200 request is successful, the server has to go back on the data you want

3XX: Redirection (A page had wanted to visit but inside is automatically transferred to the B page)

4XX: 404 requested resource does not exist, you do not currently have a 403 request the resource conditions

5XX: 500 internal server error (there may be room on fire down the might explode)

PS: Companies can customize their own internal response status code

Request method

1.get request

Get data to the server (similar to a browser window, enter www.baidu.com get Baidu home page)

2.post request

To submit data to the server

HTML (HTML)

If you want your page to be good-looking browser to identify and demonstrate the way, you'll have to write the HTML code for

The browser can recognize only a few languages: HTML / XML, CSS, JS

PS: XML can also write the front page, mainly for odoo framework, writing internal management software

HTML comments

Note the code of the mother

Single-line comments: <- - one-way - -!>

Multi-line comments: <! - - multi-line NOTE 1 ->

Multi-line NOTE 2 ->

Because HTML page structure is more complex, more content, not easy to post-maintenance, modification usually is usually artificial division code regions in the following way when writing the page

例如：

<!--顶部导航栏开始-->

<!--顶部导航栏结束-->
<!--左侧菜单栏开始-->

<!--左侧菜单栏结束-->

HTML document structure

<html>
    <head></head>:head内存放的内容不是给用户看的，是给浏览器去识别相应的操作的
    <body></body>:body内存放的内容就是浏览器展示给用户看到的花里胡哨的页面
</html>

HTML document Open

1.pycharm automatically call the browser to open (recommended)

2. manually select the browser to open after the search path

Classification and labeling 1

1. Double label

2. The self-closing tags

Classification and labeling 2

1. The block-level tag

A separate line h1-h6, p, br, hr, div

①: the block-level tags can be nested within an arbitrary block-level and row labels

②: special case: p Although the block-level tag, but he can only be nested inside the tag line, can not be nested block-level tag

If the nest does not matter, just do not conform to HTML syntax specification

2. within the row labels

Text itself much, much accounted u, s, i, b, span

The internal row label not nest within the block-level and row labels

PS: name tags when writing, just write the tag, then the Tab key you can auto-complete (emmet plug-in)

emmet plug-ins: a special HTML code completion plugins

The head used tags

title: page title is defined
style: internal support direct write CSS code
link: the introduction of external CSS file
script: ①: internal js code can write directly ②: js code can be referenced by a src attribute external
meta: name attribute
- keywords
  
  description

URL (Uniform Resource Locator is the web page address)

The body used tags

Basic tab

h1-h6: Title Tag
s: Delete line
b: bold
u: Underline
i: italic
p: an exclusive line
br: Wrap
hr: dividing line

Special symbols

& Nbsp; space
& Gt; greater than
& Lt; less than
& amp; 与
& Yen; RMB
& Copy; Copyright logo
& Reg; registered trademark

Commonly used tags

div block-level tag
Within the span tag line
- No special significance in itself
  
  But these two really are the most used, used to do pre-page layout
img image tag
- src
  - Pictures can write a website address
  - Pictures can write a local address
  - url (url automatically transmitted to the get request to obtain data)
- alt
  - When the picture is not loaded out of time, the default message display
- title
  - When the mouse hovers over the image when the display message
- width,height
  - Modify a property, the other will also scaling (when the value of picture distortion)
  - Forced to modify two properties, the picture is distorted
a link label
- href
  - Put a url, click will jump to the appropriate resources to the url
- target
  - Controls whether the current page jumps
    - The default is the page in the current jump
      - _self
    - New Page Jump
      - _blank
- Anchor function
  - not only can write href url, you may additionally write a value of a tag id
  - Click will jump to the position corresponding to the id value of a tag located

Tags should have the property

id attribute: similar ID number used to uniquely identify the current HTML page one label
- In the same HTML page id value can not be repeated
class attribute: an object of type face similar to inherit
- Direct reference to the style of other classes

List tab

Unordered list
- the
  - at the
    
    As long as the page appears on a more regular arrangement of text basically can be used to achieve an unordered list
Ordered list
- ol
  - at the
List of titles
- dl
  - dt title
  - dd content

Table tags

<!--展示网站数据的时候  一般情况下可以使用表格标签-->
<table>
    <thead>
        <tr>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
</table>
先表格标签 先写结构 然后写数据

一个tr就是一行
th和td之分   一个加粗一个不加粗  
通常情况下表头用th,表单内容用td

Form tag

The form tag

Acquiring a user input (input, selection, ...... upload files) and the data package sent to the backend
action parameters

Used to control the path of the submitted data (which in the end is the back-end server to submit data)

Three Kind of Writing
- The default is to not write data submitted to the address of the current page is located
- Full path ( https://www.baidu.com )
- Write only the path suffix (/ index /)
input tags: Get User Input
- typ property
  - text plain text
  - password ciphertext
  - date Date
  - a multiple-choice radio
  - checkbox multiple choice and more
    
    Selected by default checked = "checked"
    
    When the same attribute names and value labels, you can write only attribute names
```
女<input type="radio" name="gender" checked="checked">
简写
女<input type="radio" name="gender" checked>
```
  - reset reset
  - button push button
  - submit to trigger a form submit form
  - file Get file

select the tab: drop-down list

One option is one option tag

The default is the radio

You can add a multiple into multiple choice

<select name="" id="" multiple>
  <option value="">小明</option>
  <option value="">小红</option>
  <option value="">小张</option>
  <option value="">小王</option>
</select>
<!--如何让option标签默认选中
加selected="selected"-->  
<select name="" id="" multiple>
  <option value="" selected="selected">小明</option>
  <option value="">小红</option>
    <!--当标签的属性名和属性值相同的时候，可以只写属性名-->
  <option value="" selected>小张</option>
  <option value="">小王</option>
</select>

textarea tag: Get a large section of the text
label label

Usually used in conjunction with the input

Properties "for" parameter is used to input a value corresponding to the tag id

Click the label content within the tags will automatically make the corresponding input label focus

It can trigger button to submit data from the form

<input type="submit">
<!--可以通过value属性来指定按钮文本内容-->
<input type="submit" value="注册">
<button>点我</button>

input to get user input is similar to a dictionary of value

The name attribute inpu is similar to a dictionary of key

Front end - basic and common labels