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

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

Đố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 gạch chéo ngược trong CSS hoặc dấu gạch chéo kép trong chuỗi bộ 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 biểu đị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 như #first\.namevà 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 firstvà cũng có lớp name. Đây là một lỗi dễ bỏ qua. first-nameThay vào đó, bạn có thể hạnh phúc hơn khi chọn id (dấu gạch nối thay vì dấu chấm).

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, hãy chọn một và không bao giờ sử dụng từ kia), thì bạn có một mẫu dễ nhớ. Bạn sẽ không bao giờ tự hỏi "là nó firstNamehay 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 bạn về điều đó, không có dấu gạch nối 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, đã xử lý không đúng các giá trị thuộc tính id là phân biệt chữ hoa chữ thường . Điều đó có nghĩa là nếu bạn đã nhập id="firstName"HTML (chữ thường 'f') và #FirstName { color: red }trong CSS (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ử.

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ố.

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ả' điều 'trong CSS-speak.

Bám sát AZ trong 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 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.

jQuery không 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 (ví dụ: 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)

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.

HTML5:

thoát khỏi các hạn chế bổ sung trên 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ự (không thể để trống)
2. nó không thể chứa bất kỳ ký tự khoảng trắng 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ự AZ hoặc az
2. Có thể chứa -(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à cảnh báo .:

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.

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>

Hãy nhớ 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 Nhân vật và vụ án

Trong CSS, các 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 của W3C

HTML5

3.2.5.1 id Thuộc tính

Các idthuộc tính xác định danh duy nhất yếu tố của nó (ID).

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 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 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.

Trong thực tế, nhiều trang web sử dụng idcác thuộc tính 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 idvà namecác thuộc tính: giờ đây chúng chỉ là các chuỗi mờ không thể chứa khoảng trắng.

Các 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>

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à thông số W3 về ID (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)
• Thuộc tính MDN (id)

Để 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;}

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!

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.

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

Không được có nhiều yếu tố trong một 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 sử dụng HTML 4. Mặc dù hạn chế này đã được gỡ bỏ HTML 5, một ID nên bắt đầu bằng một chữ cái để tương thích.

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 nên có thể tránh tốt nhất nếu bạn định sử dụng chúng cho mục đích đó.

cho HTML5

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.

Í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ì giờ đây 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.

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 tên giống nhau 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 quy tắc có bộ chọn ID làm bộ chọn khóa, đừng 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ỳ phần tử 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>.

Mọi giá trị Alpha-số và " - " và " _ " đều 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 AZ hoặc az .

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.

Trong HTML

ID phải 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 nối, 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 yếu 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.

các giá trị có thể là: [az], [AZ], [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.

Kể từ ES2015, chúng tôi cũng có thể sử dụng tối đa - tất cả các ký tự unicode cho ID, nếu bộ ký tự tài liệu được đặt thành UTF8.

Kiểm tra tại đây: https://otherseff.in/js-variables

Đọc về: https://mathiasbynens.be/notes/javascript-identifier-es6

Trong ES2015, số nhận dạng phải bắt đầu bằng $, _ hoặc bất kỳ ký hiệu nào có thuộc tính lõi có nguồn gốc Unicode ID_Start.

Phần còn lại của mã định danh có thể chứa $, _, U + 200C không tham gia độ rộng 0, tham gia độ rộng 0 U + 200D hoặc bất kỳ ký hiệu nào có thuộc tính lõi có nguồn gốc Unicode ID_Continue.

const target = document.querySelector("div").id
console.log(
   target
)
document.getElementById(target).style.backgroundColor = "black"

div {
  border: 1px black solid;
  width: 100%;
  height: 200px
}

<div id="H̹̙̦̮͉̩̗̗ͧ̇̏̊̾Eͨ͆͒̆ͮ̃͏̷̮̣̫̤̣Cͯ̂͐͏̨̛͔̦̟͈̻O̜͎͍͙͚̬̝̣̽ͮ͐͗̀ͤ̍̀͢M̴̡̲̭͍͇̼̟̯̦̉̒͠Ḛ̛̙̞̪̗ͥͤͩ̾͑̔͐ͅṮ̴̷̷̗̼͍̿̿̓̽͐H̙̙̔̄͜">

Bạn có nên sử dụng nó? Có lẽ không phải là một ý tưởng tốt!

Đọc về: https://stackoverflow.com/a/52799593/2494754

bảng chữ
cái- > mũ và chữ số nhỏ-> 0-9 ký tự
đặc biệt-> ':', '-', '_', '.'

định dạng nên bắt đầu từ '.' hoặc một bảng chữ cái, theo sau là một trong những ký tự đặc biệt của nhiều bảng chữ cái hoặc số. giá trị của trường id không được kết thúc tại '_'.
Ngoài ra, không gian không được phép, nếu được cung cấp, chúng được coi là các giá trị khác nhau, không hợp lệ trong trường hợp thuộc tính id.