Web Technology and HTTP Protocol
Table of Contents
Domain Name
1. Concept of Domain Name
2. Structure of Domain Name
3. Types of Domain Names
1. Classified by Hierarchy
2. Classified by Purpose
3. Special Types
4. Registration and Management of Domain Names
Web Pages and HTML
1. Concept of Web Page
2. Basic Knowledge of HTML
1. Core Role of HTML
2. Basic Structure of HTML Document
3. Classification of HTML Tags
4. Syntax Rules of HTML
3. Static Web Pages vs. Dynamic Web Pages
4. New Features of HTML5
HTTP Protocol
1. Definition and Core Features of HTTP Protocol
1. Core Features
2. Workflow of HTTP Protocol
3. Structure of HTTP Request and Response
1. HTTP Request Message
2. HTTP Response Message
4. Evolution of HTTP Protocol Versions
5. Security Extension of HTTP: HTTPS
Domain Name
1. Concept of Domain Name
Domain Name (Domain Name) is a string name used to identify and locate websites, servers, or network resources on the Internet. It replaces complex IP addresses (e.g., <span>172.217.14.206</span>) with easy-to-remember text, facilitating user access to network resources.
- • Core Role:
- • Serves as the “address” of a website, simplifying user access to network resources.
- • Resolves the domain name to the corresponding IP address through DNS (Domain Name System) to enable network communication.
2. Structure of Domain Name
Domain names adopt a hierarchical structure, increasing in level from right to left, separated by dots (<span>.</span>). For example:<span>mail.example.com</span>
- 1. **Top-Level Domain (TLD)**:
- • The rightmost part, such as
<span>.com</span>,<span>.org</span>,<span>.cn</span>. - • Divided into two categories:
- • **Generic Top-Level Domains (gTLD)**: such as
<span>.com</span>(commercial),<span>.org</span>(non-profit),<span>.net</span>(network services). - • **Country Code Top-Level Domains (ccTLD)**: such as
<span>.cn</span>(China),<span>.us</span>(United States),<span>.jp</span>(Japan).
- • Immediately to the left of the top-level domain, such as
<span>example</span>in<span>example.com</span>. - • Can be customized by users (requires registration).
- • Branches under the second-level domain, such as
<span>mail.example.com</span>in<span>mail</span>. - • Commonly used to divide website functions (e.g.,
<span>blog.example.com</span>).
3. Types of Domain Names
1. Classified by Hierarchy
- • **Top-Level Domain (TLD)**:
- • Traditional gTLD:
<span>.com</span>,<span>.org</span>,<span>.edu</span>(educational institutions), etc. - • New gTLD: Opened after 2012, such as
<span>.app</span>,<span>.shop</span>,<span>.ai</span>(Anguilla or artificial intelligence field). - • ccTLD: Country/region-based domains, such as
<span>.de</span>(Germany),<span>.uk</span>(United Kingdom). - • Second-Level Domain: such as
<span>.co.uk</span>(UK commercial),<span>.com.cn</span>(China commercial).
2. Classified by Purpose
- • Generic: Widely used
<span>.com</span>,<span>.net</span>. - • Industry-Specific:
<span>.edu</span>(education),<span>.gov</span>(government),<span>.hospital</span>(medical). - • Geographic:
<span>.nyc</span>(New York City),<span>.paris</span>(Paris). - • Brand: Custom top-level domains by companies, such as
<span>.google</span>,<span>.apple</span>.
3. Special Types
- • **Internationalized Domain Names (IDN)**: Support non-Latin characters (e.g., Chinese, Arabic), such as
<span>中国移动.中国</span>. - • Reserved Domain Names: such as
<span>localhost</span>(local testing),<span>example.com</span>(example domain).
4. Registration and Management of Domain Names
- 1. Registration Process:
- • Check and purchase available domain names through a domain registrar (e.g., GoDaddy, Alibaba Cloud).
- • Must provide owner information (real-name authentication required), and pay annual renewal fees.
- • ICANN (Internet Corporation for Assigned Names and Numbers): Oversees the global domain name system.
- • National Organizations: For example, CNNIC manages
<span>.cn</span>domains in China.
- • Can enable “WHOIS privacy protection” during registration to hide personal information.
Web Pages and HTML
1. Concept of Web Page
Web Page (Web Page) is an information carrier accessed via a browser on the Internet, composed of text, images, videos, hyperlinks, and other elements, built on HTML (HyperText Markup Language).
- • Core Features:
- • Uniquely identified by a URL (Uniform Resource Locator), for example,
<span>https://www.example.com/page.html</span>. - • Supports cross-platform access (PC, mobile, tablet, etc.).
- • Can be static (fixed content) or dynamic (content generated in real-time by the server).
2. Basic Knowledge of HTML
HTML (HyperText Markup Language) is the standard markup language used to create web pages, defining the structure and semantics of content through tags.
1. Core Role of HTML
- • Describes the structure of web page content (headings, paragraphs, lists, etc.).
- • Embeds multimedia (images, audio, video) and hyperlinks.
- • Works with CSS (styles) and JavaScript (interactivity) to build complete front-end pages.
2. Basic Structure of HTML Document
<!DOCTYPE html> <!-- Declare document type as HTML5 -->
<html lang="en"><!-- Root tag, defines page language -->
<head>
<meta charset="UTF-8"><!-- Character encoding declaration -->
<title>Page Title</title><!-- Title displayed in browser tab -->
<link rel="stylesheet" href="style.css"><!-- Include CSS -->
</head>
<body>
<h1>This is a Title</h1><!-- Level 1 heading -->
<p>This is a paragraph.</p><!-- Paragraph -->
<img src="image.jpg" alt="Image Description"><!-- Insert image -->
<script src="script.js"></script><!-- Include JavaScript -->
</body>
</html>3. Classification of HTML Tags
- • Semantic Tags (New in HTML5):
- •
<span><header></span>: Header; - •
<span><nav></span>: Navigation bar; - •
<span><section></span>: Page block; - •
<span><article></span>: Independent content (e.g., blog post); - •
<span><footer></span>: Footer. - • Content Tags:
- •
<span><h1></span>~<span><h6></span>: Headings; - •
<span><p></span>: Paragraph; - •
<span><ul></span>/<span><ol></span>: Unordered/Ordered lists; - •
<span><a href="..."></span>: Hyperlink; - •
<span><img></span>: Image; - •
<span><table></span>: Table. - • Functional Tags:
- •
<span><form></span>: Form; - •
<span><input></span>: Input box; - •
<span><video></span>/<span><audio></span>: Video/Audio; - •
<span><div></span>/<span><span></span>: Generic container (to be used with CSS).
4. Syntax Rules of HTML
- • Tags are enclosed in angle brackets, such as
<span><tag></span>. - • Most tags appear in pairs (start tag + end tag), such as
<span><p>Content</p></span>. - • Some tags are self-closing (no end tag), such as
<span><img src="..."></span>. - • Tags can contain attributes, such as
<span><a href="https://example.com" target="_blank">Link</a></span>.
3. Static Web Pages vs. Dynamic Web Pages
| Feature | Static Web Page | Dynamic Web Page |
| Content Generation | Server directly returns pre-generated HTML files | Server generates HTML content in real-time based on user requests |
| Technical Dependency | Only requires HTML/CSS/JavaScript | Requires backend languages (e.g., PHP, Python) and databases |
| Update Frequency | Manually modify files | Content dynamically changes with the database or user input |
| Typical Scenarios | Corporate websites, personal blogs | E-commerce platforms, social websites |
4. New Features of HTML5
- 1. Semantic Tags:
- • New tags such as
<span><article></span>,<span><section></span>,<span><nav></span>enhance code readability and SEO optimization.
- • Native support for
<span><video></span>and<span><audio></span>tags, eliminating the need for Flash plugins.
- •
<span><canvas></span>tag enables drawing and game development.
- • New input types (e.g.,
<span>email</span>,<span>date</span>,<span>range</span>) and attributes (e.g.,<span>placeholder</span>,<span>required</span>) have been added.
- •
<span>localStorage</span>and<span>sessionStorage</span>replace cookies, enhancing data storage capabilities.
HTTP Protocol
1. Definition and Core Features of HTTP Protocol
HTTP (HyperText Transfer Protocol) is an application layer protocol based on the client-server model used for transmitting hypertext (such as HTML, images, etc.) over the World Wide Web.
1. Core Features
- • Stateless: Each request is independent, and the server does not retain historical interaction information of the client (relies on cookies/sessions to maintain state).
- • Connectionless: In early HTTP/1.0, a new TCP connection had to be established for each request; HTTP/1.1 later supported persistent connections.
- • Plaintext Transmission: By default, data is not encrypted (HTTPS solves this through TLS/SSL encryption).
- • Flexibility: Supports the transmission of any type of data (marked by
<span>Content-Type</span>), such as text, images, videos, etc.
2. Workflow of HTTP Protocol
- 1. Client Initiates Request: The browser generates an HTTP request message through the URL.
- 2. Establish TCP Connection: Establish a TCP connection between the client and server through the three-way handshake (HTTP/1.1 defaults to connection reuse).
- 3. Server Processes Request: Parses the request content, performs database queries or file operations.
- 4. Return Response: The server generates an HTTP response message containing the status code and resource.
- 5. Close Connection: Release the TCP connection through the four-way handshake (in non-persistent connection scenarios).
3. Structure of HTTP Request and Response
1. HTTP Request Message
GET /index.html HTTP/1.1 # Request line (method + path + protocol version)
Host: www.example.com # Required header (specifies target domain)
User-Agent: Mozilla/5.0 # Client identifier
Accept: text/html # Acceptable content types
Cookie: session_id=abc123 # Client cookie
# Separates header and body (request body, GET method usually has no body)- • Common Methods:
- •
<span>GET</span>: Retrieve resource (idempotent). - •
<span>POST</span>: Submit data (non-idempotent, e.g., user registration). - •
<span>PUT</span>/<span>DELETE</span>: Update/Delete resource (commonly used in RESTful APIs).
2. HTTP Response Message
HTTP/1.1 200 OK # Status line (protocol version + status code + description)
Content-Type: text/html # Response content type
Set-Cookie: session_id=abc123 # Server sets cookie
Content-Length: 1024 # Length of response body
# Separates header and body
<!DOCTYPE html> # Response body (HTML content)- • Status Code Classification:
- •
<span>1xx</span>: Informational (e.g.,<span>101 Switching Protocols</span>). - •
<span>2xx</span>: Success (e.g.,<span>200 OK</span>,<span>201 Created</span>). - •
<span>3xx</span>: Redirection (e.g.,<span>301 Moved Permanently</span>). - •
<span>4xx</span>: Client error (e.g.,<span>404 Not Found</span>). - •
<span>5xx</span>: Server error (e.g.,<span>500 Internal Server Error</span>).
4. Evolution of HTTP Protocol Versions
| Version | Core Improvements |
| HTTP/1.0 | Supports multiple content types (MIME), but requires a new TCP connection for each request. |
| HTTP/1.1 | Persistent connections, pipelining, Host header field (supports virtual hosting). |
| HTTP/2 | Binary framing, multiplexing, header compression, server push. |
| HTTP/3 | Based on QUIC protocol (UDP replaces TCP), solving head-of-line blocking issues. |
5. Security Extension of HTTP: HTTPS
- 1. Encryption Mechanism: Encrypts HTTP content through TLS/SSL protocols to prevent eavesdropping and tampering.
- 2. Authentication: The server must provide a digital certificate (issued by CA) to verify its authenticity.
- 3. Default Port: Uses
<span>443</span>port (HTTP default is<span>80</span>).
Link: https://blog.csdn.net/Lemon__ing/article/details/147575650?spm=1001.2014.3001.5502
Copyright belongs to the original author, infringement will be deleted.