Đang thực hiện
Tên đăng nhập
Mật khẩu
 
Hoặc đăng nhập bằng:
Nhập lại mật khẩu

Trang chủ Cẩm nang học viên
Cẩm nang học viên

5 thẻ HTML có thể bạn không biết cách sử dụng

Cập nhật: 15/08/2018 Lượt xem: 572
Trong quá trình học lập trình web, đôi khi bạn chỉ học những thẻ hay được sử dụng. Tuy nhiên, HTML còn rất nhiều thẻ có ích khác. Có thể bạn biết rồi quên, hoặc hoàn toàn chưa biết, cách sử dụng của các phần tử HTML này hơi đặc biệt, tuy nhiên nó rất hay khi sử dụng đúng chỗ.
5-the-html-co-the-ban-chua-biet-cach-su-dung

Trong quá trình Học lập trình web, đôi khi bạn chỉ học những thẻ hay được sử dụng. Tuy nhiên, HTML còn rất nhiều thẻ có ích khác.

Có thể bạn biết rồi quên, hoặc hoàn toàn chưa biết, trường hợp sử dụng của các thẻ HTML này hơi đặc biệt, tuy nhiên nó rất hay khi sử dụng đúng chỗ.

Đó là lý do tại sao cho dù đó là các tính năng mới của HTML hoặc các cách ứng dụng ít được biết đến của nó chưa được đưa vào kiến thức của bạn.

Trong bài đăng hôm nay, chúng ta sẽ xem xét năm thẻ HTML, một số trong đó bạn có thể thường xuyên sử dụng, nhưng có thể không khai thác hết tiềm năng của nó.

 

1. Thẻ data


Thẻ có một hàm tương tự với các thuộc tính data- *. Nó có thể được sử dụng để cung cấp dữ liệu có thể đọc được bằng máy cho nội dung thân thiện với người dùng. Thuộc tính value của thẻ này mang thông tin được thêm vào

5-the-html-co-the-ban-chua-biet-cach-su-dung-1-data


Xem chi tiết tại Copen

Trong đoạn HTML ở trên, ISBN của mỗi sách được thêm vào thuộc tính value của thẻ
. ISBN ở đây được sử dụng để nhận dạng duy nhất một cuốn sách.
 

 

5-the-html-co-the-ban-chua-biet-cach-su-dung-data-js


Đoạn code JavaScript chỉ cho bạn cách khai thác các giá trị trong JavaScript, tập lệnh trên trích xuất các ISBN từ thẻ và hiển thị chúng cùng với tiêu đề sách, tại một vị trí được chỉ định trong trang.

 

2. Thẻ label


thẻ nàythẻ
 

 


Nhấp vào văn bản của label sẽ kích hoạt sự kiện nhấp chuột của button và hiển thị thông báo cảnh báo đã cho.


 




Thẻ này chủ yếu được sử dụng cho các ngôn ngữ Đông Á, tuy nhiên đây không phải là trường hợp sử dụng duy nhất của nó. Mục đích của chỉ đơn giản là thêm chú thích hoặc cách phát âm cho văn bản, và bạn có thể làm điều đó với nội dung tiếng Anh.

Thẻ bao gồm hai phần tử con chính, cụ thể là hẻ chứa văn bản bạn muốn chú thích (được gọi là văn bản cơ sở) và là nội dung chú thích.

 

 

5-the-html-co-the-ban-chua-biet-cach-su-dung-ruby


Xem chi tiết tại Codepen

Cách phát âm của từ “entrepreneur” được thêm vào bằng cách sử dụng thẻ bên trong đoạn văn. Bản thân từ được bọc trong cặp và chú thích của nó đặt trong trong cặp.


4. Thẻ ol


Thẻ này cho phép các danh sách có thứ tự là một thẻ khác mà bạn có thể quen thuộc. Nó tạo ra một danh sách có các phần tử được đánh số, trái ngược với một danh sách không có thứ tự được tạo với.

Bạn có thể đã biết về việc đặt hàng, nhưng bạn có biết rằng thứ tự có thể được đảo ngược? Thay vì một thứ tự tăng dần, việc giảm số cũng có thể được thực hiện bởi reversed sử dụng thuộc tính đảo ngược reversed.

Thuộc tính reversed đảo ngược đánh dấu thứ tự, và thuộc tính type để lựa chọn kiểu đánh thứ tự. Bạn có thể sử dụng thêm chữ cái, hoặc số.

Xem chi tiết tại Copen


5. Thẻ dfn


Thẻ sử dụng để bọc một thuật ngữ để giải nghĩa rõ hơn cho văn bản gốc. Văn bản được bao quanh bởi thẻ được tạo kiểu bởi các trình duyệt có chữ nghiêng, nghĩa là đây là thuật ngữ được định nghĩa.

Bạn có thể thêm định nghĩa của thuật ngữ bên trong thuộc tính title trong thẻ điều này hữu ích để xác định các từ không nhất thiết và xác định bởi văn bản xung quanh của chúng.

Thẻ hoạt động tương tự như , hiển thị ý nghĩa của một từ viết tắt được đưa ra trong thuộc tính tiêu đề của nó khi người dùng di chuột qua phần tử.

Đây là cách nó hoạt động khi di chuột vào:

 

5-the-html-ban-co-the-ban-chua-nam-ro-2



Xem chi tiết tại Copen
 

Đây là cách sử dụng khác của các thẻ trong HTML5 có thể bạn chưa biết cách sử dụng nó. Đọc xong bài này có thể bạn thấy nó cũng rất dễ dàng phải không nào?

Có bất kỳ điều gì chưa hiểu, bạn có thể để lại bình luận để tôi trả lời nhé.

 

Tư vấn viên 1: Lê Thoa
Tư vấn viên 2: Thu Huyền
Tuyển sinh lập trình viên quốc tế - MMS new vision
Khóa học C&B Excel - Trần Văn Hải