HTML5 문서 구조
- 高洛峰원래의
- 2017-02-09 16:17:551622검색
HTML5 문서 구조
HTML5는 훨씬 단순화되었으며 디자인은 3가지 원칙을 따릅니다: 1. 호환성, 2. 실용성, 3. 보편적인 접근성
1. 헤더 요소
문서에서는 여러
참고:
문법 설명:
hgroup 요소
태그는 문서의 주요 제목과 부제목을 정의합니다. 일반적으로 태그 쌍 사이에는 h1~h6의 제목 요소만 사용됩니다.
2. 바닥글 요소
바닥글 요소는 주로 기사의 저작권 정보, 저자 연락처 정보 등을 포함하여 페이지나 기사의 각주 내용을 정의하는 데 사용됩니다. 여러 바닥글 요소를 포함합니다.
예:
<footer> <ul> <li>Copyright © 2000-2013 华软 All Rights Reserved</li> <li>学院地址：广州.从化.广从大道13号 电话：020-87818918</li> </ul> </footer>
3. 기사 요소
<기사>의 잠재적 소스: 포럼 게시물, 블로그 게시물, 뉴스 기사, 댓글 등
구문 설명: 태그 쌍에는 머리글, 바닥글, 섹션 및 중첩된 기사와 같은 요소가 포함될 수 있습니다.
예:
<article> <header> <h2>写给IT职场新人的六个“关于”</h2> </header> <p> <b>关于工作地点</b> ... </p> ... </article>
4. 섹션 요소
섹션 요소가 사용됩니다. 콘텐츠 블록을 장 제목, 콘텐츠, 바닥글 등 여러 부분으로 더 나누는 등 페이지의 특정 콘텐츠 블록을 나눕니다.
구문 설명: 태그 쌍에는 6개의 제목 요소 h1~h6, p 요소 및 여러 기사 요소가 포함될 수 있습니다.
"Block"에는 내부에 여러 기사가 포함되어 있습니다. 또한 섹션 요소를 중첩할 수 있습니다.
예:
<article> <header> <h2>写给IT职场新人的六个“关于”</h2> </header> <section> <h3>关于工作地点</h3> <p>...</p> </section> <section> <h3>关于企业</h3> <p>...</p> </section> ... </article>
5. nav 요소
nav 요소가 사용됩니다. 페이지에 다양한 탐색 모음을 정의합니다. 페이지에는 전체 페이지 또는 콘텐츠의 여러 부분에 대한 탐색으로 여러 탐색 요소가 있을 수 있습니다.
nav가 불가능한 유일한 위치는 주소 요소 내에 있습니다.
기본 구문:
<nav><a href="">#</a><a href="">#</a><a href="">#</a></nav>
6. side 요소
side 요소는 기사 요소의 내용 외에 기사 요소의 내용과 관련된 보조 정보를 나타냅니다.
현재 페이지와 관련된 참조, 사이드바, 광고가 포함될 수 있습니다. 기본 콘텐츠, 탐색 모음 및 기본 콘텐츠와 구별되는 기타 유사한 부분입니다.
7. 오디오 오디오 태그
오디오 태그는 음악이나 기타 오디오 스트림과 같은 사운드를 정의합니다.
현재 오디오 요소는 MP3, Wav, Ogg의 3가지 파일 형식을 지원합니다.
loop 오디오가 끝날 때마다 재생을 다시 시작합니다
preload 페이지가 로드되고 재생할 준비가 되면 오디오가 로드됩니다
8. video 비디오 태그
video 태그 영화 클립이나 기타 비디오 스트림과 같은 비디오를 정의합니다. 현재 비디오 요소는 MP4, WebM, Ogg의 세 가지 비디오 형식을 지원합니다.<audio src="薛之谦 - 认真的雪.mp3" controls="controls"></audio>
속성 설명
autoplay 동영상이 준비되는 대로 재생됩니다
사용자에게 컨트롤 재생/일시 정지 버튼과 같은 비디오 컨트롤 표시
루프 미디어 파일 재생이 완료된 후 재생을 다시 시작합니다
muted 规定视频的音频输出应该被静音
poster 规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像
preload 视频在页面加载时进行加载并预备播放，属性值(none:只有单击了Play按钮才加载视频;metadata:仅加载元数据,例如视频长度、作者、版权)
9. 图形中的 figure 及 figcaption
元素figure及figcaption实际上不能算作结构性元素，但在组织独立图片、图像、图表及编码列表时仍然很受欢迎。
每一个figure元素中只能包括一个figcaption元素。图片排列一起可用。百度文库里有篇“绚丽的HTML5 Figure图片字幕标题特效”
常常用到一种图片列表，图片+标题或者图片+标题+简单描述。
实例代码：
黄浦江上的的卢浦大桥
figure用来代替原来li标签，P标签谁来取代呢？答案就是：figcaption
w3c赋予的定义：figcaption 标签定义 figure 元素的标题（caption）。"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。
那么上面的代码就变成了：
<figure> <figcaption style="color: red">黄浦江上的的卢浦大桥</figcaption> <img src="images/黄浦江上的的卢浦大桥.jpg" width="350" height="234" /> </figure>
效果图如下：
黄浦江上的的卢浦大桥
更多HTML5的文档结构 - 不报错才可怕相关文章请关注PHP中文网！