Thẻ HTML được sử dụng để cung cấp phiên bản nội dung của chính nó có thể đọc được bằng máy. Điều này có thể hữu ích trong trường hợp dữ liệu của bạn cần ở một định dạng nhất định vì nó có thể được xử lý bởi một tập lệnh, nhưng đây có thể không phải là định dạng mà bạn muốn người dùng của mình nhìn thấy
Ví dụ: bạn có thể muốn hiển thị số cho người dùng của mình được viết bằng chữ cái [ví dụ: Một, Hai, Ba. v.v.], nhưng bạn cũng có thể có một tập lệnh sắp xếp các số theo thứ tự tăng dần hoặc giảm dần. Tập lệnh như vậy có thể yêu cầu các số được cung cấp dưới dạng số [ví dụ: 1, 2, 3. v.v.] thay vào đó. Thẻ cho phép bạn khắc phục điều này bằng cách cung cấp hai số - một cho người dùng [được cung cấp trong các thẻ
] và một cho tập lệnh [được cung cấp trong thuộc tính
value
]. Điều này có thể trông giống như. One
Sử dụng một ví dụ khác, bạn có thể muốn hiển thị danh sách các sản phẩm để người dùng của mình lựa chọn. Mỗi sản phẩm có một ID sản phẩm duy nhất. Vì ID sản phẩm là một số dài nên nó không thân thiện với người dùng [tôi. e. người dùng có thể sẽ không biết sản phẩm là gì chỉ bằng cách nhìn vào ID của nó]. Do đó, bạn đặt ID sản phẩm vào thuộc tính value
của phần tử . Sau đó, bạn hiển thị tiêu đề sản phẩm cho người dùng
Lưu ý rằng nếu giá trị liên quan đến ngày hoặc giờ, hãy sử dụng thẻ để thay thế
Thí dụ
Ví dụ này hiển thị danh sách sách. Người dùng nhìn thấy tên sách thực tế [được cung cấp giữa các thẻ ]. ID sản phẩm được cung cấp bởi thuộc tính
value
Mặc dù ví dụ này không xử lý dữ liệu được cung cấp trong thẻ , nhưng nó minh họa cách thẻ
có thể được sử dụng trong tài liệu HTML5
Chạy
Xem trước trình chỉnh sửa
Thuộc tính
Các thẻ HTML có thể chứa một hoặc nhiều thuộc tính. Các thuộc tính được thêm vào thẻ để cung cấp cho trình duyệt thêm thông tin về cách thẻ sẽ xuất hiện hoặc hoạt động. Các thuộc tính bao gồm tên và giá trị được phân tách bằng dấu bằng [=], với giá trị được bao quanh bởi dấu ngoặc kép. Đây là một ví dụ, 2
Có 3 loại thuộc tính mà bạn có thể thêm vào thẻ HTML của mình. Thuộc tính nội dung trình xử lý sự kiện, toàn cầu và phần tử cụ thể
Các thuộc tính mà bạn có thể thêm vào thẻ này được liệt kê bên dưới
Thuộc tính cụ thể của phần tử
Bảng sau đây hiển thị các thuộc tính dành riêng cho thẻ/phần tử này
AttributeDescriptionvalueCung cấp phiên bản nội dung của phần tử mà máy có thể đọc được. Thuộc tính bắt buộcThuộc tính toàn cầu
Các thuộc tính sau là tiêu chuẩn trên tất cả các thẻ HTML 5 [mặc dù thuộc tính 3 không áp dụng cho các phần tử
4]
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
value
0value
1value
2value
3value
4value
53
value
7value
8
Để có giải thích đầy đủ về các thuộc tính này, hãy xem thuộc tính toàn cầu HTML 5
Thuộc tính nội dung xử lý sự kiện
Các thuộc tính nội dung của trình xử lý sự kiện cho phép bạn gọi một tập lệnh từ bên trong HTML của mình. Tập lệnh được gọi khi một "sự kiện" nhất định xảy ra. Mỗi thuộc tính nội dung xử lý sự kiện xử lý một sự kiện khác nhau
Dữ liệu này không hiển thị với người dùng nhưng thường được JavaScript sử dụng để cải thiện trải nghiệm người dùng của trang web
Ba mặt hàng trong danh sách [trái cây] có đính kèm dữ liệu data-id
và data-price
tùy chỉnh
- Bananas
- Oranges
- Apples
Hãy thử trực tiếpGhi chú. Các thuộc tính data-*
không hiển thị với người dùng
Thuộc tính data-*
thêm các giá trị tùy chỉnh vào phần tử HTML
Phần * được thay thế bằng một chuỗi chữ thường, chẳng hạn như data-id
,
1 hoặc
2
Một phần tử có thể có bất kỳ số lượng thuộc tính data-*
nào, mỗi thuộc tính có tên riêng
Các thuộc tính này lưu trữ dữ liệu bổ sung về một phần tử [e. g. id, bán theo ngày, biến thể, v.v. ]
Dữ liệu thường được JavaScript sử dụng để cải thiện trải nghiệm người dùng của trang web
Mẹo. Thuộc tính data-*
là thuộc tính toàn cầu có thể được áp dụng cho bất kỳ phần tử HTML nào
Mẹo. Mặc dù người dùng không thể nhìn thấy các thuộc tính data-*
nhưng giá trị của chúng vẫn có trong tài liệu
Vì lý do này, không bao gồm các giá trị dữ liệu nhạy cảm
ValueDescription*Một chuỗi chữ thường dài ít nhất 1 ký tự, chẳng hạn như id, parent, cost, status, v.v. valueString đại diện cho giá trị của thuộc tính dữ liệu tùy chỉnh. Có thể là bất kỳ chuỗi chữ và số nào, bao gồm JSON hoặc HTML
Bốn thẻ có thuộc tính
6 tùy chỉnh
Nhấp vào một thành phố sẽ hiển thị quốc gia của nó
Amsterdam
Brussels
Paris
Madrid
Hãy thử trực tiếpgiải thích mã
Bốn liên kết được tạo bằng thẻ
Mỗi người có một thuộc tính
6 tùy chỉnh với tên quốc gia
Nhấp chuột được xử lý bởi sự kiện
8
Onclick gọi một hàm JavaScript trích xuất và hiển thị quốc gia
Truy cập các thuộc tính data-* bằng JavaScript
JavaScript có thể truy cập các giá trị thuộc tính data-* theo hai cách
- với phương pháp
- với thuộc tính
0 [là một DOMStringMap]Amsterdam
Brussels
Paris
Madrid
Trong ví dụ bên dưới, nhấp vào hai liên kết đầu tiên sẽ gọi phương thức
9
Và nhấp vào hai liên kết cuối cùng sử dụng thuộc tính
Amsterdam
Brussels
Paris
Madrid
0 đơn giản hơn
1. Amsterdam
1. Brussels
2. Paris
2. Madrid
Hãy thử trực tiếpKhi truy cập vào một
Amsterdam
Brussels
Paris
Madrid
0, bạn bỏ tiền tố data-Trong ví dụ trên, thuộc tính là
6 và thuộc tính là
Amsterdam
Brussels
Paris
Madrid
5Tên thuộc tính trên
Amsterdam
Brussels
Paris
Madrid
0 là tên lạc đà không có dấu gạch ngangVí dụ,
Amsterdam
Brussels
Paris
Madrid
7 được truy vấn là
Amsterdam
Brussels
Paris
Madrid
8Thuộc tính data-* chấp nhận mọi giá trị chuỗi
Thuộc tính data-*
chấp nhận chuỗi, số, boolean, số thập phân -- tất cả được coi là giá trị chuỗi
Thuộc tính data-*
cũng chấp nhận JSON miễn là dấu ngoặc kép và ký tự đặc biệt được xử lý chính xác