Các thuộc tính trong HTML

Thảo luận trong 'Tự Học HTML' bắt đầu bởi Tâm Vĩnh, 8/6/16.

  1. Tâm Vĩnh

    Tâm Vĩnh Member

    Tham gia ngày:
    6/4/16
    Bài viết:
    39
    Đã được thích:
    0
    Điểm thành tích:
    6
    Giới tính:
    Nam
    Nghề nghiệp:
    iZdesigner Team
    Nơi ở:
    Hà Nam
    Các thuộc tính trong HTML - Chúng ta đã tìm hiểu một số thẻ HTML và cách sử dụng của nó như các thẻ <h1>, <h2>, thẻ đoạn văn <p> và các thẻ khác. Chúng ta sử dụng chúng trong các mẫu đơn giản nhất của nó, nhưng hầu hết các thẻ HTML có thể cũng có các thuộc tính hay đặc trưng, mà cung cấp thêm một chút thông tin.

    Các thuộc tính trong HTML

    Một thuộc tính được sử dụng để xác định đặc trưng của một yếu tố HTML và được đặt trong một thẻ mở của yếu tố đó. Tất cả các thuộc tính được chia thành 2 phần : tên và một giá trị:
    • Tên là quyền sở hữu mà bạn muốn thiết lập. Ví dụ, phần tử đoạn văn <p> trong ví dụ dưới mang một thuộc tính tên của nó là align, mà bạn có thể sử dụng để chỉ sự căn chỉnh của đoạn văn trên một trang.
    • Giá trị là những gì mà bạn muốn gán cho quyền sở hữu và được đặt trong các trích dẫn. Ví dụ dưới chỉ 3 giá trị có thể của thuộc tính align: left, center, và right.
    Tên thuộc tính và giá trị thuộc tính là không phân biệt chữ hoa và chữ thường. Tuy nhiên, W3C đề nghị thuộc tính chữ thường và thuộc tính giá trị trong phiên bản HTML 4 đã giới thiệu. Ví dụ:
    Mã:
    <!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>
    Chạy đoạn code sẽ hiển thị kết quả:

    [​IMG]

    Các thuộc tính lõi (Core)

    Có 4 thuộc tính lõi có thể được sử dụng trong phần lớn các phần tử HTML (mặc dù không phải toàn bộ) là:
    • id
    • title
    • class
    • style
    Thuộc tính id

    Các thuộc tính id của một thẻ HTML được sử dụng để nhận diện đơn nhất bất kỳ phần tử nào trong một trang HTML. Có 2 lý do chính mà bạn có thể muốn sử dụng một thuộc tính id trên một phần tử là:
    • Nếu một phần tử mang thuộc tính id như là một định danh duy nhất, nó có thể xác định đích danh phần tử đó và nội dung của nó.
    • Nếu bạn có 2 phần tử cùng tên trong một trang Web (hoặc Style Sheet ), bạn có thể sử dụng thuộc tính id để phân biệt giữa 2 phần tử mà có cùng tên đó.
    Chúng ta sẽ bàn về Style Sheet trong các hướng dẫn riêng khác. Bây giờ, chúng ta sử dụng thuộc tính id để phân biệt giữa 2 phần tử đoạn văn như ví dụ dưới.
    Mã:
    <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 title

    Thuộc tính title cung cấp một tiêu đề được đề nghị cho một phần tử. Cú pháp cho thuộc tính title tương tự như phần giải thích ở trên của thuộc tính id.

    Chế độ xử lý của thuộc tính này phụ thuộc vào phần tử mang nó, mặc dù nó thường hiển thị một tooltip (thêm chi tiết) mà khi rê chuột vào đó sẽ phóng to phần tử, kèm theo lời giới thiệu ngắn gọn hoặc hiển thị hình ảnh phần tử đó trong khi đang tải. Ví dụ:
    Mã:
    <!DOCTYPE html>
    <html>
    <head>
    <title>The title Attribute Example</title>
    </head>
    <body>
    <h3 title="Hello HTML!">Titled Heading Tag Example</h3>
    </body>
    </html>
    Hiển thị kết quả:

    [​IMG]
    Bây giờ bạn hãy thử rê con trỏ chuột qua “ Titled Heading Tag Examble” và bạn sẽ thấy nó phóng to như một tooltip của con trỏ.

    Thuộc tính class

    Thuộc tính class được sử dụng để liên kết một phần tử với một Style Sheet và xác định hạng (loại) của phần tử. Bạn sẽ được học thêm về cách sử dụng của thuộc tính này khi bạn học về Cascading Style Sheet (CSC). Vì thế, bây giờ bạn có thể chưa cần học đến nó.

    Giá trị của thuộc tính này có thể là một danh sách riêng rẽ phân biệt nhau bởi khoảng trống tên của các class (loại). Ví dụ:

    Mã:
    class="className1 className2 className3"
    
    Thuộc tính style

    Thuộc tính này cho phép bạn xác định rõ các quy tắc Cascading Style Sheet (CSC) trong phần tử.
    Mã:
    <!DOCTYPE html>
    <html>
    <head>
    <title>The style Attribute</title>
    </head>
    <body>
    <p style="font-family:arial; color:#FF0000;">Some text...</p>
    </body>
    </html>
    
    Nó sẽ hiển thị kết quả:
    Lúc này bạn chưa học về CSS, vì thế hãy tiếp tục tiến hành mà không cần lo lắng về CSS. Tại đây chúng ta cần hiểu các thuộc tính HTML là gì và cách chúng sử dụng để định dạng nội dung.

    Các thuộc tính Global

    Có 3 thuộc tính Global mà có trong hầu hết (không phải tất cả) các phần tử XHTML.
    • dir
    • lang
    • xml:lang
    Thuộc tính dir

    Thuộc tính dir cho phép bạn chỉ đạo trình duyệt phương hướng mà văn bản hiển thị (chẳng hạn từ trái qua phải). Thuộc tính này nhận một trong 2 giá trị, hiển thị ở bảng dưới:
    [​IMG]
    Ví dụ:
    Mã:
    <!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>
    Hiển thị kết quả như sau:
    [​IMG]
    Khi thuộc tính dir được sử dụng trong thẻ <html> , nó quyết định cách mà văn bản xuất hiện trong toàn bộ tài liệu. Khi sử dụng với thẻ khác, nó điều khiển hướng của văn bản cho nội dung của thẻ đó.

    Thuộc tính lang

    Thuộc tính lang cho phép bạn chỉ rõ ngôn ngữ chính sử dụng trong một tài liệu, nhưng thuộc tính này được giữ trong HTML chỉ cho khả năng tương thích ngược với các phiên bản trước của HTML. Thuộc tính này được thay thế bằng thuộc tính xml:lang trong tài liệu XHTML mới.

    Các giá trị của thuộc tính lang là các mã ngôn ngữ hai ký tự tiêu chuẩn ISO-639. Bạn có thể kiểm tra danh sách các code này ở chương Mã hóa ngôn ngữ HTML.

    Mã:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>English Language Page</title>
    </head>
    <body>
    This page is using English Language
    </body>
    </html>
    Thuộc tính xml:lang

    Thuộc tính xml:lang trong XHTML thay cho thuộc tính lang. Giá trị của thuộc tính xml:lang này có thể là một mã quốc gia trong ISO-639 như đã đề cập ở trên.

    Các thuộc tính chung

    Bảng dưới miêu tả các thuộc tính khác mà sử dụng dễ dàng với nhiều thẻ HTML:
    [​IMG]
    Chúng ta sẽ nghiên cứu các ví dụ liên quan khi chúng ta tiến hành với các thẻ HTML khác.
     

Chia sẻ trang này