Các thuộc tính HTML xác định các thuộc tính bổ sung cho các phần tử HTML. Chúng được chỉ định trong thẻ mở của một phần tử HTML và một số phần tử yêu cầu một thuộc tính để hoạt động.
Thuộc tính HTML là gì và bạn sử dụng chúng như thế nào? Khi bạn đang học HTML, bạn có thể gặp phải thuật ngữ attributes . Các thuộc tính được sử dụng để cung cấp thông tin bổ sung về một phần tử cụ thể trên trang HTML.
Các thuộc tính được chỉ định trong thẻ mở của tài liệu HTML và thường được chỉ định trong một cặp tên / giá trị. Ví dụ:thuộc tính có tên name với giá trị value sẽ xuất hiện như thế này:name =value .
Hướng dẫn này sẽ thảo luận, có tham chiếu đến các ví dụ, khái niệm cơ bản về các thuộc tính trong HTML và lý do tại sao chúng được sử dụng. Chúng ta cũng sẽ thảo luận về một số thuộc tính có mục đích chung áp dụng cho hầu hết các phần tử trong HTML và những thuộc tính mà bạn có nhiều khả năng gặp phải khi viết mã.
Thuộc tính HTML là gì?
Mọi phần tử trong ngôn ngữ đánh dấu HTML đều có thể có một thuộc tính, được sử dụng để xác định một thuộc tính bổ sung do phần tử đó nắm giữ.
Ví dụ:chúng ta có thể muốn chỉ định một thuộc tính xác định chiều cao của hình ảnh hoặc giá trị được lưu trữ bởi một phần tử biểu mẫu. Các thuộc tính này dành riêng cho phần tử, có nghĩa là chúng có thể được sử dụng để tùy chỉnh cách một phần tử nhất định hoạt động trên trang web.
Trong một số trường hợp, các thuộc tính là bắt buộc đối với một phần tử. Ví dụ:nếu bạn đang làm việc với <a> Thẻ HTML, bạn cần xác định một href để thẻ biết URL nào sẽ trỏ đến khi được nhấp vào.
Có hai thành phần đối với một thuộc tính trong HTML:
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình đã dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
- tên xác định tên của thuộc tính bạn đang tạo.
- giá trị xác định giá trị do thuộc tính nắm giữ.
Giả sử chúng ta muốn xác định một liên kết trỏ đến trang chủ của trang web Career Karma. Để làm như vậy, chúng tôi có thể sử dụng <a> trong HTML. Tuy nhiên, nếu chúng ta muốn thẻ liên kết đến trang chủ Career Karma, chúng ta cũng cần sử dụng href thuộc tính.
Đây là ví dụ về <a> gắn thẻ liên kết đến trang chủ Career Karma:
<a href="https://careerkarma.com/">Career Karma</a>
Thẻ này sử dụng thuộc tính có tên là href và gán cho nó giá trị “https://careerkarma.com/”, là URL của trang chủ Career Karma.
Các thuộc tính trong HTML không phân biệt chữ hoa chữ thường, nhưng các thuộc tính thường được viết bằng chữ thường
HTML trích dẫn đơn và kép
Khi bạn chỉ định một giá trị cho một thuộc tính, bạn có thể sử dụng cả dấu nháy đơn và dấu ngoặc kép. Sử dụng dấu ngoặc kép là cách tiếp cận phổ biến nhất (và là cách chúng tôi đã sử dụng trong ví dụ trước đó). Tuy nhiên, cách tiếp cận bạn sử dụng phụ thuộc vào nội dung thuộc tính của bạn.
Giả sử chúng ta đang tạo một phần tử biểu mẫu có giá trị John ‘Rocketman’ Smith . Trong trường hợp này, vì giá trị của chúng ta chứa dấu ngoặc kép, chúng ta nên sử dụng dấu ngoặc kép cho tên thuộc tính của mình. Đây là mã chúng tôi sẽ sử dụng để khai báo thuộc tính này:
<input type="text" value="John 'Rocketman' Smith">
Mặt khác, giả sử giá trị của chúng tôi chứa dấu ngoặc kép và thay vào đó là John “Rocketman” Smith . Trong trường hợp này, chúng tôi muốn sử dụng các dấu ngoặc kép để xác định thuộc tính của chúng tôi. Đây là mã chúng tôi sẽ sử dụng:
<input type="text" value='John "Rocketman" Smith'>
Cách sử dụng thuộc tính Boolean HTML
Một số thuộc tính không sử dụng cấu trúc cặp tên / giá trị. Chúng tôi gọi đây là các thuộc tính boolean. Các thuộc tính này chỉ có thể có giá trị true-false và giá trị của chúng được đặt thành true nếu chúng được chỉ định và false nếu chúng không được chỉ định.
Các thuộc tính Boolean thường được sử dụng trong các biểu mẫu HTML. Giả sử chúng ta đang tạo một trường biểu mẫu yêu cầu người dùng nhập tên của họ. Chúng tôi muốn trường biểu mẫu này là trường bắt buộc theo mặc định. Chúng tôi có thể sử dụng required thuộc tính boolean để hoàn thành nhiệm vụ này:
<input type="text" value="Name" required>
Trong ví dụ này, chúng tôi đã xác định một thẻ đầu vào có ba thuộc tính. Hai thuộc tính đầu tiên, type và giá trị value , sử dụng cấu trúc tên / giá trị. Thuộc tính thứ ba, required , là một thuộc tính boolean. Bởi vì chúng tôi đã chỉ định required thuộc tính boolean, giá trị của nó được đặt thành true.
Cách sử dụng các thuộc tính HTML chuẩn
Có một số thuộc tính HTML áp dụng cho mọi phần tử trong HTML. Đây được gọi là các thuộc tính toàn cục.
Bạn có thể gặp những điều này trên khắp một trang web, vì vậy, điều quan trọng là bạn phải biết chúng là gì và cách chúng hoạt động. Hãy xem qua bốn thuộc tính HTML tiêu chuẩn phổ biến nhất được áp dụng cho các phần tử.
Thuộc tính id HTML
Thuộc tính id cung cấp cho một phần tử một mã định danh duy nhất. Bản thân thuộc tính id không ảnh hưởng đến cách một phần tử HTML xuất hiện, nhưng nó cho phép bạn chọn một phần tử cụ thể để thao tác khi bạn đang làm việc với CSS hoặc JavaScript.
Id bạn chỉ định bất kỳ phần tử nhất định nào phải là duy nhất trong một tài liệu.
Đây là ví dụ về thuộc tính id được sử dụng trong <p> thẻ:
<p id="secondParagraph">Hello, there! Welcome to my site.</p>
Trong ví dụ này, chúng tôi đã chỉ định <p> của chúng tôi gắn thẻ thuộc tính id với giá trị secondParagraph .
Thuộc tính tiêu đề HTML
Thuộc tính tiêu đề HTML thường được sử dụng để giải thích một phần tử hoặc nội dung của nó. Giá trị được lưu trữ trong thuộc tính title được hiển thị dưới dạng chú giải công cụ xuất hiện khi người dùng di chuột qua phần tử bằng con trỏ của họ.
Giả sử chúng ta có một trường đầu vào thu thập tên người dùng. Chúng tôi muốn hiển thị This field is required khi người dùng di chuột qua trường. Chúng tôi có thể hoàn thành mục tiêu này bằng cách sử dụng mã sau:
<input type="text" title="This field is required">
Khi chúng ta di chuột qua trường văn bản, chú giải công cụ sau sẽ xuất hiện:
Thuộc tính kiểu HTML
Thuộc tính kiểu HTML được sử dụng để chỉ định kiểu CSS cho một phần tử cụ thể. Cách tiếp cận tạo kiểu một phần tử này được gọi là tạo kiểu nội tuyến.
Giả sử chúng ta đang tạo một đoạn văn bản mà chúng ta muốn xuất hiện với màu xám. Chúng tôi có thể sử dụng thuộc tính style để chỉ định màu văn bản của chúng tôi. Đây là mã chúng tôi có thể sử dụng để hoàn thành nhiệm vụ này:
<p style="color: gray;">Hello, there! This is my website.</p>
Đây là đầu ra của mã của chúng tôi:
Như bạn có thể thấy, màu văn bản của chúng ta đã chuyển thành màu xám. Điều này là do chúng tôi đã chỉ định một thuộc tính style và thay đổi color kiểu bằng với gray .
Thuộc tính HTML dành riêng cho phần tử
Có một loạt các thuộc tính khác mà bạn có thể gặp phải dành riêng cho một phần tử. Dưới đây là một số ví dụ:
img src
<img src="source.png">
Trong ví dụ này, chúng tôi đã chỉ định thuộc tính src. Thuộc tính này được sử dụng với img để trỏ đến tệp mà thẻ sẽ hiển thị trên trang web.
a href
<a href="https://careerkarma.com/">Career Karma homepage</a>
href thuộc tính được sử dụng trong ví dụ này để thông báo cho <a> gắn thẻ trang web để hướng người dùng đến khi liên kết được nhấp vào.
img alt
<img src="source.png" alt="Image of a book">
Trong mã của chúng tôi, chúng tôi đã chỉ định alt thuộc tính. Thuộc tính này dành riêng cho thẻ img và chỉ định văn bản thay thế được trang web xử lý nếu không thể hiển thị hình ảnh.
Thuộc tính alt trong HTML có thể được đọc bởi trình đọc màn hình, vì vậy những người khiếm thị phụ thuộc vào trình đọc màn hình vẫn có thể hiểu trang web của chúng tôi.
Cách sử dụng các thuộc tính HTML:Kết luận
Thuộc tính là các thuộc tính bổ sung được áp dụng cho một phần tử cụ thể trong HTML. Các thuộc tính luôn được chỉ định trong thẻ mở của phần tử và thường sử dụng các cặp tên / giá trị.
Hướng dẫn này đã đi qua, với tham chiếu đến các ví dụ, kiến thức cơ bản về các thuộc tính trong HTML, các thuộc tính boolean, một vài thuộc tính HTML tiêu chuẩn và một số thuộc tính dành riêng cho phần tử. Bây giờ bạn đã biết cách sử dụng các thuộc tính trong HTML.