HTML5 새로운 요소

HTML 새 요소

HTML5의 시맨틱 태그와 속성을 사용하면 개발자가 명확한 웹 페이지 레이아웃을 쉽게 구현할 수 있으며 CSS3 효과 렌더링과 결합되어 풍부하고 유연한 웹 페이지를 빠르게 만드는 것이 매우 편리합니다.

이번 HTML5 학습을 위한 새로운 태그 요소는 다음과 같습니다.

<header>는 페이지 또는 섹션의 헤드를 정의합니다. 섹션 꼬리

<nav>는 페이지 또는 섹션의 탐색 영역을 정의합니다.

<section> 🎜><article> 주요 텍스트 또는 전체 콘텐츠를 정의하세요.

<aside> 보충 또는 관련 콘텐츠를 정의하세요.

물론 이러한 태그를 배우는 가장 좋은 방법은 다음과 같습니다. 사용해 보세요. 쉽게 사용할 수 있는 기성 웹 페이지 레이아웃 템플릿이 많이 있지만, 초보자의 경우 간단한 페이지 레이아웃을 직접 구현하는 것이 절대적으로 필요합니다. 다음은 위 태그의 사용을 보여주는 간단한 페이지 레이아웃 예입니다.

예: 블로그 홈페이지 레이아웃 모방

매우 일반적인 블로그 페이지인 그림 2-1과 같은 웹 페이지 구조를 구현합니다: 헤드, 테일, 가로 탐색 바, 사이드 바 탐색 그리고 내용.

그림 2-1

그림 2-1에서 볼 수 있듯이 해당 태그가 구현된 영역에는 Header 등의 이름이 표시되어 있습니다.

페이지를 작성하기 전에 다음을 말해야 합니다. 페이지 요소는 HTML5로 구현되며 요소의 표시 효과는 CSS3로 렌더링됩니다. CSS3 코드는 HTML5와 동일한 파일에 배치될 수 있습니다. 코드이거나 HTML5 파일에서 참조되는 한 독립적인 파일일 수 있습니다. 각각 독립적인 파일인 것이 좋습니다.

1) 단일 책임 원칙을 준수합니다. HTML5 페이지는 요소 관리를 담당하고 CSS3 파일은 표시 효과 렌더링만 담당합니다. 해당 HTML5 파일의 서로 독립적이며 서로 교차하지 않습니다.

2) 페이지의 복잡성을 줄이고 유지 관리를 용이하게 합니다. 페이지의 요소 수가 많이 늘어날 때 요소와 요소의 표시 속성을 관리하면 가독성이 얼마나 나빠질지 상상해 보세요. 한 페이지를 동시에 유지 관리하는 것은 골치 아픈 일이 될 것입니다.

3) 브라우저 로딩 속도 향상: 2)의 또 다른 이점은 간단한 페이지가 자연스럽게 더 빨리 로딩된다는 점입니다.

물론 HTML5+CSS3을 하나의 파일에 넣는 것이 익숙하다면 이는 단지 제안일 뿐입니다.

그림 2-1을 구체적으로 구현해 보겠습니다.

1. HTML5 문서 명령문
사용하는 웹 페이지 작성 도구가 이미 HTML5 파일 형식을 지원하는 경우 다음 HTML5 템플릿을 생성해야 합니다.

<!DOCTYPE html>
  <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>Layout TEST</title>
 </head>
  <body>
 </body>
 </html>

당분간 웹페이지 작성 도구가 HTML5를 지원하지 않아도 상관없습니다. 이러한 코드를 직접 작성하는 것은 매우 간단합니다.
설명: 첫 번째 줄: <!DOCTYPE html>은 HTML5의 문서 유형 단순화로, 문서 유형의 역할: 유효성 검사기는 이를 사용하여 코드를 확인하는 데 사용할 규칙을 결정합니다. 브라우저는 표준 모드로 페이지를 렌더링합니다.
2. 헤더
<header> 태그 구현
<header id="page_header">
<h1>Header</h1>
</header>

참고: 1) 헤더는 h1, h2, h3 제목과 혼동되어서는 안 됩니다. <header>에는 회사 로고부터 검색창까지 모든 내용이 포함될 수 있습니다. 예제에는 제목만 포함되어 있습니다.
2) 동일한 페이지에는 여러 개의 <header> 요소가 포함될 수 있습니다. 각각의 독립적인 블록이나 기사는 고유한 <header>를 포함할 수 있습니다. 따라서 이 예에서는 CSS3에서 유연한 렌더링을 용이하게 하기 위해 고유한 id 속성이 추가되었습니다. CSS 파일에서 id 태그의 역할을 볼 수 있습니다.
3. 바닥글
<footer> 태그 구현

<footer id="page_footer">
    <h2>Footer</h2>
</footer>

설명: 위치는 페이지 또는 블록의 끝이며, 사용법은 기본적으로 <header>와 동일합니다. 여기에는 다른 요소도 포함됩니다.
4. 탐색
<nav> 태그 구현

설명: 탐색의 중요성 빠르고 편리한 웹 페이지의 필수 요소입니다. 방문자를 유지하려면 좋은 탐색이 필요합니다.
1) <header> 또는 <footer> 또는 기타 블록에 포함될 수 있으며 페이지에는 여러 탐색이 있을 수 있습니다.
2) 탐색에는 일반적으로 CSS가 렌더링되어야 하며 나중에 CSS 렌더링을 볼 수 있습니다.
5. 블록 및 기사
<article> 태그 구현

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">One</a></li>
        <li><a href="#">Two</a></li>
        <li><a href="#">Three</a></li>
    </ul>
</nav>

<section id="posts">
        /*可以包含多个< article>*/
    <article>
         /*article的内容*/
        </article>
        <article>
         /*article的内容*/
        </article>
</section>

의 일반적인 내용입니다. 많은 요소가 포함될 수 있음을 알 수 있습니다.

6. 나레이션과 사이드바
<aside> 태그는 나레이션을 구현하고, 사이드바는 <section>로 구현합니다.
<aside>는 소개, 사진 등을 포함한 추가 정보입니다.

<article>
        <header>
            <h2>Article Header</h2>
        </header>
        <p>Without you?I'd be a soul without a purpose.
                </p>
        <footer>
            <h2>Article Footer</h2>
        </footer>
</article>

<aside>는 일반적으로 <article>

으르렁

내레이션이 아닌 사이드바! 링크를 포함하여 오른쪽 영역으로 생각하고 <section>

<aside>
    <p>sth. in aside
    </p>
</aside>

이때 각 태그의 사용법은 다음과 같습니다. HTML5 index.html 파일의 전체 코드는 다음과 같습니다

코드 보기

<article>
        <header>
            <h2>Article Header</h2>
        </header>
        <aside>
            <p>sth. in aside
            </p>
        </aside>
        <p>Without you?I'd be a soul without a purpose.
                </p>
        <footer>
            <h2>Article Footer</h2>
        </footer>
</article>

다음은 새로운 요소에 대한 자세한 소개입니다새로운 요소

<canvas> 차트 및 기타 이미지로. 이 태그는 JavaScript의 드로잉 API

<section id="sidebar">
    <nav>
    <ul>
          <li><a href="2012/04">April 2012</a></li>
          <li><a href="2012/03">March 2012</a></li>
          <li><a href="2012/02">February 2012</a></li>
          <li><a href="2012/01">January 2012</a></li>
    </ul>
    </nav>
</section>

새로운 멀티미디어 요소
<🎜를 기반으로 합니다. >
태그 설명
<audio> 오디오 콘텐츠 정의
<video>
<source> 멀티미디어 리소스 <video> 및
<embed> 플러그인 등을 정의합니다.

<track> <video> 요소에 대한 외부 텍스트 트랙을 지정합니다.
새 양식 요소

태그 설명

<datalist> 옵션 목록을 정의합니다. 이 요소를 입력 요소와 함께 사용하여 가능한 입력 값을 정의합니다.
<keygen> 양식에 사용할 키 쌍 생성 필드를 지정합니다.
<output> 스크립트 출력과 같은 다양한 유형의 출력을 정의합니다.
새로운 의미 및 구조 요소
HTML5는 더 나은 페이지 구조를 만들기 위한 새로운 요소를 제공합니다.

태그 설명

<article> 페이지의 독립적인 콘텐츠 영역을 정의합니다.
<aside> 페이지의 사이드바 콘텐츠를 정의합니다.
<bdi> 상위 요소의 텍스트 방향 설정과 관계없이 텍스트를 설정할 수 있습니다.
<command> 라디오 버튼, 체크박스, 버튼 등의 명령 버튼을 정의합니다.
<details> 문서의 세부정보나 문서의 특정 부분을 설명하는 데 사용됩니다. >
<dialog> 프롬프트 상자와 같은 대화 상자를 정의합니다.
<summary> 레이블에는 세부 정보 요소의 제목이 포함됩니다.
<Figure> 콘텐츠(이미지, 차트, 사진, 코드 등).
<figcaption> <Figure> 요소의 제목을 정의합니다.
<footer> 섹션이나 문서의 바닥글을 정의합니다.
<header> 문서의 헤더 영역을 정의합니다.
<mark>
<meter> 가중치와 단위를 정의합니다. 최대값과 최소값이 알려진 측정에만 사용하십시오.
<nav>는 탐색 링크 부분을 정의합니다.
<progress> 모든 유형의 작업 진행 상황을 정의합니다.
<ruby> 루비 주석(한어 병음 또는 문자)을 정의합니다.
<rt> 문자(중국어 발음 기호 또는 문자)의 해석이나 발음을 정의합니다.
<rp> Ruby 요소를 지원하지 않는 브라우저에서 표시되는 콘텐츠를 정의하기 위해 Ruby 주석에 사용됩니다.
<section> 문서의 섹션(섹션, 섹션)을 정의합니다.
<time> 날짜 또는 시간을 정의합니다.
<wbr> 텍스트에서 개행 문자를 추가하는 것이 적절한 위치를 지정합니다.
제거된 요소
다음 HTML 4.01 요소가 HTML5에서 제거되었습니다:
<acronym> ;

<애플릿>
<기본 글꼴>
;

<font>
<frame>
<frameset>
<noframes>
<strike>

<tt>

지속적인 학습

||

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <canvas id="myCanvas">你的浏览器不支持 HTML5 canvas 标签。</canvas> <script> var c=document.getElementById('myCanvas'); var ctx=c.getContext('2d'); ctx.fillStyle='#FF0000'; ctx.fillRect(0,0,80,100); </script> </body> </html>

제출하다 코드 재설정
자동운전