table of Contents

A front end
Second, the nature of web services
- 1. Request & Response
- 2. Requests the way
Three, HTTP protocol
Four, HTML: HTML

(Front-end learning part1)

A front end

1. What is the front-end

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

For example: a computer screen display interface, the interface displayed on your phone, tablet interface. . .

2. What is the back-end

It can be understood as popular behind the scenes.

Front end interface you enter some information, transmitted to the rear end, a series of operations performed in the rear end of the program, and then returns to the front end of some of the results. The rear end is mainly used for processing business logic, and data operations.

3. Why should I learn front-end

Skills are more than body
Full stack engineer will be

Second, the nature of web services

1. Request & Response

Browser enter the URL, press ENTER those things happened?

Browser sends a request toward the specified server address
The server receives the request and processes
The server returns a response to the browser request
Browser receives the data sent by the service, and rendering good-looking page, look to the user

2. Requests the way

get request
- To resources towards server
post request
- Super-server data submitted

Three, HTTP protocol

1. Four characteristics

Protocol is based on TCP / IP over the role of the application layer
Response based on the request (response corresponding to the request)
Stateless (you do not save state customers) (may use cookies: session to save the state)
No connection (unlike the TCP protocol, after a connection has been connected to the channel, this request finished HTTP response data to disconnected)

2. Data Format

Request format:
1. The first line of the request (request method, protocol version, etc.)
2. Request header (lot k: v key-value pairs)
3. (Newline)
4. Request body (sensitive information, password, ID number, etc.)
Request format and response format :( identical)
1. The first line of the request (request method, protocol version, etc.)
2. Request header (lot k: v key-value pairs)
3. (Newline)
4. Request body (sensitive information, password, ID number, etc.)

3. The status response code

Represented by numbers need to express the meaning of a string of text, users see this string of numbers, you can understand what the problem out of trouble. The reason why a number in the space because of the small numbers, the early small hard disk memory, data is sent as small as possible. Later, we used to it, we have a convention.

1XX: the server has successfully received your request is being processed, you can continue to submit additional data. Generally do not see this number, because flash is too fast, too late to see you, the server data is sent over.

2XX: server successfully responded to the response data (200)

3XX: Redirection

4XX: request error (404: the requested page can not be found) (403: user does not meet the conditions, the server rejects the request)

5XX: internal server error (500)

Four, HTML: HTML

1. Comment

Notes is the mother of Code!

When setting up the page, often use comments to divide the region.

1.1 Single-line comments

<!--注释内容-->

More than 2.2-line comments

In fact, single-line comment directly on the inside wrap on it

<!--
注释内容
注释内容
注释内容
-->

2. Document Structure

<html>
    <head></head>  head头不是给人看的，是给浏览器看的
    <body></body>  body内的代码才是给人看的
</html>

3. Label

3.1 HTML tags

Commonly referred to as HTML markup tags HTML tags (HTML tag).

HTML tags are keywords surrounded by angle brackets, for example
Most HTML tags come in pairs, such as <b> </b>
The label on the label is the first start tag, the second tag is the end tag
Start and end tags are also called opening tags and closing tags

3.2 tags typically should have two properties

id: ID number is similar is that each tag should have an id value, and at the same html document, id tags can not be repeated
class: class attributes, somewhat similar to the object-oriented inheritance, class = 'c1 c2 c3', you'll have all the label style of c1 c2 c3

4. classification label

4.1 pairs of labels and self-closing tags

Ditag shall have a head end of the label, such as

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>

Tag is the only one self-closing bracket arrow label, such as

<img src="图片链接，可以是本地地址，也可以是网络地址"/>

4.2 level tag and the tag line

Refers to a block-level tag in the browser display on a separate line in the tag, block-level element is

特点：
    1. 块级标签内可以嵌套其他块级标签和行内标签
    2. p标签虽然是块级标签，但是他的内部不能嵌套任何块级标签，只能嵌套行内标签。
举例：
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<p>这是p标签的效果<s>这是s标签效果</s></p>
<br>
<hr>
<div>这里是div</div>

Inline tag is inline elements

特点：
    1. 内部文本多大，标签的位置就占多大
    2. 行内不能嵌套行内和块级标签
举例：
<s>这是s标签效果</s>
<i>这是i标签的效果</i>
<u>这是u标签的效果</u>
<b>这是b标签的效果</b>

The commonly used tags

5.1 head the common label

title: page title is defined
style: internal support write css code
link: the introduction of external css style file
script: internal direct write js code can import external js file
meta: definition of source information page

<meta charset="UTF-8">
<title>我的第一个HTML文件</title>
<style>样式代码</style>
<link rel="stylesheet" href="scc文件名">
<script src="js文件名"></script>

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<p>这是p段落标签标签的效果<s>这是s标签效果</s></p>
<u>这是u标签的效果下划线</u>
<i>这是i标签的效果斜体</i>
<s>这是s标签效果删除线</s>
<b>这是b标签的效果加粗</b>
<br>
<hr>

Important tags within the 5.3 body

div: a region, that can be used in combination with other HTML element container
span: text containers, inline elements
a: connecting tab
- Jump function: href parameter controls the jump
  - Jump in the current window by default target = "_self", would like to jump in a new window can be settarget = "_blank"
```
<a href="https://www.sogo.com" id="1">这里是id=1的标签的位置</a>
```
- Anchor point: id set to a value tag, and provided in the href '# + id' click to jump to the position corresponding to.
```
<a href="#1">这里可以连接到标签id为1的标签的位置</a>
```
img: image tag
- src attribute
  1. Picture address, Internet address can also be your local picture address
  2. url (URL), automatically sends a request to obtain images get resources towards the URL
- alt attribute
  
  When the load is not out of the picture when displayed message
- The title attribute
  
  Mouse show up message after suspension
- width和height
  
  These two parameters you only need to set one default can be scaling, two are set, the picture will be distorted

6. Special symbols

1. &nbsp;   空格
2. &amp;    &
3. &yen;    ￥
4. &gt;     >
5. &lt;     <
6. &copy;   ©
7. &reg;    ®

7. label list

7.1 unordered list

ul+li

type parameters:

disc (solid circles, the default value)
circle (open circles)
square (solid squares)
none (no style)

<ul>
    <li>
        what1?
    </li>
    <li>
        what2?
    </li>
</ul>

7.2 ordered list

ol li +