it-swarm-vi.tech

Các giá trị hợp lệ cho thuộc tính id trong HTML là gì?

Khi tạo các thuộc tính id cho các phần tử HTML, quy tắc nào có giá trị?

1854
Mr Shark

Đối với HTML 4 , câu trả lời là về mặt kỹ thuật:

Mã thông báo ID và NAME phải bắt đầu bằng một chữ cái ([A-Za-z]) và có thể được theo sau bởi bất kỳ số lượng chữ cái, chữ số ([0-9]), dấu gạch ngang ("-"), dấu gạch dưới ("_") , dấu hai chấm (":") và dấu chấm (".").

HTML 5 thậm chí còn dễ dãi hơn, chỉ nói rằng một id phải chứa ít nhất một ký tự và không được chứa bất kỳ ký tự khoảng trắng nào.

Thuộc tính id phân biệt chữ hoa chữ thường trong XHTML .

Là một vấn đề hoàn toàn thực tế, bạn có thể muốn tránh một số nhân vật. Dấu chấm, dấu hai chấm và '#' có ý nghĩa đặc biệt trong bộ chọn CSS, vì vậy bạn sẽ phải thoát các ký tự đó bằng cách sử dụng dấu dấu gạch chéo ngược trong CSS hoặc dấu gạch chéo kép trong chuỗi chuỗi chọn được truyền cho jQuery . Hãy suy nghĩ về tần suất bạn sẽ phải thoát một ký tự trong bảng định kiểu hoặc mã của mình trước khi bạn phát điên với dấu chấm và dấu hai chấm trong id.

Ví dụ: khai báo HTML <div id="first.name"></div> là hợp lệ. Bạn có thể chọn phần tử đó trong CSS là #first\.name và trong jQuery như vậy: $('#first\\.name'). Nhưng nếu bạn quên dấu gạch chéo ngược, $('#first.name'), bạn sẽ có một bộ chọn hợp lệ hoàn toàn tìm kiếm một phần tử có id first và cũng có lớp name. Đây là một lỗi dễ bỏ qua. Thay vào đó, bạn có thể hạnh phúc hơn khi chọn id first-name (dấu gạch nối thay vì dấu chấm), thay vào đó.

Bạn có thể đơn giản hóa các nhiệm vụ phát triển của mình bằng cách tuân thủ nghiêm ngặt quy ước đặt tên. Ví dụ: nếu bạn giới hạn hoàn toàn bản thân ở các ký tự chữ thường và luôn tách các từ bằng dấu gạch nối hoặc dấu gạch dưới (nhưng không phải cả hai, chọn một và không bao giờ sử dụng ký tự khác), thì bạn có một mẫu dễ nhớ. Bạn sẽ không bao giờ tự hỏi "đó là firstName hay FirstName?" bởi vì bạn sẽ luôn biết rằng bạn nên gõ first_name. Thích trường hợp lạc đà? Sau đó, giới hạn bản thân ở đó, không có dấu gạch ngang hoặc dấu gạch dưới và luôn luôn sử dụng chữ hoa hoặc chữ thường cho ký tự đầu tiên, không trộn lẫn chúng.


Một vấn đề rất mơ hồ hiện nay là ít nhất một trình duyệt, Netscape 6, các giá trị thuộc tính id được xử lý không chính xác là phân biệt chữ hoa chữ thường . Điều đó có nghĩa là nếu bạn đã nhập id="firstName" trong HTML (chữ thường 'f') và #FirstName { color: red } trong CSS của bạn (chữ hoa 'F'), trình duyệt lỗi đó sẽ không thể đặt màu của phần tử thành màu đỏ. Tại thời điểm chỉnh sửa này, tháng 4 năm 2015, tôi hy vọng bạn không được yêu cầu hỗ trợ Netscape 6. Hãy coi đây là một chú thích lịch sử.

1584
dgvid

Từ đặc tả HTML 4 :

Mã thông báo ID và NAME phải bắt đầu bằng một chữ cái ([A-Za-z]) và có thể được theo sau bởi bất kỳ số lượng chữ cái, chữ số ([0-9]), dấu gạch ngang ("-"), dấu gạch dưới ("_") , dấu hai chấm (":") và dấu chấm (".").

Một lỗi phổ biến là sử dụng ID bắt đầu bằng một chữ số.

211
Peter Hilton

Về mặt kỹ thuật, bạn có thể sử dụng dấu hai chấm và dấu chấm trong các thuộc tính id/name, nhưng tôi thực sự khuyên bạn nên tránh cả hai.

Trong CSS (và một số thư viện JavaScript như jQuery), cả dấu chấm và dấu hai chấm đều có ý nghĩa đặc biệt và bạn sẽ gặp vấn đề nếu không cẩn thận. Dấu chấm là bộ chọn lớp và dấu hai chấm là bộ chọn giả (ví dụ: ": hover" cho một phần tử khi chuột ở trên nó).

Nếu bạn cung cấp cho một phần tử id "my.cool:thing", bộ chọn CSS của bạn sẽ trông như thế này:

#my.cool:thing { ... /* some rules */ ... }

Điều thực sự đang nói, "phần tử có id là 'của tôi', một lớp 'tuyệt vời' và 'bộ chọn giả' 'trong CSS-speak.

Bám sát A-Z của bất kỳ trường hợp, số, dấu gạch dưới và dấu gạch nối. Và như đã nói ở trên, hãy chắc chắn rằng id của bạn là duy nhất.

Đó nên là mối quan tâm đầu tiên của bạn.

145
Michael Thompson

jQuery does xử lý bất kỳ tên ID hợp lệ nào. Bạn chỉ cần thoát các ký tự đại diện (nghĩa là dấu chấm, dấu chấm phẩy, dấu ngoặc vuông ...). Giống như nói rằng JavaScript chỉ có vấn đề với dấu ngoặc kép vì bạn không thể viết

var name = 'O'Hara';

Bộ chọn trong API jQuery (xem ghi chú dưới cùng)

63
Álvaro González

Nghiêm khắc nó phải phù hợp

[A-Za-z][-A-Za-z0-9_:.]*

Nhưng jquery dường như có vấn đề với dấu hai chấm nên có thể tốt hơn để tránh chúng.

60
Mr Shark

HTML5:

thoát khỏi các hạn chế bổ sung đối với thuộc tính id xem tại đây . Các yêu cầu duy nhất còn lại (ngoài việc là duy nhất trong tài liệu) là:

  1. giá trị phải chứa ít nhất một ký tự (có thể trống)
  2. nó có thể chứa bất kỳ ký tự không gian nào.

TRƯỚC HTML5:

ID phải khớp:

[A-Za-z][-A-Za-z0-9_:.]*
  1. Phải bắt đầu bằng ký tự A-Z hoặc a-z
  2. Có thể chứa - (dấu gạch nối), _ (gạch dưới), : (dấu hai chấm) và . (dấu chấm)

nhưng người ta nên tránh :. vì:

Ví dụ: ID có thể được gắn nhãn "ab: c" và được tham chiếu trong biểu định kiểu là #ab: c nhưng cũng là id cho phần tử, nó có thể có nghĩa là id "a", class "b", pseudo- bộ chọn "c". Tốt nhất để tránh nhầm lẫn và tránh xa sử dụng. và: hoàn toàn.

52
Zaheer Ahmed

HTML5: Các giá trị được phép cho các thuộc tính ID & Class

Kể từ HTML5, các hạn chế duy nhất đối với giá trị của ID là:

  1. phải là duy nhất trong tài liệu
  2. không được chứa bất kỳ ký tự khoảng trắng nào
  3. phải chứa ít nhất một ký tự

Các quy tắc tương tự áp dụng cho các lớp (tất nhiên ngoại trừ tính duy nhất).

Vì vậy, giá trị có thể là tất cả các chữ số, chỉ một chữ số, chỉ các ký tự dấu chấm câu, bao gồm các ký tự đặc biệt, bất cứ điều gì. Chỉ cần không có khoảng trắng. Điều này rất khác với HTML4.

Trong HTML 4, các giá trị ID phải bắt đầu bằng một chữ cái, sau đó chỉ có thể được theo sau bởi các chữ cái, chữ số, dấu gạch nối, dấu gạch dưới, dấu hai chấm và dấu chấm.

Trong HTML5, đây là hợp lệ:

<div id="999"> ... </div>
<div id="#%LV-||"> ... </div>
<div id="____V"> ... </div>
<div id="⌘⌥"> ... </div>
<div id="♥"> ... </div>
<div id="{}"> ... </div>
<div id="©"> ... </div>
<div id="♤₩¤☆€~¥"> ... </div>

Xin lưu ý rằng việc sử dụng số, dấu chấm câu hoặc ký tự đặc biệt trong giá trị của ID có thể gây rắc rối trong các bối cảnh khác (ví dụ: CSS, JavaScript, regex).

Ví dụ: ID sau hợp lệ trong HTML5:

<div id="9lions"> ... </div>

Tuy nhiên, nó không hợp lệ trong CSS :

Từ thông số CSS2.1:

4.1.3 Ký tự và trường hợp

Trong CSS, mã định danh (bao gồm tên thành phần, lớp và ID trong bộ chọn) chỉ có thể chứa các ký tự [a-zA-Z0-9] và ISO 10646 ký tự U + 00A0 trở lên, cộng với dấu gạch nối ( -) và dấu gạch dưới (_);chúng không thể bắt đầu bằng một chữ số, hai dấu gạch nối hoặc dấu gạch nối theo sau là một chữ số.

Trong hầu hết các trường hợp, bạn có thể thoát khỏi các ký tự trong bối cảnh nơi chúng có các hạn chế hoặc ý nghĩa đặc biệt.


Tài liệu tham khảo W3C

HTML5

3.2.5.1 Thuộc tính id

Thuộc tính id chỉ định định danh duy nhất (ID) của phần tử.

Giá trị phải là duy nhất trong số tất cả các ID trong cây con nhà của phần tử và phải chứa ít nhất một ký tự. Giá trị không được chứa bất kỳ ký tự khoảng trắng.

Lưu ý: Không có hạn chế nào khác về hình thức ID có thể mất; đặc biệt, ID có thể chỉ bao gồm các chữ số, bắt đầu bằng một chữ số, bắt đầu bằng dấu gạch dưới, chỉ bao gồm dấu chấm câu, v.v.

3.2.5.7 Thuộc tính class

Thuộc tính, nếu được chỉ định, phải có một giá trị là một tập hợp các mã thông báo được phân tách bằng dấu cách đại diện cho các lớp khác nhau mà phần tử thuộc về.

Các lớp mà một phần tử HTML đã gán cho nó bao gồm tất cả các lớp được trả về khi giá trị của thuộc tính lớp được phân chia trên các khoảng trắng. (Các bản sao được bỏ qua.)

Không có hạn chế bổ sung nào đối với các tác giả mã thông báo có thể sử dụng trong thuộc tính lớp, nhưng các tác giả được khuyến khích sử dụng các giá trị mô tả bản chất của nội dung, thay vì các giá trị mô tả cách trình bày nội dung mong muốn.

47
Michael_B

Trong thực tế, nhiều trang web sử dụng các thuộc tính id bắt đầu bằng số, mặc dù về mặt kỹ thuật đây không phải là HTML hợp lệ.

Đặc tả dự thảo HTML 5 nới lỏng các quy tắc cho các thuộc tính idname: giờ đây chúng chỉ là các chuỗi mờ không thể chứa khoảng trắng.

32
pdc

Dấu gạch ngang, dấu gạch dưới, dấu chấm, dấu hai chấm, số và chữ cái đều hợp lệ để sử dụng với CSS và JQuery. Những điều sau đây sẽ hoạt động nhưng nó phải là duy nhất trên toàn trang và cũng phải bắt đầu bằng một chữ cái [A-Za-z].

Làm việc với dấu hai chấm và thời gian cần thêm một chút công việc nhưng bạn có thể làm điều đó như ví dụ sau đây cho thấy.

<html>
<head>
<title>Cake</title>
<style type="text/css">
    #i\.Really\.Like\.Cake {
        color: green;
    }
    #i\:Really\:Like\:Cake {
        color: blue;
    }
</style>
</head>
<body>
    <div id="i.Really.Like.Cake">Cake</div>
    <div id="testResultPeriod"></div>

    <div id="i:Really:Like:Cake">Cake</div>
    <div id="testResultColon"></div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
            var testPeriod = $("#i\\.Really\\.Like\\.Cake");
            $("#testResultPeriod").html("found " + testPeriod.length + " result.");

            var testColon = $("#i\\:Really\\:Like\\:Cake");
            $("#testResultColon").html("found " + testColon.length + " result.");
        });
    </script>
</body>
</html>
29
blacksun1

HTML5

Hãy nhớ rằng ID phải là duy nhất, tức là. không được có nhiều yếu tố trong tài liệu có cùng giá trị id.

Các quy tắc về nội dung ID trong HTML5 là (ngoài việc là duy nhất):

This attribute's value must not contain white spaces. [...] 
Though this restriction has been lifted in HTML 5, 
an ID should start with a letter for compatibility.

Đây là W3 spec về ID (från MDN):

Any string, with the following restrictions:
must be at least one character long
must not contain any space characters
Previous versions of HTML placed greater restrictions on the content of ID values 
(for example, they did not permit ID values to begin with a number).

Thêm thông tin:

  • W3 - thuộc tính toàn cầu (id)
  • MDN atribution (id)
23
Sergio

Để tham chiếu một id có dấu chấm trong đó, bạn cần sử dụng dấu gạch chéo ngược. Không chắc chắn nếu nó giống nhau cho dấu gạch ngang hoặc dấu gạch dưới. Ví dụ: HTML

<div id="maintenance.instrumentNumber">############0218</div>

CSS

#maintenance\.instrumentNumber{Word-wrap:break-Word;}
17
Anthony

Ngoài ra, đừng bao giờ quên rằng một ID là duy nhất. Sau khi sử dụng, giá trị ID có thể không xuất hiện lại ở bất kỳ đâu trong tài liệu.

Bạn có thể có nhiều ID, nhưng tất cả phải có một giá trị duy nhất.

Mặt khác, có yếu tố giai cấp. Giống như ID, nó có thể xuất hiện nhiều lần, nhưng giá trị có thể được sử dụng nhiều lần.

14
Vordreller

Từ thông số kỹ thuật HTML 4 ...

Mã thông báo ID và NAME phải bắt đầu bằng một chữ cái ([A-Za-z]) và có thể được theo sau bởi bất kỳ số lượng chữ cái, chữ số ([0-9]), dấu gạch ngang ("-"), dấu gạch dưới ("_") , dấu hai chấm (":") và dấu chấm (".").

EDIT: d'oh! Đánh đến nút, một lần nữa!

14
Steve Morgan

Một định danh duy nhất cho các yếu tố.

Không được có nhiều yếu tố trong tài liệu có cùng giá trị id.

Bất kỳ chuỗi nào, với các hạn chế sau:

  1. phải dài ít nhất một ký tự
  2. không được chứa bất kỳ ký tự khoảng trắng nào:

    • KHÔNG GIAN U + 0020
    • U + 0009 TABULATION TABULATION (tab)
    • U + 000A LINE FEED (LF)
    • HÌNH THỨC U + 000C (FF)
    • TRẢ LẠI HÀNG HÓA U + 000D (CR)

Sử dụng các ký tự ngoại trừ ASCII letters and digits, '_', '-' and '.' có thể gây ra sự cố tương thích, vì chúng không được phép trong HTML 4. Mặc dù hạn chế này đã được gỡ bỏ trong HTML 5, một ID nên bắt đầu bằng một chữ cái để tương thích.

11
Bhavin Solanki

Có vẻ như mặc dù dấu hai chấm (:) và dấu chấm (.) Là hợp lệ trong thông số HTML, nhưng chúng không hợp lệ dưới dạng bộ chọn id trong CSS vì vậy có lẽ tốt nhất nên tránh nếu bạn có ý định sử dụng chúng cho mục đích đó.

9
lstg

cho HTML5

Giá trị phải là duy nhất trong số tất cả các ID trong phần tử phụ của nhà và phải chứa ít nhất một ký tự. Giá trị không được chứa bất kỳ ký tự khoảng trắng.

Ít nhất một nhân vật, không có khoảng trắng.

Điều này mở ra cánh cửa cho các trường hợp sử dụng hợp lệ, chẳng hạn như sử dụng các ký tự có dấu. Nó cũng mang lại cho chúng tôi nhiều đạn hơn để tự bắn vào chân mình, vì bây giờ bạn có thể sử dụng các giá trị id sẽ gây ra sự cố với cả CSS và JavaScript trừ khi bạn thực sự cẩn thận.

8

Bất kỳ Giá trị số alpha và " - " và " _ " là hợp lệ. Nhưng, bạn nên bắt đầu tên id với bất kỳ ký tự nào giữa A-Z hoặc a-z .

7
Tazwar Utshas
  1. ID phù hợp nhất để đặt tên các phần trong bố cục của bạn, vì vậy không nên đặt cùng tên cho ID và lớp
  2. ID cho phép ký tự chữ và số và ký tự đặc biệt
  3. nhưng tránh sử dụng các ký hiệu # : . * !
  4. không được phép không gian
  5. không bắt đầu bằng số hoặc dấu gạch nối theo sau là chữ số
  6. trường hợp nhạy cảm
  7. sử dụng bộ chọn ID nhanh hơn sử dụng bộ chọn lớp
  8. sử dụng dấu gạch nối "-" (gạch dưới "_" cũng có thể sử dụng nhưng không tốt cho seo) cho các tên quy tắc Id hoặc lớp CSS dài
  9. Nếu một quy tắc có bộ chọn ID làm bộ chọn khóa, thì don quy thêm tên thẻ vào quy tắc. Vì ID là duy nhất, việc thêm tên thẻ sẽ làm chậm quá trình khớp.
  10. Trong HTML5, thuộc tính id có thể được sử dụng trên bất kỳ thành phần HTML nào và Trong HTML 4.01, thuộc tính id có thể được sử dụng với: <base>, <head>, <html>, <meta>, <param>, <script>, <style>, and <title>.

Không có khoảng trắng, phải bắt đầu bằng ít nhất một char từ a đến z và 0 đến 9.

5
Wembo Mulumba

các giá trị có thể là: [a-z], [A-Z], [0-9], [* _: -]

nó được sử dụng cho HTML5 ...

chúng ta có thể thêm id với bất kỳ thẻ nào.

2

Trong HTML

ID nên bắt đầu bằng {AZ} hoặc {az} bạn có thể Thêm Chữ số, dấu chấm, dấu gạch ngang, dấu gạch dưới, dấu hai chấm .

Ví dụ:

<span id="testID2"></span>
<span id="test-ID2"></span>
<span id="test_ID2"></span>
<span id="test:ID2"></span>
<span id="test.ID2"></span>

Nhưng ngay cả khi bạn có thể tạo ID bằng Colons (:) hoặc period (.) Thật khó để CSS sử dụng những ID này làm Selector. Chủ yếu là khi bạn muốn sử dụng các phần tử giả (: trước ,: sau).

Ngoài ra trong JS Thật khó để chọn những ID này. Vì vậy, bạn nên sử dụng bốn ID đầu tiên Như nhiều nhà phát triển ưa thích xung quanh và nếu cần thiết, bạn cũng có thể sử dụng hai ID cuối cùng.

1
Dev pokhariya