HTML5 문서 구조

집

웹 프론트엔드

H5 튜토리얼

HTML5 문서 구조

Feb 09, 2017 pm 04:17 PM

html5

HTML5 문서 구조

HTML5는 훨씬 단순화되었으며 디자인은 3가지 원칙을 따릅니다: 1. 호환성, 2. 실용성, 3. 보편적인 접근성

1. 헤더 요소

<header> 태그는 문서의 헤더나 문서의 일부를 정의하며, 기사 제목을 설정하는 데에도 사용할 수 있습니다.

<header> 요소는 소개 콘텐츠나 탐색 링크의 컨테이너 역할을 해야 합니다.

문서에서는 여러 <header> 요소를 정의할 수 있습니다.

참고: <header> 태그는 <footer>, <address> 또는 다른 <header> 요소 안에 배치할 수 없습니다.

문법 설명: <header></header> 태그 쌍에는 6개의 제목 요소 h1~h6과 p,span 및 기타 요소가 포함될 수 있습니다.

hgroup 요소

<hgroup> 태그는 문서의 주요 제목과 부제목을 정의합니다. 일반적으로 태그 쌍 사이에는 h1~h6의 제목 요소만 사용됩니다.

2. 바닥글 요소

바닥글 요소는 주로 기사의 저작권 정보, 저자 연락처 정보 등을 포함하여 페이지나 기사의 각주 내용을 정의하는 데 사용됩니다. 여러 바닥글 요소를 포함합니다.

예:

&lt;footer&gt;
   &lt;ul&gt;
     &lt;li&gt;Copyright © 2000-2013 华软 All Rights Reserved&lt;/li&gt;
     &lt;li&gt;学院地址：广州.从化.广从大道13号 电话：020-87818918&lt;/li&gt;
   &lt;/ul&gt;
&lt;/footer&gt;

로그인 후 복사

3. 기사 요소

<article> 태그는 페이지에서 컨텍스트와 관련이 없는 독립적인 콘텐츠인 독립적인 콘텐츠를 정의합니다. 예를 들어 게시물, 블로그 게시물 등이 있습니다.

<article> 태그로 정의된 콘텐츠는 그 자체로 의미가 있어야 하며 문서의 나머지 부분과 독립적이어야 합니다.

<기사>의 잠재적 소스: 포럼 게시물, 블로그 게시물, 뉴스 기사, 댓글 등

구문 설명: <article></article> 태그 쌍에는 머리글, 바닥글, 섹션 및 중첩된 기사와 같은 요소가 포함될 수 있습니다.

예:

&lt;article&gt;
　　&lt;header&gt;
　　　　&lt;h2&gt;写给IT职场新人的六个“关于”&lt;/h2&gt;
　　&lt;/header&gt;
　　&lt;p&gt;
　　　　&lt;b&gt;关于工作地点&lt;/b&gt; ...
　　&lt;/p&gt;
　　...
&lt;/article&gt;

로그인 후 복사

4. 섹션 요소

섹션 요소가 사용됩니다. 콘텐츠 블록을 장 제목, 콘텐츠, 바닥글 등 여러 부분으로 더 나누는 등 페이지의 특정 콘텐츠 블록을 나눕니다.

구문 설명: <section></section> 태그 쌍에는 6개의 제목 요소 h1~h6, p 요소 및 여러 기사 요소가 포함될 수 있습니다.

"Block"에는 내부에 여러 기사가 포함되어 있습니다. 또한 섹션 요소를 중첩할 수 있습니다.

예:

&lt;article&gt;
　　&lt;header&gt;
　　　　&lt;h2&gt;写给IT职场新人的六个“关于”&lt;/h2&gt;
　　&lt;/header&gt;
　　&lt;section&gt; 
　　　　&lt;h3&gt;关于工作地点&lt;/h3&gt;
　　　　&lt;p&gt;...&lt;/p&gt;
　　&lt;/section&gt;
　　&lt;section&gt; &lt;h3&gt;关于企业&lt;/h3&gt; &lt;p&gt;...&lt;/p&gt; &lt;/section&gt;
　　...
&lt;/article&gt;

로그인 후 복사

5. nav 요소

nav 요소가 사용됩니다. 페이지에 다양한 탐색 모음을 정의합니다. 페이지에는 전체 페이지 또는 콘텐츠의 여러 부분에 대한 탐색으로 여러 탐색 요소가 있을 수 있습니다.

nav가 불가능한 유일한 위치는 주소 요소 내에 있습니다.

기본 구문:

&lt;nav&gt;&lt;a href=&quot;&quot;&gt;#&lt;/a&gt;&lt;a href=&quot;&quot;&gt;#&lt;/a&gt;&lt;a href=&quot;&quot;&gt;#&lt;/a&gt;&lt;/nav&gt;

로그인 후 복사

6. side 요소

side 요소는 기사 요소의 내용 외에 기사 요소의 내용과 관련된 보조 정보를 나타냅니다.

현재 페이지와 관련된 참조, 사이드바, 광고가 포함될 수 있습니다. 기본 콘텐츠, 탐색 모음 및 기본 콘텐츠와 구별되는 기타 유사한 부분입니다.

7. 오디오 오디오 태그

오디오 태그는 음악이나 기타 오디오 스트림과 같은 사운드를 정의합니다.

현재 오디오 요소는 MP3, Wav, Ogg의 3가지 파일 형식을 지원합니다.

아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아 설명

재생할 오디오의 src URL

컨트롤 재생/일시 중지와 같은 오디오 컨트롤을 사용자에게 표시합니다. 버튼

loop 오디오가 끝날 때마다 재생을 다시 시작합니다

preload 페이지가 로드되고 재생할 준비가 되면 오디오가 로드됩니다

8. video 비디오 태그

video 태그 영화 클립이나 기타 비디오 스트림과 같은 비디오를 정의합니다.

현재 비디오 요소는 MP4, WebM, Ogg의 세 가지 비디오 형식을 지원합니다.

&lt;audio src=&quot;薛之谦 - 认真的雪.mp3&quot; controls=&quot;controls&quot;&gt;&lt;/audio&gt;

로그인 후 복사

속성 설명

src 재생할 동영상 URL

width 동영상 플레이어의 너비 설정

height 동영상 플레이어의 높이 설정

autoplay 동영상이 준비되는 대로 재생됩니다

사용자에게 컨트롤 재생/일시 정지 버튼과 같은 비디오 컨트롤 표시

루프 미디어 파일 재생이 완료된 후 재생을 다시 시작합니다

muted 规定视频的音频输出应该被静音

poster 规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像

preload 视频在页面加载时进行加载并预备播放，属性值(none:只有单击了Play按钮才加载视频;metadata:仅加载元数据,例如视频长度、作者、版权)

9. 图形中的 figure 及 figcaption

元素figure及figcaption实际上不能算作结构性元素，但在组织独立图片、图像、图表及编码列表时仍然很受欢迎。

每一个figure元素中只能包括一个figcaption元素。图片排列一起可用。百度文库里有篇“绚丽的HTML5 Figure图片字幕标题特效”

常常用到一种图片列表，图片+标题或者图片+标题+简单描述。

实例代码：

<figure> <p>黄浦江上的的卢浦大桥</p> <img src="shanghai_lupu_bridge.jpg" width="350" height="234" /> </figure>

figure用来代替原来li标签，P标签谁来取代呢？答案就是：figcaption

w3c赋予的定义：figcaption 标签定义 figure 元素的标题（caption）。"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。

那么上面的代码就变成了：

    &lt;figure&gt;
    &lt;figcaption style=&quot;color: red&quot;&gt;黄浦江上的的卢浦大桥&lt;/figcaption&gt;
    &lt;img src=&quot;images/黄浦江上的的卢浦大桥.jpg&quot; width=&quot;350&quot; height=&quot;234&quot; /&gt;
    &lt;/figure&gt;

로그인 후 복사

效果图如下：

黄浦江上的的卢浦大桥

HTML5的文档结构 - 不报错才可怕