Thuộc tính HTML
Thuộc tính HTML cung cấp thông tin bổ sung về các phần tử HTML.
Thuộc tính HTML
- Tất cả các phần tử HTML có thể có các thuộc tính
- Các thuộc tính cung cấp thông tin bổ sung về các phần tử
- Các thuộc tính luôn được chỉ định trong thẻ bắt đầu
- Các thuộc tính thường có trong các cặp tên / giá trị như: name = "value"
Thuộc tính href
Thẻ <a>xác định một siêu liên kết. Thuộc
hreftính chỉ định URL của trang mà liên kết chuyển đến:
Thí dụ
<a href="https://www.w3schools.com">Visit W3Schools</a>
Bạn sẽ tìm hiểu thêm về các liên kết trong chương Liên kết HTML của chúng tôi .
Thuộc tính src
Thẻ <img>được sử dụng để nhúng hình ảnh vào trang HTML. Thuộc srctính chỉ định đường dẫn đến hình ảnh sẽ được hiển thị:
Thí dụ
<img src="img_girl.jpg">
Có hai cách để chỉ định URL trong src
thuộc tính:
1. URL tuyệt đối - Liên kết đến một hình ảnh bên ngoài được lưu trữ trên một trang web khác. Ví dụ: src = "https://www.w3schools.com/images/img_girl.jpg" .
Ghi chú: Hình ảnh bên ngoài có thể thuộc bản quyền. Nếu bạn không được phép sử dụng nó, bạn có thể vi phạm luật bản quyền. Ngoài ra, bạn không thể kiểm soát hình ảnh bên ngoài; nó có thể đột ngột bị xóa hoặc thay đổi.
2. URL tương đối - Liên kết đến một hình ảnh được lưu trữ trong trang web. Ở đây, URL không bao gồm tên miền. Nếu URL bắt đầu mà không có dấu gạch chéo, nó sẽ liên quan đến trang hiện tại. Ví dụ: src = "img_girl.jpg". Nếu URL bắt đầu bằng dấu gạch chéo, nó sẽ liên quan đến miền. Ví dụ: src = "/ images / img_girl.jpg".
Mẹo: Hầu như luôn luôn tốt nhất là sử dụng các URL tương đối. Chúng sẽ không bị hỏng nếu bạn thay đổi miền.
Thuộc tính chiều rộng và chiều cao
Thẻ <img>cũng phải chứa các
thuộc tính widthvà
height, chỉ định chiều rộng và chiều cao của hình ảnh (tính bằng pixel):
Thí dụ
<img src="img_girl.jpg" width="500" height="600">
Thuộc tính alt
Thuộc tính bắt buộc altcho <img>
thẻ chỉ định văn bản thay thế cho hình ảnh, nếu hình ảnh vì lý do nào đó không thể hiển thị. Điều này có thể do kết nối chậm hoặc lỗi trong srcthuộc tính hoặc nếu người dùng sử dụng trình đọc màn hình.
Thí dụ
<img src="img_girl.jpg" alt="Girl
with a jacket">
Thí dụ
Xem điều gì sẽ xảy ra nếu chúng tôi cố gắng hiển thị một hình ảnh không tồn tại:
<img src="img_typo.jpg" alt="Girl
with a jacket">
Bạn sẽ tìm hiểu thêm về hình ảnh trong chương Hình ảnh HTML của chúng tôi .
Thuộc tính kiểu
Thuộc styletính được sử dụng để thêm kiểu vào một phần tử, chẳng hạn như màu sắc, phông chữ, kích thước, v.v.
Thí dụ
<p style="color:red;">This is a red paragraph.</p>
Bạn sẽ tìm hiểu thêm về các kiểu trong chương Kiểu HTML của chúng tôi .
Thuộc tính lang
Bạn phải luôn bao gồm langthuộc tính bên trong <html>thẻ, để khai báo ngôn ngữ của trang Web. Điều này có nghĩa là để hỗ trợ các công cụ tìm kiếm và trình duyệt.
Ví dụ sau chỉ định tiếng Anh là ngôn ngữ:
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
Mã quốc gia cũng có thể được thêm vào mã ngôn ngữ trong lang
thuộc tính. Vì vậy, hai ký tự đầu tiên xác định ngôn ngữ của trang HTML và hai ký tự cuối cùng xác định quốc gia.
Ví dụ sau chỉ định tiếng Anh là ngôn ngữ và Hoa Kỳ là quốc gia:
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>
Bạn có thể xem tất cả các mã ngôn ngữ trong Tham chiếu mã ngôn ngữ HTML của chúng tôi .
Thuộc tính tiêu đề
Thuộc titletính xác định một số thông tin bổ sung về một phần tử.
Giá trị của thuộc tính title sẽ được hiển thị dưới dạng chú giải công cụ khi bạn di chuột qua phần tử:
Thí dụ
<p title="I'm a tooltip">This is a paragraph.</p>
Chúng tôi đề xuất: Luôn sử dụng thuộc tính chữ thường
Tiêu chuẩn HTML không yêu cầu tên thuộc tính chữ thường.
Thuộc tính title (và tất cả các thuộc tính khác) có thể được viết bằng chữ hoa hoặc chữ thường như title hoặc TITLE .
Tuy nhiên, W3C đề xuất các thuộc tính chữ thường trong HTML và yêu cầu các thuộc tính chữ thường cho các loại tài liệu nghiêm ngặt hơn như XHTML.
Tại W3Schools, chúng tôi luôn sử dụng tên thuộc tính chữ thường.
Chúng tôi đề xuất: Luôn trích dẫn các giá trị thuộc tính
Tiêu chuẩn HTML không yêu cầu dấu ngoặc kép xung quanh các giá trị thuộc tính.
Tuy nhiên, W3C khuyến nghị trích dẫn trong HTML và yêu cầu trích dẫn cho các loại tài liệu nghiêm ngặt hơn như XHTML.
Tốt:
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>Tồi tệ:
<a href=https://www.w3schools.com/html/>Visit our HTML tutorial</a>Đôi khi bạn phải sử dụng dấu ngoặc kép. Ví dụ này sẽ không hiển thị chính xác thuộc tính title, vì nó chứa khoảng trắng:
Thí dụ
<p
title=About W3Schools>
Tại W3Schools, chúng tôi luôn sử dụng dấu ngoặc kép xung quanh các giá trị thuộc tính.
Báo giá đơn hay báo giá kép?
Dấu ngoặc kép xung quanh các giá trị thuộc tính là cách phổ biến nhất trong HTML, nhưng cũng có thể sử dụng dấu ngoặc kép.
Trong một số trường hợp, khi bản thân giá trị thuộc tính chứa dấu ngoặc kép, cần phải sử dụng dấu ngoặc kép:
<p title='John "ShotGun" Nelson'>
Hoặc ngược lại:
<p title="John 'ShotGun' Nelson">
Tóm tắt chương
- Tất cả các phần tử HTML có thể có các thuộc tính
- Thuộc
hreftính<a>chỉ định URL của trang mà liên kết chuyển đến - Thuộc
srctính<img>chỉ định đường dẫn đến hình ảnh được hiển thị - Các thuộc tính
widthvà cung cấp thông tin kích thước cho hình ảnhheight<img> - Thuộc
alttính của<img>cung cấp văn bản thay thế cho hình ảnh - Thuộc
styletính được sử dụng để thêm kiểu vào một phần tử, chẳng hạn như màu sắc, phông chữ, kích thước, v.v. - Thuộc
langtính của<html>thẻ khai báo ngôn ngữ của trang Web - Thuộc
titletính xác định một số thông tin bổ sung về một phần tử
Bài tập HTML
Tham chiếu thuộc tính HTML
Danh sách đầy đủ tất cả các thuộc tính cho mỗi phần tử HTML, được liệt kê trong: Tham chiếu thuộc tính HTML của chúng tôi .