HTML5 시맨틱 코드를 사용하여 웹 페이지를 디자인합니다

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

먼저, 우리는 문서 유형을 선언하고 생성하려고합니다. 공개 -// w3c // dtd xhtml 1.0 전환 ..... 우리는이 방법을 쓸 수 있습니다.

 <! doctypehtml>

살펴보면 간단하고 명백하며 케이스에 민감합니다. 뒤로 호환되는 것이 더 쉬워집니다. 적어도 타이핑에 시간을 절약 할 수 있습니다.

이제 HTML 5 문서의 유형을 정의했습니다. 지금까지 모든 것이 잘되었습니다. 이제 HTML5의 새로운 태그를 살펴 보겠습니다. 새 탭을 탐색하기 전에 일반적으로 글을 쓰는 방법을 살펴 보겠습니다.

 <html>
 <헤드>
 ...다른...
 </head>
 <body>
 <분할 = 헤더>
 <H1> CSS3-HTML5 홈 </h1>
 </div>
 <divid = nav>
 <ul>
 <li> 홈 </li>
 <li> 소개 </li>
 <li> 접촉 </li>
 </ul>
 </div>
 <divid = content>
 <H1> 제목 </h1>
 <p> ... </p>
 </div>
 <divid = 바닥기>
 <p> 저작권 정보 </p>
 </div>
 </body>
 </html>

위의 예에서 <div>를 사용하는 것은 현재 매우 일반적인 관행입니다. 그 목적은 이중입니다. 먼저 웹 페이지 장에 특별히 적용 할 수있는 고유 한 ID ID를 제공합니다. 둘째, 식별은 원시적, 유사-미용 구조입니다. 각 웹 사이트의 ID 이름은 다를 수 있으므로 해당 ID가 의미하는 바를 이해하기가 어렵습니다.

<Header> 태그 :

<header> 태그는 일반적으로 <div id = header>로 정의하는 태그와 동일합니다. 귀하의 웹 사이트가 여전히 <div id = header>로 이와 같이 정의 된 경우 이제 <header>로 바꿀 수 있습니다.

<av> 태그 :

<av>는 일반적으로 사용하는 것처럼 탐색 태그입니다.

<ul>

...

</ul>

</div>

이제 <av>를 사용하십시오 :

 <avi>
 <ul>
 <li> <ahref = index.html> home </a> </li>
 <li> <ahref =/About/About/About </a> </li>
 <li> <ahref =/blog/> blog </a> </li>
 </ul>
 </nav>

<섹션> 태그 : <섹션> 태그는 일반적으로 시작 태그와 엔드 태그가있는 컨텐츠 그룹 또는 주제 그룹 일 수 있습니다. 물론,이 태그는 중첩 될 수도 있습니다.

<기사> 태그 : <article> 태그 내에 컨텐츠 섹션이있을 수 있습니다.

<따로>

<FUTER> 태그 : <FUTER> 태그, 말하지 않으면 이것이 무엇인지 이해할 수 있습니다. 일반적으로 웹 사이트 맨 아래에 여러 가지가있을 수 있습니다.

마지막 코드를 살펴 보겠습니다.

 <! doctypehtml>
 <html>
 <헤드>
 ...물건...
 </head>
 <body>
 <Header>
 <H1> 마이 사이트 </h1>
 </헤더>
 <avi>
 <ul>
 <li> 홈 </li>
 <li> 소개 </li>
 <li> 접촉 </li>
 </ul>
 </nav>
 <섹션>
 <H1> myArticle </h1>
 <기사>
 <p> ... </p>
 </article>
 </섹션>
 <FUTER>
 <p> ... </p>
 </바닥다>
 </body>
 </html>

코드를 통해 더 간결하고 이해하기 쉽습니까?

HTML5 시맨틱 코드를 ​​사용하여 웹 페이지를 디자인합니다

HTML5 시맨틱 코드를 사용하여 웹 페이지를 디자인합니다