HTML Attributes - Thuộc tính HTML

Admin

Administrator
Thành viên BQT
#1
HTML Attributes - Thuộc tính HTML

Thuộc tính cung cấp thêm thông tin về các phần tử HTML.

Thuộc tính HTML
  • Các phần tử HTML có thể có các thuộc tính
  • Thuộc tính cung cấp thêm thông tin về một yếu tố
  • Các thuộc tính luôn luôn được quy định trong tag bắt đầu
  • Thuộc tính đi theo cặp name/value như: name="value"
Thuộc tính lang
Các ngôn ngữ tài liệu có thể được khai báo trong tag <html>.

Các ngôn ngữ được khai báo trong thuộc tính lang.

Khai báo ngôn ngữ là quan trọng cho các ứng dụng truy cập (đọc màn hình) và công cụ tìm kiếm:
Mã:
<!DOCTYPE html>
<html lang="en-US">
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>
Hai chữ đầu chỉ định ngôn ngữ (en). Nếu có một phương ngữ, sử dụng hơn hai chữ (US).

Thuộc tính tiêu đề
Đoạn mã HTML được định nghĩa với tag <p>.

Trong ví dụ này, phần tử <p> có một thuộc tính tiêu đề. Giá trị của thuộc tính là "About W3Schools":
Ví dụ:
Mã:
<p title="About W3Schools">
W3Schools is a web developer's site.
It provides tutorials and references covering
many aspects of web programming,
including HTML, CSS, JavaScript, XML, SQL, PHP, ASP, etc.
</p>
Khi bạn di chuyển chuột qua các phần tử, tiêu đề sẽ được hiển thị như một tooltip.
Thuộc tính href
Liên kết HTML được định nghĩa với tag <a>. Các địa chỉ liên kết được quy định trong thuộc tính href:
Ví dụ:
Mã:
<a href="http://www.w3schools.com">This is a link</a>
Thuộc tính kích thước
Hình ảnh HTML được định nghĩa với tag <img>.

Các tên tập tin của nguồn (src), và kích thước của hình ảnh (width height) đều được cung cấp như các thuộc tính:
Mã:
<img src="w3schools.jpg" width="104" height="142">
Kích thước hình ảnh được chỉ định trong pixels: width="104" có nghĩa là màn hình 104 pixels.

Thuộc tính alt
Thuộc tính alt xác định một văn bản thay thế sẽ được sử dụng, khi một phần tử HTML có thể không được hiển thị.
Các giá trị của thuộc tính có thể được đọc bởi "đọc màn hình". Bằng cách này, một người nào đó "lắng nghe" các trang web, tức là một người mù, có thể "nghe" các phần tử.
Ví dụ:
Mã:
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
Luôn luôn sử dụng chữ thường cho thuộc tính
Các tiêu chuẩn HTML5 không yêu cầu tên thuộc tính là chữ thường.
Các thuộc tính tiêu đề có thể được viết bằng chữ hoa hay chữ thường như Title hoặc TITLE.
Khuyến cáo chữ thường trong HTML 4, và đòi hỏi chữ thường cho các loại tài liệu nghiêm ngặt như XHTML.

Luôn trích dẫn thuộc tính giá trị
Các tiêu chuẩn HTML5 không cần dấu ngoặc kép quanh giá trị thuộc tính.

Thuộc tính href, ví dụ ở trên, có thể được viết là:
Mã:
<a href=http://www.w3schools.com>
Khuyến cáo dấu ngoặc kép trong HTML 4, và yêu cầu trích dẫn cho các loại tài liệu nghiêm ngặt như XHTML.
Đôi khi nó là cần thiết để sử dụng dấu ngoặc kép. Điều này sẽ không hiển thị một cách chính xác, bởi vì nó có chứa một khoảng trống:
Ví dụ:
Mã:
<p title=About W3Schools>
Dấu ngoặc đơn hay kép?
Dấu ngoặc kép là phổ biến nhất trong HTML, nhưng dấu ngoặc đơn cũng có thể được sử dụng.

Trong một số trường hợp, khi các giá trị thuộc tính của chính nó có chứa dấu ngoặc kép, nó là cần thiết để sử dụng dấu ngoặc đơn:
Ví dụ:
Mã:
<p title='John "ShotGun" Nelson'>
Hoặc ngược lại:
Mã:
<p title="John 'ShotGun' Nelson">
Tóm tắt:
  • Tất cả các phần tử HTML có thể có các thuộc tính
  • Thuộc tính title HTML cung cấp thêm "tool-tip" thông tin
  • Thuộc tính href HTML cung cấp thông tin địa chỉ liên kết
  • Thuộc tính widthheight HTML cung cấp thông tin kích thước cho hình ảnh
  • Thuộc tính alt HTML cung cấp văn bản cho các trình đọc màn hình
  • Chúng ta thường sử dụng tên thuộc tính HTML chữ thường
  • Chúng ta luôn luôn trích dẫn thuộc tính với các dấu ngoặc kép
Thuộc tính HTML
Dưới đây là danh sách chữ cái của một số thuộc tính thường được sử dụng trong HTML:

HTML Attributes.png

Một danh sách đầy đủ của tất cả các thuộc tính cho mỗi phần tử HTML, được liệt kê trong: HTML Tag tham khảo.

Chúc các bạn thành công.


Nguồn: w3schools.com​
 

Từ khóa phổ biến

You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an alternative browser.

Top