웹페이지 표준화_CSS/HTML

웹 표준이 점점 더 부각되고 있는 요즘에는 웹 사이트를 구축할 때 표준을 준수하고 W3C의 XHTML 및 CSS 검증을 통과하는 것이 중요합니다. 그렇다면 표준에 맞는 웹 사이트를 만들려면 어떻게 해야 할까요? 내 BLOG 재구성 및 제작 OSdev 리소스 프로세스에 대한 경험이 있습니다^_^.

Web Designer로 이동하여 웹 표준에 대한 기사를 읽어보세요

w3.org가 더 권위가 있지만 중국어를 모국어로 하는 사람들에게는 이것이 더 이해하기 쉽습니다. :) 개인적으로 w3.org에 가서 화면을 가득 채운 전자 텍스트를 읽는 것보다 더 편안합니다. . 여기에서 XTHML, DIV+CSS 레이아웃, CSS 기술 등에 관한 많은 기사를 찾을 수 있습니다. 표준에 맞는 웹사이트를 만드는 방법을 단계별로 소개하는 웹마스터 Ajie가 작성한 "단계별" 튜토리얼도 있습니다.

테이블을 버리고 div+css 레이아웃을 사용하세요

표준에 맞는 웹페이지를 디자인할 때 가장 먼저 하는 일인 것 같습니다 :) DIV+CSS 레이아웃도 트렌드입니다. DIV+CSS 레이아웃을 사용하려면 w3cn.org의 기사: CSS 기본 레이아웃 16가지 예, 일반적인 3행 2열 중심 높이 적응형 레이아웃을 참조하세요.

태그 닫기

과거에는 아마도 img, p 등의 태그를 닫는 문제에 주의를 기울이지 않았을 것입니다. 이러한 태그를 사용할 때 올바르게 닫지 않고 시작 부분만 사용하는 경우가 많았습니다. 일반적으로 img를 다음과 같이 사용합니다.

그러나 XHTML에서는 이러한 상황이 허용되지 않으므로 꺼야 합니다.

또한 단락 기호

는

로 직접 사용되었지만 XHTML에서는 허용되지 않는 단락 끝에

를 추가할 생각은 하지 못했습니다.

태그를 올바르게 중첩하세요

브라우저의 내결함성 덕분에

를 사용하는 등 규칙을 따르지 않는 웹페이지를 작성하더라도 올바른 표시 효과를 얻을 수 있습니다.

샘플

문제 없습니다. 다시 말하지만 이는 XHTML에서는 허용되지 않습니다. XHTML은 XML에서 비롯되며 XML은 구조적이어야 하므로 태그를 중첩할 때 인터리빙 없이 레이어별로 중첩되어야 합니다.

문자셋을 올바르게 설정하세요

별것 아닌 것 같지만, 문자셋을 설정하는 것이 브라우저의 문서 파싱에 더 도움이 됩니다.

사진 정렬

XHTML에서 정렬 속성은 왼쪽, 가운데, 오른쪽 또는 위쪽, 중간, 아래쪽의 세 가지 값 중 하나만 될 수 있으며 이미지와 텍스트가 완전히 중앙에 위치해야 하는 경우가 많습니다. 즉, absmiddle을 사용하세요. XHTML을 사용한 후에는 이 속성이 손실되어야 합니다. 해결책은 무엇입니까? 잘 모르겠지만 Web Designer에 이 문제를 언급한 글이 있습니다. 블로그를 재구성할 때 이미지 정렬을 상단으로 설정했는데 디스플레이 효과는 괜찮았습니다.

은 링크의 &

을 처리합니다.

동적 웹사이트에서 매개변수를 전달하기 위해 GET 메소드를 사용할 때 매개변수가 여러 개인 경우 각 매개변수를 연결하는 데 &가 사용됩니다. 그러나 XHTML에서는 &가 있으면 다음이 엔터티임을 의미합니다. 하지만 누구도 매개변수 이름이 nbsp, lt, gt여야 한다고 생각해서는 안 됩니다. XHTML에서는 엔터티가 아닌 모든 &를 &로 변환해야 한다고 규정합니다. 변환이 수행되지 않으면 W3C 확인 중에 오류가 보고되고 엔터티를 찾을 수 없습니다.

사실 저는 개인적으로 표준에 따라 웹사이트를 만드는 것이 전통적인 방법에 따라 웹사이트를 만드는 것보다 훨씬 쉽다고 생각합니다. 구조와 내용이 분리되어 있기 때문에 표시를 변경할 때 전체 페이지를 다시 실행할 필요가 없습니다. CSS에서 스타일을 다시 작성하면 됩니다. 그리고 향후 수정에도 편리합니다. 게다가 Fdream의 FBS처럼 새로고침 없이 스킨을 바꿀 수 있다는 점은 좋은 것 같아요~~