크로스 브라우저 개발 경험 요약 (i) HTML 태깅

다른 브라우저마다 태그와 스타일 시트에 대한 해석이 다르기 때문에 HTML 파일의 표준 문서 유형을 정의해야하므로 통합 된 HTML 표준에 따라 다른 브라우저가 페이지를 구문 분석하고 렌더링 할 수 있습니다.

! DocType는 지정된 문서가 준수하는 DTD를 다음과 같이 선언합니다.

<! doctype html public- // w3c // dtd html 4.0 transitional // en http://www.w3.org/tr/html4/loose.dtd>

<! doctype html public- // w3c // dtd xhtml 1.0 transitional // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd>

레이아웃에 테이블을 사용하면 코드 중복성이 쉽게 중복 될 수 있으며 <div> </div> 쓰기와 비교하여 많은 코드가 있습니다. 또한 테이블은 모든 요소를 ​​다운로드하여 표시해야하며 해당 웹 페이지도 느리게 열립니다.

표준화 된 페이지 구조를 사용해야합니다 : Div+CSS. 이 레이아웃 방법은 코드, 빠른 페이지 탐색 속도 및 유연한 페이지 레이아웃이 간단합니다. 개정시, 프로그램을 변경하지 않고 페이지 릴레이를 실현하기 위해 CSS 스타일 만 변경하면 웹 사이트 개정 비용이 줄어 듭니다.

때로는 페이지에 여분의 공백이있을 때 마진이 재설정 되어도 피할 수 없습니다. 현재 페이지 요소 레이블이 닫히고 다음과 같은 페어링이 없을 수 있습니다.

<div class = 외부>

<양식 이름 = testform>

<div class = 내부>

<입력 이름 = 제목 유형 = 텍스트 />

</form>

</div>

</div>

테이블에 정의 된 tbody 요소가 표시되지 않더라도 브라우저는 TR 노드의 상위 노드가 자동으로 추가 된 기본 TBody 노드라고 생각합니다. JavaScript를 사용하여 TR 노드를 조작 할 때 가능한 오해를 피하기 위해 다음과 같은 수동으로 하나를 추가하는 것이 좋습니다.

<테이블 id = mytable>

<tbody id = mytablebody>

<tr>

<td>

</td>

</tr>

</tbody>

</테이블>

때로는 요소에 묶인 일부 이벤트가 IE 브라우저에서 반응하지만 사파리 또는 기타 브라우저에서는 응답하지 않습니다. 현재 이벤트 바인딩 방법의 정확성을 확인해야합니다. 고급 이벤트의 바인딩은 IE 및 기타 브라우저와 다른 두 세트의 JavaScript를 작성해야하며 간단한 이벤트 모델은 바인딩 이벤트 이름의 경우에주의를 기울여야합니다. 좋다:

<입력 유형 = 텍스트 이름 = keywordsearch onfocus = clearValue ()>

소문자는 여기서 사용해야하며 표준 쓰기 방법은 추가 된 태그 폐쇄 기호가 표시됩니다.

<입력 유형 = 텍스트 이름 = keywordsearch onfocus = clearValue () />

<cript> 태그의 언어 및 유형 속성

<cript> 태그의 언어 속성은 스크립트 언어 버전을 정의하는 데 사용됩니다. 올바른 할당은 <cript>와 같아야합니다. 브라우저 (주로 IE)에게 버전 1.2의 JavaScript 구문을 사용하여 설명하려면; 유형 속성은 스크립트 유형을 정의하는 데 사용되며 W3C의 표준 속성이며 소문자 속성을 사용하는 것은 표준과 일치하는 표준 실습입니다. 하위 버전의 JavaScript 언어 (대부분의 브라우저에서 지원되는 현재 JavaScript 버전)로 설명하도록 브라우저에 알릴 필요가 없다면 일반적으로 언어 속성을 정의 할 필요는 없지만 유형 속성을 정의해야합니다. 따라서 코드는 있어야합니다

IE의 마우스에 호버링 할 때 두 속성 ALT 및 제목의 값이 공구 팁 형태로 표시되지만 여전히 두 가지 사이에는 차이가 있습니다. ALT는 이미지가 표시되지 않을 때 대체 디스플레이이며, 마우스에 배치 될 때 제목은 프롬프트입니다.

이전 버전의 HTML에서 모든 속성에 값을 할당 해야하는 것은 아닙니다. 확인란을 나타낼 때 <입력 확인>의 쓰기 방법이 인식됩니다. 그러나 XHTML 표준에 따르면 이러한 문법은 엄격한 XML 형식이 아닙니다. HTML 표준의 개발 추세에 부합하기 위해 속성 할당 및 태그 폐쇄에주의하십시오. 다음과 같이 작성되었습니다.

이전 기사와 같은 이유로 <select> 옵션에서 <pection> 태그의 선택된 속성에도 값이 할당되어야합니다.

<옵션 선택 = 선택 />

XHTML 표준에 따르면 HTML 태그는 스타일 제어보다는 컨텐츠 표현에 중점을 두어야하며 스타일은 CSS에 맡겨야합니다. 따라서 <em> 태그와 <i> 태그와 같은 일부 오래된 태그와 속성은 이탤릭체로 이탤릭체로 표시되지만 단순히 스타일의 이름을 따서 명명 된 <i> 태그는 이미 버려진 표준이며 <em> 태그로 대체됩니다. 마찬가지로, <Img> 태그의 align = absmiddle 속성은 이미지가 수직 중심이며 인접한 텍스트와 정렬되어 있음을 나타냅니다. 이것은 또한 스타일을 나타내는 속성입니다. 두 스타일 컨트롤의 상호 영향을 피하기 위해 이미지의 정렬 스타일을 제어하기 위해이 속성 대신 CSS를 사용해야합니다.

iframe을 사용하는 경우, IE의 Porder = 0을 설정하여 iframe의 테두리를 표시 할 수는 없지만 표준 제어 프레임 창 경계 속성은 프레임 버더입니다. IE 외부의 다른 브라우저에서 프레임 경계를 숨기려면 프레임 보더 = 0을 설정해야합니다.

<iframe framborder = 0 />

<Img> 태그의 정렬 속성과 같은이 속성은 컨텐츠 및 제어 스타일을 나타내는 HTML의 책임을 극복하는 속성입니다. 단위 사이의 공간을 지정합니다. 실제적인 관점에서 볼 때 CellPadding을 지정하지 않고 CSS를 사용하여 세포의 내부 마진을 제어하는 ​​것이 가장 좋습니다.

nowrap은 컨텐츠가 자동으로 랩되지 않음을 나타내는 속성이지만 위의 속성과 마찬가지로 스타일을 제어하는 ​​속성입니다. HTML 4.01에서는 <td> 태그의 bgcolor, 높이, 너비 및 Nowrap을 선호하지 않습니다. XHTML 1.0 Strict Dtd에서 <td> 태그의 bgcolor, 높이, 너비 및 Nowrap은 지원되지 않습니다.