종료 태그 제거 인터럽트 HTML

묘사

HTML 에피소드는 다음과 같습니다.

<md-list-item ui-sref=".app-config">
  <md-icon md-font-icon="mdi-settings"></md-icon>
  <p translate>Configure</p>
</md-list-item>

[email protected]을 사용하여 축소하면 다음이 됩니다.

<md-list-item ui-sref=.app-config>
  <md-icon md-font-icon=mdi-settings></md-icon>
  <p translate>Configure
</md-list-item>

이것은 내가 테스트한 브라우저 (Chrome와 Firefox) 에서 매우 무작위로 나타난다.가장 뚜렷한 것은 축소판의 표현이 미간판과 다르다는 것이다.[email protected]을 사용했을 때, 모든 것이 여전히 정상이었다.
나는 빠른 조사를 했는데, 나는 0574066이 원흉이라고 생각한다.분명히 여기서 닫힌 라벨 을 제거하는 것은 안전하지 않다.

토론 #1

AFAICT, <md-list-item>은 HTML의 일부 아닙니까?
어쨌든 일반 XML 문서를 축소할 때는 이 문제를 방지하기 위해 removeOptionalTags을 닫을 수 있습니다.

토론 #2

AngularJS 명령어(https://material.angularjs.org/latest/api/directive/mdListItem).
나는 사용자 정의 요소가 HTML의 일부라고 생각한다.그렇지 않으면 AngularJS와 같은 일부 유행하는 프레임워크가 HTML과 호환되지 않습니다.
나는 확실히 <head>과 <body>을 삭제하고 싶다.토론 #셋부터https://html.spec.whatwg.org/multipage/syntax.html#optional- 레이블

A p element's end tag may be omitted if the p element is immediately followed by an address, article, aside, blockquote, details, div, dl, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, main, menu, nav, ol, p, pre, section, table, or ul element, or if there is no more content in the parent element and the parent element is an HTML element that is not an a, audio, del, ins, map, noscript, or video element.

그래서 당연히 을 삭제할 수 있고, 그 뒤에 </md-list-item>이 뒤따른다면.IE11의 DOM 트리를 검사한 후 테스트를 진행했는데 예상대로 이 추가되었습니다. 이 경우 브라우저의 행동은 무엇입니까?

토론 #4

(당신도 적어도 collapseWhitespace:true을 적용했다고 가정합니다. 은 삭제되지 않기 때문입니다)

토론 #5

ui-sref 명령은 실행할 때 <a> 표시를 추가했습니다.나는 이것이 AngularJS의 HTML 해상도에 있는 버그처럼 보인다고 생각한다.
오늘 늦어도 나는 한층 더 조사할 것이다.
나는 collapseWhitespace이 어떻게 연관되어 있는지 모르겠지만, 나는 그것을 사용하고 있다.

토론 #6

에는 collapseWhitespace이 없다. 위의 예에서 의 뒤에는 </md-list-item>이 아닌 공백이 뒤따르기 때문에 삭제를 막을 수 있다.
흥미로운 것은 AngularJS가 브라우저의 내장 기능에 의존하지 않고 HTML을 직접 해석하는 것이다.이 일을 조사해 주셔서 감사합니다!

토론 #7

나는 removeOptionalTags을 비 HTML 표기 방면에서 더욱 보수적으로 하는 복구 프로그램을 제출했다.
예상대로 작동하는지 확인하려면 online version을 시도하십시오.윙크:

토론 #8

감사합니다!이 온라인 버전은 예상한 대로 유효할 것 같다.
브라우저가 AngularJS가 아니라 이 문제의 원인인 것 같다는 간단한 예를 만들었습니다.다음 내용을 포함하는 파일을 열고 Firefox와 Chrome를 사용하여 검사함으로써 이 점을 검증합니다.

<!doctype html>
<html ng-app="myApp">
  <body>
    <h2>Regular</h2>
    <div ng-include="'template.html'"></div>
    <h2>Minified</h2>
    <div ng-include="'minified.html'"></div>
    <h2>No closing tag</h2>
    <div ng-include="'minified-no-closing-p.html'"></div>
    <h2>Browser generated</h2>
    <div id="browser-generated"></div>
    <script type="text/ng-template" id="template.html">
      <custom>
        <p>Regular 1</p>
      </custom>
      <custom>
        <p>Regular 2</p>
      </custom>
      <custom>
        <p>Regular 3</p>
      </custom>
    </script>
    <script type="text/ng-template" id="minified.html">
      <custom><p>Minified 1</p></custom><custom><p>Minified 2</p></custom><custom><p>Minified 3</p></custom>
    </script>
    <script type="text/ng-template" id="minified-no-closing-p.html">
      <custom><p>Minified no closing p 1</custom><custom><p>Minified no closing p 2</custom><custom><p>Minified no closing p 3</custom>
    </script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
    <script>
      angular.module('myApp', []);
      document.getElementById('browser-generated').innerHTML = '<custom><p>Minified no closing p 1</custom><custom><p>Minified no closing p 2</custom><custom><p>Minified no closing p 3</custom>';
    </script>
  </body>
</html>

모든 custom 표기가 divs로 바뀌었을 때, 그것은 좋은 것 같다.벌써 고쳐줘서 고마워요!:미소 고양이:

Reference

이 문제에 관하여(종료 태그 제거 인터럽트 HTML), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://github.com/kangax/html-minifier/issues/503

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)