javascript - 컴포넌트 - webcomponent template




자체 폐쇄 스크립트 태그가 작동하지 않는 이유는 무엇입니까? (8)

브라우저가 올바르게 인식하지 못하는 이유는 무엇입니까?

<script src="foobar.js" /> <!-- self-closing script tag -->

이것 만 인식됩니다 :

<script src="foobar.js"></script>

이것이 XHTML 지원의 개념을 깬 것인가?

참고 :이 문장은 적어도 모든 IE (6-8 베타 2)에 대해 정확합니다.


SCRIPT TAG가 VOID ELEMENT가 아니기 때문입니다.

HTML 문서에서 - VOID ELEMENTS "닫는 태그"를 전혀 필요로 하지 않습니다 !

xhtml 에서는 모든 것이 Generic이므로 종료 태그가 필요 합니다 . br, 간단한 줄 바꿈, <br></br> 또는 그 약식 <br /> 합니다.

그러나 스크립트 요소는 무효 또는 매개 변수 요소가 아닙니다. 스크립트 태그 는 다른 무엇보다 먼저 데이터 설명 선언이 아닌 브라우저 명령이기 때문에 매개 변수 요소는 무효입니다.

원칙적으로 "종료 태그"와 같은 의미 론적 종료 명령은 후속 태그에 의해 의미가 끝날 수없는 명령 처리에만 필요합니다. 예를 들면 :

<H1> 의미론은 다음의 <P> 의해 종료 될 수 없다. 왜냐하면 이전의 H1 명령어 세트를 오버라이드 (override)하기 위해 자신 만의 의미를 지니고 있지 않기 때문이다. 스트림 을 새로운 단락 줄로 나눌 수는 있지만 현재 글꼴 크기 및 스타일 줄 높이 가 스트림 을 따라가는 것, 즉 H1에서 누출되는 것을 "충분히 강력하게"강요하지 않습니다 (P에 포함되어 있지 않기 때문에). ).

이것이 "/"(종결) 신호 방식이 발명 된 방법 및 이유입니다.

< /> 와 같은 일반적인 no-description 종료 태그는 < /> <H1>Title< /> 과 같이 발생하는 캐스케이드를 한 번 떨어 뜨리면 충분할 것입니다. 그러나 <H1>Title< /> 항상 "Nesting" ", 스트림의 여러 중개 태깅 : 다른 캐스케이드로 감싸기 / 넘어 가기 전에 급류로 나눕니다. 결과적으로 < /> 와 같은 일반 종료자는 종료 할 속성의 대상을 결정할 수 없습니다. 예 : <b> 굵게 <i> 굵은 기울임 꼴 < /> 기울임 꼴 </> 표준. 의심 할 여지없이 우리의 의도를 제대로 파악하지 못할 것이며 대담한 대담한 itallic bold normal로 해석 할 것입니다.

이것은 래퍼, 즉 컨테이너 라는 개념 이 어떻게 탄생했는지입니다. (이 개념은 매우 유사하여 식별하기가 어렵고 때로는 같은 요소가 둘 다 가질 수 있습니다. <H1> 은 동시에 래퍼와 컨테이너입니다. 반면에 <B> 는 의미 론적 래퍼입니다. 우리는 평범하고 의미없는 컨테이너가 필요합니다. 그리고 물론 DIV 요소의 발명이 왔습니다.

DIV 요소는 실제로 2BR 컨테이너입니다. 물론 CSS가 나오자 전체 상황이 더 이상하지 않아서 많은 큰 결과와 큰 혼란을 낳았습니다 - 간접적으로!

CSS를 사용하면 새로 발명 된 DIV의 BR 동작 전후에 쉽게 기본 사전 설정을 무시할 수 있으므로 "아무 것도하지 않는 컨테이너"라고도합니다. 어느 것이 당연하지! DIV는 블록 요소이며 종료 신호 전후에 스트림의 행을 기본적으로 중단합니다. 곧 WEB는 DIV-itis 페이지로 고통 받기 시작했습니다. 그들 중 대부분은 여전히 ​​있습니다.

모든 HTML 태그의 기본 동작을 완전히 재정의하고 완전히 재정의 할 수있는 기능을 갖춘 CSS가 나오고 어떻게 든 HTML 존재의 모든 의미를 혼란스럽게하고 흐리게 처리합니다 ...

갑자기 모든 HTML 태그가 쓸데없는 것처럼 보이게되었고, 훼손되었고, 원래의 모든 의미, 정체성 및 목적이 제거되었습니다. 어떻게 든 그들은 더 이상 필요 없다는 인상을 얻을 수 있습니다. 말하기 : 단일 컨테이너 - 래퍼 태그는 모든 데이터 표현에 충분합니다. 필요한 속성을 추가하기 만하면됩니다. 대신 의미있는 태그를 사용하지 않는 것이 좋습니다. 가서 태그 이름을 작성하고 나머지는 CSS로 귀찮게합니다.

이것은 xhtml이 태어난 방법이고 물론 커다란 무뚝뚝하고 새로운 사람들과 무엇이 무엇인지에 대한 왜곡 된 시각으로 그토록 소중하게 지불되었으며 그 모든 목적은 무엇입니까? W3C는 월드 와이드 웹에서 무엇이 잘못 되었습니까, 동지로 갔습니까? !!

HTML의 목적은 인간 수신자에게 의미있는 데이터를 스트리밍 하는 것입니다.

정보 전달.

공식적인 부분은 오직 정보 전달의 명확성을 돕기위한 것입니다. xhtml은 정보를 조금이라도 고려하지 않습니다. - 그 정보는 절대적으로 부적합합니다.

이 문제에서 가장 중요한 것은 xhtml이 확장 된 HTML의 단순한 버전이 아니라 xhtml이 완전히 다른 짐승임을 알고 이해할 수 있다는 것입니다. 근거; 그러므로 그들을 분리시켜 두는 것이 현명하다.


'true XHTML', 'faux XHTML'및 HTML과 서버에서 보낸 MIME 유형의 중요성에 대한 차이점은 이미 이미 잘 설명 되어 있습니다 . 지금 바로 사용해보고 싶다면 가능한 브라우저 용 자동 닫기 스크립트 태그를 포함한 실시간 미리보기가있는 간단한 편집 가능한 스 니펫이 있습니다.

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! 볼 수 Hello, true XHTML. Nice to meet you! Hello, true XHTML. Nice to meet you! 텍스트 영역 아래에.

불가능한 브라우저의 경우 텍스트 영역의 내용을 복사하여 .xhtml (또는 .xht ) 확장명을 가진 파일로 저장할 수 있습니다 ( 이 힌트는 Alek에게 감사드립니다 ).


Internet Explorer 8 및 이전 버전에서는 XHTML 구문 분석을 지원하지 않습니다. XML 선언 및 / 또는 XHTML doctype을 사용하더라도 오래된 IE는 여전히 문서를 일반 HTML로 구문 분석합니다. 일반 HTML에서는 자체 닫는 구문이 지원되지 않습니다. 후행 슬래시는 무시됩니다. 명시 적 종료 태그를 사용해야합니다.

Internet Explorer 9 이상과 같은 XHTML 구문 분석을 지원하는 브라우저조차도 XML 콘텐츠 유형으로 문서를 제공하지 않는 한 문서를 HTML로 파싱합니다. 그러나이 경우 오래된 IE는 문서를 전혀 표시하지 않습니다!


Internet Explorer 8 이상에서는 XHTML 인 application/xhtml+xml 대해 적절한 MIME 형식을 지원하지 않습니다. XHTML을 text/html 제공하는 경우 Internet Explorer의 이전 버전에 필요한 기능이 없으면 HTML 4.01로 해석됩니다. 닫는 태그를 생략 할 수있는 모든 요소에 대해서만 짧은 구문을 사용할 수 있습니다. HTML 4.01 사양을 참조하십시오.

XML '짧은 형식'은 /라는 속성으로 해석되며, 이는 등호가 없으므로 암시 적 값 "/"을 갖는 것으로 해석됩니다. 이것은 HTML 4.01에서 명백히 틀린 말입니다. 선언되지 않은 속성은 허용되지 않지만 브라우저는 무시합니다.

IE9 이상에서는 application/xhtml+xml 사용 하는 XHTML 5를 지원 합니다.


XML 및 XHTML과 달리 HTML에는 자체 닫는 구문에 대한 지식이 없습니다. XHTML을 HTML로 해석하는 브라우저는 / 문자가 태그가 자동으로 닫히는 것을 나타냄을 알지 못합니다. 대신 빈 속성처럼 해석하고 파서는 태그가 여전히 '열려 있음'이라고 생각합니다.

<script defer><script defer="defer"> 로 취급 되듯이 <script /><script /="/"> 로 취급됩니다.


script 태그에 인라인 코드가 포함될 수 있고 HTML이 속성의 존재 여부에 따라 해당 기능을 설정하거나 해제 할만큼 스마트하지 않기 때문에 자체 닫기 스크립트 태그가 작동하지 않습니다.

반면 HTML은 외부 리소스에 대한 참조를 포함하는 훌륭한 태그 인 <link> 태그를 가지고 있으며 자체 닫을 수 있습니다. 스타일 시트, RSS 및 Atom 피드, 정식 URI 및 기타 모든 기능을 포함하기 위해 이미 사용되었습니다. JavaScript가 아닌 이유는 무엇입니까?

script 태그를 self enclosed하기를 원한다면 내가 말했던 것처럼 할 수는 없지만 똑똑한 것은 아니지만 대안이있다. self closing link 태그를 사용하고 자바 스크립트에 텍스트 / 자바 스크립트 및 rel 스크립트 유형을 지정하여 링크 할 수 있습니다.

<link type="text/javascript" rel ="script" href="/path/tp/javascript" />

다른 사람들은 "방법"과 인용 된 스펙에 대답했습니다. 다음은 많은 시간 동안 버그 보고서와 메일 링리스트를 파헤친 후 " <script/> 없는 이유"에 대한 실제 이야기입니다.

HTML 4

HTML 4는 SGML 기반으로합니다.

SGML은 <B>text</> , <B/text/ , 또는 <OL<LI>item</LI</OL> 과 같은 일부 shorttags 가지고 있습니다. XML은 첫 번째 양식을 취하고 엔딩을 ">"로 재정의 (SGML은 유연)하여 <BR/> 됩니다.

그러나 HTML은 redfine하지 않으므로 <SCRIPT/> <SCRIPT>> <SCRIPT/> 의미 해야합니다 .
(예, '>'는 콘텐츠의 일부 여야하며 태그는 아직 닫히지 않았습니다 .)

분명히 이것은 XHTML과 호환되지 않으며 많은 사이트 깨뜨릴 것입니다 (브라우저가 성숙해 지기까지는이 점을 염두에 두어야 할 것 입니다). 따라서 단 태그를 구현 한 사람은 아무도 없으며 사양에서는이를 권고합니다 .

실제로 '작동중인'자체 태그는 기술적으로 부적합한 파서에 선택적 끝 태그가있는 태그이며 실제로 유효하지 않습니다. W3C는 HTML-compatible 되도록 XHTML로 전환하는 데 도움 이되는 해킹생각해 냈습니다 .

그리고 <script> 의 끝 태그는 선택 사항아닙니다 .

"자동 종료"태그는 HTML 4의 해킹이며 의미가 없습니다.

HTML 5

HTML5에는 5 가지 유형의 태그가 있으며 '무효'및 '외부'태그 만 자체 폐쇄 될 수 있습니다 .

<script> 는 무효가 아니기 때문에 (내용이 있을 수 있음) MathML이나 SVG와 같이 외국어가 아니기 때문에 <script> 는 사용 방법에 관계없이 자체 닫을 수 없습니다.

하지만 왜? 그들은 그것을 외국인으로 간주 할 수없고, 특별한 경우를 만들거나, 뭔가를 할 수는 없습니까?

HTML 5는 HTML 4 및 XHTML 1의 구현backward-compatible 을 목표로합니다. SGML 또는 XML을 기반으로하지 않습니다. 구문은 주로 구현을 문서화하고 통합하는 것에 관련됩니다. (이것은 <hr/> html <hr/> html <hr/>유효 하지 않은 HTML4이지만 유효 HTML5 인 이유입니다.)

자체 마감 (self-closing) <script> 는 구현이 다른 경우에 사용되는 태그 중 하나입니다. 이전 에는 Chrome, Safari 및 Opera 에서 작동했습니다 . 내 지식으로는 Internet Explorer 나 Firefox에서는 작동하지 않습니다.

이것은 HTML5가 드래프트 될 때 토론 되었고 browser compatibility breaks 때문에 거절당했습니다. 스크립트 태그를 자동 닫기하는 웹 페이지는 이전 브라우저에서 제대로 렌더링되지 않을 수 있습니다. 다른 제안 이 있었지만 호환성 문제를 해결할 수는 없습니다.

초안이 릴리스 된 후 WebKit은 파서가 일치하도록 업데이트했습니다.

HTML 5에서는 HTML 4 및 XHTML 1과의 역방향 호환성 때문에 자체 종료 <script> 가 발생하지 않습니다.

XHTML 1 / XHTML 5

XHTML로 실제로 사용될 때, <script/> 는 정말로 닫혀있다.

사양 에서 HTML로 제공 될 때 작동 해야 한다고 말하면서 :

XHTML Documents ...는 대부분의 HTML 브라우저와 호환되므로 인터넷 미디어 유형 "text / html"[RFC2854]로 레이블 될 수 있습니다.

그래서, 무슨 일이 있었 니?

사람들 은 모질라 에게 지정된 컨텐트 헤더 ( 컨텐트 스니핑 ( content sniffing ))에 관계없이 FirefoxXHTML 과 일치하는 문서를 구문 분석 하도록 허용했습니다 . 이것은 자기 닫는 스크립트를 허용했을 것이며, 웹 호스팅 업체가 올바른 헤더를 제공하기에 충분히 성숙하지 않았기 때문에 콘텐츠 스니핑 이 필요 했습니다. IE는 잘했다 .

첫 번째 브라우저 전쟁 이 IE 6으로 끝나지 않았다면 XHTML도 목록에 있었을 것입니다. 그러나 그것은 끝났다. 그리고 IE 6 XHTML에 문제 가 있습니다. 실제로 IE 올바른 MIME 유형 지원하지 않았기 때문에 IE XHTML에 text/html 을 사용하도록 강요했습니다. IE 전체 시장 점유율 을 10 년 동안 유지했기 때문입니다.

또한 콘텐츠 스니핑 실제로 좋지 않을 수 있으며 사람들은 중단해야한다고 말하고 있습니다 .

마지막으로, W3C 가 XHTML을 스니핑 할 수있는 것은 아닙니다 . 문서는 HTML과 XHTML 및 Content-Type 규칙입니다. 사람들은 "우리의 사양을 따르고" 실용적인 것을 무시하고 회사에 서 있다고 말할 수 있습니다. 나중에 XHTML 버전으로 continued 된 실수.

어쨌든,이 결정은 Firefox 에 대한 문제해결했습니다 . 크롬 이 태어나 기 까지 7 년이 걸렸습니다. 다른 중요한 브라우저는 없었습니다. 그래서 결정되었습니다.

doctype 만 지정하면 다음 사양 때문에 XML 구문 분석이 트리거되지 않습니다.


위의 사람들은 이미이 문제에 대해 거의 설명해 주었지만 일을 분명히 할 수있는 한 가지는 HTML 문서에서 '&lt;br/>' 등의 모든 시간을 사용하지만 이러한 위치에있는 '/' 는 기본적으로 무시되고, XMLHTML 로 파싱 가능한 것을 만들려고 할 때만 사용됩니다. 예를 들어 '&lt;p/>foo&lt;/p>' 하면 정규 문단이 표시됩니다.





xhtml