HTML5 - Thuộc tính
Như đã giải thích trong chương trước, các phần tử có thể chứa các thuộc tính được sử dụng để đặt các thuộc tính khác nhau của một phần tử.
Một số thuộc tính được xác định trên toàn cục và có thể được sử dụng trên bất kỳ phần tử nào, trong khi những thuộc tính khác chỉ được xác định cho các phần tử cụ thể. Tất cả các thuộc tính đều có tên và giá trị và trông giống như hình bên dưới trong ví dụ.
Dưới đây là ví dụ về thuộc tính HTML5 minh họa cách đánh dấu phần tử div bằng thuộc tính có tên là lớp bằng cách sử dụng giá trị "example" -
<div class = "example">...</div>Các thuộc tính chỉ có thể được chỉ định trong start tags và không bao giờ được sử dụng trong end tags.
Các thuộc tính HTML5 không phân biệt chữ hoa chữ thường và có thể được viết bằng tất cả chữ hoa hoặc chữ hoa hỗn hợp, mặc dù quy ước phổ biến nhất là gắn với chữ thường.
Thuộc tính chuẩn
Các thuộc tính được liệt kê bên dưới được hỗ trợ bởi hầu hết các thẻ HTML 5.
| Thuộc tính | Tùy chọn | Chức năng |
|---|---|---|
| khóa truy cập | Đã xác định người dùng | Chỉ định một phím tắt để truy cập một phần tử. |
| căn chỉnh | phải, trái, giữa | Căn chỉnh theo chiều ngang các thẻ |
| lý lịch | URL | Đặt hình nền phía sau một phần tử |
| bgcolor | giá trị số, hệ thập phân, RGB | Đặt màu nền phía sau một phần tử |
| lớp học | Đã xác định người dùng | Phân loại một phần tử để sử dụng với Trang tính kiểu xếp tầng. |
| có thể bằng lòng | đúng sai | Chỉ định xem người dùng có thể chỉnh sửa nội dung của phần tử hay không. |
| danh mục | Id menu | Chỉ định menu ngữ cảnh cho một phần tử. |
| dữ liệu-XXXX | Đã xác định người dùng | Thuộc tính tùy chỉnh. Tác giả của một tài liệu HTML có thể xác định các thuộc tính của riêng họ. Phải bắt đầu bằng "data-". |
| có thể kéo được | true, false, auto | Chỉ định người dùng có được phép kéo một phần tử hay không. |
| Chiều cao | Giá trị số | Chỉ định chiều cao của bảng, hình ảnh hoặc ô bảng. |
| ẩn | ẩn | Chỉ định xem phần tử có nên hiển thị hay không. |
| Tôi | Đã xác định người dùng | Đặt tên một phần tử để sử dụng với Trang tính kiểu xếp tầng. |
| mục | Danh sách các yếu tố | Dùng để nhóm các phần tử. |
| itemprop | Danh sách các mục | Dùng để nhóm các mặt hàng. |
| kiểm tra chính tả | đúng sai | Chỉ định nếu phần tử phải được kiểm tra chính tả hoặc ngữ pháp. |
| Phong cách | CSS Style sheet | Chỉ định một kiểu nội tuyến cho một phần tử. |
| môn học | Người dùng xác định id | Chỉ định mục tương ứng của phần tử. |
| tabindex | Số tab | Chỉ định thứ tự tab của một phần tử. |
| tiêu đề | Đã xác định người dùng | Tiêu đề "bật lên" cho các phần tử của bạn. |
| giá trị | trên cùng, giữa, dưới cùng | Căn chỉnh theo chiều dọc các thẻ trong phần tử HTML. |
| chiều rộng | Giá trị số | Chỉ định chiều rộng của bảng, hình ảnh hoặc ô bảng. |
Để có danh sách đầy đủ các Thẻ HTML5 và các thuộc tính liên quan, vui lòng kiểm tra tài liệu tham khảo của chúng tôi về Thẻ HTML5 .
Thuộc tính tùy chỉnh
Một tính năng mới đang được giới thiệu trong HTML 5 là việc bổ sung các thuộc tính dữ liệu tùy chỉnh.
Thuộc tính dữ liệu tùy chỉnh bắt đầu bằng data-và sẽ được đặt tên dựa trên yêu cầu của bạn. Đây là một ví dụ đơn giản -
<div class = "example" data-subject = "physics" data-level = "complex">
...
</div>Đoạn mã trên sẽ là HTML5 hoàn toàn hợp lệ với hai thuộc tính tùy chỉnh được gọi là datasubject và data-level . Bạn sẽ có thể nhận các giá trị của các thuộc tính này bằng cách sử dụng JavaScript API hoặc CSS theo cách tương tự như khi bạn lấy các thuộc tính chuẩn.