크로스 브라우저 개발 경험 요약 (1) HTML 마크업_HTML/Xhtml_웹페이지 제작

为页面添加DOCTYPE
由于不同浏览器对标签,样式表的解释不尽相同,所以需要为html文件定义一个标准的文档类型,使不同浏览器尽量按照一个统一的html标准来解析渲染页面。

!DOCTYPE 声明指定文档遵从的 DTD，如：






标准HTML标签的正确使用
尽量使用div+css布局,不用table做布局。
使用table做布局容易造成代码冗余，相对

编写来说，代码繁多。并且，table需要将元素都下载后进行显示，相应的网页打开速度也较慢。

应该使用标准化的页面结构：DIV+CSS。这种布局方式代码简洁，页面浏览速度较快，页面布局灵活，改版时只需改CSS样式即可实现页面重新布局，而不用改动程序，从而降低了网站改版的成本。

注意标签的闭合关系,尤其是在form标签中嵌套div等其他标签时。
有的时候页面上会出现多余的空白，即使重新设置了margin也无法避免，这个时候有可能是页面元素标签闭合出现了不配对的情况，如：

IE를 포함한 모든 브라우저에서 올바르게 사용할 수 있도록 테이블을 정의할 때 tbody 요소를 사용하세요.
테이블에 정의된 tbody 요소가 표시되지 않더라도 브라우저는 이를 tr로 간주합니다. 노드의 상위 노드는 자동으로 추가된 기본 tbody 노드입니다. 자바스크립트를 사용하여 tr 노드를 조작할 때 발생할 수 있는 오해를 피하기 위해 다음과 같이 수동으로 추가하는 것이 좋습니다.



;/tr>
tbody>


태그 및 속성의 대문자 사용에 주의하세요

요소는 IE 브라우저에서는 응답하지만 Safari나 다른 브라우저에서는 응답하지 않습니다. 이때 이벤트 바인딩 방식의 정확성을 확인해야 하며, 고급 이벤트 바인딩의 경우 IE와 다른 브라우저를 구분하기 위해 두 가지 자바스크립트를 작성해야 하며, 간단한 이벤트 모델의 경우에는 주의가 필요합니다. 바인딩된 이벤트 이름입니다. 예:

여기서는 소문자 onfocus를 사용해야 하며 레이블 닫기 기호를 추가해야 합니다. 표시되는 표준 작성 방법입니다.






속성 값에 주의하세요. 라벨 설정

<script> 태그의 언어 및 유형 속성 <br /> <script> 태그의 언어 속성은 스크립트 언어 버전을 정의하는 데 사용됩니다. 브라우저(주로 IE)는 JavaScript 구문 1.2 버전을 사용하여 w3c의 표준 속성인 스크립트 유형을 정의하는 데 사용되며 소문자 속성을 사용합니다. 표준 관행. 낮은 버전의 JavaScript 언어(현재 대부분의 브라우저에서 지원하는 JavaScript 버전은 1.5)에 따라 해석하도록 브라우저에 지시해야 하는 특별한 상황이 없는 경우 일반적으로 언어 속성을 정의할 필요가 없지만 type 속성을 정의해야 합니다. 따라서 코드의 <strong><br /><SCRIPT Language="JavaScript">를 <script><br /> <br /><br /><strong>< a> tag 및 title 속성 <br /> IE 아래에 마우스를 올렸을 때 alt와 title 두 속성의 값이 툴팁 형태로 표시되지만 둘 사이에는 여전히 차이가 있습니다. alt는 그림이 표시되지 않을 때의 대체 표시이고, 제목은 마우스를 위에 놓을 때 나타나는 프롬프트입니다. <br /><strong><input> 태그의 확인 및 읽기 전용 속성 <br /> <br />HTML의 초기 버전에서는 선택된 확인을 표시할 때 모든 속성에 값을 할당해야 하는 것이 필수는 아닙니다. 상자에서는 <입력 확인>이 허용됩니다. 그러나 XHTML 표준에 따르면 이러한 문법은 엄격한 XML 형식이 아니며 HTML 표준의 개발 추세에 맞게 속성 할당 및 태그 닫힘에 주의해야 합니다. <br /><strong>< input selected="checked" /><br /> <br /><br /><strong><input readonly="readonly" /> <br /><br /> <strong><option> 태그 선택 속성 <br /><br />이전과 같은 이유로 <select> 값: <strong>< option selected="selected " /> <br /><br /><br /><img alt="크로스 브라우저 개발 경험 요약 (1) HTML 마크업_HTML/Xhtml_웹페이지 제작" > 태그의 align="absmiddle" 속성 <br /> <br /> , HTML 태그는 스타일 제어보다는 콘텐츠 표시에 중점을 두어야 하며, 스타일은 CSS로 조정해야 합니다. 따라서 일부 오래된 태그와 속성은 폐기되었습니다. 예를 들어 <em> 태그는 태그 내용의 중국어 텍스트를 기울임꼴로 표시합니다. 단순히 스타일의 이름을 따서 명명된 표준은 더 이상 사용되지 않으며 강조를 나타내는 <em> 태그로 대체됩니다. 마찬가지로 <img alt="크로스 브라우저 개발 경험 요약 (1) HTML 마크업_HTML/Xhtml_웹페이지 제작" > 태그의 align="absmiddle" 속성은 이미지와 인접한 텍스트가 중앙에 수직으로 정렬됨을 나타냅니다. 이 속성은 CSS가 이 속성 대신 사용되어야 함을 나타냅니다. 스타일 컨트롤의 두 가지 상호 작용을 피하기 위해 이미지의 정렬 스타일을 제어합니다. <br /><strong><iframe> 태그의 frameborder 속성<br /> <br />iframe을 사용할 때 IE에서 border="0"을 설정하면 iframe 테두리가 표시되지 않지만 표준은 프레임 창 테두리를 제어하는 ​​속성은 Frameborder="0"으로 설정하여 IE 이외의 브라우저에서 프레임 테두리를 숨겨야 합니다. <br /><strong><iframeframeborder="0" /> <br /><table> 태그의 cellpadding 속성<br /> <br />이 속성은 <img alt="크로스 브라우저 개발 경험 요약 (1) HTML 마크업_HTML/Xhtml_웹페이지 제작" > 태그의 정렬 속성과 마찬가지로 콘텐츠를 표시하는 HTML 자체의 역할을 무시하고 단위 사이의 공간을 지정하는 속성이기도 합니다. 실용적인 관점에서는 cellpadding을 지정하지 않고 CSS를 사용하여 셀의 padding을 제어하는 ​​것이 좋습니다. <br /><br /><strong><td>태그의 nowrap 속성 <br /><br />nowrap은 내용이 자동으로 줄 바꿈되지 않음을 나타내는 속성이지만 위 속성과 마찬가지로 스타일을 제어하는 ​​속성입니다. HTML 4.01에서는 <td> 태그의 "bgcolor", "height", "width" 및 "nowrap" 태그가 더 이상 사용되지 않습니다. XHTML 1.0 Strict DTD에서는 <td> 태그의 "bgcolor", "height", "width" 및 "nowrap"이 지원되지 않습니다. </script>