XHTML의 모든 주요 자동 폐쇄 요소 (예 : <br/>)는 무엇입니까?
XHTML은 기술적으로 모든 요소를 자동으로 닫을 수 있지만 모든 주요 브라우저에서 지원하는 요소 목록을 찾고 있습니다. <div />와 같은 자체 폐쇄 요소로 인한 일부 문제의 예는 http://dusan.fora.si/blog/self-closing-tags 를 참조 하십시오 .
XHTML의 모든 주요 자동 폐쇄 요소 (예 : <br/>)는 무엇입니까?
XHTML은 기술적으로 모든 요소를 자동으로 닫을 수 있지만 모든 주요 브라우저에서 지원하는 요소 목록을 찾고 있습니다. <div />와 같은 자체 폐쇄 요소로 인한 일부 문제의 예는 http://dusan.fora.si/blog/self-closing-tags 를 참조 하십시오 .
답변:
XHTML (Firefox, Opera, Safari, IE9 )을 지원 하는 모든 브라우저는 모든 요소 에서 자체 폐쇄 구문을 지원합니다 .
<div/>
, <script/>
, <br></br>
모두 잘 작동합니다. 그렇지 않은 경우 XHTML DOCTYPE이 부적절하게 추가 된 HTML 이 있습니다.
DOCTYPE은 문서 해석 방법을 변경하지 않습니다. MIME 형식 만 수행 합니다.
HTML WG는이 문제에 대해 논의했습니다. 구식 (HTML 전용) 브라우저가 지침에 따라 XHTML 1.0 문서를 수락하고이를 텍스트 / html로 제공하도록하는 것이 었습니다. 따라서 text / html로 제공되는 문서는 XHTML이 아닌 HTML로 처리해야합니다.
W3C Validator는이 규칙을 대부분 무시하지만 브라우저는 종교적으로 따르기 때문에 매우 일반적인 함정입니다. WebKit 블로그에서 HTML, XML 및 XHTML 이해를 읽으십시오 .
실제로 인터넷에있는 대부분의 XHTML 문서는로 제공됩니다
text/html
. 이는 XHTML이 아니라 HTML 파서의 오류 처리로 인해 실제로 유효하지 않은 HTML을 의미합니다. 모든 "유효한 XHTML 1.0!" 웹의 링크는 실제로 "잘못된 HTML 4.01!"이라고 말합니다.
XHTML의 DOCTYPE을 사용하여 실제 XHTML 또는 유효하지 않은 HTML이 있는지 테스트하려면 다음을 문서에 넣으십시오.
<span style="color:green"><span style="color:red"/>
If it's red, it's HTML. Green is XHTML.
</span>
그것은 유효성을 검사하고 실제 XHTML에서는 완벽하게 작동합니다 ( 1 대 2 참조 ). 눈을 믿을 수 없거나 MIME 유형을 설정하는 방법을 모르는 경우 XHTML 프록시 를 통해 페이지를여십시오 .
확인하는 또 다른 방법은 Firefox에서 소스보기입니다. 유효하지 않으면 슬래시가 빨간색으로 강조 표시됩니다.
HTML5 / XHTML5에서는 변경되지 않았으며 추가 사항이 없기 때문에 구별이 더 명확 DOCTYPE
합니다. Content-Type
왕입니다.
기록을 위해, XHTML 스펙은 XHTML을 XML 애플리케이션 으로 만들어 어떤 요소가 자체적으로 닫힐 수 있도록합니다 . [emphasis mine]
빈 요소 태그는 키워드 EMPTY를 사용하여 선언되는지 여부에 관계 없이 content가없는 모든 요소에 사용될 수 있습니다 .
또한 XHTML 사양 에 명시 적으로 표시됩니다 .
빈 요소가 있어야 하거나 종료 태그 또는로 끝나야 시작 태그가
/>
. 예를 들어,<br/>
또는<hr></hr>
<script>
하거나 <div>
다른 렌더링 / 통역이 발생 하므로 afaik을 수정하지 마십시오 .
text/html
. 실제 XHTML에서는 application/xhtml+xml
제대로 작동하므로 전송됩니다 . 다운 보트하기 전에 내가 링크 한 기사 (또는 XHTML 사양 부록 C)를 읽으십시오.
application/xhtml+xml
<script/>
작동 한다는 것을 보장 할 수 있습니다. MIME 타입으로. 뿐.
이 주제에서 매우주의해야 할 요소는 <script
> 요소입니다. 외부 소스 파일이 있으면 직접 닫을 때 문제가 발생합니다. 시도 해봐:
<!-- this will not consistently work in all browsers! -->
<script type="text/javascript" src="external.js" />
이것은 Firefox에서는 작동하지만 최소한 IE6에서는 작동하지 않습니다. 내가 본 모든 요소를 지나치게 열심히 닫을 때이 문제가 발생했기 때문에 알고 있습니다.
로부터 W3 학교 참조 사이트 :
<area />
<base />
<basefont />
<br />
<hr />
<input />
<img />
<link />
<meta />
/>
:"area", "base", "basefont", "br", "col", "frame", "hr", "img", "input", "link", "meta", "param"
grep EMPTY xhtml1-strict.dtd | sort
또는grep EMPTY xhtml1-transitional.dtd | sort
더 좋은 질문은 코드에 영향을주지 않고 HTML 모드에서도 어떤 태그를 자동으로 닫을 수 있는가하는 것입니다. 답 : 빈 내용물이있는 것 (무효)입니다. HTML 사양 에 따르면 다음 요소는 무효입니다.
area, base, br, col, embed, hr, img, input, keygen, link, menuitem, meta, param, source, track, wbr
이전 버전의 사양도 나와 있습니다 command
. 또한 다양한 출처에 따라 다음과 같이 사용되지 않거나 표준이 아닌 태그는 무효입니다.
basefont, bgsound, frame, isindex
마지막으로 확인했을 때 다음은 HTML5에 나열된 비어 있거나 비어있는 요소입니다.
작성자에게 해당 : area, base, br, col, command, embed, eventsource, hr, img, input, link, meta, param, source
작성자에게 유효하지 않음 : basefont, bgsound, frame, spacer, wbr
HTML5의 새로운 기능 외에도 XHTML을 텍스트 / html로 제공 할 때 지원 될 수있는 아이디어를 제공해야합니다. (단순히 생성 된 DOM을 검사하여 테스트하십시오.)
XHTML이 application / xhtml + xml (XML로 만들어 짐)로 제공되는 경우 XML 규칙이 적용되며 모든 요소가 비어있을 수 있습니다 (XHTML DTD가이를 표현할 수는 없지만)
xHTML DTD를 살펴보면 모두 나열되어 있습니다. 다음은 모든 주요 내용을 빠르게 검토하는 것입니다.
<br />
<hr />
<img />
<input />
이를 HTML 5에서 "void"요소라고합니다. 공식 W3 spec에 나열되어 있습니다.
void 요소는 컨텐츠 모델이 어떤 상황에서도 컨텐츠를 가질 수없는 요소입니다.
2013 년 4 월 기준으로 다음과 같습니다.
지역, 자료, br, 열, 명령, 포함, 시간, img, 입력, keygen, 링크, 메타, 매개 변수, 소스, 트랙, wbr
2018 년 12 월 (HTML 5.2) 기준은 다음과 같습니다.
지역, 자료, br, 열, 포함, 시간, img, 입력, 링크, 메타, 매개 변수, 소스, 트랙, wbr
필자가 작성한 대부분의 페이지가 생성되거나 태그에 내용이 있기 때문에 특히 과도하게 설명하지 않을 것입니다. 자동 폐쇄시 문제를 일으킨 유일한 사람은 다음과 같습니다.
<title/>
이를 위해 항상 별도의 닫는 태그를 지정하는 것에 의지했습니다. 일단 태그가 올라간 <head></head>
후에는 코드가 더 이상 어수선하지 않습니다.
<script/>
이것은 내가 최근에 문제를 겪었던 가장 큰 것입니다. 몇 년 동안 <script/>
스크립트가 외부 소스에서 나올 때 항상 자체 닫는 태그를 사용했습니다 . 그러나 최근에는 null 형식에 대한 JavaScript 오류 메시지를 받기 시작했습니다. 며칠간의 연구 끝에, 문제는 (아마도) 이것이 브라우저가 <form>
태그의 끝이라는 것을 인식하지 못했기 때문에 태그에 도달하지 못하는 것으로 나타났습니다 <script/>
. 그래서 별도의 <script></script>
태그로 만들면 모든 것이 작동했습니다. 같은 브라우저에서 만든 다른 페이지가 다른 이유는 모르겠지만 솔루션을 찾는 것이 큰 도움이되었습니다!