에 대한HTML 4대답은 기술적으로 다음과 같습니다.
ID 및 NAME 토큰은 문자 ([A-Za-z])로 시작해야하며 숫자, 숫자 ([0-9]), 하이픈 ( "-"), 밑줄 ( "_" , 콜론 ( ":") 및 마침표 ( ".")로 구성됩니다.
HTML 5id가 적어도 하나의 문자를 포함해야하며 공백 문자를 포함 할 수 없다는 것을 말하면서 더 관대합니다.
id 속성은 대소 문자를 구분합니다.XHTML.
순전히 실용적인 문제로, 당신은 특정 문자를 피하기 위해 할 수 있습니다. 마침표, 콜론 및 '#'는 CSS 선택기에서 특별한 의미가 있으므로 문자를 이스케이프 처리해야합니다.CSS의 백 슬래시또는에서 이중 백 슬래시jQuery에 전달 된 선택기 문자열. 영숫자 앞에 마침표와 콜론을 붙이기 전에 스타일 시트 나 코드에서 문자를 벗어나는 빈도를 생각해보십시오.
예를 들어, HTML 선언<div id="first.name"></div>유효합니다. CSS에서 해당 요소를 다음과 같이 선택할 수 있습니다.#first\.name그리고 jQuery에서 이렇게 :$('#first\\.name').그러나 백 슬래시를 잊어 버린 경우,$('#first.name'), 당신은 id가있는 요소를 찾는 완벽하게 유효한 selector를 가질 것이다.first또한 수업을받는name. 이것은 간과하기 쉬운 버그입니다. 이드를 선택하면 장기적으로 행복해질 수도 있습니다.first-name(대신 마침표 하이픈), 대신.
명명 규칙을 엄격히 준수하여 개발 작업을 간소화 할 수 있습니다. 예를 들어 전적으로 소문자로 제한하고 하이픈 또는 밑줄로 단어를 구분할 경우 (둘 다 선택하지 않고 하나만 선택하고 다른 하나는 사용하지 않는 경우), 기억하기 쉬운 패턴을 갖게됩니다. 너는 결코 궁금해하지 않을 것이다. "firstName또는FirstName? "당신이 항상 당신이 입력해야한다는 것을 알기 때문에first_name. 낙타의 경우 선호합니까? 그런 다음 하이픈 또는 밑줄을 사용하지 말고 항상 첫 글자의 대문자 또는 소문자를 일관되게 사용하십시오. 혼합하지 마십시오.
이제는 매우 모호한 문제는 적어도 하나의 브라우저 인 넷스케이프 6이,대소 문자를 구별하여 잘못 처리 된 id 속성 값. 즉, 입력 한 경우id="firstName"HTML (소문자 'f') 및#FirstName { color: red }CSS (대문자 'F')에서 버그가있는 브라우저는 요소의 색상을 빨간색으로 설정하지 못했습니다. 이 편집 시점 인 2015 년 4 월, Netscape 6을 지원하라는 요청을받지 않기를 바랍니다. 역사적인 각주를 생각해보십시오.
id속성은 [w3.org/TR/html4/struct/global.html#adef-id](caseHTML4에서는 민감합니다.) 문자로 시작해야합니다 (A에서 Z로 제한됨). 또한 CSS가 클래스가있는 요소를 참조하므로 요소의 텍스트 색상이 빨간색이 아니어야합니다.FirstName너에게id. - Augustus Klingid="firstName"HTML 4 또는 HTML 5와#FirstName { color: red }CSS에서,버그가있는 브라우저 만요소의 색상을 빨간색으로 설정합니다. - Stephen Booher
로부터HTML 4 사양:
ID 및 NAME 토큰은 문자 ([A-Za-z])로 시작해야하며 숫자, 숫자 ([0-9]), 하이픈 ( "-"), 밑줄 ( "_" , 콜론 ( ":") 및 마침표 ( ".")로 구성됩니다.
일반적인 실수는 숫자로 시작하는 ID를 사용하는 것입니다.
기술적으로 콜론과 마침표를 id / name 속성에 사용할 수 있지만 두 가지를 피하는 것이 좋습니다.
CSS (및 jQuery와 같은 여러 자바 스크립트 라이브러리)에서는 마침표와 콜론 모두 특별한 의미를 가지며 조심하지 않으면 문제가 발생합니다. 마침표는 클래스 선택자이며 콜론은 의사 선택자입니다 (예 : 마우스가 위에있을 때 요소에 대해 : "마우스를 올리면").
id에 "my.cool:thing"이라는 요소를 지정하면 CSS 선택기는 다음과 같이 표시됩니다.
#my.cool:thing { ... /* some rules */ ... }
정말로 말하고있는 것은 "CSS의 'my', 'cool'및 'thing'pseudo-selector의 클래스라는 ID를 가진 요소입니다.
모든 경우, 숫자, 밑줄 및 하이픈의 A-Z를 고수하십시오. 위에서 말한 것처럼 고유 ID가 고유한지 확인하십시오.
그것은 당신의 첫 번째 관심사가되어야합니다.
.,:)를 제거 할 수 없으며 (CSS ... Sharepoint) CSS에서 id selector 대신에 속성 선택자를 사용할 수 있습니다.[id='my.cool:thing']그러나이 선택기는 다른 문제를 일으킬 수있는 id 선택기보다 낮은 특이성을 갖습니다. - Faust
jQuery~하다유효한 ID 이름을 처리하십시오. 메타 문자 (예 : 점, 세미콜론, 대괄호 ...)를 벗어나면됩니다. 그것은 자바 스크립트가 따옴표에 문제가 있다고 말하는 것과 같습니다.
var name = 'O'Hara';
엄밀히 말하면 일치해야합니다.
[A-Za-z][-A-Za-z0-9_:.]*
하지만 jquery는 콜론에 문제가있는 것 같아서이를 피하는 것이 더 나을 수도 있습니다.
id 속성에 대한 추가 제한을 제거합니다.여길 봐. 유일한 요구 사항은 (문서에서 고유함을 제외하고) 다음과 같습니다.
ID가 일치해야합니다.
[A-Za-z][-A-Za-z0-9_:.]*
-(하이픈),_(밑줄),:(콜론) 및.(기간)그러나 피해야한다.:과.beacause :
예를 들어, ID는 "ab : c"로 레이블되고 스타일 시트에서 #ab : c로 참조 될 수 있지만 요소의 ID 일뿐 아니라 id "a", 클래스 "b" 선택기 "c". 혼동을 피하고 사용하지 못하게하는 것이 가장 좋습니다. 및 : 전부.
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, 자바 스크립트, 정규식)에서 문제가 발생할 수 있음을 명심하십시오.
예를 들어 다음 ID는 HTML5에서 유효합니다.
<div id="9lions"> ... </div>
그러나 CSS에서는 유효하지 않습니다.
CSS2.1 사양 :
CSS에서,식별자(요소 이름, 클래스 및 ID 포함) 선택기)에는 문자 [a-zA-Z0-9] 및 ISO 10646 만 포함 할 수 있습니다 문자 U + 00A0 이상, 하이픈 (-) 및 밑줄 (_);숫자, 두 개의 하이픈 또는 하이픈으로 시작할 수 없습니다. 그 다음에 숫자.
대부분의 경우 제한이나 특별한 의미가있는 상황에서 문자를 이스케이프 할 수 있습니다.
W3C 참고 문헌
HTML5
그만큼
id속성은 요소의 고유 식별자 (ID)를 지정합니다.값은 요소의 집에있는 모든 ID 중에서 고유해야합니다. 적어도 하나의 문자를 포함해야합니다. 값은 공백 문자를 포함하십시오.
참고 : ID가 취할 수있는 양식에는 다른 제한 사항이 없습니다. ...에서 특히, ID는 단지 숫자로 구성 될 수 있으며, 숫자로 시작하고, 시작 밑줄 문자는 단지 구두점으로 구성됩니다.
속성을 지정하는 경우에는 속성의 집합 인 값을 가져야합니다. 공백으로 구분 된 토큰. 요소가 속합니다.
HTML 요소가 할당 한 클래스는 모두 class 속성의 값이 나뉘어 질 때 반환되는 클래스 공백 중복은 무시됩니다.
저자가 사용할 수있는 토큰에 대한 추가 제한은 없습니다. class 속성을 사용하지만, 저작자는 설명하는 값보다는 콘텐츠의 성격을 기술하십시오. 내용의 원하는 프리젠 테이션.
실제로 많은 사이트에서 사용합니다.id이것은 기술적으로 유효한 HTML이 아니더라도 숫자로 시작하는 속성입니다.
그만큼HTML 5 초안 사양에 대한 규칙을 풀어 준다.id과nameattributes : 공백을 포함 할 수없는 그냥 불투명 한 문자열입니다.
하이픈, 밑줄, 마침표, 콜론, 숫자 및 문자 모두 CSS 및 JQuery와 함께 사용할 수 있습니다. 다음은 작동해야하지만 페이지 전체에서 고유해야하며 문자 [A-Za-z]로 시작해야합니다.
콜론과 마침표로 작업하는 것은 더 많은 작업이 필요하지만 다음 예제와 같이 할 수 있습니다.
<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>
ID는 고유해야 함을 명심하십시오. id 값이 같은 요소가 문서에 여러 개 있으면 안됩니다.
HTML5의 ID 콘텐츠에 대한 규칙은 다음과 같습니다 (별개의 경우는 제외).
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.
이것이W3ID에 관한 spec (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).
마침표가있는 ID를 참조하려면 백 슬래시를 사용해야합니다. 하이픈이나 밑줄이 같은지 확실하지 않습니다. 예 : HTML
<div id="maintenance.instrumentNumber">############0218</div>
CSS
#maintenance\.instrumentNumber{word-wrap:break-word;}
\--abc) 또는 숫자 (예 :\-123). - MrWhite
HTML 4 사양에서 ...
ID 및 NAME 토큰은 문자 ([A-Za-z])로 시작해야하며 숫자, 숫자 ([0-9]), 하이픈 ( "-"), 밑줄 ( "_" , 콜론 ( ":") 및 마침표 ( ".")로 구성됩니다.
편집 : 오! 다시 버튼에 맞았다!
또한 ID가 고유하다는 사실을 잊지 마십시오. 일단 ID 값이 사용되면 문서의 어느 곳에서도 다시 나타나지 않을 수 있습니다.
많은 ID가있을 수 있지만 모두 고유 한 값을 가져야합니다.
반면에, 클래스 요소가 있습니다. ID와 마찬가지로 여러 번 나타날 수 있지만 그 값은 반복해서 사용될 수 있습니다.
요소의 고유 식별자입니다.
문서에 동일한 id 값을 가진 요소가 여러 개 있어서는 안됩니다.
문자열은 다음과 같은 제한이 있습니다.
공백 문자를 포함해서는 안됩니다.
를 제외하고 문자 사용ASCII letters and digits, '_', '-' and '.'허용되지 않았기 때문에 호환성 문제가 발생할 수 있습니다.HTML 4. 이 제한은HTML 5ID는 호환성을 위해 문자로 시작해야합니다.
콜론 (:)과 마침표 (.)는 HTML 사양에서 유효하지만 ID 선택기로는 유효하지 않습니다.CSS그래서 아마 당신이 그 목적을 위해 그것을 사용하고자한다면 피하는 것이 가장 좋습니다.
...에 대한HTML5
값은 요소의 집에있는 모든 ID 중에서 고유해야합니다. 적어도 하나의 문자를 포함해야합니다. 값은 공백 문자를 포함하십시오.
적어도 하나의 문자, 공백이 없어야합니다.
이렇게하면 악센트 부호가있는 문자 사용과 같은 유효한 유스 케이스에 대한 문이 열립니다. 또한 신중히하지 않는 한 CSS와 JavaScript 모두에서 문제를 일으킬 ID 값을 사용할 수 있기 때문에 더 많은 탄약을 발로 쏠 수 있습니다.
#: . * !기호들<base>, <head>, <html>, <meta>, <param>, <script>, <style>, and <title>.
어떤영숫자 값그리고 "-"및"_"유효합니다.하지만ID 이름을 시작한다.사이에 어떤 성격이든간에A-Z또는및 Z.
공백이 없어야하며 적어도 a부터 z까지 그리고 0에서 9까지의 문자로 시작해야합니다.
나는 이것이이 질문에 대답하기에는 너무 늦었다 고 알고있다. 그러나 나는 똑같은 문제가 있었기 때문에 나는이 대답을 더 완전하게 찾았다. 나는 대답하기로 결심한다.
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
알파벳 -> 대문자 & 작은
자릿수 -> 0-9
특수 문자 -> ':', '-', '_', '.'
형식은 '.'에서 시작해야합니다. 또는 알파벳과 알파벳 또는 숫자가 더 많은 특수 문자가 뒤 따릅니다. id 필드의 값이 '_'로 끝나지 않아야합니다.
또한 공백은 허용되지 않으며, 제공된 경우 다른 값으로 처리됩니다. 이는 id 속성의 경우 유효하지 않습니다.
HTML5에서 ID는 숫자로 시작될 수 없습니다 (예 : 신분증-"1kid"공백을 사용할 수 없습니다 (id ="Some kind")
ID값은 매우 다릅니다. HTML5의 빠르고 완전한 요약ID규칙 :stackoverflow.com/a/31773673/3597276 - Michael_B**.**)jQuery를 사용하면 상당히 많은 문제가 발생할 수 있습니다. 예를 들어 다음과 같습니다.<input id="me.name" />그리고$("#me.name").val()jQuery가<me>수업에 태그 달기.name, 아무도 정말로 원한다! - Sam Swift 웃