it-swarm-tr.com

HTML'deki id niteliği için geçerli değerler nelerdir?

HTML öğeleri için id niteliklerini oluştururken, değer için hangi kurallar vardır?

1854
Mr Shark

HTML 4 için cevap teknik olarak:

Kimlik ve NAME belirteçleri, bir harfle ([A-Za-z]) başlamalı ve bunu, herhangi bir sayıda harf, rakam ([0-9]), kısa çizgi ("-"), alt çizgi ("_") izleyebilir. , iki nokta üst üste (":") ve süreleri (".").

HTML 5 , yalnızca bir kimliğin en az bir karakter içermesi gerektiğini ve herhangi bir boşluk karakteri içermemesi gerektiğini söyleyerek daha da izinsizdir.

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

Tamamen pratik bir konu olarak, belirli karakterlerden kaçınmak isteyebilirsiniz. Dönemler, iki nokta üstleri ve '#', CSS seçicilerinde özel bir anlama sahiptir; bu nedenle, CSS'de ters eğik çizgi veya bir jQuery öğesine iletilen seçici dize içinde çift ters eğik çizgi kullanarak bu karakterlerden kaçmanız gerekir. . Kimliğe bürünmüş periyotlar ve kolonlarla çıldırmadan önce stil sayfalarınızdaki veya kodunuzdaki bir karakterden ne kadar sık ​​kaçmanız gerektiğini düşünün.

Örneğin, HTML bildirimi <div id="first.name"></div> geçerlidir. Bu öğeyi CSS'de #first\.name ve jQuery'de şöyle yapabilirsiniz: $('#first\\.name'). Ancak ters eğik çizgiyi, $('#first.name') işlevini unutursanız, first kimliğine sahip ve aynı zamanda name sınıfına sahip bir öğe arayan tamamen geçerli bir seçiciniz olur. Bu gözden kaçması kolay bir hatadır. Uzun vadede, first-name kimliğini seçerek daha mutlu olabilirsiniz (bunun yerine nokta yerine kısa çizgi).

Geliştirme görevlerinizi basitçe bir adlandırma kuralına sadık kalarak basitleştirebilirsiniz. Örneğin, kendinizi tamamen küçük harfli karakterlerle sınırlandırırsanız ve kelimeleri her zaman kısa çizgi veya alt çizgi ile ayırırsanız (ancak her ikisini birden seçmeyin, birini seçin ve diğerini asla kullanmayın), o zaman hatırlaması kolay bir düzeniniz vardır. Asla merak etmeyeceksiniz "firstName ya da FirstName??" çünkü her zaman first_name yazmanız gerektiğini bileceksiniz. Deve çantasını mı tercih edersin? O zaman kendinizi bununla sınırlayın, kısa çizgi veya alt çizgi yok ve daima ilk karakter için sürekli olarak büyük veya küçük harf kullanın, bunları karıştırmayın.


Şimdi çok karanlık bir problem, en az bir tarayıcı olan Netscape 6, büyük küçük harf duyarlı olarak hatalı şekilde işlenmiş id öznitelik değerleri idi. Bu, HTML'nize id="firstName" (küçük harf 'f') ve CSS'nizdeki #FirstName { color: red } (büyük harf 'F') yazarsanız, buggy tarayıcısının öğenin rengini kırmızıya ayarlayamayacağı anlamına gelir. Bu düzenleme sırasında, Nisan 2015, umarım Netscape 6'yı desteklemeniz istenmez. Bunu tarihsel bir dipnot olarak kabul edin.

1584
dgvid

HTML 4 spesifikasyonundan :

Kimlik ve NAME belirteçleri, bir harfle ([A-Za-z]) başlamalı ve bunu, herhangi bir sayıda harf, rakam ([0-9]), kısa çizgi ("-"), alt çizgi ("_") izleyebilir , iki nokta üst üste (":") ve süreleri (".").

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

211
Peter Hilton

Teknik olarak virgül ve dönemleri kimlik/ad özniteliklerinde kullanabilirsiniz, ancak her ikisinden de kaçınmanızı şiddetle tavsiye ederim.

CSS'de (ve jQuery gibi çeşitli JavaScript kitaplıklarında), hem dönem hem de iki nokta özel bir anlama sahiptir ve dikkatli olmazsanız sorun yaşayabilirsiniz. Dönemler sınıf seçicileridir ve sütunlar sözde seçicilerdir (örn., ": Farenin üzerindeyken bir öğe için gezdir").

Bir elemana "my.cool:thing" kimliğini verirseniz, CSS seçiciniz şöyle görünecektir:

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

Gerçekten de, "CSS-konuşmasında" "benim" kimliğine sahip bir eleman, "cool" bir sınıf ve "şey" sözde seçici ".

Herhangi bir durum, sayılar, alt çizgiler ve kısa çizgilerden oluşan A-Z'ye yapıştırın. Yukarıda da belirtildiği gibi, kimliklerinizin benzersiz olduğundan emin olun.

İlk endişen bu olmalı.

145
Michael Thompson

jQuery does geçerli bir kimlik adı kullanır. Sadece meta karakterlerden kaçmanız gerekir (yani noktalar, noktalı virgüller, köşeli parantezler ...). JavaScript’in tırnak işaretleri ile ilgili bir sorunu olduğunu söylemek gibi, çünkü yazamazsınız.

var name = 'O'Hara';

jQuery API'sindeki seçiciler (dip nota bakın)

63

Kesinlikle eşleşmesi gerekir

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

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

60
Mr Shark

HTML5:

id özniteliği üzerindeki ek kısıtlamalardan kurtulur bkz. . Geriye kalan tek gereksinimler (belgede benzersiz olmanın dışında):

  1. değer en az bir karakter içermelidir (boş olamaz)
  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 karakterleriyle başlamalı
  2. - (kısa çizgi), _ (alt çizgi), : (sütun) ve . (nokta) içerebilir

ancak bir tanesi : ve . işaretlerinden kaçınmalıdır:

Örneğin, bir kimlik "ab: c" olarak etiketlenebilir ve stil sayfasında #ab: c olarak adlandırılabilir, ancak öğenin kimliği olmasının yanı sıra "a", "b" sınıfı, sözde- seçici "c". Karışıklığı önlemek ve kullanmaktan uzak durmak en iyisidir. ve: tamamen.

52
Zaheer Ahmed

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

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

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

Benzer kurallar sınıflar için de geçerlidir (benzersizlik dışında elbette).

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

HTML 4'te, ID değerleri bir harfle başlamalıdır; bu durumda sadece harfler, rakamlar, kısa çizgiler, alt çizgiler, iki nokta üst üste ve noktalarla 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>

Kimlik değerinde sayı, noktalama işareti veya özel karakterlerin kullanılmasının diğer içeriklerde (örneğin, CSS, JavaScript, regex) sorunlara neden olabileceğini unutmayın.

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

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

Ancak, CSS'de geçersiz:

CSS2.1 spesifikasyonundan:

4.1.3 Karakterler ve durum

CSS'de, tanımlayıcılar (seçicilerin öğe adları, sınıfları ve kimlikleri dahil) yalnızca [a-zA-Z0-9] ve ISO 10646 karakterleri U + 00A0 ve daha yüksek karakterleri, artı tire ( -) ve alt çizgi (_);bir rakam, iki tire veya bir rakamdan sonra bir rakam ile başlayamazlar.

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


W3C Referansları

HTML5

3.2.5.1 id niteliği

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

Değer, öğenin ana alt ağacındaki tüm kimlikler arasında benzersiz olmalı ve en az bir karakter içermelidir. Değer boşluk karakterleri içermemelidir.

Not: Bir kimliğin alabileceği form ile ilgili başka herhangi bir kısıtlama yoktur; özellikle, ID'ler sadece rakamlardan oluşabilir, rakamla başlar, alt çizgi ile başlar, sadece noktalama işaretlerinden oluşur.

3.2.5.7 class niteliği

Özelliğin, belirtilmişse, öğenin ait olduğu çeşitli sınıfları temsil eden boşlukla ayrılmış simgeler kümesi olan bir değeri olması gerekir.

Bir HTML öğesinin kendisine atadığı sınıflar, sınıf niteliğinin değeri boşluklarda bölündüğünde döndürülen tüm sınıflardan oluşur. (Çoğaltmalar yoksayılır.)

Sınıf özniteliğinde yazarların kullanabileceği belirteçler üzerinde ek bir kısıtlama yoktur, ancak yazarların içeriğin istenen sunumunu tanımlayan değerler yerine içeriğin yapısını tanımlayan değerleri kullanması teşvik edilir.

47
Michael_B

Uygulamada birçok site, teknik olarak geçerli bir HTML olmasa da, sayılarla başlayan id niteliklerini kullanır.

HTML 5 taslak özelliği , id ve name niteliklerinin kurallarını gevşetir: şimdi yalnızca boşluk içeremeyen opak dizelerdir.

32
pdc

Tire, alt çizgi, nokta, nokta, nokta ve rakamların tümü CSS ve JQuery ile kullanım için geçerlidir. Aşağıdakiler çalışmalı, ancak sayfa boyunca benzersiz olmalı ve ayrıca [A-Za-z] harfiyle başlamalıdır.

İki nokta ve periyotlarla çalışmak biraz daha fazla çalışmaya ihtiyaç duyar ancak 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>
29
blacksun1

HTML5

Yani, kimliğin benzersiz olması gerektiğini unutmayın. Bir belgede aynı kimlik değerine sahip birden fazla öğ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, ID (från MDN) hakkında W3 spec şeklindedir:

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 - global özellikler (id)
  • MDN özniteliği (id)
23
Sergio

İçinde bir süre olan bir kimliği referans almak için bir ters eğik çizgi kullanmanız gerekir. Tire veya alt çizgi için aynı olup olmadığından emin değil. Örneğin: HTML

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

CSS

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

Ayrıca, bir kimliğin benzersiz olduğunu asla unutmayın. Bir kez kullanıldığında, kimlik değeri belgede hiçbir yerde tekrar görünmeyebilir.

Çok sayıda kimliğiniz olabilir, ancak hepsinin benzersiz bir değeri olması gerekir.

Öte yandan, sınıf elemanı vardır. Tıpkı ID gibi, birçok kez görünebilir, ancak değer tekrar tekrar kullanılabilir.

14
Vordreller

HTML 4 özelliklerinden ...

Kimlik ve NAME belirteçleri, bir harfle ([A-Za-z]) başlamalı ve bunu, herhangi bir sayıda harf, rakam ([0-9]), kısa çizgi ("-"), alt çizgi ("_") izleyebilir , iki nokta üst üste (":") ve süreleri (".").

EDIT: d'oh! Tekrar düğmeye bas!

14
Steve Morgan

Öğe için benzersiz bir tanımlayıcı.

Bir belgede aynı kimlik değerine sahip birden fazla öğe olmamalıdır.

Aşağıdaki kısıtlamalara sahip herhangi bir dize:

  1. en az bir karakter uzunluğunda olmalı
  2. boşluk karakteri içermemelidir:

    • U + 0020 UZAY
    • U + 0009 KARAKTER TABLOSU (sekme)
    • U + 000A HAT YEMİ (LF)
    • U + 000C FORM YEMİ (FF)
    • U + 000D TAŞIMA İADESİ (CR)

ASCII letters and digits, '_', '-' and '.' dışında karakterlerin kullanılması, HTML 4'da izin vermediklerinden uyumluluk sorunlarına neden olabilir. Bu kısıtlama HTML 5 ile kaldırılmış olsa da, bir kimlik uyumluluğu için bir harfle başlamalıdır.

11
Bhavin Solanki

Görünüşe göre, her ne kadar (> ve nokta (.)) Noktalarında HTML spesifikasyonunda geçerli olsalar da, CSS dizinlerinde kimlik seçicileri olarak geçersiz oldukları için, bu yüzden onları bu amaç için kullanacaksanız, en iyisi kaçınılmalıdır.

9
lstg

HTML5 için

Değer, öğenin ana alt ağacındaki tüm kimlikler arasında benzersiz olmalı ve en az bir karakter içermelidir. Değer boşluk karakterleri içermemelidir.

En az bir karakter, boşluksuz.

Bu, aksanlı karakterler kullanmak gibi geçerli kullanım durumları için kapıyı açar. Ayrıca, kendimizi ayağımızla vurmamız için bize daha fazla mermi veriyor, çünkü gerçekten dikkatli olmadığınız sürece, hem CSS hem de JavaScript ile sorunlara neden olacak id değerleri kullanabilirsiniz.

8

Herhangi bir Alfa sayısal değeri ve " - " ve " _ " geçerlidir. Ancak, kimlik adını ile A-Z veya a-z arasındaki herhangi bir karakterle başlatmalısınız.

7
Tazwar Utshas
  1. Kimlikler, mizanpajınızın bölümlerini adlandırmak için en uygunudur, bu nedenle kimlik ve sınıf için aynı adı vermemelidir
  2. Kimlik, alfasayısal ve özel karakterlere izin verir
  3. ancak # : . * ! sembollerini kullanmaktan kaçının
  4. izin verilen boşluklar
  5. sayılarla veya kısa çizgi ile başlamaz, ardından rakam
  6. harfe duyarlı
  7. kimlik seçici kullanmak, sınıf seçici kullanmaktan daha hızlıdır
  8. uzun CSS sınıfı veya Id kuralı adları için kısa çizgi "-" (alt çizgi "_" de kullanabilir ancak seo için iyi değil) kullanın
  9. Bir kuralın anahtar seçicisi olarak bir kimlik seçicisi varsa, etiket adını kurala eklemeyin. Kimlikler benzersiz olduğundan, bir etiket adı eklemek eşleştirme işlemini gereksiz yere yavaşlatır.
  10. HTML5'te, id niteliği herhangi bir HTML öğesinde kullanılabilir ve HTML 4.01'de id niteliği ile kullanılamaz: <base>, <head>, <html>, <meta>, <param>, <script>, <style>, and <title>.

Boşluk olmamalıdır, en az bir ile z ve 0 ile 9 arasında bir karakterle başlamalıdır.

5
Wembo Mulumba

değerler şunlar olabilir: [a-z], [A-Z], [0-9], [* _: -]

hTML5 için kullanmaktır ...

herhangi bir etiketle kimlik ekleyebiliriz.

HTML’de

ID ile başlamalıdır {AZ} veya {az} ekleyebilirsin Rakamlar, periyot, kısa çizgi, alt çizgi, virgüller .

Örneğin:

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

Fakat Kolonlarla Kimlik Yapabilseniz bile (:) veya nokta (.) Bu kimliği Seçici olarak kullanmak CSS için zordur. Esas olarak Sahte unsurları kullanmak istediğinizde (: önce,: after).

Ayrıca JS içinde bu kimlikleri seçmek zordur. Bu yüzden, etrafındaki birçok geliştirici tarafından tercih edilen ilk dört kimliği ve son ikisini de kullanabilmeniz için gerekliyse kullanmalısınız.

1
Dev pokhariya