내 html 입력이 유효한 마크 업이 아닙니다. 도와주세요

StackOverflow https://stackoverflow.com/questions/1175802

  •  19-09-2019
  •  | 
  •  

문제

내 웹 사이트에는 다음 코드가 있습니다.

<input type="image" src="images/btn.png" alt="Submit" border="0" height="25" width="102" />

많은 HTML 유효성 검사기 중 하나를 통해 웹 사이트를 실행하면 다음을 알려주는 메시지가 표시됩니다.

  • 국경
  • 키
  • 너비

입력 요소의 잘못된 속성입니다.

그러나 Yslow와 Google Pagespeed는 HTML의 속도를 높이기 위해 항상 이미지 크기를 포함해야한다고 알려줍니다.

HTML 유효하고 Yslow 권장 사항을 따르는 동안 이미지 제출 버튼을 사용하는 다른 방법은 무엇입니까?

도움이 되었습니까?

해결책

CSS를 사용하여 동일한 목표를 달성하십시오. 인라인 CSS :

<input type="image" src="images/btn.png" alt="Submit"
       style="border:0; width:102px; height:25px;" />

또는 CSS 파일의 스타일을 사용하여 더 나은 방법 :

HTML :

<input type="image" src="images/btn.png" alt="Submit"
       class="somethingMeaningful" />

CSS :

input.somethingMeaningful { border: 0; width: 102px; height: 25px; }

Yslow 또는 Google Pagespeed가 여전히 불만을 제기하면 무시하십시오.

다른 팁

검증 및 구문 분석 속도는 두 가지 다른 것입니다.이 세 가지 도구는 자체적으로 초점을 맞추고 있습니다. 유효성 검사기에 대한 경고와 관련하여, 그 태그에 그러한 종류의 정보를 포함하는 사양이없고 HTML 대신 CSS로 추가 할 수 있기 때문입니다.

input{ 
    border: none; 
    height:25px; 
    width: 102px; 
}

HTML 유효성 검사기가 스타일링 값이 설정되어 있는지 확인하기 때문에 CSS 외부 파일을 통해이를 추가해야합니다.

검증의 배후에있는 아이디어는 페이지를 CS없이 볼 수 있어야한다는 것입니다. 그러나 Google 페이지 속도의 아이디어는 페이지를 가장 빠르게로드하는 것입니다.

CSS를 사용 하여이 선언을 추가하면 모두 유효성 검사기를 통과 할 수 있어야합니다. 실제 이미지 파일의 크기를 올바르게 크기를 조정 한 경우 로딩 시간에 적합해야합니다.

border, height 그리고 width W3C 사양의 일부가 아닙니다. http://www.w3schools.com/tags/tag_input.asp 따라서 유효하지 않습니다. 브라우저가 치수를 계산할 필요가 없기 때문에 HTML 파싱 속도를 높이는 데 도움이되지 않지만 이미지 렌더링.

이 게인은 매우 작습니다 (로드하는 이미지 수에 따라 다름). 따라서 대부분 무시할 수 있습니다. CSS를 사용하여 이미지의 실제 치수 이외의 것으로 정의하려는 경우 크기를 제공 할 수 있습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top