Soru HTML'de id niteliği için geçerli değerler nedir?


Oluştururken id HTML öğeleri için özellikler, değer için hangi kurallar var?


1710
2017-09-16 09:08


Menşei


Bu, HTML5 ile spesifikasyonun önceki sürümleri arasında farklılık gösterir. Burada açıkladım: mathiasbynens.be/notes/html5-id-class - Mathias Bynens
SharePoint 2010'un böyle bir değer atadığını fark ettim - {8CC7EF38-31D8-4786-8C20-7E6D56E49AE2} - {E60CE5E2-6E64-4350-A884-654B72DA5A53}, bir Web Bölümü'nün dinamik olarak oluşturulmuş bir tablosu ve ID değerini içeren bir sayfa için Bu tür popüler tarayıcıların hiçbirinde kırılmadı. JavaScript aracılığıyla bu tür kimliklerle uğraşmak zor olsa da - mvark.blogspot.in/2012/07/... - mvark
İçin HTML4 ve HTML5 gereksinimleri ID değerler çok farklı. İşte HTML5'in hızlı ve eksiksiz bir açıklaması ID kurallar: stackoverflow.com/a/31773673/3597276 - Michael_B
Lütfen dikkat: Bazı cevapların söylediği ve bir süre kullandığı (**.**) jQuery ile, örneğin, biraz sorun gibi sizi çalıştıracak <input id="me.name" />ve sonra $("#me.name").val() jQuery'nin bir <me> sınıfla etiketle .nameKimse gerçekten istemiyor! - Sam Swift 웃
@SamSwift 웃 Hayır, sadece özel karakterlerden kaçmak zorundasınız dokümanlar diyor. Lütfen bunu kontrol edin çevrimiçi demo. - Álvaro González


Cevaplar:


İçin HTML 4Cevap teknik olarak:

ID ve NAME tokenleri bir harfle başlamalıdır ([A-Za-z]) ve herhangi bir sayıdaki harf, rakam ([0-9]), kısa çizgi ("-"), alt çizgi ("_") ile takip edilebilir. , kolonlar (":") ve periyotlar (".").

HTML 5 sadece bir kimliğin en az bir karakter içermesi ve herhangi bir boşluk karakteri içermemesi gerektiğini söyleyerek daha da izin vericidir.

İd niteliği büyük / küçük harf duyarlı XHTML.

Tamamen pratik bir mesele olarak, belirli karakterlerden kaçınmak isteyebilirsiniz. Dönemler, kolonlar ve '#' CSS seçicilerinde özel bir anlam taşır, bu yüzden bu karakterleri kullanarak CSS'de ters eğik çizgi ya da bir çift ters eğik çizgi seçici dizi jQuery'ye geçti. Stil sayfalarınızdaki veya karakter kodlarınızdaki bir karakterden kaçmak zorunda kalacağınızı düşünün.

Örneğin, HTML bildirimi <div id="first.name"></div> geçerli. Bu öğeyi CSS olarak seçebilirsiniz. #first\.name ve jQuery'de böyle: $('#first\\.name'). Ama ters eğik çizgi unutursanız, $('#first.name')kimliğine sahip bir öğe arayan mükemmel bir geçerli seçiciniz olacak first ve ayrıca sınıfta name. Bu gözden kaçırmak kolay bir böcek. Kimliği seçerken uzun vadede daha mutlu olabilirsiniz first-name Bunun yerine (bir dönemden ziyade tire).

Bir adlandırma kuralına sıkı sıkıya bağlı kalarak geliştirme görevlerinizi basitleştirebilirsiniz. Örneğin, kendinizi tamamen küçük harfli karakterlerle sınırlarsanız ve kelimeleri her zaman tire veya altçizgilerle ayırırsanız (her ikisini de değil, birini seçip diğerini kullanmayın), sonra hatırlanması kolay bir desene sahip olursunuz. Asla merak etmeyeceksin "oldu firstName veya FirstName"Çünkü her zaman yazman gerektiğini biliyorsun first_name. Deve vakası mı tercih edersin? Daha sonra kendinizi bu şekilde sınırlayın, tire veya alt çizgi içermeyin ve her zaman, ilk karakter için büyük harf veya küçük harf kullanın ve bunları karıştırmayın.


Şimdi çok belirsiz bir sorun, en az bir tarayıcı olan Netscape 6 idi. Büyük / küçük harf duyarlı olmayan öznitelik değerleri büyük / küçük harfe duyarlı. Bu, eğer yazmış olsaydınız id="firstName" HTML’nizde (küçük harf 'f') ve #FirstName { color: red } CSS'nizde (büyük harf 'F'), buggy tarayıcısı öğenin rengini kırmızıya ayarlayamazdı. Bu düzenleme tarihinde, Nisan 2015, umarım Netscape 6'yı desteklemeniz istenmez. Bunu tarihi bir dipnot olarak düşünün.


1488
2017-09-17 01:42



Sınıf ve kimlik özelliklerine dikkat edin Hangi XHTML'de büyük / küçük harfe duyarlıdır, diğer tüm özellikler değildir. Eric Meyer buna katıldığım bir CSS çalışmasında bahsetti. - John Topley
Ayrıca, bir öğeyi kimliğe göre kimliklendirmek için bir CSS kuralı ve bir sayı içeren kimlikler yazmayı denerseniz, işe yaramayacağını unutmayın. Kötü haber! - Zack The Human
'.' veya jQuery'yi kullanarak bir kimlikte ':' SSS. Gerekli kaçış yapan küçük bir işlev içerir. - Wolfram
id özniteliğiw3.org/TR/html4/struct/global.html#adef-id](case HTML4'te hassastır ve bir harfle başlamalıdır (A'dan Z'ye sınırlı). Ayrıca, örneğinizin CSS'niz sınıflı bir öğeye başvurduğundan öğenizin metin rengini kırmızı yapmaması gerektiğini unutmayın. FirstName senin değil id. - Augustus Kling
Augustus'un işaret ettiği hata hala mevcut. Örneğinizde, eğer varsa id="firstName" HTML 4 veya HTML 5'te ve #FirstName { color: red } CSS’de sadece bir buggy tarayıcı olacak elementin rengini kırmızıya ayarlayın. - Stephen Booher


İtibaren HTML 4 belirtimi:

ID ve NAME tokenleri bir harfle başlamalıdır ([A-Za-z]) ve herhangi bir sayıdaki harf, rakam ([0-9]), kısa çizgi ("-"), alt çizgi ("_") ile takip edilebilir. , kolonlar (":") ve periyotlar (".").

Yaygın bir hata, bir rakamla başlayan bir ID kullanmaktır.


195
2017-09-16 09:09



HTML5'in çok daha fazla HTML4'e izin verdiğini unutmayın. Örneğin bkz. 456bereastreet.com/archive/201011/... ve w3.org/TR/html5/elements.html#the-id-attribute - Mr Shark
IE6, alt çizgilerle başlayan kimliği desteklemedi, ancak yine de öldü. - rahmanisback
IE6 ile ilgili olarak @rahmanisback, öyle düşünebilirdi, ancak şu anda bir banka için bir teklif hazırlıyorum ve satıcıların geliştirdiği herhangi bir uygulamanın IE6'da çalıştığı konusunda ısrar ediyorlar. Bu 30.000 kullanıcı içindir. Heck, tarayıcılarını tüm bu masaüstü bilgisayarlarda güncellemeyi başarabilirsek, işsizlik oranına yardım edebilir. - Karl
@Karl Bunu duyduğuma üzüldüm. IE6 güvenlik sorunları hakkında uyarmak için tüm çabalarınızı yapın. Ancak IE7 yakında yeni IE6 olacak, bu yüzden MS'in geçmiş hatalarını düzeltmek için bu sektördeki kaderimiz gibi görünüyor. - rahmanisback
@MrShark İkinci bağlantı bozuk; Yeni bağlantı - SWdV


İsim / ad özniteliklerinde sütunları ve dönemleri teknik olarak kullanabilirsiniz, ancak her ikisinden de kaçınmanızı şiddetle tavsiye ederim.

CSS'de (ve jQuery gibi çeşitli JavaScript kitaplıkları) hem dönem hem de kolon özel bir anlam taşır ve dikkatli değilseniz sorunlarla karşılaşırsınız. Dönemler sınıf seçicilerdir ve kolonlar sözde seçicidir (örneğin, fare bittiğinde bir öğe için ": hover").

Bir öğeye "my.cool:thing" adını verirseniz, CSS seçiciniz şöyle görünür:

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

CSS konuşmasında, "benim 'bir', 'güzel' bir sınıf ve 'şey' sözde seçicinin bir kimliğine sahip olan eleman.

Her durumun A-Z'ye, sayılara, alt çizgilere ve tirelere yapıştırın. Ve yukarıda belirtildiği gibi, kimliğinizin benzersiz olduğundan emin olun.

İlk kaygınız bu olmalı.


130
2017-09-16 14:01



Colonları ve periyotları kullanabilirsiniz - ancak çift ters eğik çizgi kullanarak bunları kaçmak zorundasınız, örneğin: $ ('# my \\. Cool \\: thing') veya bir değişken kaçınıyor: $ ('#' + id.replace (/ \ ./ '\\.') yerine (/ \: /, '\\')). groups.google.com/group/jquery-en/browse_thread/thread/... - joeformd
Neden rakamlar değil; neden sadece A-Z? Sayılar, numarayla başlamadığınız sürece, bir sayı ile girilen verilerle ilgili öğelerden bahsederken çok kullanışlı kimliklerdir. - cori
Sadece FYI, tire Hangi teknik olarak tire. Eksi işareti ASCII karakter kümesinde değil. en.wikipedia.org/wiki/Plus_and_minus_signs#Character_codes - Tony
Bu karakterleriniz varsa (., :) ids içinde ve onları kaldıramazsınız (öksürük ... Sharepoint), bunu CSS'de kimlik seçicileri yerine öznitelik seçicileri ile alabilirsiniz. [id='my.cool:thing']Bununla birlikte, bu seçicinin bir kimlik seçiciden daha düşük bir özgüllüğü olacaktır, bu da başka sorunlara neden olabilir. - Faust
Eski, biliyorum, ama sayıları ve tire üzerinde backpedal eklemek için güncellendi - Michael Thompson


jQuery yapar geçerli herhangi bir kimlik adı. Sadece metakarakterlerden (yani nokta, noktalı virgül, köşeli parantez ...) kaçmanız gerekir. Tıpkı yazım yapamayacağınız için JavaScript'in tırnak işaretleri ile ilgili bir sorunu olduğunu söylemek gibi bir şey.

var name = 'O'Hara';

JQuery API'daki seçiciler (alt nota bakın)


60
2018-01-10 20:40





Kesinlikle eşleşmeli

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

Ancak jquery'nin kolonlarla ilgili problemleri var gibi görünüyor, bu yüzden onlardan sakınmak daha iyi olabilir.


51
2017-09-16 09:11



Bunun yerine [A-Za-z] [- A-Za-z0-9 _ :.] * olmamalıdır, çünkü ilk harfden sonraki her şey isteğe bağlıdır ("herhangi bir sayı" sıfırı içerir "," ima eder "anlamına gelmez) zorunda"). - foo


HTML5:

id niteliğindeki ek kısıtlamalardan kurtulur buraya bakın. Geriye kalan tek şartlar (belgede benzersiz olmanın dışında):

  1. değer en az bir karakter içermelidir (boş bırakılamaz)
  2. herhangi bir boşluk karakteri içeremez.

ÖN HTML5:

ID eşleşmelidir:

[A-Za-z][-A-Za-z0-9_:.]*
  1. A-Z veya a-z karakterleri ile başlamalıdır
  2. İçerebilir - (tire), _ (vurgulamak), : (kolon) ve . (Nokta)

ama biri kaçınılmalıdır : ve . beacause:

Örneğin, bir ID "ab: c" olarak etiketlenebilir ve stil sayfasında #ab: c olarak belirtilebilir, ancak bu öğe için bir kimlik olduğu gibi, "a", "b" sınıfı, pseudo- seçici "c". Karışıklık önlemek ve kullanmaktan uzak kalmak için en iyisidir. ve: Tamamen.


39
2018-01-18 07:09





HTML5: Kimlik ve Sınıf Özellikleri için İzin Verilen Değerler

HTML5'ten itibaren, bir kimliğin değeri üzerindeki tek kısıtlamalar şunlardır:

  1. belgede benzersiz olmalı
  2. herhangi bir boşluk karakteri içermemelidir
  3. en az bir karakter içermelidir

Benzer kurallar, sınıflar için de geçerlidir (elbette, teklik hariç).

Bu yüzden değer tüm rakamlar olabilir, sadece bir rakam, sadece noktalama karakterleri, özel karakterler, ne olursa olsun. Sadece boşluk yok. Bu, HTML4'ten çok farklı.

HTML 4'te, kimlik değerleri bir harfle başlamalıdır; bu, yalnızca harf, rakam, tire, alt çizgi, iki nokta üst üste ve nokta ile izlenebilir.

HTML5'te bunlar geçerlidir:

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

Numaraları, noktalama işaretlerini veya bir ID'nin değerindeki özel karakterleri kullanmanın diğer bağlamlarda (örneğin CSS, JavaScript, regex) sorun yaratabileceğini unutmayın.

Örneğin, aşağıdaki kimlik HTML5'te geçerlidir:

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

Ancak, CSS'de geçersiz:

CSS2.1 özelliklerinden:

4.1.3 Karakterler ve durum

CSS’de tanımlayıcıları (öğe adları, sınıflar ve kimlikleri dahil   seçiciler) sadece [a-zA-Z0-9] ve ISO 10646 karakterlerini içerebilir   U + 00A0 ve üstü, artı tire (-) ve alt çizgi   (_); bir rakam, iki tire veya kısa çizgi ile başlayamazlar   bir rakamla izledi.

Çoğu durumda, kısıtlamaları veya özel anlamları olan bağlamlarda karakterlerden kaçabilirsiniz.


W3C Referansları

HTML5

3.2.5.1 id   nitelik

id özniteliği öğesinin benzersiz tanımlayıcısını (ID) belirtir.

Değer, öğenin evindeki tüm kimlikler arasında benzersiz olmalıdır   alt ağaç ve en az bir karakter içermelidir. Değer olmamalıdır   herhangi bir boşluk karakteri içermelidir.

Not: Bir kimliğin nasıl bir şekil alabileceği konusunda başka kısıtlamalar yoktur; içinde   Özellikle, kimlikler sadece rakamlardan oluşabilir, bir rakamla başlar, başlangıç   alt çizgi ile, yalnızca noktalama işaretinden oluşur.

3.2.5.7 class   nitelik

Belirtilirse, özellik bir dizi değere sahip olmalıdır.   çeşitli sınıfları temsil eden uzay-ayrılmış semboller   eleman aittir.

Bir HTML öğesinin atadığı sınıflar hepsinden oluşur.   sınıf özniteliğinin değeri, üzerine bölünmüş olduğunda döndürülen sınıflar   alanlarda. (Çoğaltmalar göz ardı edilir.)

Yazarların kullanabileceği jetonlar üzerinde ek kısıtlamalar yoktur.   sınıf özniteliği, ancak yazarların değerlerini kullanmaya teşvik edilir   Açıklayan değerlerden ziyade içeriğin doğasını açıklar.   içeriğin istenen sunumu.


33
2017-08-02 15:53





Pratikte birçok site kullanımı id Teknik olarak geçerli HTML olmasa bile, sayılarla başlayan özellikler.

HTML 5 taslak belirtimi kurallarını gevşetir id ve name öznitelikleri: Artık boşluk içermeyen sadece opak dizelerdir.


28
2017-09-16 10:04





Tire, alt çizgi, nokta, yazı, sayı ve harflerin hepsi CSS ve JQuery ile kullanım için geçerlidir. Aşağıdakiler çalışmalı, ancak sayfa boyunca benzersiz olmalı ve ayrıca bir harfle başlamalıdır [A-Za-z].

Kolonlar ve periyotlarla çalışmak biraz daha fazla çalışmaya ihtiyaç duyar ancak bunu aşağıdaki örnekte gösterildiği gibi yapabilirsiniz.

<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

ID'nin benzersiz olması gerektiğini aklınızda bulundurun. Bir belgede aynı kimlik değerine sahip birden çok öğe olmamalıdır.

HTML5'teki ID içeriğiyle ilgili kurallar (benzersiz olmanın dışında):

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.

Bu W3 ID (från MDN) hakkında bilgi:

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

Daha fazla bilgi:

  • W3 - küresel özellikler (id)
  • MDN atributeid)

18
2017-08-26 21:54