찾다

집  >  기사  >  웹 프론트엔드  >  HTML5의 혁신과 Structure_html5 튜토리얼 기술의 아름다움

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

WBOY
WBOY원래의
2016-05-16 15:51:041199검색
머리말
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는 최신 웹사이트의 일반적인 의미를 반영하기 위해 일련의 새로운 태그와 해당 속성을 제공합니다. 진실을 실천하세요. 예시를 작성해 보겠습니다.



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


코드는 다음과 같습니다.

웹사이트 제목

웹사이트 부제

; /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의 혁신

      < /header>

      기사 내용 세부정보


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

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


      Figure label
      는 이미지 설명입니다.


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


      코드 복사코드는 다음과 같습니다. 다음과 같습니다:
      <메뉴>
    • HTML 5

    • JavaScript< /li>



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

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

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

      미스터씽크)
    성명：
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
    이전 기사：패키지 download_html5 튜토리얼 기술이 포함된 HTML 5 태그, 속성, 이벤트 및 브라우저 호환성 치트 시트다음 기사：패키지 download_html5 튜토리얼 기술이 포함된 HTML 5 태그, 속성, 이벤트 및 브라우저 호환성 치트 시트

    관련 기사

    더보기