Bài 3: Thuộc tính HTML cơ bản cho người mới – HTML Attributes

Thuộc tính HTML

Trong hướng dẫn này, bạn sẽ tìm hiểu cách sử dụng các thuộc tính để mang lại nhiều ý nghĩa hơn cho các thẻ HTML. Nhưng trước khi tự học HTML về thuộc tính. Bạn hãy chắc chắn là đã ngon lành với bài Thẻ HTML nhé.

Thuộc tính HTML
Thuộc tính HTML

Lưu Ý: Học Làm Web khuyên bạn nên Tự Code chứ không nên Copy Code. Việc vừa học vừa code sẽ giúp bạn nhớ code tốt hơn. Nếu bạn copy code, bạn sẽ không bao giờ nhớ code được viết như thế nào.

Thuộc tính HTML là gì ?

Các thuộc tính xác định các đặc tính hoặc thuộc tính bổ sung của phần tử. Chẳng hạn như chiều rộng và chiều cao của hình ảnh. Các thuộc tính luôn được chỉ định trong thẻ bắt đầu (hoặc thẻ mở) và thường bao gồm các cặp tên / giá trị như thế nào name="value". Giá trị thuộc tính phải luôn được đặt trong dấu ngoặc kép.

Ngoài ra, một số thuộc tính HTML được yêu cầu cho các yếu tố nhất định. Chẳng hạn, một thẻ <img> phải chứa các thuộc tính khác như src và alt. Chúng ta hãy xem một số ví dụ về các tập quán thuộc tính:

Trong ví dụ trên src bên trong thẻ <img> là một thuộc tính và là đường dẫn hình ảnh được cung cấp cho giá trị của nó. Tương tự hrefbên trong thẻ <a> là một thuộc tính và liên kết được cung cấp là giá trị của nó, v.v.

Mẹo: Cả hai trích dẫn đơn và kép có thể được sử dụng để trích dẫn các giá trị thuộc tính. Tuy nhiên, dấu ngoặc kép là phổ biến nhất. Trong trường hợp bản thân giá trị thuộc tính chứa dấu ngoặc kép, cần phải bọc giá trị trong dấu ngoặc đơn, ví dụ: value='John "Williams" Jr.'

Thuộc tính Boolean trong HTML

Có một số thuộc tính trong HTML5 không bao gồm các cặp tên / giá trị mà chỉ bao gồm tên. Các thuộc tính như vậy được gọi là thuộc tính Boolean. Ví dụ về một số thuộc tính Boolean thường được sử dụng là checkeddisabledreadonlyrequiredvv

Bạn sẽ tìm hiểu về tất cả các yếu tố này một cách chi tiết trong các chương sắp tới.

Lưu ý: Các giá trị thuộc tính HTML thường không phân biệt chữ hoa chữ thường. Ngoại trừ các giá trị thuộc tính nhất định, như idclass. Tuy nhiên, World Wide Web Consortium (W3C) khuyên dùng chữ thường cho các giá trị thuộc tính.

Thuộc tính mục đích chung

Có một số thuộc tính, chẳng hạn như idtitleclassstyle, vv mà bạn có thể sử dụng trên phần lớn các phần tử HTML. Phần sau đây mô tả công dụng của chúng.

Thuộc tính id

Các thuộc tính id được sử dụng để cung cấp cho một tên duy nhất hoặc định danh cho một phần tử trong một tài liệu. Điều này giúp dễ dàng hơn trong việc chọn phần tử bằng CSS hoặc JavaScript. Ví dụ như sau:

Lưu ý: Phần tử id phải là duy nhất trong một tài liệu. Không có hai phần tử trong cùng một tài liệu có thể được đặt tên giống nhau id và mỗi phần tử chỉ có thể có một id.

Thuộc tính lớp

Giống như thuộc tính id, thuộc tính class cũng được sử dụng để xác định các yếu tố. Nhưng không giống như thuộc tính idclass không phải là duy nhất trong tài liệu. Điều này có nghĩa là bạn có thể áp dụng cùng một lớp cho nhiều thành phần trong tài liệu, như trong ví dụ sau:

Mẹo:class có thể được áp dụng cho nhiều phần tử. Do đó, bất kỳ quy tắc kiểu nào được viết cho phần tử class sẽ được áp dụng cho tất cả các phần tử có phần tử đó class.

Tiêu đề Thuộc tính html

Các thuộc tính title được sử dụng để cung cấp văn bản về một yếu tố hoặc nội dung của nó. Hãy thử ví dụ sau để hiểu cách thức này thực sự hoạt động.

Mẹo: Giá trị của thuộc tính title (tức là văn bản tiêu đề) được hiển thị dưới dạng một chú giải công cụ bởi các trình duyệt web khi người dùng đặt con trỏ chuột lên phần tử.

Thuộc tính phong cách

Các thuộc tính style cho phép bạn xác định quy tắc phong cách CSS như màu sắc, font chữ, biên giới, vv trực tiếp trong phần tử. Hãy xem một ví dụ để xem nó hoạt động như thế nào:

Trong bài viết sau bạn sẽ được học về style html. Các bài giới thiệu HTML sau này sẽ hướng dẫn chi tiết hơn. Chúc các bạn học tốt.

Có thể bạn chưa xem

Leave a Reply

avatar
  Subscribe  
Notify of