хтмл - несколько id html




Каковы допустимые значения для атрибута id в HTML? (15)

HTML5

Помните, что идентификатор должен быть уникальным, т.е. в документе не должно быть нескольких элементов с одинаковым значением id.

Правила содержимого ID в HTML5 (кроме уникальности):

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.

Это спецификация W3 о ID (от 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).

Больше информации:

  • W3 - глобальные атрибуты ( id )
  • Атрибут MDN ( id )

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


HTML5:

избавиться от дополнительных ограничений на атрибут id см. здесь . Единственные требования, оставленные (кроме уникального в документе):

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

PRE-HTML5:

Идентификатор должен соответствовать:

[A-Za-z][-A-Za-z0-9_:.]*
  1. Начать с символов AZ или az
  2. Может содержать - (дефис), _ (подчеркивание),: (двоеточие) и . (Период)

но следует избегать : и . обусловлено:

Например, идентификатор может быть помечен как «ab: c» и указан в таблице стилей как #ab: c, но также как идентификатор элемента, это может означать идентификатор «a», класс «b», псевдо- селектор «c». Лучше избегать путаницы и избегать использования. и: вообще.


  1. Идентификаторы лучше всего подходят для обозначения частей вашего макета, поэтому не следует указывать одинаковое имя для идентификатора и класса
  2. ID позволяет использовать буквенно-цифровые и специальные символы
  3. но избегайте использования # : . * ! # : . * ! символы
  4. недопустимые пробелы
  5. не начинается с цифр или дефиса, за которым следует цифра
  6. с учетом регистра
  7. использование селекторов ID быстрее, чем использование селекторов классов
  8. использовать дефис «-» (подчеркивание «_» также может использовать, но не полезно для seo) для длинных имен классов CSS или Id
  9. Если правило имеет селектор идентификаторов в качестве его селектора ключей, не добавляйте в это правило имя тега. Так как идентификаторы уникальны, добавление имени тега будет бесполезно замедлять процесс сопоставления.
  10. В HTML5 атрибут id может использоваться для любого элемента HTML, а в HTML 4.01 атрибут id не может использоваться с: <base>, <head>, <html>, <meta>, <param>, <script>, <style>, and <title>.

jQuery обрабатывает любое действительное имя идентификатора. Вам просто нужно избежать метасимволов (например, точек, точек с запятой, квадратных скобок ...). Это похоже на то, что JavaScript имеет проблемы с кавычками только потому, что вы не можете писать

var name = 'O'Hara';

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


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

В CSS (и нескольких JavaScript-библиотеках, таких как jQuery), как период, так и двоеточие имеют особое значение, и вы столкнетесь с проблемами, если не будете осторожны. Периоды - это селекторы классов, а двоеточия - псевдоселектора (например, «: hover» для элемента, когда мышь над ним).

Если вы укажете элементу идентификатор «my.cool:thing», ваш селектор CSS будет выглядеть следующим образом:

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

На самом деле это говорит: «Элемент с идентификатором« мой », класс« классный »и« псевдоселектор »в« CSS ».

Придерживайтесь AZ любого случая, цифр, подчеркиваний и дефис. И, как сказано выше, убедитесь, что ваши идентификаторы уникальны.

Это должно быть вашей первой заботой.


Для HTML 4 ответ технически:

Идентификаторы ID и NAME должны начинаться с буквы ([A-Za-z]), за которой может следовать любое количество букв, цифр ([0-9]), дефис («-»), подчеркивание («_») , colons (":") и периоды (".").

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

Атрибут id чувствителен к регистру в XHTML .

Как чисто практический вопрос, вы можете избежать определенных символов. Периоды, двоеточия и «#» имеют особое значение в CSS-селекторах, поэтому вам придется избегать этих символов, используя обратную косую черту в CSS или двойную обратную косую черту в селекторной строке, переданной в jQuery . Подумайте, как часто вам придется избегать символа в ваших таблицах стилей или кода, прежде чем сходить с ума по периодам и двоеточиям в ids.

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

Вы можете упростить свои задачи разработки, строго придерживаясь соглашения об именах. Например, если вы полностью ограничиваете символы нижнего регистра и всегда разделяете слова с помощью дефисов или подчеркиваний (но не на обоих, выберите один и никогда не используйте другой), тогда у вас есть простой для запоминания шаблон. Вы никогда не будете удивляться: «это было firstName или FirstName ?» потому что вы всегда будете знать, что вы должны ввести first_name . Предпочитаете верблюд? Затем ограничьте себя этим, без дефиса или подчеркивания, и всегда, последовательно используйте либо верхний регистр, либо нижний регистр для первого символа, не смешивайте их.

В настоящее время очень неясная проблема заключалась в том, что по крайней мере один браузер Netscape 6 неправильно учитывал значения атрибутов id как чувствительные к регистру . Это означало, что если бы вы набрали id="firstName" в вашем HTML (нижний регистр «f») и #FirstName { color: red } в вашем CSS (верхний регистр «F»), этот багги-браузер не смог бы установите цвет элемента на красный. Во время этого редактирования, апрель 2015 года, я надеюсь, что вас не попросят поддержать Netscape 6. Рассмотрим эту историческую сноску.


Из спецификации HTML 4 :

Идентификаторы ID и NAME должны начинаться с буквы ([A-Za-z]), за которой может следовать любое количество букв, цифр ([0-9]), дефис («-»), подчеркивание («_») , colons (":") и периоды (".").

Общей ошибкой является использование идентификатора, начинающегося с цифры.


Из спецификации HTML 4 ...

Идентификаторы ID и NAME должны начинаться с буквы ([A-Za-z]), за которой может следовать любое количество букв, цифр ([0-9]), дефис («-»), подчеркивание («_») , colons (":") и периоды (".").

РЕДАКТИРОВАТЬ: d'oh! Сбейте кнопку, снова!


Любое альфа-числовое значение и « - » и « _ » действительны. Но вы должны начать идентификатор с любым символом между AZ или az .


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

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


Похоже, что хотя двоеточие (:) и периоды (.) Действительны в спецификации HTML, они недействительны в качестве селекторов идентификаторов в CSS поэтому, вероятно, лучше всего избежать, если вы собираетесь использовать их для этой цели.


Строго он должен соответствовать

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

Но у jquery, похоже, проблемы с двоеточиями, поэтому лучше их избежать.


Чтобы ссылаться на id с периодом в нем, вам нужно использовать обратную косую черту. Не уверен, что это то же самое для дефиса или подчеркивания. Например: HTML

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

CSS

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

Я знаю, что очень поздно ответить на этот вопрос, но из-за того, что у меня была такая же проблема, и я нахожу этот ответ более полным, я решаю ответить.

Все a, b, c ... x, y, z, A, B, C ... X, Y, Z, 0,1,2 ... 7,8,9, -, _ могут использоваться для id, но вы не должны использовать цифру и - как первый символ.

это неправильно:

1adfsvsdf   // use number in first
-adfasdf    // use - in first
afd'ksdf    // use ' in characters
asdf;asdf   // use ; in characters

для HTML5

Значение должно быть уникальным среди всех идентификаторов в домашнем поддереве элемента и должно содержать как минимум один символ. Значение не должно содержать пробелов.

По крайней мере один символ, без пробелов.

Это открывает дверь для допустимых вариантов использования, таких как использование символов с акцентом. Это также дает нам больше боеприпасов, чтобы стрелять в ногу, поскольку теперь вы можете использовать значения id, которые вызовут проблемы с CSS и JavaScript, если вы не будете очень осторожны.





html