idHTML 요소 의 속성을 만들 때 값에 어떤 규칙이 있습니까?
답변
들어 HTML 4 , 대답은 기술적으로 :
ID 및 NAME 토큰은 문자 ([A-Za-z])로 시작해야하며 뒤에 문자, 숫자 ([0-9]), 하이픈 ( “-“), 밑줄 ( “_”)이 올 수 있습니다. , 콜론 ( “:”) 및 마침표 ( “.”)
HTML 5 는 ID가 적어도 하나의 문자를 포함해야하며 공백 문자를 포함해서는 안된다고 말하는 것이 더 관대합니다.
id 속성은 XHTML 에서 대소 문자를 구분 합니다.
순전히 실질적인 문제로 특정 문자를 피할 수 있습니다. 마침표, 콜론 및 ‘#’은 CSS 선택기에서 특별한 의미를 가지므로 CSS 의 백 슬래시 또는 jQuery에 전달 된 선택기 문자열 의 이중 백 슬래시를 사용하여 해당 문자를 이스케이프해야합니다 . ID에 마침표와 콜론이 생기기 전에 스타일 시트 나 코드에서 캐릭터를 이스케이프해야하는 빈도를 생각하십시오.
예를 들어 HTML 선언 <div id="first.name"></div>이 유효합니다. CSS #first\.name와 jQuery 에서 해당 요소를 다음 과 같이 선택할 수 있습니다 . $('#first\\.name').그러나 백 슬래시를 잊어 버린 경우 $('#first.name')id가 first있고 class가 있는 요소를 찾는 완벽하게 유효한 선택기가 있습니다 name. 이것은 간과하기 쉬운 버그입니다. first-name대신 id (마침표 대신 하이픈)를 선택하면 장기적으로 더 행복 할 수 있습니다 .
명명 규칙을 엄격히 준수하여 개발 작업을 단순화 할 수 있습니다. 예를 들어, 자신을 소문자로 제한하고 항상 하이픈이나 밑줄로 단어를 구분하면 (두 가지가 아닌 하나를 선택하고 다른 단어는 사용하지 마십시오) 기억하기 쉬운 패턴이 있습니다. ” firstName그렇지 FirstName않습니까?” 항상 입력해야한다는 것을 알기 때문 first_name입니다. 낙타를 선호하십니까? 그런 다음 하이픈이나 밑줄을 사용하지 말고 항상 첫 문자에 대문자 또는 소문자를 사용하십시오. 혼합하지 마십시오.
현재 매우 모호한 문제는 적어도 하나의 브라우저 인 Netscape 6이 id 속성 값을 대소 문자를 구분하는 것으로 잘못 취급 했다는 것 입니다. 즉 id="firstName", HTML (소문자 ‘f’)과 #FirstName { color: red }CSS (대문자 ‘F’)로 입력 한 경우 버그가있는 브라우저는 요소의 색상을 빨간색으로 설정하지 못했을 것입니다. 2015 년 4 월이 편집 당시에는 Netscape 6을 지원하라는 메시지가 표시되지 않기를 바랍니다.이 내용을 역사적 각주로 간주하십시오.
답변
로부터 HTML 4 규격 :
ID 및 NAME 토큰은 문자 ([A-Za-z])로 시작해야하며 뒤에 문자, 숫자 ([0-9]), 하이픈 ( “-“), 밑줄 ( “_”)이 올 수 있습니다. , 콜론 ( “:”) 및 마침표 ( “.”)
일반적인 실수는 숫자로 시작하는 ID를 사용하는 것입니다.
답변
기술적으로 id / name 속성에 콜론과 마침표를 사용할 수 있지만 둘 다 피하는 것이 좋습니다.
CSS (및 jQuery와 같은 여러 JavaScript 라이브러리)에서 마침표와 콜론은 모두 특별한 의미가 있으므로주의하지 않으면 문제가 발생할 수 있습니다. 마침표는 클래스 선택기이며 콜론은 의사 선택기입니다 (예 : 마우스가 위에있을 때 요소의 “: 호버”).
요소에 id “my.cool:thing”을 지정하면 CSS 선택기는 다음과 같습니다.
#my.cool:thing { ... /* some rules */ ... }CSS-speak에서 “id가 ’my’인 클래스, ‘cool’클래스 및 ‘thing’pseudo-selector ‘라는 요소입니다.
모든 경우, 숫자, 밑줄 및 하이픈을 AZ에 충실하십시오. 위에서 말했듯이 ID가 고유해야합니다.
그것이 첫 번째 관심사입니다.
답변
jQuery 는 유효한 ID 이름을 처리합니다. 메타 문자 (예 : 점, 세미콜론, 대괄호 등)를 이스케이프하면됩니다. JavaScript는 쓸 수 없기 때문에 따옴표에만 문제가 있다고 말하는 것과 같습니다.
var name = 'O'Hara';답변
엄밀히 일치해야합니다
[A-Za-z][-A-Za-z0-9_:.]*그러나 jquery는 콜론에 문제가있는 것으로 보이므로 피하는 것이 좋습니다.
답변
HTML5 :
id 속성에 대한 추가 제한을 제거 하려면 here을 참조하십시오 . 문서에서 고유하지 않은 나머지 요구 사항은 다음과 같습니다.
- 값은 하나 이상의 문자를 포함해야합니다 (비워 둘 수 없음)
- 공백 문자를 포함 할 수 없습니다.
PRE-HTML5 :
아이디는 다음과 같아야합니다.
[A-Za-z][-A-Za-z0-9_:.]*- AZ 또는 az 문자로 시작해야합니다
- 포함 할 수 있습니다
-(하이픈),_(밑줄),:(콜론)과.(기간)
그러나 사람은 피해야 :하고 .beacause를 :
예를 들어, ID는 “ab : c”로 레이블이 지정되고 스타일 시트에서 #ab : c로 참조 될 수 있지만 요소의 id 일뿐만 아니라 id “a”, 클래스 “b”, 의사- 선택기 “c”. 혼동을 피하고 사용하지 않는 것이 가장 좋습니다. 그리고 : 모두.
답변
HTML5 : ID 및 클래스 속성에 허용되는 값
HTML5 기준으로, ID 값에 대한 유일한 제한 사항은 다음과 같습니다.
- 문서에서 고유해야합니다
- 공백 문자를 포함해서는 안됩니다
- 하나 이상의 문자를 포함해야합니다
비슷한 규칙이 수업에 적용됩니다 (물론 고유성을 제외하고).
따라서 값은 모든 숫자, 한 자릿수, 문장 부호 문자 일 수 있으며 특수 문자를 포함 할 수 있습니다. 공백이 없습니다. 이것은 HTML4와는 매우 다릅니다.
HTML 4에서 ID 값은 문자로 시작해야하며 문자, 숫자, 하이픈, 밑줄, 콜론 및 마침표 만 뒤에 올 수 있습니다.
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>ID 값에 숫자, 문장 부호 또는 특수 문자를 사용하면 다른 컨텍스트 (예 : CSS, JavaScript, 정규식)에서 문제가 발생할 수 있습니다.
예를 들어 다음 ID는 HTML5에서 유효합니다.
<div id="9lions"> ... </div>그러나 CSS에서는 유효하지 않습니다.
CSS2.1 스펙에서 :
CSS에서 식별자 (선택자에 요소 이름, 클래스 및 ID 포함)는 [a-zA-Z0-9] 및 ISO 10646 문자 U + 00A0 이상 문자와 하이픈 (-) 및 밑줄 ( _); 숫자, 하이픈 2 개 또는 하이픈 다음에 숫자로 시작할 수 없습니다 .
대부분의 경우 제한이나 특별한 의미가있는 상황에서 문자를 이스케이프 처리 할 수 있습니다.
W3C 참조
HTML5
이
id속성은 요소의 고유 식별자 (ID)를 지정합니다.값은 요소의 홈 서브 트리에있는 모든 ID 중에서 고유해야하며 하나 이상의 문자를 포함해야합니다. 값은 공백 문자를 포함하지 않아야합니다.
참고 : ID가 취할 수있는 양식에는 다른 제한이 없습니다. 특히 ID는 숫자로만 구성되고, 숫자로 시작하고, 밑줄로 시작하고, 구두점만으로 구성 될 수 있습니다.
지정된 경우 속성에는 요소가 속하는 다양한 클래스를 나타내는 공백으로 구분 된 토큰 세트 값이 있어야합니다.
HTML 요소가 할당 한 클래스는 class 속성 값이 공백으로 분할 될 때 반환 된 모든 클래스로 구성됩니다. 중복은 무시됩니다.
작성자가 클래스 속성에 사용할 수있는 토큰에 대한 추가 제한은 없지만 저자는 원하는 컨텐츠 표현을 설명하는 값보다는 컨텐츠의 특성을 설명하는 값을 사용하도록 권장됩니다.