Thẻ <meta> HTML
Định nghĩa và cách sử dụng
<meta> Thẻ định nghĩa metadata về tài liệu HTML. Metadata là dữ liệu về dữ liệu (thông tin).
<meta> Thẻ luôn nằm Phần tử <head> Trong, thường được sử dụng để chỉ định bộ mã ký tự, mô tả trang, từ khóa, tác giả tài liệu và cài đặt viewport:
Metadata sẽ không hiển thị trên trang web, nhưng có thể được máy phân tích.
Browser (cách hiển thị nội dung hoặc tải lại trang web), công cụ tìm kiếm (từ khóa) và các dịch vụ mạng khác sẽ sử dụng metadata.
Lưu ý:Phần tử meta có nhiều cách sử dụng khác nhau và có thể có nhiều phần tử meta trong một tài liệu HTML.
Lưu ý:Bằng cách <meta> Thẻ, có một cách để người thiết kế trang web kiểm soát viewport (tức là vùng mà người dùng có thể nhìn thấy trên trang web) (xem ví dụ "Cài đặt viewport" bên dưới).
Lưu ý:Mỗi phần tử meta chỉ được sử dụng một mục đích. Nếu muốn sử dụng nhiều tính năng hơn, bạn nên thêm nhiều phần tử meta vào phần tử head.
Xem thêm:
HTML hướng dẫn:Đầu HTML
HTML DOM tài liệu tham khảo:Đối tượng Meta
Mô hình
<head> <meta charset="UTF-8"> <meta name="description" content="Miễn phí Web hướng dẫn"> <meta name="keywords" content="HTML, CSS, JavaScript"> <meta name="author" content="Bill Gates"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head>
Thuộc tính
| Thuộc tính | Giá trị | Mô tả |
|---|---|---|
| charset | Bộ mã ký tự | Định nghĩa mã hóa ký tự của tài liệu HTML. |
| content | Text | Định nghĩa giá trị liên quan đến thuộc tính http-equiv hoặc name. |
| http-equiv |
|
Cung cấp thông tin/giá trị cho thuộc tính content thông qua trường tiêu đề HTTP. |
| name |
|
qui định tên của metadata. |
thuộc tính toàn cục
<meta> thẻ Thuộc tính toàn cục trong HTML.
Thẻ meta có ba cách sử dụng典型:
- Định nghĩa các cặp metadata tên/giá trị
- Tuyên bố mã hóa
- Tạo trường tiêu đề HTTP
1: Định nghĩa các cặp metadata tên/giá trị khác nhau
Thẻ meta có thể được định nghĩa bằng cách sử dụng cặp tên/giá trị để xác định metadata, do đó cần sử dụng thuộc tính name và content.
Định nghĩa từ khóa cho công cụ tìm kiếm:
<meta name="keywords" content="HTML, CSS, JavaScript">
Định nghĩa mô tả về trang web:
<meta name="description" content="Miễn phí các hướng dẫn web cho HTML và CSS">
Định nghĩa tác giả của trang:
<meta name="author" content="John Doe">
Đặt viewport, cải thiện外观 của trang web trên các thiết bị khác nhau:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2: Tuyên bố mã hóa
Sử dụng thuộc tính charset để tuyên bố trang này sử dụng mã hóa UTF-8:
<meta charset="UTF-8">
3: Tạo trường tiêu đề HTTP
Sử dụng thuộc tính http-equiv và thuộc tính content để làm mới tài liệu mỗi 30 giây:
<meta http-equiv="refresh" content="30">
Các thay đổi trong HTML5
Thuộc tính charset đã được thêm vào HTML5.
Trong HTML4, thuộc tính http-equiv có thể có nhiều giá trị khác nhau. Trong HTML5, chỉ có thể sử dụng các giá trị được nhắc đến trong trang này.
Thuộc tính scheme trong HTML4 đã không còn được sử dụng trong HTML5.
Ngoài ra, hiện nay không còn sử dụng thẻ meta để chỉ định ngôn ngữ của trang web.
đặt viewport
HTML5 đã giới thiệu một phương pháp, cho phép các nhà thiết kế web <meta> để kiểm soát viewport.
Bạn nên bao gồm các thẻ sau trong tất cả các trang web của mình <meta> Thẻ视口:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Nó cung cấp cho trình duyệt các hướng dẫn về cách kiểm soát kích thước và tỷ lệ phóng đại của trang.
width=device-width Một phần sẽ đặt độ rộng của trang thành theo độ rộng màn hình của thiết bị (tùy thuộc vào thiết bị).
Khi trình duyệt tải trang lần đầu tiên,initial-scale=1.0 Một phần thiết lập mức độ phóng đại ban đầu.
Dưới đây là ví dụ về trang web không có thẻ meta viewport và trang web có thẻ meta viewport:
Lưu ý:Nếu bạn duyệt trang này bằng điện thoại hoặc máy tính bảng, bạn có thể nhấp vào hai liên kết dưới đây để xem sự khác biệt.
Cài đặt CSS mặc định
Không có.
Hỗ trợ trình duyệt
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| Hỗ trợ | Hỗ trợ | Hỗ trợ | Hỗ trợ | Hỗ trợ |
