브라우저가 올바르게 인식하지 못하는 이유는 무엇입니까?
<script src="foobar.js" /> <!-- self-closing script element -->
이것 만이 인식됩니다 :
<script src="foobar.js"></script>
이것이 XHTML 지원의 개념을 어기는 것입니까?
참고 :이 설명은 적어도 모든 IE (6-8 베타 2)에 맞습니다.
브라우저가 올바르게 인식하지 못하는 이유는 무엇입니까?
<script src="foobar.js" /> <!-- self-closing script element -->
이것 만이 인식됩니다 :
<script src="foobar.js"></script>
이것이 XHTML 지원의 개념을 어기는 것입니까?
참고 :이 설명은 적어도 모든 IE (6-8 베타 2)에 맞습니다.
답변:
XHTML 1 사양에 따르면 :
컨텐츠 모델이
EMPTY
비어 있지 않은 요소의 빈 인스턴스 (예 : 빈 제목 또는 단락)는 최소화 된 형식을 사용하지 않습니다 (예 : use<p> </p>
및 not<p />
).
XHTML DTD는 스크립트 요소를 다음과 같이 지정합니다.
<!-- script statements, which may include CDATA sections -->
<!ELEMENT script (#PCDATA)>
<script />
는 스펙에서이를 허용하지 않는다는 것이 아니라 컨텐츠 유형이 application / xhtml + xml이 아닌 경우 브라우저가이를 "비 태그 수프"로 해석하지 않는다는 것입니다. 참조 : stackoverflow.com/questions/348736/... @shabunc : 브라우저 수 표시 를 이해하기 위해,하지만 실제로 일어나는 것은 그것이 후 <P />의 내용을 태우고입니다 내부 이후 있음을 의미 단락으로 인해 squadette의 견적을 해석에 < p>는 비어 있지 않으며 자체 닫을 수 없습니다. XHTML 1.1에서는 자동 종료 될 수 있습니다.
브래드와 squadette가 말한에 추가하려면, 자동 폐쇄 XML 구문은 <script />
사실 이다 올바른 XML,하지만 그것을 위해 실제로 일에, 웹 서버는 같은 XML 마임 제대로 형성된 XML로 문서를 보낼 필요 application/xhtml+xml
는 HTTP에 컨텐츠 유형 헤더 (및 하지 로 text/html
).
그러나 XML mimetype을 보내면 IE7에서 페이지를 파싱하지 않으므로 text/html
.
에서 W3 :
요약하면 XHTML 제품군 문서에는 'application / xhtml + xml'을 사용해야하고, 'text / html'은 HTML 호환 XHTML 1.0 문서로 제한해야합니다. 'application / xml'및 'text / xml'도 사용될 수 있지만, 적절한 경우에는 일반적인 XML 미디어 유형 대신 'application / xhtml + xml'을 사용해야합니다.
몇 달 전에이 문제를 해결했으며 (FF3 + 및 IE7과 호환되는) 유일한 솔루션은 (HTML 구문 + HTML mimetype) <script></script>
과 함께 이전 구문 을 사용하는 것 text/html
입니다.
서버 text/html
가 HTTP 헤더로 유형을 보내면 ( XHTML 문서가 올바르게 구성된 경우에도) FF3 +는 HTML 렌더링 모드를 사용하여 <script />
작동하지 않습니다 (이는 변경 사항이므로 Firefox는 이전에는 덜 엄격했습니다).
이것은 http-equiv
메타 요소, 문서 내부의 XML 프롤로그 또는 문서 유형 과 관계없이 발생 합니다. text/html
헤더를 받으면 Firefox 브랜치 에서 HTML 또는 XML 파서가 문서 내부에서 보이는지 여부를 결정하고 HTML 파서는 이해할 수 없습니다 <script />
.
.html
메타 태그와 상관없이 비슷한 이유로 로컬 파일을 태그 수프로 렌더링 한다는 것 입니다. XHTML 파일의 경우 Firefox는 파일 이름이이면 그에 따라 만 렌더링합니다 .xhtml
.
application/xhtml+xml
하지 text/xml
.
궁금한 점이 있다면 궁극적 인 이유는 HTML이 원래 SGML의 방언으로 XML의 이상한 언니이기 때문입니다. SGML 랜드에서 요소는 DTD에서 자체 결산 (예 : BR, HR, INPUT), 암시 적으로 닫을 수있는 (예 : P, LI, TD) 또는 명시 적으로 닫을 수있는 (예 : TABLE, DIV, SCRIPT)로 지정할 수 있습니다. 물론 XML에는이 개념이 없습니다.
최신 브라우저에서 사용하는 태그 수프 파서는 더 이상 순수한 SGML이 아니지만이 레거시에서 진화했습니다. 물론 XML 마임 유형으로 보내지 않는 한 신중하게 제작 된 XHTML은 잘못 작성된 SGML에서 영감을 얻은 태그 수프로 취급됩니다. 이 또한 이유입니다 ...
<p><div>hello</div></p>
... 브라우저는 다음과 같이 해석합니다.
<p></p><div>hello</div><p></p>
... DOM에 대해 코드를 작성하려고 할 때 모호한 모호한 버그를 만드는 방법입니다.
P
요소는 요소를 포함 할 수 없으므로 DIV
(이것은 유효하지 않은 HTML 임) 브라우저 는 여는 태그 앞에 요소를 암시 적으로 닫습니다 P
( "암시 적으로 닫을 수 있음"으로 정의 됨) DIV
. 그러나 브라우저는 이와 관련하여 다르게 작동하는 경향이 있습니다 (유효하지 않은 HTML에서와 같이).
</p>
종료 태그는 실제로 HTML 정의의 일부입니다!
다른 사람들은 "어떻게"에 응답하고 사양을 인용했습니다. 다음은 <script/>
몇 시간 동안 버그 보고서와 메일 목록을 파헤친 후 "why no "에 대한 실제 이야기입니다 .
HTML 4
HTML 4는 SGML을 기반으로 합니다.
SGML은 일부가 shorttags 등, <BR//
, <B>text</>
, <B/text/
, 또는 <OL<LI>item</LI</OL>
. XML은 첫 번째 형식을 취하고 끝을 ">"(SGML은 유연)으로 재정의하므로 <BR/>
.
그러나, HTML 때문에, redfine하지 않았다 <SCRIPT/>
해야 의미합니다 <SCRIPT>>
.
(예, '>'는 콘텐츠의 일부 여야하며 태그는 여전히 닫혀 있지 않습니다 .)
물론,이 XHTML과 호환하고 것 많은 사이트를 침입 (시간 브라우저에서 충분히 성숙했다 돌볼 이것에 대해 , 그래서) 아무도 shorttags를 구현되지 및 사양이 그들에 대해 조언한다 .
사실상 모든 '작동'자체 엔드 태그는 기술적으로 적합하지 않은 파서에서 금지 된 종료 태그가있는 태그이며 실제로 유효하지 않습니다. W3C는 HTML 호환 으로 XHTML 로의 전환을 돕기 위해이 핵 을 만들어 냈습니다 .
그리고 <script>
종료 태그는 금지되지 않습니다 .
"자체 결말"태그는 HTML 4의 핵이며 의미가 없습니다.
HTML 5
HTML5에는 5 가지 유형의 태그가 있으며 'void'및 'foreign'태그 만 자체 폐쇄 될 수 있습니다 .
때문에 <script>
(이 무효없는 수 의 콘텐츠가)와 (MathML을 또는 SVG 같은) 외국 아니라, <script>
자기를 폐쇄하지 않을 수에 관계없이 당신이 그것을 사용하는 방법.
그런데 왜? 그들은 그것을 외국으로 간주하거나 특별한 경우를 만들 수 없습니까?
HTML 5는 HTML 4 및 XHTML 1의 구현 과 역 호환되는 것을 목표로합니다 . SGML 또는 XML을 기반으로하지 않습니다. 구문은 주로 구현 문서화 및 통합과 관련이 있습니다. (이것이 유효 하지 않은 HTML4 임에도 불구하고 HTML5 가 유효한 이유 입니다.)<br/>
<hr/>
자체 폐쇄 <script>
는 구현 방식이 다른 태그 중 하나입니다. 그것은 크롬, 사파리에서 작업에 사용 , 오페라 ; 내 지식으로는 Internet Explorer 또는 Firefox에서는 작동하지 않았습니다.
이것은 HTML 5가 작성 될 때 논의 되었으며 브라우저 호환성을 깨뜨려 거부되었습니다 . 이전 브라우저에서 스크립트 태그 자체 닫기 웹 페이지가 올바르게 렌더링되지 않을 수 있습니다. 있었다 다른 제안 ,하지만 그들은 하나 호환성 문제를 해결할 수 없습니다.
초안이 릴리스 된 후 WebKit은 파서를 준수하도록 업데이트했습니다.
<script>
HTML 4 및 XHTML 1과의 호환성으로 인해 HTML 5에서 자체 닫기 가 발생하지 않습니다.
XHTML 1 / XHTML 5
실제로 XHTML로 사용 되면 다른 답변에서 언급했듯이 <script/>
실제로 닫힙니다 .
것을 제외하고 사양 말한다 그것은 해야 HTML로 재직 할 때 일했다 :
XHTML 문서는 대부분의 HTML 브라우저와 호환되므로 인터넷 미디어 유형 "text / html"[RFC2854]로 레이블이 지정 될 수 있습니다.
그래서 무슨 일이야?
사람들 은 Mozilla 에게 지정된 컨텐츠 헤더 ( content sniffing )에 관계없이 Firefox가 적합한 문서를 XHTML 로 구문 분석 하도록 요청했습니다 . 이것은 자체 폐쇄 스크립트를 허용했을 것이며, 웹 호스팅 업체는 정확한 헤더를 제공하기에 충분히 성숙하지 않았기 때문에 콘텐츠 스니핑 이 필요 했습니다. IE는 그것에 능숙했다 .
경우 첫번째 브라우저 전쟁은 IE 6와 함께 끝나지 않았다, XHTML도 목록에되었을 수도 있습니다. 그러나 끝났다. 그리고 IE 6 에는 XHTML에 문제 가 있습니다. 실제로 IE 는 올바른 MIME 유형 을 전혀 지원하지 않았기 때문에 IE는 10 년 동안 주요 시장 점유율 을 차지 했기 때문에 모든 사람 이 text/html
XHTML 에 사용 하도록 강요했습니다 .
또한 콘텐츠 스니핑 은 매우 나쁠 수 있으며 사람들은 이를 중지해야한다고 말합니다 .
마지막으로, W3C가 밝혀 평균 XHTML은 sniffable로하지 않았다 : 문서는 모두 , HTML 및 XHTML 및 Content-Type
규칙. 우리는 그들이 "우리의 사양을 따르십시오"라고 확고하게 서 있고 실제적인 것을 무시하고 있다고 말할 수 있습니다 . 이후의 XHTML 버전으로 계속되는 실수 .
어쨌든,이 결정 은 Firefox 에 대한 문제 를 해결했습니다 . 크롬 이 태어나 기 7 년 전 ; 다른 중요한 브라우저는 없었습니다. 따라서 결정되었습니다.
doctype 만 지정해도 다음 스펙으로 인해 XML 구문 분석이 트리거되지 않습니다.
<p>
또는 <li>
, 할 수 없다 '자기 폐쇄'가 이후 수 내용이 코드 같은, <p/>
아무것도가이 요소에서 허용되는 경우 (잘못된)는, 태그와 그 이후의 내용을 시작하는 것이 더 없다 안에 들어갑니다.
Internet Explorer 8 및 이전 버전은 XHTML 구문 분석을 지원하지 않습니다. XML 선언 및 / 또는 XHTML doctype을 사용하더라도 이전 IE는 여전히 문서를 일반 HTML로 구문 분석합니다. 일반 HTML에서는 자체 닫기 구문이 지원되지 않습니다. 후행 슬래시는 무시되고 명시적인 닫기 태그를 사용해야합니다.
IE 9 이상과 같은 XHTML 구문 분석을 지원하는 브라우저조차도 XML 컨텐츠 유형으로 문서를 제공하지 않으면 문서를 HTML로 구문 분석합니다. 그러나이 경우 오래된 IE는 문서를 전혀 표시하지 않습니다!
스크립트 태그는 인라인 코드를 포함 할 수 있고 HTML은 속성의 존재 여부에 따라 해당 기능을 설정하거나 해제 할만큼 똑똑하지 않기 때문에 자체 종료 스크립트 태그가 작동하지 않습니다.
반면에 HTML에는 외부 리소스에 대한 참조를 포함하는 데 탁월한 태그가 있습니다. 태그는
<link>
자체 닫기 일 수 있습니다. 스타일 시트, RSS 및 Atom 피드, 표준 URI 및 기타 모든 종류의 제품을 포함하는 데 이미 사용되었습니다. 왜 JavaScript가 아닙니까?
스크립트 태그를 자체적으로 묶고 싶다면 내가 말한 것처럼 할 수는 없지만 현명하지는 않지만 대안이 있습니다. 자체 닫기 링크 태그를 사용하고 JavaScript와 같은 텍스트 / 자바 스크립트 및 rel 유형을 스크립트로 제공하여 JavaScript에 링크 할 수 있습니다.
<link type="text/javascript" rel ="script" href="/path/tp/javascript" />
<style>
태그가 있지만 외부 CSS 파일에 링크 태그를 사용합니다. 링크 태그 정의 : "<link> 태그는 문서와 외부 리소스 간의 링크를 정의합니다." 링크 태그가 외부 CSS 또는 JS에 사용된다는 것이 완벽하게 논리적 인 것 같습니다 ... 즉 외부 파일에서 링크하는 것입니다. 참고 나는 spec / cross-browserness 등을 말하지 않고 CSS와 JS를 모두 가져 오기 위해 링크 태그를 사용하는 논리적 특성에 대해서만 언급하고 있습니다 ... 실제로 그렇게하면 의미가 있습니다 . 신발 [분석]이 맞는지 확실하지 않습니다.
XML 및 XHTML과 달리 HTML에는 자체 닫기 구문에 대한 지식이 없습니다. XHTML을 HTML로 해석하는 브라우저는 해당 /
문자가 태그가 자동 종료되어야 함을 나타냅니다. 대신 빈 속성처럼 해석하고 파서는 여전히 태그가 '열려있다'고 생각합니다.
마찬가지로 <script defer>
로 처리됩니다 <script defer="defer">
, <script />
로 처리됩니다 <script /="/">
.
/
NET (Null End Tag) 구성의 일부로 해석 할 수 있습니다 .
Internet Explorer 8 및 이전 버전은 XHTML에 적합한 MIME 유형을 지원하지 않습니다 application/xhtml+xml
. text/html
이전 버전의 Internet Explorer에서 XHTML을로 제공하는 경우 HTML 4.01로 해석됩니다. 닫는 태그를 생략 할 수있는 요소에는 짧은 구문 만 사용할 수 있습니다. HTML 4.01 사양을 참조하십시오 .
XML '약식'은 /라는 속성으로 해석되며, (등호가 없기 때문에) 암시 적 값이 "/"인 것으로 해석됩니다. 이것은 HTML 4.01에서 엄격하게 잘못되었습니다. 선언되지 않은 속성은 허용되지 않지만 브라우저는이를 무시합니다.
IE9 이상은와 함께 제공되는 XHTML 5를 지원application/xhtml+xml
합니다.
에서 HTML 문서 - VOID 요소는 하지 않는 모든에서 "닫는 태그"를 필요로한다!
에서 XHTML , 모든, 일반 그러므로 그들은 모두 필요에 종료 예 "닫는 태그"; 간단한 줄 바꿈 인 br을 포함 <br></br>
하거나 그 속기 <br />
입니다.
그러나 스크립트 요소는 다른 요소 앞에있는 스크립트 태그 가 데이터 설명 선언이 아니라 브라우저 명령어 이기 때문에 절대로 void 또는 파라 메트릭 요소 가 아닙니다.
원칙적으로 시맨틱 종료 명령어, 예를 들어 "닫는 태그"는 시맨틱이 후속 태그로 종료 될 수없는 명령어를 처리하는 데에만 필요합니다. 예를 들어 :
<H1>
시맨틱은 <P>
자체 시맨틱이 충분하지 않아서 이전 H1 명령 세트를 무시하고 종료 할 수 없기 때문에 다음에 의해 시맨틱을 종료 할 수 없습니다 . 스트림 을 새 단락 줄로 나눌 수는 있지만 현재 글꼴 크기 및 스타일 줄 높이를 무시 하여 스트림을 쏟아내는 것 (즉, P에없는 경우이기 때문에) 은 "강하지 않습니다". ).
이것이 "/"(종료) 신호가 발명 된 방법과 이유입니다.
와 같은 일반적인 설명이없는 종료 태그 < />
는 발생하는 캐스케이드에서 단일 실패에 대해 충분했을 것입니다. <H1>Title< />
하지만 스트림의 여러 중간 태깅을 "중첩"할 수 있기를 원하기 때문에 항상 그런 것은 아닙니다. 다른 캐스케이드로 감싸거나 떨어 뜨리기 전에 급류에. 결과적으로 일반 터미네이터는 종료 < />
할 속성의 대상을 결정할 수 없습니다. 예를 들어, <b>
굵은 <i>
굵은 이탤릭체는 굵은 < />
이탤릭체 </>
입니다. 의심 할 여지없이 우리의 의도를 제대로 얻지 못했을 것이며, 아마도 대담한 대담한 대담한 정상 으로 해석 할 것입니다 .
이것은 포장지, 즉 컨테이너 의 개념 이 탄생 한 방식입니다. (이러한 개념은 너무 유사하여 식별하기가 불가능하며 때로는 동일한 요소가 <H1>
래퍼와 컨테이너를 동시에 가질 수도 있습니다. <B>
의미 적 래퍼 만 있습니다). 의미가없는 평범한 컨테이너가 필요합니다. 물론 DIV 요소의 발명이 이루어졌습니다.
DIV 요소는 실제로 2BR 컨테이너입니다. 물론 CSS의 등장은 전체 상황을 이전보다 더 이상하게 만들었고 간접적으로 많은 큰 결과와 큰 혼란을 야기했습니다!
CSS를 사용하면 새로 발명 된 DIV의 기본 사전 및 사후 BR 동작을 쉽게 무시할 수 있기 때문에 종종 "컨테이너 없음"이라고합니다. 당연히 잘못입니다! DIV는 블록 요소이며 종료 신호 발생 전후에 스트림의 라인을 기본적으로 중단합니다. 곧 웹은 페이지 DIV- 염으로 고통 받기 시작했습니다. 그들 대부분은 여전히 그렇습니다.
HTML 태그의 기본 동작을 완전히 재정의하고 완전히 재정의하는 기능을 갖춘 CSS의 등장으로 HTML 존재의 전체 의미를 혼동하고 흐리게 만들었습니다 ...
갑자기 모든 HTML 태그가 쓸모없는 것처럼 보였고, 원래의 의미, 정체성 및 목적을 모두 잃어 버렸습니다. 어떻게 든 더 이상 필요하지 않다는 인상을받을 수 있습니다. 말하기 : 단일 컨테이너 래퍼 태그는 모든 데이터 표시에 충분합니다. 필요한 속성을 추가하십시오. 의미있는 태그가 아닌 이유는 무엇입니까? 태그 이름을 만들면 CSS가 나머지를 방해 할 수 있습니다.
이것은 xhtml이 태어 났을 때 물론 물론 새로운 이민자들에 의해 너무나 많은 돈을 지불하고 무엇이 무엇인지, 그리고 그 목적이 무엇인지에 대한 왜곡 된 비전에 의해 지불되었습니다. W3C는 월드 와이드 웹에서 무엇이 잘못 되었습니까?
HTML의 목적은 스트리밍 인간의 수신자에게 의미있는 데이터를.
정보를 제공합니다.
공식적인 부분은 정보 전달의 명확성을 돕기위한 것입니다. xhtml은 정보를 약간만 고려하지 않습니다. -정보는 전혀 관련이 없습니다.
이 문제에서 가장 중요한 것은 xhtml이 확장 된 HTML 버전이 아니라 xhtml이 완전히 다른 짐승 이라는 것을 알고 이해하는 것입니다 . 근거; 그러므로 그것들을 분리하는 것이 현명합니다.
서버가 보낸 MIME 유형의 중요성뿐만 아니라 'true XHTML', 'faux XHTML'및 HTML의 차이점은 이미 잘 설명 되어 있습니다 . 지금 바로 사용 해보고 싶다면 가능한 브라우저를 위해 자체 폐쇄 스크립트 태그를 포함하여 실시간 미리보기가있는 간단한 편집 가능한 스 니펫이 있습니다.
div { display: flex; }
div + div {flex-direction: column; }
<div>Mime type: <label><input type="radio" onchange="t.onkeyup()" id="x" checked name="mime"> application/xhtml+xml</label>
<label><input type="radio" onchange="t.onkeyup()" name="mime"> text/html</label></div>
<div><textarea id="t" rows="4"
onkeyup="i.src='data:'+(x.checked?'application/xhtml+xml':'text/html')+','+encodeURIComponent(t.value)"
><?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
[<!ENTITY x "true XHTML">]>
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<p>
<span id="greet" swapto="Hello">Hell, NO :(</span> &x;.
<script src="data:text/javascript,(g=document.getElementById('greet')).innerText=g.getAttribute('swapto')" />
Nice to meet you!
<!--
Previous text node and all further content falls into SCRIPT element content in text/html mode, so is not rendered. Because no end script tag is found, no script runs in text/html
-->
</p>
</body>
</html></textarea>
<iframe id="i" height="80"></iframe>
<script>t.onkeyup()</script>
</div>
Hello, true XHTML. Nice to meet you!
아래 텍스트 영역을 볼 수 있습니다.
사용할 수없는 브라우저의 경우 텍스트 영역의 내용을 복사하고 확장자 가 .xhtml
(또는 .xht
) 인 파일로 저장할 수 있습니다 ( 이 힌트는 Alek에게 감사드립니다 ).
간단히 현대적인 대답은 태그가 필수 방식으로 표시되어 있기 때문입니다.
태그 생략 없음, 시작 태그와 끝 태그는 모두 필수입니다.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script