What is the front-end

Any dealing directly with the user interface, it can also be called a front end
Skeleton HTML ---> content pages
CSS ---> appearance, the page style
JavaScript ---> Action

Software development framework

c/s
b / s, essentially b / s is also the c / s

The nature of web services

Request and response
Browser enter the URL and then Enter, sent what things
- Sending a request towards the server address specified
- The server receives the request and processes
- The server returns the result of the process
- Browser to receive and render nice to see the page displayed to the user

Two ways to request

get request
- To resources towards server
post request
- North Korea to submit data server

HTTP protocol

Hypertext Transfer Protocol Hyper Text Transfer Protocol
It specifies the data format of the server and browser data transmission

Four characteristics

Protocol based on TCP / IP protocol on the application layer acting
Response based on the request, a request corresponding to the primary response
Stateless, the client does not save state
No connection, the client and server do not have to establish a connection
- Long connection, websocket, long connection

Data Format

Request format
- The first line of the request (request mode protocol version)
- Request header (a thigh k: v key-value pairs)
- \r\n
- Request body (sensitive information, such as passwords, etc.
Response format
- The first line of response (response mode protocol version)
- Response header (a large push k: v key-value pairs)
- \r\n
- Response body (see user data)

The response status code

Digital code to represent the state of the server's response
- 1XX: the server has successfully received the request is being processed, you can continue to submit additional data
- 2XX: server successfully responded to the response data (200)
- 3XX: Redirection
- 4XX: (404 requests the presence of Resources) (403 request does not meet certain conditions, can not access normal)
- 5XX: internal server error (500)

Code

First written server
Browser (Client) input 127.0.0.1:8888access clients

# text1.txt: This is a test of HTTP

# 服务端
import socket

server = socket.socket()
server.bind(('127.0.0.1', 8888))
server.listen(5)

while True:
    conn, addr = server.accept()
    data = conn.recv(1024)
    # 响应首行
    conn.send(b'HTTP/1.1 200 OK\r\n\r\n')

    with open(r'text1.txt', 'rb') as f:
        conn.send(f.read())
    conn.close()

HTML

HTML Hyper Text Markup Language
< > Tags spree ...

Note

Note the code of the mother
When setting up the page, often use comments to the divided region

<!--导航条开始-->

<!--导航条结束-->
<!--侧边栏开始-->

<!--侧边栏结束-->

Single-line comments

<!--单行注释-->

Multi-line comments

<!--
多行注释1
多行注释2
多行注释3
-->

HTML document structure

head is not the posters, and is looking to the browser
Code within the body is the posters

<html>
    <head></head>  
    <body></body>
</html>

Classification and labeling

Ditags, both heads and tails
- <h1>This is the first html page I made!</h1>
Self-closing tag, both head no tail
- <img src="test.jpg"/>

The head commonly used tags

title defined page title <title>Welcome to MrBigB's Website</title>
internal support writing style css code

<style>
        h1 {
            color: darkred;
        }
    </style>

link the introduction of external css style file <link rel="stylesheet" type="text/css" href="test.css"/>

/* test.css */

h2 {
    color: darkgreen;
}

Internal script can be written directly js code, you can import external js document
- <script>alert="Hello world!"</script>
- <script src="test.js"></script>
meta-defined page source information

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Welcome to MrBigB's Website</title>
    <style>
        h1 {
            color: darkred;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="test.css"/>
    <script src="test.js"></script>
</head>
<body>
<h1>This is the first html page I made!</h1>
<h2>HTML is fucking awesome!</h2>
<img src="https://images.cnblogs.com/cnblogs_com/bigb/1551224/o_%E9%A6%96%E9%A1%B5%E5%B1%95%E7%A4%BA.jpg"/>
</body>
</html>

Special symbols within the body

  Blank
& &
yen; ¥
> >
< <
© ©
® ®

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Welcome to MrBigB's website!</title>
</head>
<body>
<h1>h1标签效果测试</h1>
<h2>h2标签效果测试</h2>
<h3>h3标签效果测试</h3>

<s>s标签效果测试</s>
<b>b标签效果测试</b>
<u>u标签效果测试</u>
<i>i标签效果测试</i>

<p>p标签效果测试</p>
<br>
我是无标签文本1上面测试的br标签效果
<hr>
我是无标签文本2上面测试的是hr标签的效果
<p>p标签效果测试</p>

<p>a &gt; b</p>
<p>a &lt; b</p>
<p>&amp;</p>
<p>&yen;</p>
<p>&copy;</p>
<p>&reg;</p>

</body>
</html>

Block-level tags and labels inline

Inline tags, text inside how much accounted: s, i, u, b, span
- The row labels and tags can be nested within the block-level row labels
Own line block-level tags: h1-h6, p, br, hr, div
- Within the block-level tags can be nested within other block-level labels and row labels
- Note: p is block-level tag while the tag, but only nested rows in the tag, the tag can not be nested block-level

Two attributes tags

No id tags, each tag should have an id, and the same document, id tag is unique
class class attributes, somewhat similar to the object-oriented inheritance
- class = "c1, c2, c3" The current label will have all styles c1, c2, c3 of

Several important within the body tag

div
- It is a block tag
- Equivalent to an area, you can fill any content to the region
span
- It is an inline tag
a connecting tab
- Jump function, href parameter control of the jump, target parameter control is to jump in current or new page to open the page (_self, _blank)
Anchor function


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Welcome to MrBigB's Website</title>
</head>
<body>
<a href="" id="a1">start</a>
<a href="http://www.baidu.com" target=_self>click me to search</a>
<div style="background-color: darkred;height: 200px"></div>
<div style="background-color: darkgreen;height: 200px"></div>
<div style="background-color: darkblue;height: 200px"></div>
<a href="" id="a2">middle</a>
<div style="background-color: darkblue;height: 200px"></div>
<div style="background-color: darkgreen;height: 200px"></div>
<div style="background-color: darkred;height: 200px"></div>
<a href="#a1">back to the start</a>
<br>
<a href="#a2">bac to the middle</a>
</body>
</html>

img image tag
- src picture address
- alt not loaded when the picture came out to show the message
- Message after the title mouse over the picture
- width and height settings Photo Gallery size, you can simply set a default geometric scaling

  <img src="test.jpg" alt="this is a picture of a dog" title="the dog is playing" height="200"/>

List tab

ul unordered list
- disc filled circle (default)
- circle Hollow circle
- square filled squares
- none Unstyled
ol ordered list
- A list of numbers
- A capital letter
- a lowercase letters
- I capitalized Rome
- i lowercase Roman
dl title list
- dt subtitle
- dd subsections

Table tags

When the display data is generally used form tag

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签</title>
</head>
<body>
<table border="1">
    <thead> <!--表头-->
    <tr> <!--一个tr代表一行-->
        <th>name</th>
        <th>gender</th>
        <th>age</th>
    </tr>
    </thead>
    <tbody> <!--表数据-->
    <tr>
        <td>bigb</td>
        <!--<td rowspan="2">bigb</td>--> 
        <td>male</td>
        <td>18</td>
    </tr>
    <tr>
        <td>blake</td>
        <!--<td colspan="2">blake</td>-->
        <td>female</td>
        <td>22</td>
    </tr>
    </tbody>
</table>
</body>
</html>

HTML 01

What is the front-end

Software development framework

The nature of web services

Two ways to request

HTTP protocol

Four characteristics

Data Format

The response status code

Code

HTML

Note

HTML document structure

Classification and labeling

The head commonly used tags

Within the body commonly used tags

Special symbols within the body

Block-level tags and labels inline

Two attributes tags

Several important within the body tag

List tab

Table tags

Guess you like