Cách sử dụng Thuộc tính HTML

Tìm hiểu cách sử dụng các thuộc tính HTML, bằng cách xem một số tên và giá trị thuộc tính được sử dụng phổ biến nhất.

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

Trong HTML, các thuộc tính là công cụ bổ trợ được sử dụng để thêm thông tin bổ sung vào các phần tử HTML hoặc để thay đổi hành vi mặc định của chúng.

Phần tử HTML không có thuộc tính nào được thêm vào trông giống như sau:

<tag>Content</tag>

Phần tử HTML có thuộc tính được định nghĩa như thế này:

<tag attribute="value">Content</tag>

Với mô hình đó, hãy xem một số ví dụ về thuộc tính thực tế.

Thuộc tính href

href thuộc tính là một trong những thuộc tính quan trọng nhất trong HTML.

href được sử dụng để chỉ định URL cho:

• Siêu liên kết (còn được gọi là "liên kết").
• Hoặc để nhập các tài nguyên bên ngoài, chẳng hạn như kiểu và tập lệnh.

Trường hợp sử dụng phổ biến nhất cho href là thêm các URL liên kết trên phần tử neo <a> :

<a href="url-path">Link text</a>

Các liên kết này cho phép người dùng nhấp theo cách của họ từ trang này sang trang khác, nội bộ (trên cùng một trang web / miền) hoặc bên ngoài (đến các miền trang web khác).

Liên kết nội bộ

Các liên kết nội bộ sử dụng một đường dẫn tương đối:

<a href="/">Home</a>

Theo tiêu chuẩn, "/" dẫn đến trang đầu trên bất kỳ trang web nào, là index.html trang.

Nếu bạn có apage được gọi là Giới thiệu và một tài liệu HTML tương ứng được gọi là about.html , bạn có thể liên kết nội bộ với nó như thế này:

<a href="/about">About</a>

Liên kết này dẫn đến trang Giới thiệu của TechStacker

Liên kết ngoài

Các liên kết bên ngoài cần một đường dẫn tuyệt đối:

<a href="https://www.youtube.com">Go to YouTube.com</a>

Thuộc tính mục tiêu

Trong khi chúng tôi đang làm việc với phần tử neo, hãy xem xét một thuộc tính phần tử neo quan trọng khác, target thuộc tính.

target thuộc tính chỉ định ở đâu để mở các liên kết khi người dùng nhấp vào chúng.

Ví dụ:nếu bạn nhấp vào liên kết bên ngoài bên dưới, bạn sẽ được đưa đến YouTube.com trong cùng một cửa sổ tab trình duyệt hiện bạn đang ở:

<a href="https://www.youtube.com/">Go to YouTube.com</a>

Truy cập YouTube.com

Điều này xảy ra vì theo mặc định <a> các phần tử có target thuộc tính có giá trị _self - có nghĩa là nó mở href giá trị liên kết trong cùng một cửa sổ mà người dùng đang ở.

Vì vậy, phần tử liên kết này:

<a href="https://www.youtube.com/"></a>

Được đọc bởi máy tính / trình duyệt như thế này:

<a href="https://www.youtube.com/" target="_self"></a>

Nhưng nếu bạn muốn các liên kết mở trong một tab trình duyệt mới thì sao?

Không sao, bạn có thể ghi đè _self mặc định giá trị bằng _blank giá trị:

<a href="https://www.youtube.com" target="_blank" rel="noopener"
  >Go to YouTube.com (opens in a new tab)</a
>

Bây giờ, liên kết YouTube sẽ mở trong một tab trình duyệt mới:

Truy cập YouTube.com (tab mới)

Tôi sẽ sử dụng cơ hội này để quảng cáo kênh YouTube của mình:

Liên kết đến kênh YouTube của tôi (TechStacker).

Đọc thêm về phần tử neo / liên kết.

Thuộc tính không có giá trị

Một thuộc tính thường bao gồm tên thuộc tính và giá trị thuộc tính, chẳng hạn như trong ví dụ về phần tử neo.

Tuy nhiên, đôi khi giá trị (hành vi) được tích hợp vào tên thuộc tính.

Ví dụ:defer để sửa đổi HTML <script> phần tử:

<script defer src="app.js"></script>

Lưu ý rằng defer thuộc tính không có toán tử gán (= ) hoặc giá trị vì hành vi của nó được tích hợp sẵn.

defer là cái gọi là boolean thuộc tính. Boolean được sử dụng cho một loại dữ liệu chỉ có thể có hai giá trị, true hoặc sai (hoặc bật / tắt ).

Hãy cùng xem xét kỹ hơn defer thuộc tính.

<script> này phần tử, không có defer , sẽ thực thi src của nó Mã JavaScript từ app.js giá trị ngay sau khi trình duyệt đã tải nó:

<script src="app.js"></script>

Theo mặc định, các tài liệu HTML được phân tích cú pháp (đọc) từ trên xuống dưới, từng dòng một. Điều này có nghĩa là nếu bạn đặt bất kỳ JavaScript nào ở đầu tài liệu của mình, nó sẽ thực thi trước phần còn lại của tài liệu của bạn đã được phân tích cú pháp xong.

Đó là mặc định hành vi của phần tử script.

Nhưng khi bạn thêm defer tới <script> phần tử bạn vô hiệu hóa hành vi mặc định đó:

<script defer src="app.js"></script>

Bây giờ, mã JavaScript sẽ không thực thi cho đến khi toàn bộ trang được tải xong.

Theo nghĩa đen, trì hoãn có nghĩa là tạm dừng / hoãn lại / chờ đợi.

Để đánh chết con ngựa:

• Không có defer , JavaScript thực thi ngay khi được tải.
• Với defer JavaScript chờ thực thi cho đến khi toàn bộ trang HTML được tải.

Nếu các thuộc tính làm bạn bối rối, đừng lo lắng, điều đó luôn có ý nghĩa gấp 10 lần khi bạn bắt đầu sử dụng chúng trong thực tế.

Thuộc tính tùy chỉnh

Bạn cũng có thể tạo các thuộc tính tùy chỉnh, sau đó bạn có thể kiểm soát các thuộc tính này bằng JavaScript. Tên thuộc tính tùy chỉnh phải được đặt trước data- nhãn:

<tag data-custom-attribute-name="value">Content</tag>

Ví dụ:giả sử chúng ta có một nguyên tố thực phẩm được gọi là “Apple” . Khi người dùng nhấp vào nó, chúng tôi muốn hiển thị loại thức ăn, nó nằm trong hộp thoại bật lên.

Để làm điều đó, chúng tôi sẽ tạo một thuộc tính tùy chỉnh có tên là food-type (hãy nhớ data- nhãn) và thêm nó vào <div> phần tử với Apple văn bản bên trong:

<div onclick="showDetailsBox(this)" id="apple" data-food-type="fruit">
  Apple
</div>

Và JavaScript làm cho tính năng hoạt động:

function showDetailsBox(food) {
  const foodType = food.getAttribute("data-food-type")
  alert(food.innerHTML + " is a " + foodType)
}

Đây là bản trình diễn.

Cách mã HTML hoạt động:

• Đầu tiên, chúng tôi đã thêm một onclick thuộc tính cho <div> yếu tố. Đây là một thuộc tính sự kiện gắn một trình xử lý sự kiện sẽ lắng nghe ... bạn đoán rồi đấy, nhấp chuột!
• Sau đó, chúng tôi chỉ định một giá trị thuộc tính của showDetailsBox(this) vào onclick thuộc tính.
• showDetailsBox() là tên của hàm JavaScript được gọi ngay khi bạn nhấp vào phần tử văn bản Apple.
• this một phần của (this) là một đối số đề cập đến đối tượng mà nó thuộc về ( this là một chút nâng cao cho người mới bắt đầu, nếu không hiểu cũng không sao).
• id là một thuộc tính HTML tích hợp được sử dụng để chỉ định một id duy nhất cho các phần tử HTML. Trong trường hợp này, id duy nhất của chúng tôi là apple .

Cách mã JavaScript hoạt động nằm ngoài phạm vi của hướng dẫn HTML này, vì vậy tôi sẽ cung cấp cho bạn một giải thích đơn giản:

Khi showDetailsBox() hàm được gọi bởi onclick thuộc tính sự kiện, nó thực thi khối mã { ... } nội dung:

function showDetailsBox(food) {
  ...
}

Trên dòng đầu tiên bên trong khối mã, JavaScript chọn bất kỳ phần tử HTML nào có data-food-type tùy chỉnh và gán nó (và giá trị thuộc tính của nó) cho một biến có tên là foodType :

function showDetailsBox(food) {
  const foodType = food.getAttribute("data-food-type")
  ...
}

Trên dòng thứ hai, chúng tôi chạy alert() tích hợp sẵn (sẽ nhắc hộp thoại bật lên và yêu cầu nó hiển thị giá trị của foodType tất nhiên là fruit :

function showDetailsBox(food) {
  const foodType = food.getAttribute("data-food-type")
  alert(food.innerHTML + " is a " + foodType)
}

Đừng lo lắng nếu bạn không hoàn toàn hiểu toàn bộ ví dụ về mã ở trên, có rất nhiều điều cần tìm hiểu, đặc biệt là đối với người mới bắt đầu. Với thực hành, nó sẽ có ý nghĩa!

Để biết thêm thông tin sâu rộng về các thuộc tính HTML, tôi khuyên bạn nên tìm hiểu thông qua tài liệu web MDN Tham khảo thuộc tính HTML.

Quan trọng: Không lưu trữ nội dung quan trọng phải hiển thị và có thể truy cập được bên trong các thuộc tính dữ liệu, vì hỗ trợ công nghệ đôi khi không truy cập chúng. Trình thu thập thông tin tìm kiếm có thể cũng không lập chỉ mục các giá trị thuộc tính dữ liệu - vì vậy đừng đặt bất kỳ nội dung SEO quan trọng nào ở đây.