> 웹 프론트엔드 > HTML 튜토리얼 > XHTML 입문 학습 튜토리얼: 간단한 웹 페이지 제작_HTML/Xhtml_웹 페이지 제작

XHTML 입문 학습 튜토리얼: 간단한 웹 페이지 제작_HTML/Xhtml_웹 페이지 제작

WBOY
풀어 주다: 2016-05-16 16:44:28
원래의
1754명이 탐색했습니다.

1분 만에 첫 번째 웹페이지 만들기:
간단한 웹페이지를 만들어 보겠습니다. 잠시만 기다려주세요. 이제 꺾쇠 괄호 ""와 그 안의 문자가 무엇인지 모르실 수도 있습니다. 걱정하지 마세요. 다음 튜토리얼에서 소개하겠습니다.
먼저 메모장을 실행하거나, 어디서나 새 텍스트 문서를 만들고 메모장에 다음 내용을 입력하세요.
인용 내용은 다음과 같습니다.


이 페이지의 제목은 바로 저입니다


이것이 나의 첫 번째 웹페이지입니다.




입력이 완료되면 파일명을 "index.html"로 지정하여 저장하세요. ("파일" -> "다른 이름으로 저장"을 클릭합니다. "파일 이름" 열에 "index.html"을 입력하고 "저장 유형" 열에서 "모든 파일"을 선택한 후 "저장 버튼"을 클릭합니다.)
저장 후 파일을 더블클릭하면 브라우저가 자동으로 웹페이지를 엽니다. 귀하의 웹 페이지가 이 페이지와 동일한지 확인하십시오. 동일하다면 비교적 간단한 첫 번째 웹 페이지를 성공적으로 완성한 것입니다.
이 페이지는 구문적으로는 XHTML 표준을 따르지만 완전한 W3C 호환 XHTML 웹 페이지로 사용하려면 일부 내용이 부족하다는 점에 유의하세요. 관련 내용은 후속 튜토리얼에서 소개하겠습니다. 이 페이지는 단지 기본적인 XHTML 지식을 설명하기 위한 것입니다.
기본 지식 설명
방금 만든 웹페이지는 로 시작하고 으로 끝나는데, 이는 각각 웹페이지 파일의 시작과 끝을 나타냅니다.
영어로 head는 머리, body는 몸을 뜻합니다. 웹 페이지의 두 부분 과 은 각각 웹 페이지의 "머리"와 "본문"을 나타냅니다. 아마도 우리 웹페이지의 "header"에 가 있다는 것을 눈치채셨을 것입니다. 제목이라는 단어는 제목을 의미하며, 웹페이지의 제목(제목)은 브라우저 위의 제목 표시줄에 표시됩니다. 웹페이지 본문, 즉 과 태그 사이의 내용이 브라우저에 본문 텍스트로 표시됩니다.
이 웹페이지는 매우 얇아서 머리와 본문에 내용이 거의 없습니다. 향후 튜토리얼에서는 웹 페이지의 콘텐츠를 점차적으로 풍부하게 만들 것입니다. 그러나 이제 개념을 기억하십시오. 웹 페이지의 헤드는 브라우저를 위해 작성되어 페이지에 표시되지 않지만 본문(본문)은 웹 사이트 사용자를 위해 작성되어 브라우저가 표시하는 내용입니다. . 콘텐츠.
신인의 XHTML 스푸핑 오류 예시
아래 두 가지 오류 예를 열어 살펴보세요. 해당 코드에는 매우 심각한 오류가 포함되어 있지만 브라우저는 이 두 페이지를 정확하게 표시합니다.
예시 1 - 몸은 머리에서 자랍니다


이 페이지의 제목은 바로 나입니다

이것이 나의 첫 번째 페이지입니다.






위의 웹 페이지를 보면 와 사이의 내용이 페이지에 정상적으로 표시됩니다. 그러나 그것은 몸을 머리에 두는 우스꽝스러운 실수였습니다.
예시 2 - 목 아래에 머리가 자랍니다




제가 이 페이지의 제목입니다

이것이 나의 첫 번째 웹 페이지입니다.




브라우저의 적응성은 정말 인상적입니다. 머리를 몸 안에 넣어도 인식할 수 있습니다. 제목 표시줄을 보면 제목이 완전히 정상적으로 표시됩니다.
알겠습니다. 실제로 적용할 때는 위와 같은 어리석은 실수를 하지 마세요. 이는 심각한 결과를 초래할 수 있습니다. 검색 엔진은 귀하의 웹사이트를 색인화하지 못할 수 있으며, 귀하의 웹사이트를 검색하기 위해 휴대폰이나 기타 모바일 장치를 사용하는 친구는 알 수 없는 오류를 겪을 수 있습니다. XHTML의 핵심 내용을 빠르게 살펴보겠습니다.
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿