HTML'deki id özelliği için geçerli değerler nedir?

idHTML öğeleri için öznitelikler oluştururken , değer için hangi kurallar vardır?

İçin HTML 4 , cevap teknik olarak:

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

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

İd özelliği, XHTML'de büyük / küçük harfe duyarlıdır .

Tamamen pratik bir konu olarak, belirli karakterlerden kaçınmak isteyebilirsiniz. Dönemler, sütunlar ve '#', CSS seçicilerinde özel bir anlama sahiptir, bu nedenle CQ'da ters eğik çizgi veya jQuery'ye geçirilen bir seçici dizede çift ​​ters eğik çizgi kullanarak bu karakterlerden kaçmanız gerekir . Kimliklerde nokta ve sütunlarla delirmeden önce stil sayfalarınızdaki veya kodunuzdaki bir karakterden ne sıklıkla kaçmanız gerektiğini düşünün.

Örneğin, HTML bildirimi <div id="first.name"></div>geçerlidir. Bu öğeyi CSS'de jQuery'de olduğu gibi seçebilirsiniz #first\.name: $('#first\\.name').Ancak ters eğik çizgiyi unutursanız, $('#first.name')kimliği olan firstve ayrıca sınıfa sahip bir öğeyi arayan mükemmel geçerli bir seçiciniz olacaktır name. Bu, gözden kaçması kolay bir hatadır. Bunun yerine uzun vadede kimliği first-name(nokta yerine kısa çizgi) seçerek daha mutlu olabilirsiniz .

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 harflerle sınırlar ve kelimeleri her zaman tireler veya alt çizgilerle ayırırsanız (ancak her ikisini birden seçmezseniz, birini seçmeyin ve asla diğerini kullanmayın), hatırlanması kolay bir desene sahip olursunuz. Sen "it was merak asla firstNameya FirstName?" çünkü her zaman yazmanız gerektiğini bilirsiniz first_name. Deve kasasını mı tercih ediyorsunuz? Sonra kendinizi bununla, tire veya alt çizgi kullanmayın ve her zaman, ilk karakter için sürekli olarak büyük veya küçük harf kullanın, bunları karıştırmayın.

Şimdi çok belirsiz bir sorun, en az bir tarayıcı olan Netscape 6'nın kimlik özelliği değerlerini büyük / küçük harfe duyarlı olarak işlemesiydi . Bu id="firstName", HTML'nize (küçük harf 'f') ve #FirstName { color: red }CSS'nize (büyük harf 'F') yazmış olsaydınız, bu hatalı tarayıcının öğenin rengini kırmızıya ayarlayamayacağı anlamına geliyordu . Bu düzenleme sırasında, Nisan 2015, umarım sizden Netscape 6'yı desteklemeniz istenmez. Bunun tarihi bir dipnot olduğunu düşünün.

Gönderen HTML 4 şartname :

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

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

Teknik olarak id / name özniteliklerinde iki nokta üst üste ve nokta kullanabilirsiniz, ancak her ikisinden de kaçınmanızı şiddetle öneririm.

CSS'de (ve jQuery gibi çeşitli JavaScript kitaplıklarında) hem nokta hem de iki nokta özel bir anlama sahiptir ve dikkatli değilseniz sorun yaşarsınız. Dönemler sınıf seçicilerdir ve iki nokta üst üste sözde seçicilerdir (örneğin, fare üzerindeyken bir öğe için ": fareyle üzerine gelin").

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

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

Gerçekten de, "C" kimliğinde "benim" kimliğine sahip öğe, "cool" sınıfı ve "sözde" sözde seçici "öğesi.

Herhangi bir durum, sayı, alt çizgi ve kısa çizgiden AZ'ye yapışır. Yukarıda da belirtildiği gibi, kimliklerinizin benzersiz olduğundan emin olun.

Bu senin ilk endişen olmalı.

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

var name = 'O'Hara';

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

Kesinlikle eşleşmelidir

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

Ancak jquery, iki nokta üst üste ile sorun yaşıyor gibi görünüyor, bu yüzden onlardan kaçınmak daha iyi olabilir.

HTML5:

id özelliği ile ilgili ek kısıtlamalardan kurtulmak için buraya bakın . Kalan tek gereksinimler (belgede benzersiz olmanın dışında):

1. değer en az bir karakter içermelidir (boş olamaz)
2. boşluk karakteri içeremez.

ÖN HTML5:

Kimlik eşleşmelidir:

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

1. AZ veya az karakterlerle başlamalıdır
2. -(Kısa çizgi), _(alt çizgi), :(iki nokta üst üste) ve .( nokta) içerebilir

ama kişi bundan kaçınmalı :ve .:

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

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

HTML5'ten itibaren, bir kimliğin değerine ilişkin kısıtlamalar şunlardır:

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

Sınıflar için de benzer kurallar geçerlidir (tabii ki teklik hariç).

Böylece değer tüm basamaklar olabilir, sadece bir basamak, sadece noktalama işaretleri, özel karakterler içerir, her neyse. Sadece boşluk yok. Bu HTML4'ten çok farklı.

HTML 4'te kimlik değerleri bir harfle başlamalıdır; bu harfin ardından yalnızca harfler, rakamlar, tireler, alt çizgiler, iki nokta üst üste ve nokta işaretleri gelir.

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>

Bir kimlik değerinde sayılar, noktalama işaretleri veya özel karakterler kullanmanın diğer bağlamlarda (örneğin, CSS, JavaScript, normal ifade) soruna neden olabileceğini unutmayın.

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

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

Ancak, CSS'de geçersiz:

CSS2.1 spesifikasyonundan:

4.1.3 Karakterler ve büyük / küçük harf

CSS'de tanımlayıcılar (seçicilerdeki öğe adları, sınıflar ve kimlikler dahil) yalnızca [a-zA-Z0-9] ve ISO 10646 karakterleri U + 00A0 ve üstü, artı kısa çizgi (-) ve alt çizgi ( _); bir rakam, iki kısa çizgi veya bir kısa çizgi ve ardından bir rakam ile başlayamazlar .

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

W3C Referansları

HTML5

3.2.5.1 id Özellik

idNitelik onun elementin benzersiz tanımlayıcı (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 karakteri içermemelidir.

Not: Bir kimliğin ne biçim alabileceğine dair başka kısıtlama yoktur; özellikle, kimlikler yalnızca rakamlardan oluşabilir, bir rakamla başlayabilir, alt çizgiyle başlayabilir, sadece noktalama işaretlerinden vb.

3.2.5.7 class Özellik

Özellik belirtilirse, öğenin ait olduğu çeşitli sınıfları temsil eden, boşlukla ayrılmış belirteçler kümesi olan bir değere sahip olmalıdır.

Bir HTML öğesinin kendisine atadığı sınıflar, sınıf özniteliğinin değeri boşluklara bölündüğünde döndürülen tüm sınıflardan oluşur. (Kopyalar yok sayılır.)

Yazarların sınıf özniteliğinde kullanabileceği belirteçlerde ek kısıtlamalar yoktur, ancak yazarların içeriğin istenen sunumunu tanımlayan değerlerden ziyade içeriğin doğasını tanımlayan değerleri kullanmaları önerilir.

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

HTML 5 taslak şartname için kurallar gevşetir idve namenitelikleri: bunlar boşluk içeremez artık sadece opak dizelerdir.

Kısa çizgiler, alt çizgiler, nokta, iki nokta üst üste, sayılar ve harfler CSS ve JQuery ile kullanım için geçerlidir. Aşağıdakiler işe yaramalı, ancak sayfa boyunca benzersiz olmalı ve ayrıca [A-Za-z] harfiyle başlamalıdır.

İki nokta üst üste ve noktalarla ç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>

HTML5

Kimliğin benzersiz olması gerektiğini unutmayın. belgede aynı kimlik değerine sahip birden çok öğe olmamalıdır.

HTML5'teki kimlik içeriğiyle ilgili kurallar (benzersiz olmanın yanı sıra):

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 hakkında W3 spec (från 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).

Daha fazla bilgi:

• W3 - global özellikler (id)
• MDN özelliği (id)

İçinde nokta bulunan bir kimliğe başvurmak için ters eğik çizgi kullanmanız gerekir. Bunun tire ve alt çizgi için aynı olup olmadığından emin değilim. Örneğin: HTML

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

CSS

#maintenance\.instrumentNumber{word-wrap:break-word;}

HTML 4 özelliklerinden ...

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

DÜZENLEME: d'oh! Yine düğmeye dayak yedim!

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

Çok sayıda kimliğiniz olabilir, ancak hepsinin benzersiz bir değeri olmalıdır.

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

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

Belgede aynı kimlik değerine sahip birden çok öğ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 MEKAN
   • U + 0009 KARAKTER TABULASYONU (sekme)
   • U + 000A HAT YEMİ (LF)
   • U + 000C FORM BESLEME (FF)
   • U + 000D TAŞIMA İADE (CR)

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

Her ne kadar iki nokta üst üste (:) ve nokta (.) HTML özelliklerinde geçerli olsa da, CSS'de kimlik seçici olarak geçersiz olduklarından, bu amaç için kullanmayı planlıyorsanız muhtemelen en iyi şekilde kaçınılmış olurlar.

için HTML5

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 karakteri içermemelidir.

En az bir karakter, boşluk yok.

Bu aksanlı karakterler kullanmak gibi geçerli kullanım durumları için kapıyı açar. Ayrıca, gerçekten dikkatli olmadıkça hem CSS hem de JavaScript ile sorunlara neden olacak kimlik değerlerini kullanabileceğiniz için, kendimizi ayağımızla vurmak için bize daha fazla cephane veriyor.

1. Kimlikler, düzeninizin 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. ama # : . * !sembol kullanmaktan kaçının
4. izin verilmeyen alanlar
5. sayılarla veya kısa çizgi ile başlamaması
6. harfe duyarlı
7. Kimlik seçicileri kullanmak, sınıf seçicileri kullanmaktan daha hızlıdır
8. uzun CSS sınıfı veya Kimlik kuralı adları için tire "-" kullanın (alt çizgi "_" seo için de kullanılabilir, ancak iyi değildir)
9. Bir kuralın anahtar seçici olarak bir Kimlik seçici varsa, etiket adını kurala eklemeyin. Kimlikler benzersiz olduğundan, etiket adı eklemek eşleşen işlemi 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 aşağıdakilerle kullanılamaz: <base>, <head>, <html>, <meta>, <param>, <script>, <style>, and <title>.

Herhangi bir Alfa-sayısal değer ve " - " ve " _ " geçerlidir. Ancak, kimlik adını AZ veya az arasında herhangi bir karakterle başlatmalısınız .

Boşluk olmamalı, en az a'dan z'ye ve 0'dan 9'a kadar bir karakterle başlamalıdır.

HTML'de

Kimlik {AZ} veya {az} ile başlamalıdır. Rakam, nokta, kısa çizgi, alt çizgi, iki nokta üst üste ekleyebilirsiniz .

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

Ancak, Colons (:) veya period (.) İle Kimlik Yapabilseniz bile, CSS'nin bu kimliği Seçici olarak kullanması zordur . Temel olarak Pseudo öğelerini (: before,: after) kullanmak istediğinizde.

Ayrıca JS'de bu kimlikleri seçmek zordur . Bu yüzden ilk dört kimliği kullanmalısınız.Çoğu geliştirici tarafından tercih edildiği gibi ve gerektiğinde son ikisini de kullanabilirsiniz.

değerler şunlar olabilir: [az], [AZ], [0-9], [* _: -]

HTML5 için kullanın ...

herhangi bir etiketle kimlik ekleyebiliriz.

ES2015'ten beri , belge karakter seti UTF8 olarak ayarlanmışsa kimlikler için -neredeyse- tüm unicode karakterleri kullanabiliriz .

Buradan test edin: https://mothereff.in/js-variables

Hakkında okuyun: https://mathiasbynens.be/notes/javascript-identifiers-es6

ES2015'te tanımlayıcılar $, _ veya Unicode türetilmiş çekirdek özelliği ID_Start olan herhangi bir sembolle başlamalıdır.

Tanımlayıcının geri kalanı $, _, U + 200C sıfır genişlikli marangoz olmayan, U + 200D sıfır genişlikli marangoz veya Unicode türetilmiş çekirdek özelliği ID_Continue olan herhangi bir sembol içerebilir.

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̙̙̔̄͜">

Kullanmalı mısın? Muhtemelen iyi bir fikir değil!

Hakkında okuyun: https://stackoverflow.com/a/52799593/2494754

alfabe- > büyük harf ve küçük rakamlar-> 0-9
özel karakter-> ':', '-', '_', '.'

biçim '.' ile başlamalıdır. ya da bir alfabe, ardından daha fazla alfabe ya da sayı içeren özel karakterlerden biri. id alanının değeri bir '_' ile bitmemelidir.
Ayrıca, boşluklara izin verilmez, sağlandıkları takdirde, id öznitelikleri için geçerli olmayan farklı değerler olarak ele alınırlar.