HTML5 혁신 : 구조의 아름다움

저자：Eve Cole 업데이트 시간：2025-03-27 16:00:04

HTML 5는 혁명과 같으며 Web2.0 시대에 본격적으로 진행됩니다.

HTML 5는 무엇입니까? 내 이해에 따르면, HTML 5의 혁신은 시맨틱 레이블 시스템, 단순화되고 풍부한 미디어 지원, 마법의 로컬 데이터 저장 기술, 플러그인이 필요하지 않은 풍부한 애니메이션 (캔버스)으로 요약 될 수 있습니다. 요컨대, HTML 5는 컴퓨터 상호 작용과 휴먼 네트워크 상호 작용을보다 편안하게 만들고 사용자에게 적합합니다. 풍부한 미디어 응용 프로그램에 대한 이전의 지원 부족 과이 스토리지는 더 이상 브라우저에 대한 통증이 아닙니다. HTML 5 혁명의 원래 의도는 콘텐츠 플랫폼에서 표준화 된 응용 프로그램 플랫폼으로 웹을 홍보하고 각 플랫폼 캠프의 표준을 통합하는 것입니다.

이 기사는 HTML 5의 혁신 중 하나 인 더 명확하고 간결한 구조를 설명합니다.

처음부터 시작하십시오

표준 XHTML 헤더 코드는 다음과 같습니다.

<! doctype html public- // w3c // dtd xhtml 1.0 transitional // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd>

<헤드>

</head>

기억할 수 있습니까? Rote로 암기 하시겠습니까? 물론! 기계적 복사 및 붙여 넣기 만 있으면됩니다.

표준 HTML 5 헤더의 방법을 살펴 보겠습니다.

<! doctype html>

어느 것이 더 복잡하고 어느 것이 간단한 지 말할 필요가 없습니다. 예, HTML 5 헤더는 매우 간단하여 쉽게 기억할 수 있습니다! 또한 마지막 각도 브래킷 이전의 경우, 인용문 및 백 슬래시를 무시할 수 있습니다.

왜 그렇게 느슨 할 수 있습니까? 실제로 XHTML이 텍스트/html로 전송되면 브라우저도 잘 구문 분석 할 수 있으며 브라우저는 코드의 구문에 신경 쓰지 않습니다. 따라서 HTML 5는 형이상학 적이며 원래 표준의 일부를 깨뜨릴 수 있지만 브라우저에서 여전히 잘 수행 할 수 있습니다.

물론, 팀 지원 및 후속 유지 보수의 편의를 위해, 우리는 여전히 다음과 같은 글쓰기 스타일을 통합해야합니다.

<! doctype html>

<html>

<헤드>

...

</head>

<body>

...

</body>

</html>

또한 HTML 5는 현재 모든 브라우저에서 지원되지 않지만 100 바이트 이상을 절약 할 수있는이 헤더 (일일 PV 레벨이 1 백만 이상인 경우에는 많은 트래픽을 절약 할 수 있음). 브라우저 해상도 모드에 대해 조사한 경우 DocType를 정의하지 않고 이상한 모드를 트리거하고 <! DocType HTML> 브라우저가 정의되는 한 특정 유형의 DTD를 지정하지 않고 표준 모드로 페이지를 구문 분석 할 수 있습니다.

새로운 시맨틱 라벨링 시스템

시맨틱 코딩은 자격을 갖춘 프론트 엔드 개발자에게 필요한 기술이지만 웹 페이지가 점점 더 풍부 해짐에 따라 원래 XHTML 태그를 사용하여 Desmanate를 사용하여 그렇게 할 수는 없습니다. 하나님은 말씀하셨습니다. 빛이 있어야합니다! 그러면 빛이 있습니다. 따라서 HTML 5는 현대 웹 사이트의 전형적인 의미를 반영하기 위해 일련의 새로운 태그와 해당 속성을 제공합니다. 진실을 만들기 위해 연습하십시오. 예를 들어 봅시다 :

</div>

<ul>

<li> JavaScript </li>

</ul>

</div>

<!-// 헤더 엔드->

<p> 이것은 새로운 HTML 5 구조 태그에 대한 기사입니다. </p>

</div>

<p> 이것은 또한 새로운 HTML 5 구조 태그에 대한 기사입니다. </p>

</div>

<!-// 왼쪽 끝->

</div>

<!-// 사이드 엔드->

페이지 하단

</div>

<!-// 바닥 글래->

위는 헤더, 기사 디스플레이 영역, 오른쪽 열 및 하단으로 구성된 간단한 블로그 페이지 파트 HTML입니다. 인코딩은 깔끔하고 HTML 5에서도 잘 수행 할 수있는 XHTML의 의미론을 준수합니다. 그러나 브라우저의 경우, 이는 상자가 해당 블록을 정의하는 것을 이해할 수있는 태그가 아닌 무게를 구별하지 않는 코드입니다. 예를 들어, 표준 브라우저 (예 : Firefox, Chrome 및 IE의 IE 버전)에는 고객이 페이지 탐색으로 직접 점프 할 수있는 단축키 키가 있지만 문제는 모든 블록이 DIV에 의해 정의되고 DIV의 ID 값이 개발자가 결정되므로 브라우저는 어떤 블록이 네비게이션 링크가 있는지 블록이되어야한다는 것입니다. 새로운 HTML 5 태그의 출현은이 단점을 보완합니다. 그런 다음 위의 코드가 HTML 5로 대체되면 다음과 같이 쓸 수 있습니다.

</hgroup>

<avi>

<ul>

<li> JavaScript </li>

</ul>

</nav>

</헤더>

<기사>

<p> 이것은 새로운 HTML 5 구조 태그에 대한 기사입니다. </p>

</article>

<기사>

<p> 이것은 또한 새로운 HTML 5 구조 태그에 대한 기사입니다. </p>

</article>

</div>

<따로>

</제쳐두고>

<FUTER>

페이지 하단

</바닥다>

HTML 페이지 구조는 너무 아름답 기 때문에 의견없이 볼 수 있습니다. 브라우저의 경우 해당 블록을 찾을 때 더 이상 손실되지 않습니다.

HTML로 요소를 구성하는 방법 5 새로운 태그 :

위의 예를 통해 구조를위한 새로운 HTML 5 태그의 혁신을 이해하지만 실제 사용으로 전환 할 때 어떻게 적절하게 사용할 수 있습니까? 나는 이것이 또한 많은 HTML 5 학습자들이 물어보고 싶어하는 질문이라고 생각합니다. XHTML 시맨틱과 마찬가지로 HTML 5 시맨틱 태그의 사용도 따라야합니다. 각 태그에는 특정한 의미가 있으며 의미론은 적절한 위치에서 적절한 태그를 사용하여 사람과 기계를 더 잘 만들 수 있도록하는 것을 의미합니다 (브라우저가 검색 엔진으로 이해 될 수 있으므로 기계가 이해 될 수 있습니다). 예를 들어, 헤더 태그는 일반적으로 페이지의 첫 번째 블록 요소입니다 (헤더 태그는 기사 블록의 제목과 같은 유형의 헤더 요소에서도 사용할 수 있음)이며, 여기에는 페이지의 주제 정보가 포함되어 있습니다. NAV 태그는 일반적으로 내비게이션 정보를 래핑하는 데 사용됩니다. 바닥 글은 일반적으로 페이지의 하단 정보를 래핑하는 데 사용됩니다. 등.

아래는 HTML 5 매뉴얼에 나열된 구조 클래스에 대한 일반적인 새 태그에 대한 시맨틱 설명 및 사용 지침입니다.

<Header> 태그

수동 정의 : 섹션 또는 문서의 헤더를 정의합니다.

사용 지침 : 일반적으로 페이지 헤더를 포함하는 데 사용되며 기사 헤더와 같은 다른 지역 헤더에도 사용할 수 있습니다.

</hgroup>

</헤더>

<hgroup> 태그

수동 정의 : 웹 페이지 또는 섹션의 제목을 결합하는 데 사용됩니다.

사용 지침 : 기사의 제목 및 자막과 같은 타이틀 클래스의 조합에 사용됩니다.

<H1> 이것은 HTML 5 구조 태그를 소개하는 기사 </h1>입니다

</hgroup>

<av> 태그

수동 정의 : 내비게이션 링크를 정의하는 부분을 정의합니다.

사용 지침 : 페이지 정의를위한 내비게이션 섹션 :

<avi>

<ul>

<li> JavaScript </li>

</ul>

</nav>

<따로> 태그

기사 이외의 내용을 정의합니다. 따로 내용은 기사의 내용과 관련이 있어야합니다.

사용 지침 : 섹션 컨텐츠에 사용되면, 새 섹션은 문서 스트림에서 시작되며, 일반적으로 기사 내용과 관련된 사이드 바에서 사용됩니다.

<따로>

</제쳐두고>

<섹션> 태그

수동 정의 : 문서의 섹션을 정의합니다. 예를 들어, 챕터, 헤더, 바닥 글 또는 문서의 다른 부분.

사용 지침 : 섹션에 사용 된 콘텐츠는 문서 스트림에서 새 섹션을 시작합니다.

<섹션>

<H1> 섹션은 무엇입니까? </h1>

<기사>

...

</article>

</섹션>

<FUTER> 태그

수동 정의 : 섹션 또는 문서의 바닥 글을 정의합니다. 일반적으로 제작자 이름, 문서 작성 날짜 및/또는 연락처 정보가 포함됩니다.

사용 지침 : 일반적으로 전체 페이지를 일반 바닥으로 래핑하는 데 사용되며 기사의 맨 아래와 같은 다른 영역의 맨 아래에서도 사용할 수 있습니다.

<FUTER>

</바닥다>

<기사> 태그

수동 정의 : 외부 컨텐츠 정의. 예를 들어, 외부 뉴스 제공 업체, 블로그 또는 포럼의 새 기사. 또는 다른 외부 소스에서 나옵니다.

사용 지침 : 이름에서 알 수 있듯이 일반적으로 기사 블록에 사용됩니다.

<기사>

<H1> 이것은 HTML 5 구조 태그를 소개하는 기사 </h1>입니다

</hgroup>

</헤더>

</article>

<fid> 태그

수동 정의 : 요소를 결합하는 데 사용됩니다.

사용 지침 : 주로 그림과 그림 설명을 결합하는 데 사용됩니다.

<그림>

<Figcaption> 이것은 그림의 설명 정보입니다 </figcaption>

</그림>

<메뉴> 태그

수동 정의 : 메뉴 목록을 정의합니다. 양식 컨트롤을 나열하려면이 태그를 사용하십시오.

사용 안내서 : 메뉴 클래스 블록에서 사용되며 메뉴 목록 또는 메뉴 옵션을 정의하는 데 사용됩니다.

<메뉴>

<li> JavaScript </li>

</메뉴>

HTML 5의 다른 새로운 태그는 하나씩 설명되지 않습니다. 매뉴얼을 직접 확인하십시오.

실제로 이러한 것들은 XHTML의 Div, H1, INPU 및 기타 태그와 같습니다. 일상 생활에서 더 많은 연습을하는 한 자유롭게 사용하기 쉽습니다.

호환성에 대해

프론트 엔드에 공부하고주의를 기울이는 사람이라면 새로운 HTML 5 태그가 Taobao의 페이지 구조에 사용되었다는 것을 알아야합니다. 따라서 제가 말하고 싶은 것은 시도하려고 감히 호환성이 문제가되지 않는다는 것입니다. 온라인에서 많은 호환성 방법이 있습니다 (이 기사는 구조에 관한 것입니다, ha ~).

나중에 이야기

모든 새로운 기술에는 적응 프로세스가 필요합니다. 훌륭한 웹 프론트 엔드 개발자가 될 준비가 되었다면 최신 프론트 엔드 기술을 계속 시도하고 수용해야합니다.

Sun Wen은 한 번 문명의 행복을 만들고 싶다면 문명의 고통을 겪어야한다고 말했습니다. 이것은 인류의 혁명에 해당되며, HTML 5의 혁명도 마찬가지입니다. IE의 점진적인 감소로 인해 주요 브라우저 제조업체는 전쟁 상태 기간에 들어가서 서로 경쟁 할 수있었습니다. 개발자의 경우, 주요 브라우저 제조업체가 경쟁 후 플레이어를 나누기보다는 가능한 한 동일한 표준을 따라야하기를 희망합니다. 모든 종류의 사용자에게 동일한 응용 프로그램의 효율적이고 완벽한 프레젠테이션이 우리의 궁극적 인 목표이기 때문입니다.

이러한 방식 으로이 기사는 페이지의 DocType에서 시작하여 새로운 HTML 5 태그를 사용하여보다 시맨틱 한 페이지 구조를 구축 한 다음 페이지 구조와 관련된 새로운 태그를 설명합니다. 모든 사람이 HTML 5의 구조적 새로운 태그에 대한 새로운 이해를 가지고 있다고 생각합니다. 관심이 있으시면 IDE를 열고 HTML 5의 새로운 태그로 구축 된 코드를 작성한 다음 CSS를 사용하여 Grand Blueprint를 설명하십시오!