HTML - Thuộc tính
Chúng tôi đã thấy một vài thẻ HTML và cách sử dụng chúng như thẻ tiêu đề <h1>, <h2>, thẻ đoạn văn <p>và các thẻ khác. Cho đến nay, chúng tôi đã sử dụng chúng ở dạng đơn giản nhất, nhưng hầu hết các thẻ HTML cũng có thể có các thuộc tính, là các bit thông tin bổ sung.
Một thuộc tính được sử dụng để xác định các đặc điểm của phần tử HTML và được đặt bên trong thẻ mở của phần tử. Tất cả các thuộc tính được tạo thành từ hai phần - aname và một value
Các namelà thuộc tính bạn muốn đặt. Ví dụ, đoạn<p> phần tử trong ví dụ mang thuộc tính có tên là align, bạn có thể sử dụng để chỉ ra sự liên kết của đoạn văn trên trang.
Các valuelà những gì bạn muốn giá trị của thuộc tính được đặt và luôn đặt trong dấu ngoặc kép. Ví dụ dưới đây cho thấy ba giá trị có thể có của thuộc tính align: left, center và right.
Tên thuộc tính và giá trị thuộc tính không phân biệt chữ hoa chữ thường. Tuy nhiên, World Wide Web Consortium (W3C) đề xuất các thuộc tính / giá trị thuộc tính chữ thường trong đề xuất HTML 4 của họ.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Align Attribute Example</title>
</head>
<body>
<p align = "left">This is left aligned</p>
<p align = "center">This is center aligned</p>
<p align = "right">This is right aligned</p>
</body>
</html>Điều này sẽ hiển thị kết quả sau:
Thuộc tính cốt lõi
Bốn thuộc tính cốt lõi có thể được sử dụng trên phần lớn các phần tử HTML (mặc dù không phải tất cả) là:
- Id
- Title
- Class
- Style
Thuộc tính Id
Các idthuộc tính của thẻ HTML có thể được sử dụng để xác định duy nhất bất kỳ phần tử nào trong trang HTML. Có hai lý do chính mà bạn có thể muốn sử dụng thuộc tính id trên một phần tử -
Nếu một phần tử mang thuộc tính id như một số nhận dạng duy nhất, thì chỉ có thể xác định phần tử đó và nội dung của nó.
Nếu bạn có hai phần tử cùng tên trong một trang Web (hoặc trang định kiểu), bạn có thể sử dụng thuộc tính id để phân biệt giữa các phần tử có cùng tên.
Chúng ta sẽ thảo luận về style sheet trong hướng dẫn riêng. Bây giờ, hãy sử dụng thuộc tính id để phân biệt giữa hai phần tử đoạn văn như hình dưới đây.
Example
<p id = "html">This para explains what is HTML</p>
<p id = "css">This para explains what is Cascading Style Sheet</p>Thuộc tính tiêu đề
Các titlethuộc tính cung cấp tiêu đề đề xuất cho phần tử. Cú pháp của chúng chotitle thuộc tính tương tự như được giải thích cho id thuộc tính -
Hoạt động của thuộc tính này sẽ phụ thuộc vào phần tử mang nó, mặc dù nó thường được hiển thị dưới dạng chú giải công cụ khi con trỏ đi qua phần tử hoặc khi phần tử đang tải.
Example
<!DOCTYPE html>
<html>
<head>
<title>The title Attribute Example</title>
</head>
<body>
<h3 title = "Hello HTML!">Titled Heading Tag Example</h3>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Bây giờ, hãy thử đưa con trỏ của bạn qua "Ví dụ về thẻ có tiêu đề có tiêu đề" và bạn sẽ thấy rằng bất kỳ tiêu đề nào bạn đã sử dụng trong mã của mình đều xuất hiện dưới dạng chú giải công cụ của con trỏ.
Thuộc tính của lớp
Các classthuộc tính được sử dụng để liên kết một phần tử với một biểu định kiểu và chỉ định lớp của phần tử. Bạn sẽ tìm hiểu thêm về cách sử dụng thuộc tính class khi bạn học Cascading Style Sheet (CSS). Vì vậy, bây giờ bạn có thể tránh nó.
Giá trị của thuộc tính cũng có thể là một danh sách tên lớp được phân tách bằng dấu cách. Ví dụ -
class = "className1 className2 className3"Thuộc tính kiểu
Thuộc tính style cho phép bạn chỉ định các quy tắc Cascading Style Sheet (CSS) trong phần tử.
<!DOCTYPE html>
<html>
<head>
<title>The style Attribute</title>
</head>
<body>
<p style = "font-family:arial; color:#FF0000;">Some text...</p>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Tại thời điểm này, chúng tôi không học CSS, vì vậy hãy tiếp tục mà không cần bận tâm nhiều về CSS. Ở đây, bạn cần hiểu các thuộc tính HTML là gì và cách chúng có thể được sử dụng trong khi định dạng nội dung.
Các thuộc tính quốc tế hóa
Có ba thuộc tính quốc tế hóa, có sẵn cho hầu hết (mặc dù không phải tất cả) phần tử XHTML.
- dir
- lang
- xml:lang
Thuộc tính dir
Các dirthuộc tính cho phép bạn chỉ ra cho trình duyệt về hướng mà văn bản sẽ chảy. Thuộc tính dir có thể nhận một trong hai giá trị, như bạn có thể thấy trong bảng sau:
| Giá trị | Ý nghĩa |
|---|---|
| ltr | Trái sang phải (giá trị mặc định) |
| rtl | Từ phải sang trái (đối với các ngôn ngữ như tiếng Do Thái hoặc tiếng Ả Rập được đọc từ phải sang trái) |
Example
<!DOCTYPE html>
<html dir = "rtl">
<head>
<title>Display Directions</title>
</head>
<body>
This is how IE 5 renders right-to-left directed text.
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Khi thuộc tính dir được sử dụng trong thẻ <html>, nó xác định cách văn bản sẽ được trình bày trong toàn bộ tài liệu. Khi được sử dụng trong một thẻ khác, nó sẽ kiểm soát hướng của văn bản đối với nội dung của thẻ đó.
Thuộc tính lang
Các langthuộc tính cho phép bạn chỉ ra ngôn ngữ chính được sử dụng trong tài liệu, nhưng thuộc tính này chỉ được giữ trong HTML để tương thích ngược với các phiên bản HTML trước đó. Thuộc tính này đã được thay thế bằngxml:lang thuộc tính trong tài liệu XHTML mới.
Các giá trị của thuộc tính lang là mã ngôn ngữ hai ký tự tiêu chuẩn ISO-639. Kiểm traHTML Language Codes: ISO 639 để có danh sách đầy đủ các mã ngôn ngữ.
Example
<!DOCTYPE html>
<html lang = "en">
<head>
<title>English Language Page</title>
</head>
<body>
This page is using English Language
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Thuộc tính xml: lang
Các xml: lang thuộc tính là sự thay thế XHTML cho lang thuộc tính. Giá trị của thuộc tính xml: lang phải là mã quốc gia ISO-639 như đã đề cập trong phần trước.
Thuộc tính Chung
Đây là bảng một số thuộc tính khác có thể sử dụng dễ dàng với nhiều thẻ HTML.
| Thuộc tính | Tùy chọn | Chức năng |
|---|---|---|
| căn chỉnh | phải, trái, giữa | Căn chỉnh theo chiều ngang các thẻ |
| giá trị | trên cùng, giữa, dưới cùng | Căn chỉnh theo chiều dọc các thẻ trong phần tử HTML. |
| bgcolor | giá trị số, hệ thập phân, RGB | Đặt màu nền phía sau một phần tử |
| lý lịch | URL | Đặt hình nền phía sau một phần tử |
| Tôi | Đã xác định người dùng | Đặt tên một phần tử để sử dụng với Trang tính kiểu xếp tầng. |
| lớp học | Đã xác định người dùng | Phân loại một phần tử để sử dụng với Trang tính kiểu xếp tầng. |
| chiều rộng | Giá trị số | Chỉ định chiều rộng của bảng, hình ảnh hoặc ô bảng. |
| Chiều cao | Giá trị số | Chỉ định chiều cao của bảng, hình ảnh hoặc ô bảng. |
| tiêu đề | Đã xác định người dùng | Tiêu đề "cửa sổ bật lên" của các phần tử. |
Chúng ta sẽ thấy các ví dụ liên quan khi chúng ta sẽ tiến hành nghiên cứu các thẻ HTML khác. Để có danh sách đầy đủ các Thẻ HTML và các thuộc tính liên quan, vui lòng kiểm tra tham chiếu đến Danh sách Thẻ HTML .