What Is Frontend?

Frontend refers to all elements that users interact with directly. This includes PC websites, mobile pages, tablet interfaces, automotive displays, and large-screen presentations. Anything visible to the human eye falls under frontend.

Backend, conversely, consists of code that users cannot see directly. It handles operations behind the scenes without direct user interaction. Common backend languages include Python, Java, and Go.

Why Learn Frontend?

Mastering frontend development allows one to become a full-stack engineer, capable of handling both client-side and server-side tasks, database management, and system operations.

While we won't delve too deeply into frontend technologies, learning basic skills enables writing simple web pages, debugging existing code, and understanding others' implementations.

Core Topics in Frontend Learning

1. HTML: Provides the structural framework for webpages. It focuses solely on displaying content without styling.
2. CSS: Enhances the appearance of HTML structures, making webpages visually appealing.
3. JavaScript: Adds interactivity and dynamic behavior to static HTML and CSS elements.
4. Bootstrap and jQuery: Known as the frontend trio, these libraries streamline responsive design and DOM manipulation.

Additionally, frameworks like Vue, React, and Angular.js are commonly used alongside these foundational tools.

Process from URL Entry to Page Display

When entering a URL and pressing Enter:

1. The browser sends an HTTP request to the server.
2. The server processes the request.
3. The server responds with data.
4. The browser renders and displays the received content.

The browser acts as the execution environment for frontend code, translating HTML, CSS, and JavaScript into visual output. A single browser is sufficient for frontend development since it serves as the interpreter for all frontend instructions.

The browser functions as a universal client, capable of interacting with various servers (e.g., Taobao, Tencent Video, JD.com). You can develop a B/S architecture application by creating a server, leveraging the browser as the client. Using socket programming, you can build a server and utilize the browser as a client.

How does the browser distinguish between different services? All servers must adhere to standardized protocols—specifically, the HTTP protocol—to ensure compatibility.

HTTP operates at the application layer, relying on TCP/UDP (transport layer) and IP (network layer).

HTTP Protocol Overview

Key Characteristics

1. Request-Response Model: Every request generates a corresponding response.
2. Application Layer over TCP: Built upon TCP/IP communication.
3. Stateless Nature: Does not retain session data between requests. Session management uses cookies, sessions, tokens, or JWT.
4. Short-Lived Connections: Each request-response cycle typically closes the connection unless kept alive.

Request Components

• Request Line: Contains method, URI, and version (e.g., GET /index.html HTTP/1.1).
• Headers: Key-value pairs providing metadata about the request.
• Body: Optional payload containing data sent to the server.

Response Components

• Status Line: Includes status code and reason phrase (e.g., 200 OK).
• Headers: Metadata about the response.
• Body: The actual content returned by the server.

HTTP Methods

GET

Used to retrieve resources from the server. Parameters appear in the URL query string:

https://example.com/page?param1=value1&param2=value2

GET requests are limited in data size (~4KB) and less secure due to visibility in URLs.

POST

Used to submit data to the server. Parameters are included in the request body.

POST offers greater security and capacity for data transmission.

Common Status Codes

• 1xx: Informational responses.
• 2xx: Successful responses (e.g., 200 OK).
• 3xx: Redirections (e.g., 301 Moved Permanently, 302 Found).
• 4xx: Client errors (e.g., 404 Not Found).
• 5xx: Server errors (e.g., 500 Internal Server Error).

Introduction to HTML

HTML defines the structure of web content through tags. Examples include:

<h1>Hello Python</h1>
<h5>Hello Python</h5>
<a href="http://baidu.com">Click Me</a>
<img src="">

Writing Frontend Code

Various environments support frontend development:

• PyCharm
• Browser-based editors
• Plain text files (.txt)
• Visual Studio Code

HTML Document Structure

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

The <head> section holds configuration and metadata not displayed to users, whereas the <body> contains visible content.

Opening HTML Files

• Click the browser icon in PyCharm.
• Right-click the file and select "Open with Browser".

The browser interprets HTML, CSS, and JavaScript to render the webpage.

Common Tags in <head>

<title>Browser Tab Title</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>

Common Tags in <body>

Basic formatting tags:

<b>Bold Text</b>
<i>Italic Text</i>
<u>Underline</u>
<s>Strikethrough</s>
<p>Paragraph</p>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<br>
<hr>

Special Characters:

Symbol	Entity
Space	 
>	>
<	&lt;
&	&amp;
¥	&yen;
©	&copy;
®	&reg;