HTML5의 혁신과 Structure_html5 튜토리얼 기술의 아름다움

머리말
HTML 5는 포스트 웹 2.0 시대에 격렬하게 진행되고 있는 혁명과도 같다.
HTML 5가 무엇인지 여기서 자세히 설명할 필요는 없습니다. 제가 이해한 HTML 5의 혁신은 명확한 의미를 지닌 태그 시스템, 복잡성을 단순화한 리치 미디어 지원, 마법 같은 로컬 데이터 저장 기술, 플러그인이 필요 없는 리치 애니메이션(캔버스)으로 요약할 수 있습니다. , 강력한 API 지원. 즉, HTML 5는 인간과 컴퓨터의 상호 작용을 더욱 편안하고 사용자 친화적으로 만듭니다. 이전에 리치 미디어 애플리케이션과 기본 스토리지에 대한 지원 부족이 더 이상 브라우저의 골칫거리가 아닙니다. 웹을 콘텐츠 플랫폼에서 표준화된 애플리케이션 플랫폼으로 밀어내고 다양한 플랫폼 진영의 표준을 통일하는 것이 HTML 5 혁명의 본래 의도입니다. 이 글에서는 몇 가지 아이디어를 소개하고 HTML 5의 혁신 중 하나인 의미론적 구조를 더욱 명확하고 간결하게 만드는 것에 대해 설명하겠습니다.

"head"로 시작 표준 XHTML 헤더 코드는 다음과 같아야 합니다.

코드 복사코드는 다음과 같습니다.

기억하시나요? 암기할 것인가? 물론 그렇지 않습니다! 기계적으로 복사하여 붙여넣기만 하면 됩니다.
표준 HTML 5 헤더의 모습을 살펴보세요.

코드 복사코드는 다음과 같습니다.

간단하다기보다 복잡해서 굳이 말할 필요가 없습니다. 예, HTML 5 헤더는 매우 간단하고 기억하기 쉽습니다! 또한 마지막 꺾쇠 괄호 앞의 대소문자, 따옴표 및 백슬래시도 무시할 수 있습니다.
왜 이렇게 느슨할 수 있나요? 실제로 XHTML을 text/html로 보내면 브라우저는 이를 잘 파싱할 수 있고 브라우저는 코드의 구문에 신경 쓰지 않습니다. 따라서 HTML 5는 형이상학적이지만 일부 원래 표준을 깨뜨릴 수 있지만 브라우저에서는 여전히 잘 작동합니다.
물론 팀 지원 및 후속 유지 관리의 편의를 위해 다음과 같이 원하는 작성 스타일을 통일해야 합니다.

코드 복사 코드는 다음과 같습니다.

charset=" gb2312" />
...

...
;


또한 HTML 5는 현재 모든 브라우저에서 지원되지는 않지만 100바이트 이상을 절약할 수 있습니다(일일 PV가 100만 개 이상인 사이트의 경우 많은 트래픽을 절약할 수 있습니다). ) 헤드가 이제 완벽하게 호환됩니다. 브라우저 구문 분석 모드를 조사한 경우 doctype이 정의되지 않은 경우 페이지가 이상한 모드를 실행한다는 것을 알아야 합니다. 그러나 이 정의되어 있는 한 브라우저는 표준 모드에서 페이지를 구문 분석할 수 있습니다. 특정 유형의 DTD를 지정할 필요가 없습니다.

새로운 의미 체계 태그 시스템

의미 체계 코딩은 자격을 갖춘 프런트 엔드 개발자에게 필수적인 기술입니다. 그러나 웹 페이지가 점점 더 풍부해짐에 따라 원본 xhtml 태그만 비의미화에 사용됩니다. 그것은 분명히 그의 능력 밖의 일이었습니다. 하나님께서 “빛이 있으라!”고 말씀하시니 빛이 있었습니다. 따라서 HTML 5는 최신 웹사이트의 일반적인 의미를 반영하기 위해 일련의 새로운 태그와 해당 속성을 제공합니다. 진실을 실천하세요. 예시를 작성해 보겠습니다.



코드 복사

코드는 다음과 같습니다.

웹사이트 제목

자막

HTML 5
< ;li>CSS

--//header end-->

HTML에 관한 기사입니다. 5의 새로운 구조 태그.

HTML 5의 새로운 구조 태그에 대한 도움말입니다.

저자 소개

Mr.Think는 웹 프론트엔드 기술을 전공하는 평범한 사람입니다.

🎜 >

위는 헤더, 기사 표시 영역으로 구성된 간단한 블로그 페이지 부분 HTML입니다. , 오른쪽 사이드바와 하단으로 구성됩니다. 코딩은 깔끔하고 XHTML의 의미를 준수합니다. HTML 5에서도 잘 작동합니다. 그러나 브라우저에게 이는 기계가 해당 블록을 정의하기 위한 의미를 이해할 수 있게 해주는 태그라기보다는 가중치를 구분하지 않는 코드 조각입니다. 예를 들어 표준 브라우저(예: Firefox, Chrome 및 IE 새 버전)에는 고객이 페이지 탐색으로 직접 이동할 수 있는 단축키가 있지만 문제는 모든 블록이 DIV로 정의되고 ID가 DIV 값은 개발자가 결정하므로 브라우저는 어떤 블록이 탐색 링크가 되어야 하는지 알 수 없습니다. HTML 5의 새로운 태그가 등장하면서 이러한 단점이 보완되었습니다. 그러면 위 코드를 HTML 5에서는 다음과 같이 작성할 수 있습니다.





코드 복사

코드는 다음과 같습니다.

웹사이트 제목

웹사이트 부제

; /hgroup>

CSS

JavaScript

🎜 >

HTML 5의 새로운 구조 태그에 관한 글입니다.

HTML 5의 새로운 구조 태그에 대한 글입니다.

저자 소개

.웹 프론트 엔드 기술에 중점을 두는 일반인을 생각해 보십시오.

웹페이지 하단

HTML의 페이지 구조는 이렇습니다. 주석 없이도 아름다움을 한눈에 볼 수 있습니다. 브라우저의 경우 해당 블록을 찾는 것이 더 이상 손실되지 않습니다.
HTML 5 새 태그를 사용하여 요소를 구성하는 방법
위의 예를 통해 HTML 5 새 태그의 구조적 혁신을 이해하지만 실제 사용에 있어서 적절하게 사용하는 방법은 무엇입니까? 이는 많은 HTML 5 학습자들이 묻고 싶어하는 질문이기도 하다고 생각합니다. XHTML 의미 체계와 마찬가지로 HTML 5 의미 체계 태그의 사용도 따라야 합니다. 각 태그에는 특정 의미가 있으며 의미 체계를 통해 적절한 위치에 적절한 태그를 사용하여 사람과 기계를 더 잘 이해할 수 있습니다. 브라우저나 검색엔진)을 통해 한눈에 이해할 수 있습니다. 예를 들어, 헤더 태그는 일반적으로 페이지의 주제 정보를 포함하는 페이지의 첫 번째 블록 요소입니다(헤더 태그는 기사 블록의 제목과 같은 유형 헤더 요소에도 사용될 수 있음). 일반적으로 탐색 정보를 래핑하는 데 사용됩니다. 바닥글은 일반적으로 페이지 하단 등의 정보를 래핑하는 데 사용됩니다.
다음은 HTML 5 매뉴얼을 참고하여 나열한 구조 클래스 중 일반적으로 사용되는 새로운 태그에 대한 의미 설명 및 사용 지침입니다.

태그
수동 설명: 헤더를 정의합니다. 섹션이나 문서.
사용 지침: 일반적으로 페이지 헤더를 포함하는 데 사용되지만 기사 헤더와 같은 다른 영역 헤더에도 사용할 수 있습니다.





코드 복사


코드는 다음과 같습니다.

웹사이트 제목

웹사이트 자막

태그

수동 설명: 웹페이지 또는 섹션 조합을 수정하는 데 사용됩니다. .
사용 지침: 기사 제목, 부제 등 제목 유형의 조합에 사용:

코드 복사 코드는 다음과 같습니다.

HTML 5 구조 태그

HTML의 혁신을 소개하는 글입니다. 5

태그
수동 설명: 탐색 링크 부분을 정의합니다.

사용 지침: 페이지의 탐색 부분을 정의하는 데 사용됩니다.

코드 복사

코드는 다음과 같습니다. 다음:

HTML 5


CSS

JavaScript< /li>



태그
는 기사가 아닌 콘텐츠를 정의합니다. Aside의 내용은 기사의 내용과 관련이 있어야 합니다.
사용 가이드: 섹션화된 콘텐츠에 사용되며 일반적으로 기사 콘텐츠와 관련된 사이드바에 사용되는 문서 흐름에서 새 섹션을 시작합니다.





복사 code
코드는 다음과 같습니다.
저자 소개
Mr.Think는 웹 프론트엔드 기술에 주력하는 평범한 사람입니다.



태그
수동 설명: 문서에서 섹션을 정의합니다. 장, 머리글, 바닥글 또는 문서의 기타 부분 등입니다.
사용 지침: 섹션화된 콘텐츠에 사용되며 문서 흐름에서 새 섹션이 시작됩니다.





코드 복사

코드는 다음과 같습니다.

섹션이란 무엇인가요?

섹션 소개


섹션 소개
p>
...

일반적으로 작성자 이름, 문서 작성 날짜 및/또는 연락처 정보가 포함됩니다.
사용 지침: 일반적으로 전체 페이지의 공통 하단을 감싸는 데 사용되며 기사 하단 등 다른 영역의 하단에도 사용할 수 있습니다.






코드 복사


코드는 다음과 같습니다.

COPYRIGHT@Mr.Think
태그
수동 정의: 외부 콘텐츠를 정의합니다. 예를 들어 외부 뉴스 제공업체의 새 기사, 블로그의 텍스트, 포럼의 텍스트
등이 있습니다. 또는 다른 외부 소스의 콘텐츠.
사용 가이드: 이름에서 알 수 있듯이 일반적으로 기사 블록에 사용됩니다.





코드 복사


코드


HTML 5 구조 태그를 소개하는 글입니다

HTML 5의 혁신

2011.03.20
< /header>

기사 내용 세부정보




태그
설명서 설명: 요소를 결합하는 데 사용됩니다.
사용 가이드: 주로 그림과 그림 설명을 결합하는데 사용됩니다:



코드 복사

코드는 다음과 같습니다. :








는 이미지 설명입니다.





태그
매뉴얼 설명: 메뉴 목록을 정의합니다. 양식 컨트롤을 나열하려면 이 레이블을 사용하십시오.
사용 가이드: 메뉴 목록 또는 메뉴 옵션을 정의하기 위해 메뉴 블록에 사용됩니다.




코드 복사코드는 다음과 같습니다. 다음과 같습니다:

<메뉴>


HTML 5




JavaScript< /li>





HTML 5의 다른 새로운 태그는 하나씩 설명하지 않습니다.

사실 XHTML의 div, h1, inpu 및 기타 태그와 같은 태그는 연습을 많이 하면 쉽게 사용할 수 있습니다.
호환성에 대하여
프런트엔드에 관심을 갖고 공부하는 것을 좋아하는 사람이라면 타오바오의 페이지 구조에 HTML 5의 새로운 태그가 많이 사용되었다는 점을 아셔야 합니다. 그래서 제가 말씀드리고 싶은 것은, 과감하게 시도만 하면 호환성은 문제가 되지 않는다는 것입니다. 인터넷에는 호환 가능한 방법이 많이 있습니다(이 글은 구조에 관한 것입니다, 하~).

후기
모든 새로운 기술에는 적응의 과정이 필요합니다. 훌륭한 웹 프론트엔드 개발자가 될 준비가 되었다면 최신 프론트엔드 기술을 끊임없이 시도하고 받아들여야 합니다.
손문은 문명의 행복을 경험하려면 문명의 고통을 경험해야 한다고 말한 적이 있습니다. 이것이 인류의 혁명이고, HTML 5의 혁명도 마찬가지입니다. IE의 점진적인 쇠퇴로 인해 주요 브라우저 제조업체는 처음으로 전국시대에 돌입했고, 영웅들은 왕좌를 놓고 경쟁하고 있습니다. 개발자의 경우, 우리는 주요 브라우저 제조업체가 영웅 그룹이 경쟁한 후에 무너지는 대신 가능한 한 동일한 표준을 따르기를 기대합니다. 모든 유형의 사용자에게 동일한 애플리케이션을 효율적이고 완벽하게 제공하는 것이 우리의 궁극적인 목표이기 때문입니다.

이런 식으로 이 글은 페이지의 doctype부터 시작하여 HTML 5의 새로운 태그를 사용하여 보다 의미 있는 페이지 구조를 구축한 다음 페이지 구조와 관련된 몇 가지 새로운 태그를 설명합니다. 나는 모두가 HTML 5의 새로운 구조적 태그에 대해 새로운 이해를 갖고 있다고 믿습니다. 관심이 있다면 IDE를 열고 HTML 5 새 태그로 구축된 코드 조각을 작성한 다음 CSS를 사용하여 귀하의 장엄함을 묘사하십시오. (출처 :

미스터씽크)