저는 거의 3년 동안 프론트엔드 개발을 해왔습니다. 오늘은 웹 프론트엔드 개발에 있어서 개인적인 경험 중 일부에 대해 이야기하고 싶습니다. (물론 그것은 모두 저의 개인적인 이해입니다. 해당 내용이 있으면 포함해 주시고 정정해 주십시오. 내가 말하는 것은 부적절하거나 부정확합니다.) 여기서 웹 표준부터 시작하겠습니다.
WEB 표준이란 무엇입니까?
ㅎㅎ WEB 표준이라고 하는데 여기서는 주로 XHTML1.1과 CSS2.1의 몇 가지 경험을 요약해보겠습니다. WEB은 너무 많은 콘텐츠를 다루기 때문에 "WEB 표준"은 HTML4.0, XHTML1.1, CSS2.1, XML1.0, RSS2.0, ECMAScript1.1 및 DOM1을 포함한 일련의 표준에 대한 일반적인 이름입니다. 등. 그래서 여기서 나는 웹 표준이 우리가 DIV+CSS라고 부르는 표준이 아니라는 점을 지적하고 싶습니다.
위에서 방금 언급한 - DIV+CSS, 하하, 여기서 설명하겠습니다. 실제로는 잘못된 것입니다. DIV+CSS(개인적 이해)의 정확한 용어는 다음과 같습니다. W3C에서 권장하는 WEB 표준의 XHTML1.1을 CSS2.0 스타일 시트와 결합하여 페이지를 생성하려면 DIV는 XHTML 태그를 참조하고 CSS 디스플레이는 참조해야 합니다. CSS 스타일 시트.
WEB 표준을 사용한 개발의 이점
그렇다면 W3C에서는 왜 이런 페이지 제작 방식을 권장하는 걸까요? 기존 TABLE 레이아웃과 비교하여 WEB 표준 개발(개인의 이해)을 활용했을 때의 장점을 간단히 살펴볼까요?
1. 운영 비용을 절약하고 돈을 절약하십시오!
하하, 돈을 절약하는 데 도움이 될 수 있는 것에 관심이 있으신가요? 물론 나는 매우 관심이 있습니다. 우리의 WEB 표준 제작 방식이 어떻게 달성되는지 살펴보시겠습니까?
웹 표준을 사용하여 표현을 매우 형식적으로 분리할 수 있습니다. XHTML을 사용하여 (데이터)를 표현하고 CSS를 사용하여 양식(페이지 요소 표시)을 제어합니다. 잘 작성된 페이지에서 XHTML 코드에는 기본적으로 사용자가 보고 싶어하는 데이터와 기타 장식적인 요소가 포함되어 있으며 모두 CSS로 제어됩니다. 이렇게 하면 (XHTML) 페이지의 크기가 크게 줄어들어 대역폭 비용이 절감됩니다. 이를 줄이는 방법은 YAHOO의 홈페이지가 1K로 작고 1,000,000명이 함께 방문한다고 상상할 수 있습니다. 얼마나 많은 대역폭이 절약됩니까? 그리고 대역폭을 더욱 완벽하게 활용할 수 있습니다.
우리의 CSS는 모든 페이지 요소의 스타일을 제어합니다. 이제 웹사이트의 전체 스타일을 변경하려면 CSS 파일을 수정하는 데 몇 분만 투자하면 됩니다. 유지관리 비용도 많이 낮아져서 돈도 많이 절약됐죠? 또한, 이 페이지는 훨씬 더 빨리 열릴 것입니다. 내부 정보가 귀하에게 매우 유용하지 않으면 기본적으로 기다릴 시간이 많지 않습니다.
2. 더욱 사용자 친화적이며 더 많은 사용자를 확보할 수 있는 기회가 있습니다.
이제 사용자 친화성에 대해 이야기해 보겠습니다. 먼저 사용자를 카테고리로 분류하고 싶습니다.
카테고리 1: 일반 사용자(당사 웹사이트를 방문하는 모든 사람)
카테고리 2: 검색 엔진;
WEB 표준을 사용하여 개발된 페이지는 구조가 명확하고 페이지 크기가 작으며 브라우저 호환성이 좋습니다. 일반 사용자가 접속하면 페이지가 빠르게 열리고, 사용자가 어떤 브라우저를 사용하더라도 정상적으로 페이지에 접속(표시)할 수 있으며, 페이지 구조가 명확하고, 원하는 데이터를 쉽게 찾아볼 수 있다.
검색 엔진의 경우 WEB 표준을 사용하여 개발된 좋은 페이지가 SEO에 최적화되어 있습니다. 방문하기가 매우 쉽고 페이지의 제목(H1~H6 태그)이 어디에 있는지, 제목(p)이 어디에 있는지 쉽게 알 수 있습니다. 태그), 단락에서 강조할 내용이 어디에 있는지(강한 태그) 등을 쉽게 분석할 수 있습니다. 우리 모두 알고 있듯이 SEO가 좋은 사이트는 검색 엔진에 의해 색인될 가능성이 더 높습니다. 이는 또한 더 많은 일반 사용자가 귀하의 웹 사이트를 방문하여 더 많은 사용자를 귀하의 사이트로 끌어들이게 된다는 것을 의미합니다.
많은 돈을 절약하고 업무 효율성을 향상시키는 데 도움이 될 수 있습니다. 동시에 페이지 탐색 속도를 향상시키고, 사용자 친화적이며, 홍보에 비용을 들이지 않고도 더 많은 사용자를 유치할 수 있습니다. 당신이 그것을 사용할 것이라고 생각합니까? 하하, 이것이 우리 W3C가 개방형 웹사이트에 WEB 표준을 사용하도록 권장하는 이유이기도 합니다. 이 기술은 우리 사용자들에게도 인정받았으니 이제는 WEB 표준을 배워야 합니다. ^-^!
ㅎㅎ 기본강의 복습은 마쳤고, 이제 본격적으로 XHTML과 CSS 스킬에 대한 이야기를 시작하겠습니다.
합리적인 레이아웃
일부 친구들은 왜 처음부터 합리적인 레이아웃에 대해 이야기하기 시작합니까? 하하, 앞서 몇 가지 지식 포인트를 언급했습니다. "명확한 구조, SEO 최적화, 작은 페이지 크기 및 XHTML 코드에는 기본적으로 모든 사용자 요구 사항이 포함되어 있습니다. 데이터”. 이러한 것들은 합리적인 레이아웃의 결과입니다. 그리고 개인적으로 우리가 WEB 표준을 사용하여 생산하는 모든 것은 이 지식 지점에서 시작된다고 생각하므로 먼저 이 주제에 대해 이야기하겠습니다.
그러면 모든 사람들이 어떤 종류의 페이지가 합리적인 레이아웃으로 간주되는지 묻기 시작할 것입니다. 이것은 좋은 질문입니다. 이것은 우리가 처음 웹 표준을 배우기 시작할 때 가장 자주 묻는 질문 중 하나입니다. 나는 종종 이 질문으로 인해 어려움을 겪었습니다. 여기서는 합리적인 레이아웃에 대한 나의 이해에 대해 이야기하겠습니다. .
적절하게 배치된 페이지가 달성해야 하는 요소에 대해 이야기하기 전에 예를 사용하여 설명하는 것이 더 직관적일 것입니다. 먼저 이 사진을 살펴보겠습니다.
http://www.yaohaixiao.com/samples/myblog/index.htm
네, 기사 상세 페이지입니다. 좌우 열 레이아웃은 없습니다만, 여기서 주목하고 싶은 부분은 플로팅 요소에 대한 자세한 내용은 이후 글에서 소개하겠습니다. 좋습니다. 방금 주제로 돌아가서 모두가 이 페이지를 보았습니다.