Khóa học IT HTML Cơ bản 009_Hello HTML
HTML là gì?
Mạng, hay cụ thể hơn là World Wide Web (Mạng toàn cầu), được tạo thành từ nhiều tài liệu và tài nguyên liên kết với nhau. Các tài liệu và tài nguyên này được viết bằng HTML, và chúng được gọi là trang web. HTML là nền tảng của trang web, xác định cấu trúc và nội dung của trang web.
Khi bạn nhập một địa chỉ web (ví dụ: www.zhaojian.net) vào trình duyệt, trình duyệt sẽ gửi yêu cầu đến máy chủ cung cấp trang web đó. Máy chủ phản hồi yêu cầu này và gửi trang web được yêu cầu (tức là một số HTML) trở lại trình duyệt. Sau đó, trình duyệt phân tích HTML này và hiển thị nó như trang web bạn thường thấy.
HTML (HyperText Markup Language, Ngôn ngữ đánh dấu siêu văn bản) là một ngôn ngữ đánh dấu được sử dụng để tạo và thiết kế cấu trúc của trang web. HTML bao gồm một loạt các phần tử (element), có thể được sử dụng để bao quanh các phần nội dung khác nhau để làm cho chúng xuất hiện hoặc hoạt động theo những cách nhất định. Một cặp thẻ có thể thêm siêu liên kết vào văn bản hoặc hình ảnh, đặt văn bản thành in nghiêng, in đậm, đoạn văn, danh sách, v.v.
[!Tóm tắt]
- HTML không phải là ngôn ngữ lập trình, mà là ngôn ngữ đánh dấu
- Tài liệu HTML chứa thẻ HTML và nội dung văn bản (tại sao không có hình ảnh)
- Tài liệu HTML còn được gọi là trang web
Một phần tử HTML hoàn chỉnh (element)
Ví dụ:
<p>hello HTML!</p>Hiệu ứng:
Phân tích cấu trúc:
[!Tóm tắt]
- Một phần tử HTML hoàn chỉnh bao gồm ba phần: thẻ mở, nội dung và thẻ đóng;
- Thẻ mở (Opening tag): Chứa tên phần tử (trong ví dụ này là p), được bao quanh bởi dấu ngoặc nhọn trái và phải. Thẻ mở đánh dấu nơi phần tử bắt đầu hoặc bắt đầu có hiệu lực;
- Nội dung (Content): Nội dung của phần tử;
- Thẻ đóng (Closing tag): Tương tự như thẻ mở, nhưng bao gồm dấu gạch chéo trước tên phần tử. Điều này đánh dấu sự kết thúc của phần tử. Không bao gồm thẻ đóng là lỗi phổ biến của người mới bắt đầu, có thể tạo ra kết quả kỳ lạ.
Một trang HTML hoàn chỉnh
Ví dụ:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>hello HTML</title></head><body> <p>hello HTML!</p></body></html>Hiệu ứng:
Phân tích cấu trúc:
[!Tóm tắt]
<!DOCTYPE html>— Khai báo loại tài liệu HTML. Loại tài liệu là di sản lịch sử, được sử dụng để cho trình duyệt biết phiên bản và loại của tài liệu. Khai báo DOCTYPE chế độ nghiêm ngặt HTML4:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html></html>— Phần tửhtml, tất cả nội dung trong trang HTML, đôi khi được gọi là phần tử gốc.<head></head>— Phần tửhead, nội dung của nó không hiển thị cho người dùng, chứa những thứ như từ khóa tìm kiếm cho công cụ tìm kiếm, mô tả trang, kiểu CSS, tệp JavaScript và khai báo mã hóa ký tự.<meta charset="utf-8">— Phần tửmeta, được sử dụng để cung cấp siêu dữ liệu về tài liệu HTML. Thuộc tính charset đặt bộ ký tự của tài liệu thành UTF-8.<title></title>— Phần tửtitle. Phần tử này đặt tiêu đề trang, được hiển thị trên tab trình duyệt và được sử dụng làm văn bản mô tả khi đánh dấu trang.<body></body>— Phần tửbody. Phần tử này chứa nội dung bạn muốn người dùng nhìn thấy khi họ truy cập trang, bao gồm văn bản, hình ảnh, video, trò chơi, bản âm thanh có thể phát hoặc nội dung khác.<p></p>— Phần tử đoạn văn, biểu thị một đoạn văn bản.
Tên phần tử | Chức năng | Ví dụ |
|---|---|---|
<!DOCTYPE html> | Xác định loại và phiên bản của tài liệu HTML | <!DOCTYPE html> |
<html> | Xác định phần tử gốc của tài liệu HTML | <html lang="en"> |
<head> | Chứa thông tin meta về tài liệu, như tiêu đề, khai báo bộ ký tự, liên kết kiểu và tập lệnh, v.v. | <head>...</head> |
<title> | Xác định tiêu đề của tài liệu, hiển thị trên thanh tiêu đề hoặc tab của trình duyệt | <title>My Web Page</title> |
<meta> | Cung cấp thông tin meta về tài liệu, như bộ ký tự, cài đặt viewport, từ khóa, v.v. | <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
<link> | Tham chiếu tài nguyên bên ngoài, như bảng kiểu và biểu tượng | <link rel="stylesheet" href="styles.css"> <link rel="icon" href="favicon.ico" type="image/x-icon"> |
<style> | Xác định kiểu của tài liệu nội bộ | <style>body { font-family: Arial, sans-serif; }</style> |
<script> | Xác định hoặc tham chiếu tập lệnh, có thể bao gồm trong tài liệu hoặc tham chiếu tập lệnh bên ngoài | <script src="script.js"></script> |
<noscript> | Xác định nội dung hiển thị khi trình duyệt không hỗ trợ tập lệnh | <noscript>Sorry, your browser does not support JavaScript.</noscript> |
<base> | Chỉ định URL cơ sở cho tất cả các liên kết tương đối trong trang | <base href="https://www.zhaojian.net/"> |
Liên kết:
Tiện ích mở rộng VS Code: Remote - SSH Remote Development
Trình duyệt web Google Chrome Trình duyệt web Google Chrome (Trung Quốc)