찾다

집  >  기사  >  웹 프론트엔드  >  크로스 브라우저 개발 경험 요약 (1) HTML 마크업_HTML/Xhtml_웹페이지 제작

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

WBOY
WBOY원래의
2016-05-16 16:41:581304검색

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

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






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

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

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

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









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



;/tr>



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

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

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






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