1. Khái niệm Frontend
Frontend bao gồm tất cả giao diện tương tác trực tiếp với người dùng như màn hình máy tính, điện thoại hoặc tablet.
Bổ sung: Backend là gì?
Backend hoạt động như bộ xử lý phía sau (gồm các đoạn mã không hiển thị), không tương tác trực tiếp với người dùng.
2. Lộ trình học Frontend
- HTML: Cấu trúc nền tảng của trang web
- CSS: Thêm định dạng và giao diện trực quan
- JavaScript: Điều khiển hiệu ứng động và tương tác
- Framework: Vue, React, Angular - cung cấp thành phần đóng gói sẵn
3. Mô hình Phần mềm
client-server # Ứng dụng máy khách - máy chủ
browser-server # Trình duyệt - máy chủ
# browser-server thực chất là dạng client-server4. Quy trình truy cập Website
'''
1. Trình duyệt gửi yêu cầu đến máy chủ
2. Máy chủ nhận yêu cầu (vd: trang chủ Google)
3. Máy chủ phản hồi dữ liệu tương ứng
4. Trình duyệt hiển thị nội dung sau khi xử lý
'''4.1. Nhận diện máy chủ
Các trình duyệt nhận diện dịch vụ khác nhau thông qua giao thức chuẩn HTTP
5. Giao thức HTTP
HTTP (HyperText Transfer Protocol): Quy định định dạng giao tiếp giữa trình duyệt và máy chủ
5.1. Đặc điểm cơ bản
- Mô hình Yêu cầu - Phản hồi
- Hoạt động trên tầng ứng dụng của TCP/IP
- Không lưu trạng thái: Không ghi nhớ thông tin người dùng giữa các phiên
- Kết nối ngắn: Ngắt kết nối sau mỗi giao dịch
5.2. Cấu trúc Yêu cầu
- Dòng yêu cầu (HTTP version + phương thức)
- GET: Truy vấn dữ liệu (tham số hiển thị trên URL)
- POST: Gửi dữ liệu (thường dùng cho form đăng nhập)
- Tiêu đề (các cặp key-value)
- Dấu phân cách \r\n
- Nội dung (chứa dữ liệu nhạy cảm với POST)
5.3. Cấu trúc Phản hồi
- Dòng trạng thái (HTTP version + mã phản hồi)
- 1xx: Đã nhận yêu cầu, đang xử lý
- 2xx: Thành công (200 OK)
- 3xx: Chuyển hướng
- 4xx: Lỗi phía máy khách (404 Not Found)
- 5xx: Lỗi máy chủ (500 Internal Error)
- Tiêu đề phản hồi
- Dấu phân cách \r\n
- Nội dung chính (hiển thị trên trình duyệt)
6. Giới thiệu HTML
HTML (HyperText Markup Language): Ngôn ngữ đánh dấu chuẩn để xây dựng trang web
<!-- Ghi chú đơn dòng -->
<!--
Ghi chú đa dòng
Giúp tổ chức mã nguồn
-->Cấu trúc tài liệu
<html>
<head>
<!-- Cấu hình (không hiển thị trực tiếp) -->
</head>
<body>
<!-- Nội dung hiển thị -->
</body>
</html>