Câu hỏi Giá trị hợp lệ cho thuộc tính id trong HTML là gì?


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


1710
2017-09-16 09:08


gốc


Điều này khác nhau giữa HTML5 và các phiên bản trước của spec. Tôi đã giải thích ở đây: mathiasbynens.be/notes/html5-id-class - Mathias Bynens
Tôi nhận thấy SharePoint 2010 chỉ định một giá trị như thế này - {8CC7EF38-31D8-4786-8C20-7E6D56E49AE2} - {E60CE5E2-6E64-4350-A884-654B72DA5A53} cho bảng được tạo động trong Phần Web và trang chứa giá trị ID của sắp xếp đó không phá vỡ bất kỳ trình duyệt phổ biến nào. Đối phó với các giá trị ID như vậy thông qua JavaScript là khó khăn mặc dù - mvark.blogspot.in/2012/07/… - mvark
Yêu cầu HTML4 và HTML5 cho ID các giá trị rất khác nhau. Dưới đây là tóm tắt HTML5 nhanh chóng và đầy đủ ID quy tắc: stackoverflow.com/a/31773673/3597276 - Michael_B
Xin lưu ý: Làm như một số câu trả lời đã nói và sử dụng một khoảng thời gian (**.**) với jQuery sẽ chạy bạn vào một chút rắc rối, ví dụ, bằng cách sử dụng <input id="me.name" />và sau đó $("#me.name").val() sẽ khiến jQuery tìm kiếm <me> gắn thẻ với lớp học .name, không ai muốn thực sự! - Sam Swift 웃
@SamSwift 웃 Không, bạn chỉ cần thoát khỏi những nhân vật đặc biệt tài liệu nói. Làm ơn kiểm tra cái này bản trình diễn trực tuyến. - Álvaro González


Các câu trả lời:


Dành cho 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ố chữ cái, chữ số ([0-9]), dấu gạch nối ("-"), 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 những nhân vật nhất định. 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 khỏi các ký tự đó bằng cách sử dụng dấu gạch chéo ngược trong CSS hoặc một dấu gạch chéo ngược đôi trong một chuỗi chọn được chuyển đến jQuery. Hãy suy nghĩ về mức độ thường xuyên bạn sẽ phải thoát khỏi một nhân vật trong bảng định kiểu của bạn hoặc mã trước khi bạn phát điên với thời gian và dấu hai chấm trong id.

Ví dụ, khai báo HTML <div id="first.name"></div> hợp lệ. Bạn có thể chọn phần tử đó trong CSS #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 hoàn toàn hợp lệ để 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ị bỏ qua. Bạn có thể hạnh phúc hơn trong thời gian dài 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 bạn bằng cách gắn bó chặt chẽ với một quy ước đặt tên. Ví dụ: nếu bạn giới hạn hoàn toàn các ký tự viết thường và luôn tách biệt 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 dấu khác), thì bạn có mẫu dễ nhớ. Bạn sẽ không bao giờ tự hỏi "là nó firstName hoặc là FirstName? "bởi vì bạn sẽ luôn biết rằng bạn nên nhập first_name. Thích trường hợp lạc đà? Sau đó, giới hạn bản thân bạn với điều đó, không có dấu gạch ngang hoặc dấu gạch dưới và luôn luôn sử dụng nhất quán chữ hoa hoặc chữ thường cho ký tự đầu tiên, đừng trộn chúng.


Vấn đề bây giờ rất mơ hồ 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 đúng như phân biệt chữ hoa chữ thường. Điều đó có nghĩa là nếu bạn đã gõ id="firstName" trong HTML của bạn (chữ thường 'f') và #FirstName { color: red } trong CSS của bạn (chữ hoa chữ thường '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 xem đây là chú thích lịch sử.


1488
2017-09-17 01:42



Lưu ý rằng thuộc tính lớp và id là phân biệt chữ hoa chữ thường trong XHTML, tất cả các thuộc tính khác thì không. Eric Meyer đã đề cập đến điều này trong một hội thảo CSS mà tôi đã tham dự. - John Topley
Cũng lưu ý rằng nếu bạn cố gắng viết một quy tắc CSS để nhắm mục tiêu một phần tử theo ID, và ID chúng sinh với một số, nó sẽ không hoạt động. Rất tiếc! - Zack The Human
Đối với '.' hoặc ':' trong một ID bằng cách sử dụng jQuery, xem jQuery Câu hỏi thường gặp. Nó chứa một chức năng nhỏ mà thoát cần thiết. - Wolfram
Các id thuộc tính là [w3.org/TR/html4/struct/global.html#adef-id](case nhạy cảm trong HTML4) và phải bắt đầu bằng một chữ cái (giới hạn từ A đến Z). Cũng lưu ý rằng ví dụ của bạn không được làm cho màu chữ của phần tử màu đỏ vì CSS của bạn đề cập đến một phần tử có lớp FirstName không phải của bạn id. - Augustus Kling
Lỗi mà Augustus chỉ ra vẫn còn hiện diện. Trong ví dụ của bạn, nếu bạn có id="firstName" trong HTML 4 hoặc HTML 5 và #FirstName { color: red } trong CSS, chỉ một trình duyệt bị lỗi đặt màu của phần tử thành màu đỏ. - Stephen Booher


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ố chữ cái, chữ số ([0-9]), dấu gạch nối ("-"), dấu gạch dưới ("_") , dấu hai chấm (":") và dấu chấm (".").

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


195
2017-09-16 09:09



Lưu ý rằng HTML5 cho phép nhiều hơn sau đó HTML4 xem ví dụ 456bereastreet.com/archive/201011/… và w3.org/TR/html5/elements.html#the-id-attribute - Mr Shark
IE6 không hỗ trợ ID bắt đầu bằng dấu gạch dưới, nhưng nó vẫn chết. - rahmanisback
@rahmanisback liên quan đến IE6, người ta đã có thể nghĩ như vậy, nhưng tôi đang hoàn thành một đề xuất ngay bây giờ cho một ngân hàng và họ nhấn mạnh rằng bất kỳ ứng dụng một nhà cung cấp phát triển chạy trong IE6. Điều này là dành cho 30.000 người dùng. Heck, nếu chúng ta chỉ có thể làm cho họ cập nhật trình duyệt của họ trên tất cả các máy tính để bàn, nó có thể chỉ giúp tỷ lệ thất nghiệp. - Karl
@Karl Tôi rất tiếc khi nghe điều này. Làm tất cả những nỗ lực của bạn để cảnh báo về các vấn đề bảo mật IE6. Tuy nhiên IE7 sẽ sớm là IE6 mới, do đó, yeah nó dường như là số phận của chúng tôi trong ngành công nghiệp này để khắc phục những sai lầm MS qua. - rahmanisback
@MrShark Liên kết thứ hai bị hỏng; Liên kết mới - SWdV


Bạn có thể sử dụng kỹ thuật dấu hai chấm và dấu chấm trong thuộc tính id / name, nhưng tôi 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 phải vấn đề nếu bạn không cẩn thận. Các khoảng thời gian là các bộ chọn lớp và dấu hai chấm là các bộ chọn giả (ví dụ: ", di chuột" cho một phần tử khi con chuột vượt qua 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 giống như sau:

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

Mà thực sự là nói, "yếu tố với một id của 'của tôi', một lớp 'mát mẻ' và 'điều' giả chọn" trong CSS-nói.

Dính vào A-Z của mọi 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 đảm bảo id của bạn là duy nhất.

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


130
2017-09-16 14:01



Bạn có thể sử dụng dấu hai chấm và dấu chấm - nhưng bạn sẽ cần phải thoát chúng bằng cách sử dụng dấu gạch chéo ngược kép, ví dụ: $ ('# my \\. Cool \\: thing') hoặc thoát biến: $ ('#' + id.replace (/\./,'\\.').thay thế(/\:/,'\\:')) groups.google.com/group/jquery-en/browse_thread/thread/… - joeformd
Tại sao không phải chữ số; tại sao chỉ là A-Z? Các số là các ID rất hữu ích khi đề cập đến các phần tử có liên quan đến dữ liệu được khóa bằng một số, miễn là bạn không bắt đầu với số đó. - cori
Chỉ cần FYI, dấu gạch ngang là kỹ thuật dấu gạch nối. Dấu trừ không có trong bộ ký tự ASCII. en.wikipedia.org/wiki/Plus_and_minus_signs#Character_codes - Tony
Nếu bạn có các ký tự này (., :) trong các id, và không thể loại bỏ chúng (ho ... Sharepoint), bạn có thể làm được điều này trong CSS với các bộ chọn thuộc tính thay vì các bộ chọn id, ví dụ: [id='my.cool:thing'], tuy nhiên bộ chọn này sẽ có độ đặc hiệu thấp hơn bộ chọn id, điều này có thể gây ra các sự cố khác. - Faust
Cũ, tôi biết, nhưng được cập nhật để bao gồm số và backpedal trên dấu gạch ngang - Michael Thompson


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

var name = 'O'Hara';

Bộ chọn trong API jQuery (xem lưu ý cuối)


60
2018-01-10 20:40





Chính xác nó phải khớ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ó có thể là tốt hơn để tránh chúng.


51
2017-09-16 09:11



không phải là [A-Za-z] [- A-Za-z0-9 _ :.] * thay vào đó, vì mọi thứ sau chữ cái đầu tiên là tùy chọn ("bất kỳ số nào" bao gồm số không, "có thể" ngụ ý "không phải"). - foo


HTML5:

loại bỏ các hạn chế bổ sung trên thuộc tính id xem ở đâ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ự (không được để trống)
  2. nó không được chứa bất kỳ ký tự khoảng trắng nào.

PRE-HTML5:

ID phải khớp với:

[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 nối), _ (gạch dưới), : (dấu hai chấm) và . (giai đoạn)

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

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 như 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 việc sử dụng. và: hoàn toàn.


39
2018-01-18 07:09





HTML5: Giá trị được phép cho thuộc tính ID & lớp

Theo HTML5, các hạn chế duy nhất về 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ự dấu cách nào
  3. phải chứa ít nhất một ký tự

Quy tắc tương tự áp dụng cho các lớp học (ngoại trừ tính độc đáo, tất nhiên).

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, chúng 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>

Chỉ cần nhớ rằng việc sử dụng số, dấu chấm câu hoặc các ký tự đặc biệt trong giá trị của ID có thể gây ra sự cố trong các ngữ 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à chữ hoa

Trong CSS, số nhận dạng (bao gồm tên, lớp và ID phần tử trong   bộ chọn) chỉ có thể chứa các ký tự [a-zA-Z0-9] và ISO 10646   ký tự U + 00A0 và cao hơn, cộng với dấu gạch ngang (-) 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 ngang hoặc dấu gạch ngang   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 các ngữ cảnh mà chúng có các hạn chế hoặc ý nghĩa đặc biệt.


Tham khảo W3C

HTML5

3.2.5.1 id   thuộc tính

Các id thuộc tính xác định mã định danh duy nhất của phần tử (ID) của nó.

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

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

3.2.5.7 class   thuộc tính

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ách nhau bằng dấu cách cho các lớp khác nhau   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 chia nhỏ   không gian. (Các bản sao bị 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 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ả   bản trình bày mong muốn của nội dung.


33
2017-08-02 15:53





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

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


28
2017-09-16 10:04





Dấu gạch nối, 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. Nội dung sau sẽ hoạt động nhưng phải là duy nhất trong toàn bộ trang và cũng phải bắt đầu bằng chữ cái [A-Za-z].

Làm việc với dấu hai chấm và dấu chấm cần nhiều công việc hơn một chút nhưng bạn có thể làm điều đó như ví dụ sau đâ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>

25
2017-07-07 10:09





HTML5

Hãy nhớ rằng ID phải là duy nhất, ví dụ: không được có nhiều phần 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 (frnn 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ục (id)
  • MDN phân phối (id)

18
2017-08-26 21:54