HTML5 HTML 요소 확장(1부) - 새로 추가된 요소 및 사용법 개요_html5 튜토리얼 기술

페이지 개발 프로세스를 생각해 보세요. :
1. 페이지 구조 디자인 - HTML: 이 프로세스는 다양한 HTML 요소를 사용하여 웹 페이지의 구조를 구축하는 것입니다.
2. 페이지 모양 디자인 - CSS: CSS를 사용하여 웹페이지 모양을 개선하는 과정입니다.
3. 페이지 동작 설계 - Javascript: 이 프로세스는 웹페이지 요소에 특정 동작을 할당하는 것입니다.
CSS 외에도 HTML5는 다른 두 가지 측면에서 다양한 수준으로 확장되었습니다. 이 시리즈는 첫 번째 측면에 초점을 맞췄습니다. 이전에는 복잡한 canvas 및 svg 요소에 대해 배웠습니다. 다음 장에서는 HTML5에서 추가된 다른 요소를 요약합니다.

구조적 요소
HTML5는 머리글, 바닥글, 탐색 탐색, 콘텐츠 기사, 섹션 등과 같은 새로운 구조적 요소를 추가합니다. 그 의미는 아래와 같습니다.

이러한 전체 페이지의 구조적 요소 외에도 HTML5는 보조 요소 외, 이미지 요소 그림, 상세 설명 요소 세부 정보 등과 같은 블록 수준의 의미 요소도 추가합니다. 페이지의 레이아웃 의미를 더 잘 표시하는 것 외에도 이러한 요소는 일반 div와 다르지 않습니다. 이러한 요소를 표시하려면 CSS를 사용해야 합니다. 다음은 간단한 예입니다.

코드 복사

코드는 다음과 같습니다.

< ;h1>dxy1982 블로그

기사 1

< ;p>소개

소개

블로그

정보

• 정책< ;/a>


• 목록
  

기사

• 1월


• 2월

Copyright 2012 dxy1982

이러한 요소는 비교적 사용하기 쉽지만 몇 가지 주의할 점이 있습니다 :
1. 섹션을 div 대신 사용하지 마세요
섹션은 스타일 컨테이너가 아닙니다. 섹션 요소는 문서 요약을 작성하는 데 도움이 되는 콘텐츠의 의미 부분을 나타냅니다. 헤더를 포함해야 합니다. 일반적으로 기사의 일부로 존재합니다(물론 기사가 기사의 일부일 수도 있음). 페이지 컨테이너로 사용할 요소를 찾고 있거나 추가 스타일 컨테이너가 필요한 경우 div를 사용하세요.
2. 헤더와 hgroup은 필요할 때만 사용하세요
작성할 필요가 없는 태그는 의미가 없습니다. header와 hgroup의 사용 시나리오는 일반적으로 다음과 같습니다.
• header 요소는 섹션의 머리글로 자주 사용되는 소개 또는 탐색 보조 텍스트 집합을 나타냅니다.
• 헤더에 하위 헤더, 자막, 다양한 로고 등 여러 레이어의 구조가 있는 경우 hgroup을 사용하여 h1-h6 요소를 섹션 헤더로 결합합니다.
여기 헤더나 hgroup에 헤더 요소가 몇 개만 있는 경우 다음 두 개의 쓸모 없는 태그를 제거해 보세요. 예:

코드 복사

코드는 다음과 같습니다.

　

　

내 최고의 블로그 게시물

　

-->

다음으로 직접 수정:

코드 복사

코드는 다음과 같습니다. 다음과 같습니다:

　

내 최고의 블로그 게시물

　

같은 내용:

코드 복사

코드는 다음과 같습니다.

　

　

내 최고의 블로그 게시물

　

p>작성: Rich Clark< ;/p>

다음으로 직접 변경:

코드 복사

코드는 다음과 같습니다.

내 최고의 블로그 게시물

작성: Rich Clark< ;/ p>

3. 페이지에서 다른 페이지나 다른 부분으로 연결되는 블록을 나타내기 위해 nav
요소를 남용하지 마세요. 탐색 링크 블록.
그러나 페이지의 모든 링크를 nav 요소에 배치할 필요는 없습니다. 이 요소는 기본 탐색 블록으로 사용됩니다. 구체적인 예를 들자면, 바닥글에는 서비스 약관, 홈페이지, 저작권 안내 페이지 등 많은 링크가 있는 경우가 많습니다. 이러한 상황을 처리하는 데는 바닥글 요소만으로도 충분하지만 여기서는 nav 요소를 사용할 수도 있지만 일반적으로 불필요하다고 생각합니다.
4. 그림을 남용하지 마세요
그림은 "때때로 자체 제목 설명이 포함된 내용이어야 합니다. 일반적으로 문서 흐름에서 독립적인 단위로 참조됩니다." 가장 적합한 시나리오 - 문서 흐름에 영향을 주지 않고 기본 콘텐츠 페이지에서 사이드바로 이동할 수 있습니다. 그림은 문서 내에서만 참조하거나 섹션 요소로 묶어야 합니다.
그림이 순전히 프레젠테이션용(예: 로고)이고 문서 내 다른 곳에서 참조되지 않고 위치를 이동할 필요가 없는 경우 그림을 절대 사용하지 마세요.
5. 불필요한 유형 속성을 사용하지 마세요.
HTML5에서는 스크립트 및 스타일 요소에 더 이상 유형 속성이 필요하지 않습니다. 물론 작성해도 문제가 없지만 모범사례 관점에서 보면 굳이 작성할 필요는 없습니다.

오디오 요소
오디오 요소는 음악이나 기타 오디오 스트림과 같은 사운드 콘텐츠를 식별하는 데 사용됩니다. 이 요소가 지원하는 형식은 다음 표에 나와 있습니다.

	IE 9	Firefox 3.5	Opera 10.5	Chrome 3.0	Safari 3.0
Ogg Vorbis		√	√	√
MP3	√			√	√
Wav		√	√		√

audio 태그에는 콘텐츠, 오디오 재생 시기 및 방법을 제어하는 ​​데 사용되는 몇 가지 속성이 있습니다. 이러한 속성은 src(파일 이름), preload(페이지가 로드될 때 로드됨), control(디스플레이 제어), loop입니다. (루프) 및 자동 재생(자동 재생). 아래 예에서는 페이지가 로드되자마자 오디오가 재생되며, 제공된 컨트롤을 사용하여 사용자가 오디오를 중지하거나 다시 시작할 수 있습니다.

코드 복사

코드는 다음과 같습니다.

브라우저가 해당 요소를 지원하지 않는 경우 해당 요소의 텍스트 정보가 표시됩니다.
autoplay 요소가 설정된 경우 preload 속성은 자동으로 무시됩니다. preload="auto"가 설정된 경우 페이지가 로드된 후에 오디오가 로드됩니다.
audio 요소를 사용하면 브라우저 문제와 호환되는 여러 소스 요소를 지정할 수 있습니다. 소스 요소는 다양한 오디오 파일을 연결할 수 있습니다. 브라우저는 첫 번째 인식 형식을 사용합니다.

코드 복사

코드는 다음과 같습니다.

브라우저가 오디오 요소를 지원하지 않습니다.

비디오 요소 비디오 요소를 사용하면 비디오 클립을 재생하거나 시각적 미디어를 스트리밍할 수 있습니다. 이 요소가 지원하는 형식은 다음 표에 나와 있습니다.

음소거(음소거), 포스터(사진 대기 중), 너비 및 높이 외에 오디오 요소의 모든 속성이 있습니다. 마지막 두 가지 의미는 말할 필요도 없습니다. 포스터 속성(절대 또는 상대 URL 지정)을 사용하면 비디오가 로드 중이거나 비디오가 전혀 로드되지 않을 때 사용할 이미지를 찾을 수 있습니다.

비디오는 소스 요소를 사용하여 호환성 문제를 해결하는 기능도 지원합니다. 간단한 예를 살펴보세요.

코드 복사

코드는 다음과 같습니다.

영상의 소리를 재생하지 않으려면 muted="음소거"로 설정하세요.
또한 비디오 요소는 DOM 작업 중 재생 프로세스 제어를 지원하는 몇 가지 메서드, 속성 및 이벤트도 제공합니다. 예를 들어 요소의 재생, 일시 중지, 로드 및 기타 메서드를 호출합니다. 직접 읽거나 설정할 수 있는 볼륨 및 재생 시간과 같은 속성도 있습니다. 그 밖에도 재생 시작, 일시정지, 종료 이벤트 등을 사용할 수 있습니다. 아래 예를 보세요.

코드 복사

코드는 다음과 같습니다.

재생/일시 중지
Big
Small
일반

새로운 작성 방식에 주목하세요. 위의 예에서는 오디오 요소를 다음과 같이 작성합니다.

코드 복사

코드는 다음과 같습니다.

사실 HTML5에는 컨트롤, 자동 재생, 루프 등 많은 부울 속성이 도입되어 있지만 위와 같이 작성하는 것이 좋습니다. 방법은 다음과 같습니다.

코드를 복사하세요

코드는 다음과 같습니다. < ;audio src="MyFirstMusic.ogg"는 자동 재생 루프를 제어합니다> 귀하의 브라우저는 오디오 요소를 지원하지 않습니다.

브라우저에서 이러한 속성을 발견하면 해당 속성이 켜져 있다는 의미이기 때문입니다. 즉, 이러한 속성을 작성하고 강제로 false로 설정하면, 효과는 여전히 동일하므로 일반적으로 속성 이름만 작성하는 것이 좋습니다.
이러한 작성 문제는 양식에도 존재합니다. 양식 및 입력의 많은 새로운 속성은 부울 속성이므로 권장되는 작성 방법을 사용해야 합니다.

측정값을 나타내는 요소

모든 브라우저가 다음 요소를 지원하는 것은 아니지만 기본적으로 Chrome에서 효과를 볼 수 있습니다. 진행률 표시줄 요소
다운로드 진행률 표시줄을 표시하려면 이 요소를 사용하세요. 값과 최대값이라는 두 가지 속성만 있습니다. Chrome과 FireFox 모두 지원합니다.


코드 복사

코드는 다음과 같습니다.

다운로드 진행률:
33%

측정 요소
표준 범위 클래스에서 특정 값의 표시 아이콘을 표시하려면 이 요소를 사용합니다. 다른 범위의 값은 다른 색상으로 표시됩니다. 일부 웹사이트에서는 이 도구를 사용하여 사용자의 현재 경험 가치를 표시합니다. 브라우저가 이 요소를 지원하지 않으면 요소 중간의 텍스트가 직접 표시됩니다. 현재 Chrome에서는 이미 지원하고 있습니다.

코드 복사

코드는 다음과 같습니다.

B.

실행하면 노란색 스크롤 막대 같은 것이 표시됩니다. 값을 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