1. 페이지의 구조 -HTML :이 프로세스는 다양한 HTML 요소를 사용하여 웹 페이지의 구조를 구축하는 것입니다.
2. 페이지의 모양 -CSS :이 프로세스는 CSS를 사용하여 웹 페이지의 모양을 향상시키는 것입니다.
3. 디자인 페이지 동작 -JavaScript :이 프로세스는 웹 페이지의 요소에 특정 동작을 제공하는 것입니다.
CSS 외에도 HTML5는 다른 두 가지 측면에서 다양한 정도로 확장되었습니다. 이 시리즈는 첫 번째 측면에 중점을 둡니다. 이전 섹션에서는 복잡한 캔버스 및 SVG 요소를 배웠으며 다음 장에서는 다른 HTML5 추가 요소를 요약합니다.
구조적 요소 HTML5는 헤더, 바닥 글, 내비게이션 NAV, 컨텐츠 기사, 장 섹션 등과 같은 새로운 구조 요소를 추가했습니다. 의미는 다음과 같습니다.HTML5는 전체 페이지의 구조적 요소 외에도 보조 요소 제외, 이미지 요소 그림, 자세한 설명 요소 세부 사항 등과 같은 블록 수준 의미 론적 요소를 추가합니다. 페이지의 레이아웃 의미를 더 잘 표시하는 것 외에도 이러한 요소는 평범한 DIV와 다르지 않으며 이러한 요소를 표시하기 위해 CS에 의존해야합니다. 다음은 간단한 예입니다.
<html>
<헤드>
<title> dxy 블로그 </title>
</head>
<body>
<Header>
<h1> <a href = "http://www.vevb.com/dxy1982/%22%3edxy1982 블로그 </a> </h1>
</헤더>
<섹션>
<기사>
<h2> <a href = "http://www.vevb.com/dxy1982/"> 기사 1 </a> </h2>
<p> 소개 </p>
</article>
<기사>
<h2> <a href = "http://www.vevb.com/dxy1982/"> 기사 2 </a> </h2>
<p> 소개 </p>
</article>
<avi>
<a href = "http://www.vevb.com/dxy1982/"> blog </a>
</nav>
</섹션>
<avi>
<ul>
<li> <h2> 정보 </h2>
<ul>
<li> <a href = "http://www.vevb.com/dxy1982/"> 정책 </a> </li>
<li> <a href = "http://www.vevb.com/dxy1982/"> list </a> </li>
</ul> </li>
<li> <h2> 기사 </h2>
<ul>
<li> <a href = '/blog/2007/04/'> 1 월 </a> </li>
<li> <a href = '/blog/2007/03/'> 2 월 </a> </li>
</ul>
</li>
</ul>
</nav>
<FUTER>
<p> 저작권 2012 DXY1982 </p>
</바닥다>
</body>
</html>
이러한 요소는 사용하기가 비교적 간단하지만 여전히 주목할 점이 여전히 있습니다 .1. 섹션을 DIV 대체로 사용하지 마십시오.
섹션은 스타일 컨테이너가 아닙니다. 섹션 요소는 문서 요약을 구축하는 데 사용되는 내용의 의미 적 부분을 나타냅니다. 헤더가 포함되어야합니다. 일반적으로 가장 많은 기사로 존재합니다 (물론 기사의 일부로도 가능합니다). 페이지 컨테이너로 사용되는 요소를 찾거나 추가 스타일 컨테이너가 필요한 요소를 찾으려면 Div를 계속 사용하십시오.
2. 필요할 때 헤더와 HGROUP 만 사용하십시오
작성할 필요가없는 라벨을 쓰는 것은 의미가 없습니다. 헤더 및 HGROUP의 사용 시나리오는 일반적으로 다음과 같습니다.
• 헤더 요소는 종종 섹션의 헤더로 사용되는 입문 또는 탐색 보조 텍스트 세트를 나타냅니다.
• 헤드에 소제목, 자막, 다양한 로고 텍스트 등과 같은 다층 구조가 있으면 HGROUP을 사용하여 H1-H6 요소를 섹션의 헤드로 결합하십시오.
여기서 헤더 또는 HGROUP에 헤드 요소가 몇 개있는 경우 예를 들어이 두 가지 쓸모없는 태그를 제거하는 것이 좋습니다.
<기사>
<Header>
<H1> 내 최고의 블로그 게시물 </h1>
</헤더>
<!-기사 내용->
</article>
다음으로 직접 수정하십시오.
<기사>
<H1> 내 최고의 블로그 게시물 </h1>
<!-기사 내용->
</article>
마찬가지로 다음과 같습니다.
<Header>
<hgroup>
<H1> 내 최고의 블로그 게시물 </h1>
</hgroup>
Rich Clark의 <p>
</헤더>
직접 변경하십시오.
<Header>
<H1> 내 최고의 블로그 게시물 </h1>
Rich Clark의 <p>
</헤더>
3. Nav를 남용하지 마십시오
NAV 요소는 페이지의 다른 페이지 또는이 페이지의 다른 부분에 연결되는 블록을 나타냅니다. 내비게이션 링크가 포함 된 블록.
그러나 페이지의 모든 링크를 NAV 요소에 배치 할 필요는 없습니다.이 요소는 기본 탐색 블록으로 사용됩니다. 구체적인 예를 들어, 서비스 약관, 홈페이지, 저작권 통지 페이지 등과 같은 바닥 글 링크가 종종 있습니다. 바닥 글자 자체는 이러한 상황에 대처하기에 충분합니다. NAV 요소도 여기에서도 사용할 수 있지만 일반적으로 불필요한 것으로 간주됩니다.
4. 수치를 남용하지 마십시오
그림은 일부 유동적 인 함량이어야하며 때로는 제목 설명이 포함되어 있어야합니다. 일반적으로 문서 스트림에서 독립 단위로 참조됩니다. 이것은 그림의 가장 좋은 시나리오입니다. 문서 흐름에 영향을주지 않고 기본 콘텐츠 페이지에서 사이드 바로 이동할 수 있습니다. 그림은 문서에서만 참조되거나 섹션 요소로 둘러싸여 있어야합니다.
이미지 (예 : 로고)의 렌더링을 순전히 문서의 다른 곳에 인용하지 않고 위치를 이동할 필요가 없다면 그림을 사용하지 마십시오.
5. 불필요한 유형 속성을 사용하지 마십시오
HTML5에서 스크립트 및 스타일 요소에는 더 이상 유형 속성이 필요하지 않습니다. 물론 글쓰기에는 문제가 없지만 모범 사례의 관점에서 글을 쓸 필요가 없습니다.
오디오 요소 오디오 요소는 음악 또는 기타 오디오 스트림과 같은 사운드 컨텐츠를 식별하는 데 사용됩니다. 이 요소가 지원하는 형식은 다음 표에 나와 있습니다.| IE 9 | Firefox 3.5 | 오페라 10.5 | 크롬 3.0 | 사파리 3.0 | |
|---|---|---|---|---|---|
| OGG VORBIS | √ | √ | √ | ||
| MP3 | √ | √ | √ | ||
| wav | √ | √ | √ |
오디오 태그에는 컨텐츠를 제어하는 데 사용되는 몇 가지 속성, 오디오 재생 방법 등이 있습니다. 이러한 속성은 SRC (파일 이름), Preload (페이지로드 된 경우로드), 컨트롤 (디스플레이 컨트롤), 루프 (루프) 및 자동 재판 (AutoPLay)입니다. 다음 예에서는 오디오가로드 되 자마자 페이지가 재생되며 계속 재생됩니다. 제공된 컨트롤을 사용하면 사용자가 오디오 재생을 중지하거나 다시 시작할 수 있습니다.
<audio src = "myfirstmusic.ogg"control = "controls"autoplay = "autoplay"loop = "loop">
브라우저는 오디오 요소를 지원하지 않습니다.
</오디오>
브라우저가 요소를 지원하지 않으면 요소의 텍스트 정보가 표시됩니다.
자동 재생 요소가 설정되면 예압 속성은 자동으로 무시됩니다. Preload = Auto가 설정되면 페이지가로드 된 후 오디오가로드됩니다.
오디오 요소를 통해 여러 소스 요소를 브라우저와 호환 할 수 있습니다. 소스 요소는 다른 오디오 파일을 연결할 수 있습니다. 브라우저는 첫 번째 인식 가능한 형식을 사용합니다.
<Audio>
<소스 src = "song.ogg"type = "Audio/Ogg">
<소스 src = "song.wma"type = "Audio/x-Ms-Wma">
<소스 src = "song.mp3"type = "Audio/Mpeg">
브라우저는 오디오 요소를 지원하지 않습니다.
</오디오>
비디오 요소 비디오 요소를 사용하면 비디오 클립을 재생하거나 시각적 미디어를 스트리밍 할 수 있습니다. 이 요소가 지원하는 형식은 다음 표에 나와 있습니다.| 체재 | 즉 | 파이어 폭스 | 오페라 | 크롬 | 원정 여행 |
|---|---|---|---|---|---|
| 오그 | 아니요 | 3.5+ | 10.5+ | 5.0+ | 아니요 |
| MPEG 4 | 9.0+ | 아니요 | 아니요 | 5.0+ | 3.0+ |
| 웹 | 아니요 | 4.0+ | 10.6+ | 6.0+ | 아니요 |
오디오 요소의 모든 속성과 Muted, Poster (이미지 대기), 너비 및 높이가 있습니다. 말할 것도없이, 마지막 두 의미. 비디오가로드 중이거나 비디오가로드가없는 상태 인 경우 포스터 속성 (절대 또는 상대 URL을 지정)을 사용하면 먼저 이미지를 찾을 수 있습니다. 음소거 된 것은 음소거 된 것을 의미합니다.
비디오는 또한 소스 요소를 사용하여 호환성 문제를 해결하는 것을 지원합니다. 작은 예를 참조하십시오.
<video controls = "controls"poster = "/images/screen.gif">
<소스 src = "movie.mp4"type = "video /mp4" />
<소스 src = "movie.ogg"type = "video /ogg" />
브라우저는 비디오 요소를 지원하지 않습니다.
</video>
비디오 사운드를 재생하지 않으려면 Muted = Muted를 설정하십시오.
또한 비디오 요소는 DOM 운영에서 재생을 제어하는 프로세스를 지원하기위한 몇 가지 방법, 속성 및 이벤트를 제공합니다. 예를 들어, 요소를 호출하여 재생, 일시 중지,로드 및 기타 방법. 직접 읽거나 설정할 수있는 볼륨 및 재생 시간과 같은 속성도 있습니다. 또한 재생, 일시 정지, 끝 등을 시작하는 이벤트가 있습니다. 다음 예를 참조하십시오.
<! doctype html>
<html>
<body>
<div style = "text-align : center">
<버튼 onclick = "playPause ()"> 재생/일시 정지 </button>
<버튼 onclick = "makebig ()"> big </button>
<버튼 onclick = "makeMall ()"> small </button>
<버튼 onclick = "makenormal ()"> 정상 </button>
<video id = "video1">
<소스 src = "mov_bbb.mp4"type = "video /mp4" />
<소스 src = "mov_bbb.ogg"type = "video /ogg" />
브라우저는 비디오 요소를 지원하지 않습니다.
</video>
</div>
<script type = "text/javaScript">
var myvideo = document.getElementById ( "video1");
함수 playPause ()
{
if (myvideo.paused)
myvideo.play ();
또 다른
myvideo.pause ();
}
함수 makebig ()
{
myvideo.width = 560;
}
함수 makemall ()
{
myvideo.width = 320;
}
함수 makenormal ()
{
myvideo.width = 420;
}
</스크립트>
</body>
</html>
실제로, 우리는 새로운 글쓰기 방식에주의를 기울여야합니다. 위의 예에서는 다음과 같은 오디오 요소를 작성합니다.
<audio src = "myfirstmusic.ogg"control = "controls"autoplay = "autoplay"loop = "loop">
브라우저는 오디오 요소를 지원하지 않습니다.
</오디오>
실제로, 많은 항목 컨트롤, 자동 재생 및 루프가 HTML5에 도입됩니다. 이 속성은 위와 같이 글을 쓰는 것이 좋지만 권장 방법은 다음과 같이 작성하는 것입니다.
<audio src = "myfirstmusic.ogg"컨트롤 AutoPlay Loop>
브라우저는 오디오 요소를 지원하지 않습니다.
</오디오>
브라우저에서 이러한 특성이 발생하므로 이러한 속성이 활성화되어 있음을 의미합니다. 즉, 이러한 속성을 작성하고 강력하게 False로 설정하면 효과는 여전히 True와 동일하므로 일반적으로 속성 이름 만 작성하는 것이 좋습니다.
이 글쓰기 문제도 형태로 존재합니다. 형태와 입력의 많은 새로운 속성은 부울 속성이며 권장되는 쓰기 방법을 사용해야합니다.
메트릭을 나타내는 요소 모든 브라우저가 다음 요소를 지원하는 것은 아니지만 기본적으로 Chrome에 미치는 영향을 볼 수 있습니다. 진행률 바 요소 이 요소를 사용하여 다운로드 된 진행률 표시 줄을 표시하고 값과 최대 두 가지 속성만으로 매우 간단합니다. Chrome과 Firefox가 지원됩니다.<p> 진행 상황 :
<진행 값 = "1534602"max = "4603807"> 33%</progress>
</p>
메트릭 요소 이 요소를 사용하여 표시 다이어그램을 나타내는 표준 범위 클래스에 주어진 값을 표시하면 다른 범위 내의 값이 다른 색상을 표시합니다. 일부 웹 사이트는이 제품을 사용하여 사용자의 현재 경험 가치를 표시합니다. 브라우저 가이 요소를 지원하지 않으면 요소 중앙의 텍스트가 직접 표시됩니다. 크롬은 현재 지원됩니다.<p> 점수는 다음과 같습니다.
<meter value = "88.7"min = "0"max = "100"low = "65"high = "96"옵티미엄 = "100"> b+</meter>.
</p>
그것을 실행하면 노란색 스크롤 바와 같은 것을 볼 수 있습니다. 값을 50으로 변경하면 표시기 막대의 색상이 빨간색으로 프로그래밍되어 있음을 알 수 있습니다.
새로운 요소 소개가 너무 많습니다. 더 많은 요소 설명은 W3C의 전체 태그 목록을 참조하십시오.
실제 참조 : W3C 튜토리얼 : http://www.w3schools.com/html5/default.asp공식 html5 지침 : http://dev.w3.org/html5/html-author/
꽤 좋은 가이드 웹 사이트 : http://html5doctor.com/
html5 중국 자습서 : http://www.html5china.com/
좋은 프론트 엔드 블로그 : http://www.pjhome.net/default.asp?cateid=1