Thuộc tính id xác định một mã định danh duy nhất cho các phần tử HTML. Nó phải là duy nhất trong tài liệu. Nói chung, nó trỏ một kiểu trong biểu định kiểu, liên kết neo và mục tiêu cho tập lệnh

Trong đoạn mã này, chúng ta sẽ thảo luận về các giá trị hợp lệ của thuộc tính id cho HTML, CSS và Javascript

Trong HTML4, giá trị của thuộc tính id phải bắt đầu bằng một chữ cái (A-Z, a-z) và có thể theo sau bởi các chữ cái, chữ số (0-9), dấu hai chấm (. ), Chu kỳ (. ), dấu gạch ngang (-) và dấu gạch dưới (_)

Trong HTML5, thuộc tính id phải là duy nhất, chứa ít nhất một ký tự và không được chứa ký tự khoảng trắng. Không có bất kỳ hạn chế nào khác

Trong XHTML, thuộc tính id phân biệt chữ hoa chữ thường

Hãy xem một ví dụ

Ở đây, giá trị của thuộc tính id hợp lệ trong HTML5. Tuy nhiên, trong CSS và Javascript, mã định danh chỉ có thể chứa các chữ cái (A-Z, a-z) và chữ số (0-9)

Bây giờ, chúng tôi sẽ trình bày các ví dụ về giá trị hợp lệ và không hợp lệ của thuộc tính id trong HTML và CSS

  
    Title of the document
    
  
  
    
W3Docs
    

      Learn programming
    
  

Trong ví dụ trên, chúng tôi đã sử dụng hai thuộc tính id. 1w3docs và 2w3docs. Tuy nhiên, được tạo kiểu bằng CSS, chúng cho kết quả đầu ra đơn giản vì các giá trị không hợp lệ trong CSS

Trong ví dụ tiếp theo của chúng tôi, bạn có thể thấy kết quả được tạo kiểu của mã, vì chúng tôi sử dụng các giá trị hợp lệ trong cả HTML và CSS

  
    Title of the document
    
  
  
    
W3Docs
    

      Learn programming
    
  

Tiếp theo, hãy xem các ví dụ về giá trị hợp lệ và không hợp lệ trong HTML và JavaScript

Ở đây cũng vậy, trước tiên hãy xem một ví dụ có giá trị hợp lệ trong HTML5 nhưng không hợp lệ trong Javascript, sau đó xem ví dụ có giá trị hợp lệ cho cả HTML5 và Javascript

  
    Title of the document
    
  
  
    Example
    
      Click here
    
    
  

Nếu bạn nhấp vào nút "Nhấp vào đây" trong ví dụ trên, sẽ không có gì xảy ra do giá trị không hợp lệ cho JavaScript

Một số ứng dụng này bao gồm liên kết các kiểu CSS, nhắm mục tiêu một số tập lệnh nhất định và sử dụng liên kết neo

Bài viết này là nơi tốt nhất để tìm hiểu mọi thứ bạn cần biết về thuộc tính id nếu bạn muốn đưa nó vào dự án tiếp theo của mình

nội dung

• ID trong tài liệu HTML là gì?
• Các hành động có thể được thực hiện với thuộc tính ID
  • – Đặt tên neo cho mục đích liên kết
  • – Sử dụng nó làm bộ chọn biểu định kiểu
  • – Bao gồm các hàm JavaScript và các tập lệnh khác
  • – Các chức năng xử lý khác
• Quy định khi sử dụng thuộc tính ID HTML
• Cách thêm ID vào tài liệu HTML
• Thuộc tính lớp và ID – Sự khác biệt là gì?
• Sử dụng thuộc tính ID với JavaScript
• Thuộc tính ID HTML – Tổng quan và Ghi chú chính

ID trong tài liệu HTML là gì?

Thuộc tính id trong HTML là một trong những thuộc tính có nhiều công dụng khác nhau. Bất kỳ id nào trong tài liệu HTML chỉ định một mã định danh duy nhất mà sau này có thể được sử dụng cho bất kỳ phần tử HTML nào trong tài liệu. Bạn đang tạo các phần tử HTML nhận dạng và làm cho chúng khác với các phần tử khác

Có một số hành động bạn có thể thực hiện khi sử dụng thuộc tính này và trong phần sau, chúng ta sẽ xem xét tất cả chúng

Các hành động có thể được thực hiện với thuộc tính ID

Có 4 chức năng chính mà thẻ id HTML có. Mỗi hành động này có thể được thực hiện nếu bạn đưa vào đúng cú pháp bên trong tài liệu HTML. Bốn chức năng chính là

• Đặt tên neo cho mục đích liên kết
• Sử dụng nó làm bộ chọn biểu định kiểu
• Bao gồm các hàm JavaScript và các tập lệnh khác
• Các chức năng xử lý khác

Tạo một lớp id HTML sẽ cho phép bạn sử dụng bất kỳ hàm nào trong bốn hàm này. Mặc dù những hành động này khác nhau nhưng cú pháp để đưa chúng vào tài liệu HTML của bạn rất giống nhau. Bây giờ, chúng ta hãy thảo luận những hành động này làm gì với từng cá nhân

– Đặt tên neo cho mục đích liên kết

Mọi trình duyệt web đều sử dụng các vị trí chính xác để nhắm mục tiêu và xác định các tài liệu web trong tài liệu HTML của bạn bằng cách tham chiếu đến phần cuối URL của bạn, nơi có id. Tất cả những gì bạn phải làm là thêm id vào cuối URL nhưng đảm bảo rằng nó được đặt trước dấu thăng. Cú pháp khá đơn giản và yêu cầu nỗ lực tối thiểu để thực hiện hành động thuộc tính id quan trọng này. Hãy để chúng tôi chuyển sang chức năng tiếp theo

– Sử dụng nó làm bộ chọn biểu định kiểu

Đây là cách sử dụng phổ biến nhất của thuộc tính id lớp HTML. Vì mỗi thuộc tính id là duy nhất nên phần tử duy nhất sẽ bị ảnh hưởng bởi thuộc tính id là phần tử mà bạn sẽ đưa nó vào. Tuy nhiên, có một vấn đề là rất khó ghi đè thuộc tính này sau này trong tài liệu. Vì vậy, bạn phải cẩn thận khi nào và làm thế nào bạn sử dụng nó

– Bao gồm các hàm JavaScript và các tập lệnh khác

Viết bất kỳ tập lệnh nào trong tài liệu của bạn là một bước khá phổ biến, đặc biệt là JavaScript. Cách tốt nhất để thực hiện các thay đổi khác đối với bất kỳ thành phần nào bạn đã sử dụng tập lệnh là sử dụng thuộc tính id. Bạn có thể tham khảo phần tử này với giá trị id của nó và thay đổi những gì bạn muốn

– Các chức năng xử lý khác

Id là một phần của thuộc tính toàn cầu HTML. Điều này có nghĩa là bạn có thể xử lý tài liệu web theo bất kỳ cách nào mà bạn có thể cần. Nếu bạn muốn xác định các trường cụ thể từ bất kỳ tài liệu nào, bạn phải trích xuất HTML vào cơ sở dữ liệu và định vị nó bằng thuộc tính id

Quy định khi sử dụng thuộc tính ID HTML

Trước khi chúng tôi chỉ cho bạn cách đưa thuộc tính id vào tài liệu HTML của bạn, trước tiên, bạn nên biết rằng có một số quy tắc bạn cần tuân theo

• Mỗi thuộc tính id phải bắt đầu bằng một chữ cái
• Bất kỳ ký tự nào bạn thêm sau đó có thể là một chữ cái, số, dấu gạch dưới, dấu hai chấm, dấu gạch nối hoặc dấu chấm
• Bạn cần đảm bảo rằng mọi thuộc tính id phải là duy nhất cho tài liệu HTML đó

Các quy tắc và quy định không khó nhớ chút nào. Nếu bạn cẩn thận làm theo chúng, việc tạo cú pháp thuộc tính id chính xác sẽ không thành vấn đề

Cách thêm ID vào tài liệu HTML

Bất kỳ id phần HTML nào bạn tạo phải được bao gồm trong phần tử . Cú pháp tạo một thuộc tính id rất đơn giản và chỉ cần một vài thứ. Trước tiên, bạn phải viết một ký tự băm, theo sau nó là tên id và thêm các thuộc tính kiểu nhất định bên trong dấu ngoặc nhọn. Số thuộc tính kiểu bạn có thể thêm bên trong id là vô hạn; .

Chúng ta hãy xem ví dụ sau khi chúng tôi sử dụng thuộc tính id có tên #firstElement .

<đầu>

#firstElement {

màu nền. đen;

màu. màu xanh da trời;

đệm. 60px;

căn chỉnh văn bản. trung tâm;

}

Tiêu đề của tôi

Như bạn có thể thấy từ ví dụ này, bạn phải luôn bao gồm các thuộc tính kiểu bên trong hai dấu ngoặc nhọn. Nếu bạn không làm như vậy, trình duyệt web sẽ không nhận ra cú pháp của bạn và nó sẽ trở nên vô dụng. Bạn cũng phải lưu ý rằng bất kỳ tên id nào bạn đưa vào sẽ phân biệt chữ hoa chữ thường. Hãy cẩn thận khi sử dụng chữ hoa và chữ thường trong tên vì chỉ một chữ cái có thể là sự khác biệt giữa cú pháp đúng và sai

Thuộc tính lớp và ID – Sự khác biệt là gì?

Lúc đầu, bạn có thể khó nhận thấy sự khác biệt giữa thuộc tính class và id. Cách dễ nhất để giải thích sự khác biệt là xem xét kỹ hơn chức năng của chúng

Tạo id liên kết HTML có nghĩa là tạo một tập hợp các kiểu duy nhất nhưng chỉ dành cho một phần tử trong tài liệu của bạn. Khi bạn tạo một tập hợp kiểu bằng thuộc tính lớp, điều đó có nghĩa là bạn có thể đưa chúng vào bao nhiêu phần tử tùy thích. Điều này có nghĩa là một tên id chỉ có thể tạo kiểu cho một thành phần HTML duy nhất, trong khi một lớp duy nhất có thể tạo kiểu cho tất cả các thành phần trong tài liệu HTML của bạn

Cách tốt nhất để thấy sự khác biệt của chúng là xem xét kỹ hơn chúng cạnh nhau trong ví dụ sau

/* Tạo kiểu cho phần tử với id “myParagraph” */

#myParagraph {

màu nền. màu tím;

màu. xanh nhạt;

đệm. 35px;

căn chỉnh văn bản. trung tâm;

}

/* Tạo kiểu cho tất cả các phần tử với tên lớp là “quốc gia” */

quốc gia {

màu nền. màu đỏ;

màu. màu vàng;

đệm. 30px;

}

<. – Phần tử này có một thuộc tính id duy nhất –>

Quốc gia của tôi

<. – Ba phần tử sau được tạo kiểu bằng cùng một thuộc tính lớp –>

Pháp

Pháp là quốc gia lớn nhất châu Âu.

Nga

Nga là quốc gia lớn nhất châu Á.

Hoa Kỳ

Hoa Kỳ là quốc gia lớn nhất ở Bắc Mỹ.

Một số người tin rằng sử dụng thuộc tính class thực tế hơn nhiều so với sử dụng thuộc tính id. Tuy nhiên, mặc dù có vẻ như điều này đúng dựa trên ví dụ, nhưng nó không đơn giản như vậy. Có những trường hợp cần phải tạo các phần tử duy nhất và cách tốt nhất để tạo chúng là gán một thuộc tính id. Khi bạn bắt đầu triển khai chúng trong tài liệu HTML của mình, bạn sẽ thấy chúng thực tế và dễ sử dụng như thế nào

Sử dụng thuộc tính ID với JavaScript

Như đã đề cập trong bài viết này, một trong những chức năng phổ biến nhất của thuộc tính id trong HTML là khi bạn sử dụng nó với JavaScript để thực hiện các hành động. JavaScript có thể truy cập bất kỳ phần tử nào có thuộc tính id duy nhất bằng cách sử dụng phương thức getElementById . Điều này cho phép truy cập nhanh chóng và dễ dàng vào bất kỳ phần tử nào nếu bạn biết tên id thực.

Hãy xem một ví dụ ngắn sử dụng phương pháp được đề cập ở trên

chức năng displayResult() {

tài liệu. getElementById(“myCountry”). internalHTML = “Đây là một đất nước xinh đẹp. ”;

}

Theo ví dụ trên, chúng tôi đã sử dụng mã JavaScript đơn giản để hiển thị thông báo có trong cú pháp. Tuy nhiên, đừng lo lắng ngay cả khi bạn không hiểu cú pháp này vì việc tìm hiểu về JavaScript và các chức năng của nó đòi hỏi thời gian và công sức. Ví dụ này chỉ phục vụ mục đích hiển thị những gì có thể được thực hiện với thuộc tính id HTML

Thuộc tính ID HTML – Tổng quan và Ghi chú chính

Thuộc tính id HTML luôn được sử dụng để thiết lập mã định danh duy nhất cho bất kỳ thành phần HTML nào trong tài liệu của bạn. Việc tạo mã định danh duy nhất như vậy cho phép bạn thực hiện nhiều chức năng khác nhau với phần tử, chẳng hạn như nhắm mục tiêu các tập lệnh nhất định, liên kết các kiểu CSS và sử dụng liên kết neo

• 
  Thuộc tính id HTML tạo một mã định danh cụ thể và duy nhất
• Có bốn hành động cơ bản bạn có thể thực hiện khi sử dụng thuộc tính id HTML
• Có một số quy tắc và quy định bạn phải tuân theo nếu muốn tạo đúng cú pháp
• Thêm một thuộc tính id yêu cầu một vài bước
• Các thuộc tính lớp và id có các chức năng khác nhau
• Sử dụng thuộc tính id với JavaScript rất đơn giản

Khi làm việc trên bất kỳ tài liệu HTML nào, bạn phải lưu ý rằng có rất nhiều phương pháp bạn có thể sử dụng để tạo ra một kiệt tác. Sau khi đọc kỹ hướng dẫn này, bạn sẽ có thể triển khai thuộc tính id HTML trong dự án tiếp theo của mình

Đánh giá bài viết này

• Tác giả
• Bài viết gần đây

Vị trí là tất cả

Vị trí là tất cả. Tài nguyên Go-To của bạn để Tìm hiểu & Xây dựng. CSS, JavaScript, HTML, PHP, C++ và MYSQL

Những ký tự nào không được phép trong HTML ID?

Ghi chú. Về mặt kỹ thuật, giá trị của thuộc tính id có thể chứa bất kỳ ký tự nào, ngoại trừ ký tự khoảng trắng . Tuy nhiên, để tránh các lỗi vô ý, chỉ nên sử dụng các chữ cái, chữ số, '_' và '-' ASCII và giá trị cho thuộc tính id phải bắt đầu bằng một chữ cái.

ID HTML có thể viết hoa không?

Các thành phần ID và TÊN phải bắt đầu bằng chữ i. e. chữ hoa từ A đến Z hoặc chữ thường từ a đến z; . Sau chữ cái đầu tiên, số lượng chữ cái bất kỳ (a đến z, A đến Z), chữ số (0 đến 9), dấu gạch ngang (-), dấu gạch dưới (_), dấu hai chấm (. ) và dấu chấm (. )

ID có thể bắt đầu bằng số không?

Bởi vì nó sẽ không hoạt động. Định danh lớp được phép bắt đầu bằng một số, nhưng định danh ID thì không