Питання Які дійсні значення для атрибута id в HTML?


При створенні id атрибути для елементів HTML, які правила існують для значення?


1710
2017-09-16 09:08


походження


Це відрізняється між HTML5 та попередніми версіями специфікації. Я пояснив це тут: mathiasbynens.be/notes/html5-id-class - Mathias Bynens
Я помітив SharePoint 2010 присвоєння такого значення - {8CC7EF38-31D8-4786-8C20-7E6D56E49AE2} - {E60CE5E2-6E64-4350-A884-654B72DA5A53} для динамічно створених таблиць у веб-частині та сторінки, що містить значення ідентифікатора такого роду не потрапило в жоден із популярних браузерів. Робота з такими значеннями ідентифікаторів через JavaScript є складною, хоча - mvark.blogspot.in/2012/07/... - mvark
Вимоги HTML4 та HTML5 для ID Значення дуже різні. Ось короткий і повний виклад HTML5 ID правила: stackoverflow.com/a/31773673/3597276 - Michael_B
Будь ласка, зверніть увагу: роблячи деякі відповіді, кажучи, і використовуючи період (**.**) jQuery запуститиме вас у небагатьох проблем, наприклад, з використанням <input id="me.name" /> і потім $("#me.name").val() призведе до пошуку jQuery <me> тег з класом .name, якого ніхто не хоче насправді! - Sam Swift 웃
@SamSwift 名 Ні, вам просто потрібно уникати спеціальних символів як документи говорять. Будь ласка, перевірте це онлайн демо. - Álvaro González


Відповіді:


Для HTML 4, відповідь технічно:

Марки ідентифікатора та імені повинні починатися з літери ([A-Za-z]), за ним може слідувати будь-яка кількість літер, цифр ([0-9]), дефіс ("-"), підкреслення ("_") , "двокрапка" (":") та періоди (".").

HTML 5 є ще більш допустимим, говорячи тільки, що ідентифікатор повинен містити принаймні один символ і не містити будь-яких пробілів.

Атрибут id має значення для регістру XHTML.

Як суто практичне питання, ви можете уникнути певних персонажів. Періоди, двокрапки та "#" мають особливе значення в селекторі CSS, тому вам доведеться уникати цих символів за допомогою a зворотна риска в CSS або подвійне зворотне скріплення в a рядок селектора передано до jQuery. Подумайте про те, як часто вам доведеться виходити з символу в таблицях стилів чи коду, перш ніж переходити з розуму з періодами та двокрапками в ідентифікаторах.

Наприклад, декларація HTML <div id="first.name"></div> діє. Ви можете вибрати цей елемент в CSS як #first\.name і в jQuery так: $('#first\\.name'). Але якщо ви забудете зворотну риску, $('#first.name'), у вас буде цілком правильний селектор, який шукатиме елемент з ідентифікатором first а також клас name. Це помилка, яку легко помітити. Ви можете бути більш щасливими в довгостроковій перспективі, вибравши ідентифікатор first-name (замість дефісу, а не періоду).

Ви можете спростити свої завдання розробки, суворо дотримуючись конвенції імен. Наприклад, якщо ви обмежуєтеся лише символами нижнього регістру і завжди окремі слова з будь-якими дефісами або підкресленнями (але не обидва, вибирайте один і ніколи не використовуйте інший), тоді у вас є простий у пам'яті шаблон. Ви ніколи не замислюєтеся "було це" firstName або FirstName? ", тому що ви завжди будете знати, що ви повинні набрати first_name. Переважна справа верблюда? Тоді обмежте себе тим, ні дефісів, ні підкреслень, а завжди, послідовно використовуйте верхній або нижній регістр для першого символу, не змішуйте їх.


Тепер дуже незрозумілою проблемою є те, що принаймні один браузер, Netscape 6, неправильно оброблені значення атрибутів id як регістр. Це означало, що, якщо ти набрався id="firstName" у вашому HTML (нижній регістр 'f') і #FirstName { color: red } у вашому CSS (верхній регістр 'F'), цей браузер buggy не зміг встановити колір елемента червоним кольором. Під час цього редагування, квітня 2015 року, я сподіваюся, вам не потрібно буде підтримувати Netscape 6. Розглянемо це історична виноска.


1488
2017-09-17 01:42



Зауважте, що атрибути class і id є чутливий до регістру в XHTML, всі інші атрибути не є. Ерік Майєр згадав про це в семінарі CSS, я взяв участь. - John Topley
Також зауважте, що якщо ви намагаєтеся написати правильність CSS, щоб націлити елемент на ідентифікатор, а ідентифікатор істот з номером, він не буде працювати. Баммер! - Zack The Human
Що стосується '.' або ":" у ідентифікаторі, що використовує jQuery, див. jQuery FAQ. Вона містить невелику функцію, яка робить необхідний вибій. - Wolfram
The idатрибут це [w3.org/TR/html4/struct/global.html#adef-id](файт чутливий у форматі HTML4) і має починатися з літери (обмежується A до Z). Також зауважте, що ваш приклад не повинен робити колір тексту вашого елемента червоним, оскільки CSS відноситься до елемента з класом FirstName не до твого id. - Augustus Kling
Помилка, яку вказав Август, все ще присутня. У вашому прикладі, якщо у вас є id="firstName" у форматі HTML 4 або HTML 5 та #FirstName { color: red } в CSS буде тільки баггі браузер встановити колір елемента червоним. - Stephen Booher


Від Специфікація HTML 4:

Марки ідентифікатора та імені повинні починатися з літери ([A-Za-z]), за ним може слідувати будь-яка кількість літер, цифр ([0-9]), дефіс ("-"), підкреслення ("_") , "двокрапка" (":") та періоди (".").

Поширеною помилкою є використання ідентифікатора, який починається з цифри.


195
2017-09-16 09:09



Зауважте, що HTML5 дозволяє набагато більше, ніж HTML4, наприклад 456bereastreet.com/archive/201011/... і w3.org/TR/html5/elements.html#the-id-attribute - Mr Shark
IE6 не підтримує ідентифікатор, починаючи з символів підкреслення, але він все одно мертвий. - rahmanisback
@rahmanisback щодо IE6, можна було б подумати і так, але я закінчував пропозицію прямо зараз для банку, і вони наполягають на тому, що будь-який додаток, постачальник розробляє пробігів в IE6. Це для 30 000 користувачів. Нарешті, якщо ми могли б просто отримати їх для оновлення своїх браузерів на всіх цих настільних комп'ютерах, це може просто допомогти рівень безробіття. - Karl
@ Карл Мені шкода це чути. Зробіть всі свої зусилля, щоб попередити про проблеми безпеки IE6. Проте IE7 незабаром стане новим IE6, так що, здається, це наша доля у цій галузі для виправлення минулих помилок MS. - rahmanisback
@MrShark Друге посилання не працює; Нова посилання - SWdV


Ви можете технічно використовувати двокрапки та періоди в атрибутах id / name, але я б настійно рекомендував уникати обох.

У CSS (і декількох бібліотеках JavaScript, таких як jQuery), і період, і двокрапка мають особливе значення, і ви будете стикатися з проблемами, якщо ви не будете обережні. Періоди - це селектори класів, а двокрапками - псевдоселектори (наприклад, ": hover" для елемента, коли миша над ним).

Якщо ви даєте елемент ідентифікатор "my.cool:thing", ваш селектор CSS виглядатиме так:

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

Що дійсно каже: "елемент з ідентифікатором" моє ", клас" прохолодний "і" псевдоборщик "" в CSS-говорити ".

Дотримуйтесь A-Z будь-якого випадку, цифр, підкреслення та дефісів. І, як сказано вище, переконайтеся, що ваші ідентифікатори унікальні.

Це має бути вашим першим турботою.


130
2017-09-16 14:01



Ви можете використовувати двокрапку і періоди - але вам потрібно, щоб уникнути їх, використовуючи два рази поспіль, наприклад: ( «# мій \\ прохолодне \\: річ») $ або виходу змінної: $ ( "#" + id.replace (/ \ ./, '\\.') замінити (/ \: /, '\\:')) groups.google.com/group/jquery-en/browse_thread/thread/... - joeformd
Чому не цифри; чому тільки A-Z? Номери дуже корисні ідентифікатори при зверненні до елементів, які пов'язані з даними, який відмикається невеликим числом, до тих пір, поки ви не починаєте з числом. - cori
Просто FYI, тире є технічно дефіс Мінус знак не в наборі символів ASCII. en.wikipedia.org/wiki/Plus_and_minus_signs#Character_codes - Tony
Якщо у вас є ці символи (., :) В ідентифікатори, і не може видалити їх (кашель ... Sharepoint), ви можете обійти це в CSS з селекторами атрибутів замість ідентифікаторів селектор, наприклад [id='my.cool:thing'], проте цей селектор буде мати меншу специфіку, ніж селектор ідентифікатора, що може спричинити інші проблеми. - Faust
Старий, я знаю, але оновлено для включення цифр і backpedal на дефісі - Michael Thompson


jQuery робить обробляти будь-яке дійсне ім'я ідентифікатора. Вам просто потрібно уникнути метасимволів (наприклад, крапок, крапкових колів, квадратних дужок ...). Схоже кажуть, що JavaScript має проблему лише з цитатами, оскільки ви не можете писати

var name = 'O'Hara';

Селектори в jQuery API (див. Нижню примітку)


60
2018-01-10 20:40





Суворо це має збігатися

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

Але у jquery, здається, є проблеми з двокрапками, тому краще їх уникнути.


51
2017-09-16 09:11



не слід, що бути [A-Za-Z] [- A-Za-z0-9 _:.] * замість цього, так як все після першої літери не є обов'язковим ( «будь-яке число» включає в себе нуль, «може» означає «Не маю"). - foo


HTML5:

позбутися додаткових обмежень атрибуту id дивись тут. Єдині вимоги, що залишилися (окрім унікальності в документі), є:

  1. значення має містити принаймні один символ (не може бути порожнім)
  2. він не може містити пробілів.

PRE-HTML5:

Ідентифікатор має відповідати:

[A-Za-z][-A-Za-z0-9_:.]*
  1. Потрібно почати з символів A-Z або a-z
  2. Може містити - (дефіс) _ (підкреслення), : (товста кишка) і . (період)

але слід уникати : і . beacause:

Наприклад, ідентифікатор може бути позначений як "ab: c" і вказаний у таблиці стилів як #ab: c, але також як ідентифікатор для елемента, це може означати ідентифікатор "a", клас "b", псевдо- селектор "c". Краще уникати плутанини та триматися подалі від використання. і: взагалі


39
2018-01-18 07:09





HTML5: Дозволені значення для атрибутів ID та класу

Що стосується HTML5, то єдиними обмеженнями на значення ідентифікатора є:

  1. повинен бути унікальним у документі
  2. не повинно містити пробілів
  3. повинен містити принаймні один символ

Подібні правила застосовуються до класів (за винятком унікальності, звичайно).

Таким чином, цінність може бути всі цифри, лише одна цифра, просто знаки пунктуації, що включають спеціальні символи, що завгодно. Просто немає пробілу. Це дуже відрізняється від HTML4.

У HTML 4 значення ідентифікатора повинні починатися з літери, за яким потім можуть слідувати лише літери, цифри, дефіси, підкреслення, двокрапки та періоди.

У HTML5 ці дії:

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

Просто пам'ятайте, що використання цифр, пунктуації або спеціальних символів у значенні ідентифікатора може спричинити проблеми в інших контекстах (наприклад, CSS, JavaScript, regex).

Наприклад, наступний ідентифікатор дійсний у форматі HTML5:

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

Проте це недійсне в CSS:

З специфікації CSS2.1:

4.1.3 Символи та випадок

У CSS ідентифікатори (включаючи імена елементів, класи та ідентифікатори в   селектори) можуть містити лише символи [a-zA-Z0-9] та ISO 10646   символи U + 00A0 і вище, плюс дефіс (-) та підкреслення   (_); вони не можуть починатися з цифри, двох дефісів або дефісу   потім цифра.

У більшості випадків ви можете уникати символів у контекстах, де вони мають обмеження або спеціальне значення.


Довідники W3C

HTML5

3.2.5.1 The id   атрибут

The id Атрибут вказує унікальний ідентифікатор (ID) його елемента.

Значення має бути унікальним серед усіх ідентифікаторів у будинку елемента   піддерево і повинен містити принаймні один символ. Цінність не повинна   містити будь-які пробільні символи.

Примітка. Не існує інших обмежень щодо форми ідентифікатора в   зокрема, ідентифікатори можуть складатися з просто цифр, починати з цифри, почати   з підкресленням, складаються з простої пунктуації тощо.

3.2.5.7 class   атрибут

Атрибут, якщо вказано, повинен мати значення, яке складається з   розділені космічними токенами, що представляють різні класи, що   елемент належить.

Класи, до яких додає HTML-елемент, складається з усіх   Класи повертаються, коли значення атрибута класу розділено   пробіли (Копії ігноруються.)

Немає додаткових обмежень для токенів, які можуть використовувати автори   атрибут class, але авторам рекомендується використовувати значення, які   опишіть природу змісту, а не описують значення   бажане представлення змісту.


33
2017-08-02 15:53





На практиці багато сайтів використовують id атрибути, починаючи з чисел, хоча це технічно недійсний HTML.

The Специфікація проекту HTML 5 послаблює правила для id і name атрибути: тепер вони просто непрозорі рядки, які не можуть містити пробіли.


28
2017-09-16 10:04