Pytanie Jakie są prawidłowe wartości dla atrybutu id w HTML?


Podczas tworzenia id atrybuty dla elementów HTML, jakie są reguły dotyczące wartości?


1710
2017-09-16 09:08


pochodzenie


Różni się to między HTML5 a poprzednimi wersjami specyfikacji. Wyjaśniłem to tutaj: mathiasbynens.be/notes/html5-id-class - Mathias Bynens
Zauważyłem, że SharePoint 2010 przypisuje wartość podobną do tej - {8CC7EF38-31D8-4786-8C20-7E6D56E49AE2} - {E60CE5E2-6E64-4350-A884-654B72DA5A53} dla dynamicznie generowanej tabeli w części Web Part i strony zawierającej wartość identyfikatora ten rodzaj nie został złamany w żadnej z popularnych przeglądarek. Radzenie sobie z takimi wartościami ID przez JavaScript jest trudne - mvark.blogspot.in/2012/07/... - mvark
Wymagania HTML4 i HTML5 dla ID wartości są bardzo różne. Oto krótki i kompletny opis HTML5 ID zasady: stackoverflow.com/a/31773673/3597276 - Michael_B
Uwaga: Postępuj zgodnie z niektórymi z odpowiedzi i używając kropki (**.**) z jQuery wpadnie ci w kłopoty, na przykład używając <input id="me.name" /> i wtedy $("#me.name").val() spowoduje, że jQuery będzie szukał <me> taguj z klasą .name, którego nikt tak naprawdę nie chce! - Sam Swift 웃
@SamSwift 웃 Nie, po prostu musisz uciec od znaków specjalnych docs mówią. Proszę to sprawdzić wersja online. - Álvaro González


Odpowiedzi:


Dla HTML 4, odpowiedź jest technicznie:

Token ID i NAME musi zaczynać się od litery ([A-Za-z]) i może następować po niej dowolna liczba liter, cyfr ([0-9]), łączników ("-"), podkreślenie ("_") , dwukropki (":") i kropki (".").

HTML 5 jest jeszcze bardziej permisywny, mówiąc tylko, że id musi zawierać co najmniej jeden znak i nie może zawierać żadnych spacji.

W atrybucie id uwzględniana jest wielkość liter XHTML.

Jako czysto praktyczną sprawę możesz chcieć uniknąć pewnych postaci. Okresy, dwukropki i "#" mają specjalne znaczenie w selektorach CSS, więc będziesz musiał uciec z tych znaków za pomocą a ukośnik odwrotny w CSS lub podwójny ukośnik odwrotny w łańcuch selektora przekazany do jQuery. Zastanów się, jak często będziesz musiał uciec przed postacią z arkusza stylów lub kodu, zanim zwariujesz z kropkami i dwukropkami w identyfikatorach.

Na przykład deklaracja HTML <div id="first.name"></div> jest ważna. Możesz wybrać ten element w CSS jako #first\.name iw jQuery jak na przykład: $('#first\\.name'). Ale jeśli zapomnisz backslash, $('#first.name'), będziesz miał doskonale działający selektor szukający elementu o identyfikatorze first a także mając klasę name. To błąd, który łatwo przeoczyć. Możesz być szczęśliwszy na dłuższą metę, wybierając identyfikator first-name (zamiast tego raczej łącznik niż kropka).

Możesz uprościć swoje zadania programistyczne, ściśle przestrzegając konwencji nazewnictwa. Na przykład, jeśli ograniczysz się całkowicie do małych liter i zawsze oddzielasz słowa za pomocą łączników lub podkreśleń (ale nie obu, wybierz jeden i nigdy nie używaj drugiego), to masz łatwy do zapamiętania wzór. Nigdy nie będziesz się zastanawiać "było firstName lub FirstName? ", ponieważ zawsze będziesz wiedział, że powinieneś pisać first_name. Wolisz skrzynię wielbłąda? Następnie ogranicz to do siebie, bez myślników i podkreśleń, i zawsze, konsekwentnie używaj wielkich lub małych liter dla pierwszego znaku, nie mieszaj ich.


Teraz bardzo niejasnym problemem było to, że przynajmniej jedna przeglądarka, Netscape 6, niepoprawnie traktowane wartości atrybutów id w przypadku wielkości liter. Oznaczało to, że jeśli pisałeś id="firstName" w twoim HTML (małe litery "f") i #FirstName { color: red } w twoim CSS (wielka litera "F"), ta błędna przeglądarka nie potrafiłaby ustawić koloru elementu na czerwony. W czasie tej edycji, w kwietniu 2015 r., Mam nadzieję, że nie zostaniesz poproszony o wsparcie dla Netscape 6. Zastanów się nad historycznym przypisem.


1488
2017-09-17 01:42



Zwróć uwagę na atrybuty klasy i id są wielkość liter w XHTML, wszystkie inne atrybuty nie są. Eric Meyer wspomniał o tym w warsztatach CSS, w których uczestniczyłem. - John Topley
Zauważ też, że jeśli spróbujesz zapisać regułę CSS, by celować w element za pomocą identyfikatora, oraz w identyfikatory z numerem, to nie zadziała. Bummer! - Zack The Human
Jeśli chodzi o "." lub ":" w ID przy użyciu jQuery, zobacz jQuery FAQ. Zawiera niewielką funkcję, która wykonuje niezbędne ucieczki. - Wolfram
The id atrybut to [w3.org/TR/html4/struct/global.html#adef-id](case wrażliwe w HTML4) i musi zaczynać się od litery (ograniczona do od A do Z). Zauważ też, że Twój przykład nie powinien sprawić, że tekst twojego elementu będzie czerwony, ponieważ twój CSS odnosi się do elementu z klasą FirstName nie do twojego id. - Augustus Kling
Błąd, który zauważył Augustus, jest wciąż obecny. W twoim przykładzie, jeśli masz id="firstName" w HTML 4 lub HTML 5 i #FirstName { color: red } w CSS, dostępna będzie tylko przeglądarka buggy ustaw kolor elementu na czerwony. - Stephen Booher


Od Specyfikacja HTML 4:

Token ID i NAME musi zaczynać się od litery ([A-Za-z]) i może następować po niej dowolna liczba liter, cyfr ([0-9]), łączników ("-"), podkreślenie ("_") , dwukropki (":") i kropki (".").

Typowym błędem jest użycie identyfikatora zaczynającego się od cyfry.


195
2017-09-16 09:09



Zauważ, że HTML5 pozwala na znacznie więcej niż HTML4 zobaczyć na przykład 456bereastreet.com/archive/201011/... i w3.org/TR/html5/elements.html#the-id- attribute - Mr Shark
IE6 nie obsługuje ID zaczynając od podkreśleń, ale i tak jest martwe. - rahmanisback
@rahmanisback odnośnie IE6, można by pomyśleć, ale teraz kończę propozycję dla banku i twierdzą, że każda aplikacja opracowana przez sprzedawcę działa w IE6. To jest dla 30 000 użytkowników. Heck, gdybyśmy mogli po prostu zmusić ich do aktualizacji swoich przeglądarek na wszystkich tych komputerach, może to po prostu pomóc w osiągnięciu stopy bezrobocia. - Karl
@Karl Przykro mi to słyszeć. Czy wszystkie twoje wysiłki, aby ostrzec o kwestiach bezpieczeństwa IE6. Jednak IE7 wkrótce będzie nowym IE6, więc tak, wydaje się, że naszym losem w tej branży jest naprawienie błędów popełnionych przez MS. - rahmanisback
@MrShark Drugi link jest zepsuty; Nowy link - SWdV


Możesz technicznie używać dwukropków i kropek w atrybutach id / name, ale zdecydowanie sugerowałbym unikanie obu.

W CSS (i kilku bibliotekach JavaScript, takich jak jQuery), zarówno kropka, jak i dwukropek mają specjalne znaczenie i napotkasz problemy, jeśli nie będziesz ostrożny. Okresy to selektory klas, a dwukropki to pseudo-selektory (np. ": Hover" dla elementu, gdy mysz znajduje się nad nim).

Jeśli podasz elementowi id "mój.cool:thing", twój selektor CSS będzie wyglądać tak:

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

Co naprawdę mówi "element o identyfikatorze" my ", klasa" cool "i" rzecz "pseudo-selektor" w mowie CSS.

Trzymaj się A-Z każdego przypadku, cyfr, podkreśleń i myślników. Jak wspomniano powyżej, upewnij się, że twoje identyfikatory są unikatowe.

To powinno być twoją pierwszą troską.


130
2017-09-16 14:01



Możesz użyć dwukropków i kropek - ale musisz uciec z nich używając podwójnych ukośników, np .: $ ('# my \\. Cool \\: thing') lub uciekając do zmiennej: $ ('#' + id.replace (/\./,'\\.').zastąpić(/\:/,'\\:')) groups.google.com/group/jquery-en/browse_thread/thread/... - joeformd
Czemu nie cyfry; dlaczego po prostu A-Z? Liczby są bardzo przydatnymi identyfikatorami odnoszącymi się do elementów powiązanych z danymi, które są oznaczone numerem, o ile nie zaczynasz od numeru. - cori
Tylko FYI, kreski są technicznie łączniki. Znak minus nie znajduje się w zestawie znaków ASCII. en.wikipedia.org/wiki/Plus_and_minus_signs#Character_codes - Tony
Jeśli masz te znaki (., :) w ids, i nie można ich usunąć (kaszel ... Sharepoint), można obejść to w CSS z selektorami atrybutu zamiast selektorów identyfikatorów, np. [id='my.cool:thing']jednak selektor ten będzie miał niższą specyficzność niż selektor id, co może powodować inne problemy. - Faust
Stary, wiem, ale zaktualizowany, aby uwzględnić cyfry i backpedę na łącznikach - Michael Thompson


jQuery robi obsłużyć dowolną prawidłową nazwę ID. Trzeba tylko uciec metaznaków (np. Kropki, średniki, nawiasy kwadratowe ...). To tak, jakby powiedzieć, że JavaScript ma problem z cytatami tylko dlatego, że nie możesz pisać

var name = 'O'Hara';

Selektory w jQuery API (patrz notatka u dołu)


60
2018-01-10 20:40





Ściśle powinien pasować

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

Ale jquery wydaje się mieć problemy z dwukropkami, więc lepiej byłoby ich unikać.


51
2017-09-16 09:11



nie powinno to być [A-Za-z] [- A-Za-z0-9 _ :.] * zamiast tego, ponieważ wszystko po pierwszej literze jest opcjonalne ("dowolna liczba" zawiera zero, "może" oznacza "nie musieć"). - foo


HTML5:

pozbywa się dodatkowych ograniczeń dotyczących atrybutu id Spójrz tutaj. Pozostały tylko wymagania (oprócz tego, że są unikalne w dokumencie):

  1. wartość musi zawierać co najmniej jeden znak (nie może być pusty)
  2. nie może zawierać żadnych spacji.

PRE-HTML5:

Identyfikator powinien pasować:

[A-Za-z][-A-Za-z0-9_:.]*
  1. Musi zacząć od znaków A-Z lub a-z
  2. Może zawierać - (łącznik), _ (podkreślać), : (dwukropek) i . (Kropka)

ale należy unikać : i . beacause:

Na przykład identyfikator może być oznaczony jako "ab: c" i wymieniony w arkuszu stylów jako #ab: c, ale jak również jest id dla elementu, może to oznaczać id "a", klasa "b", pseudo- selektor "c". Najlepiej, aby uniknąć nieporozumień i trzymać się z daleka od użycia. i: łącznie.


39
2018-01-18 07:09





HTML5: dozwolone wartości dla identyfikatorów i atrybutów klas

Od HTML5 jedynymi ograniczeniami wartości identyfikatora są:

  1. musi być unikalny w dokumencie
  2. nie może zawierać żadnych spacji
  3. musi zawierać co najmniej jeden znak

Podobne zasady odnoszą się do klas (z wyjątkiem oczywiście wyjątkowości).

Zatem wartością mogą być wszystkie cyfry, tylko jedna cyfra, tylko znaki interpunkcyjne, znaki specjalne, cokolwiek. Po prostu bez białych znaków. To bardzo różni się od HTML4.

W HTML 4, wartości ID muszą rozpoczynać się od litery, do której następnie mogą należeć tylko litery, cyfry, łączniki, podkreślenia, dwukropki i kropki.

W HTML5 są one prawidłowe:

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

Pamiętaj, że używanie liczb, znaków interpunkcyjnych lub znaków specjalnych w wartości identyfikatora może powodować problemy w innych kontekstach (np. CSS, JavaScript, regex).

Na przykład następujący identyfikator jest poprawny w HTML5:

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

Jest jednak nieprawidłowy w CSS:

Ze specyfikacji CSS2.1:

4.1.3 Postacie i przypadek

W CSS, identyfikatory (w tym nazwy elementów, klasy i identyfikatory w   selektory) mogą zawierać tylko znaki [a-zA-Z0-9] i ISO 10646   znaki U + 00A0 i wyższe plus myślnik (-) i podkreślenie   (_); nie mogą zaczynać się od cyfry, dwóch łączników ani łącznika   następnie cyfra.

W większości przypadków możesz uciec od postaci w kontekstach, w których mają ograniczenia lub specjalne znaczenie.


Referencje W3C

HTML5

3.2.5.1 id   atrybut

The id atrybut określa unikalny identyfikator (identyfikator) swojego elementu.

Wartość musi być unikalna wśród wszystkich identyfikatorów w domu elementu   poddrzewa i musi zawierać co najmniej jeden znak. Wartość nie może   zawierają dowolne spacje.

Uwaga: nie istnieją żadne inne ograniczenia dotyczące tego, jaką formę może przyjąć identyfikator; w   szczególności, identyfikatory mogą składać się z samych cyfr, zaczynają się od cyfry, zaczynają się   z podkreśleniem, składa się tylko z interpunkcji itp.

3.2.5.7 class   atrybut

Atrybut, jeśli określony, musi mieć wartość, która jest zbiorem   oddzielone spacjami tokeny reprezentujące różne klasy, które   element należy do.

Klasy, do których przypisany jest element HTML, składają się ze wszystkich   klasy zwrócone, gdy wartość atrybutu klasy jest podzielona na   spacje. (Duplikaty są ignorowane.)

Nie ma żadnych dodatkowych ograniczeń dotyczących tokenów, których autorzy mogą używać w   atrybut klasy, ale autorzy są zachęcani do używania wartości, które   opisać charakter treści, a nie wartości, które opisują   pożądana prezentacja treści.


33
2017-08-02 15:53





W praktyce używa się wielu witryn id atrybuty zaczynające się od liczb, mimo że jest to technicznie niepoprawny kod HTML.

The Specyfikacja wersji HTML 5 rozluźnia zasady dla id i name atrybuty: są teraz tylko nieprzezroczystymi ciągami, które nie mogą zawierać spacji.


28
2017-09-16 10:04





Łącza, podkreślenia, kropki, dwukropki, cyfry i litery są poprawne do użycia z CSS i JQuery. Następujące elementy powinny działać, ale muszą być unikatowe na całej stronie, a także muszą zaczynać się od litery [A-Za-z].

Praca z dwukropkami i okresami wymaga nieco więcej pracy, ale możesz to zrobić, jak pokazuje poniższy przykład.

<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