Tìm hiểu khái niệm "thuộc tính" trong HTML - 11

Tìm hiểu khái niệm “thuộc tính” trong HTML – 11

1) Thuộc tính (attribute) là gì !?

– Trong ngôn ngữ HTML, thuộc tính có thể tạm hiểu là một loại thông tin nào đó liên quan đến phần tử.

– Mỗi thuộc tính sẽ được đại diện bởi một từ khóa bằng tiếng anh, ví dụ:

Thuộc tính width dùng để nói đến chiều rộng của phần tử.
Thuộc tính height dùng để nói đến chiều cao của phần tử.
Thuộc tính target dùng để nói đến nơi mà tài liệu sẽ được mở khi người dùng nhấp vào liên kết.
. . . .

2) Cách khai báo thuộc tính cho phần tử

– Khi tạo một phần tử, việc khai báo đầy đủ các thuộc tính sẽ giúp cho trình duyệt hiểu rõ hơn về phần tử mà các bạn mong muốn (ví dụ như khi tạo một cái liên kết, khi chúng ta nhấp vào liên kết thì mặc định tài liệu sẽ được mở trong khung hiện tại, nếu các bạn khai báo cho nó thuộc tính target với giá trị _blank thì trình duyệt sẽ hiểu là các bạn muốn thiết lập khi người dùng nhấp vào liên kết thì tài liệu sẽ được mở bên trong một cái Tab mới)

– Để khai báo một thuộc tính nào đó cho phần tử thì chúng ta viết thuộc tính vào bên trong thẻ mở của phần tử dựa theo một trong hai cú pháp như sau:

Cú pháp: attribute=”value”

Ví dụ:

– Ta thiết lập thuộc tính target với giá trị _blank cho phần tử <a> với mục đích là để trình duyệt hiểu rằng tôi muốn: “khi người dùng nhấp vào liên kết thì tài liệu sẽ được mở bên trong một Tab mới”

<!DOCTYPE html>
<html>
<head>
	<title>Xem ví dụ</title>
	<meta charset="utf-8">
</head>
<body>
	<a href="https://dsmart.vn/" target="_blank">TRANG CHỦ</a>
</body>
</html>

– Lưu ý: Một phần tử có thể được thiết lập nhiều thuộc tính HTML.

<!DOCTYPE html>
<html>
<head>
	<title>Xem ví dụ</title>
	<meta charset="utf-8">
</head>
<body>
	<img src="https://dsmart.vn/wp-content/uploads/2020/03/about-DSmart.png" width="150px" height="200px"/>
</body>
</html>

3) Khi nào thì dùng nháy kép & khi nào thì dùng nháy đơn !?

– Khi chúng ta khai báo một thuộc tính HTML cho phần tử, việc giá trị của thuộc tính được đặt bên trong cặp dấu nháy kép ” “ hay cặp dấu nháy đơn ‘ ‘ đều có ý nghĩa như nhau, cho nên các bạn thích đặt nó bên trong cặp dấu nào thì đặt.

– Tuy nhiên, có hai trường hợp mà các bạn cần phải hết sức lưu ý:

Nếu giá trị của thuộc tính có chứa ký tự là dấu nháy đơn ‘ thì giá trị đó bắt buộc phải được đặt bên trong cặp dấu nháy kép ” “
Nếu giá trị của thuộc tính có chứa ký tự là dấu nháy kép ” thì giá trị đó bắt buộc phải được đặt bên trong cặp dấu nháy đơn ‘ ‘

– Để thiết lập thuộc tính style với giá trị background-image:url(‘../image/logo.png’) thì chúng ta cần phải đặt giá trị đó bên trong cặp dấu nháy kép, chứ nếu chúng ta đặt nó bên trong cặp dấu nháy đơn thì sẽ bị sai cú pháp (bởi vì giá trị đó có chứa ký tự là dấu nháy đơn)

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <meta charset="utf-8">
</head>
<body>
    <div style="background-image:url('https://dsmart.vn/wp-content/uploads/2020/03/schedule.png')">
        <p>Lập Trình Web 01</p>
        <p>Lập Trình Web 02</p>
        <p>Lập Trình Web 03</p>
        <p>Lập Trình Web 04</p>
        <p>Lập Trình Web 05</p>
    </div>
    <hr>
    <div style='background-image:url('https://dsmart.vn/wp-content/uploads/2020/03/schedule.png')'>
        <p>Lập Trình Web 01</p>
        <p>Lập Trình Web 02</p>
        <p>Lập Trình Web 03</p>
        <p>Lập Trình Web 04</p>
        <p>Lập Trình Web 05</p>
    </div>
</body>
</html>