[html5]Content models 정리

2013. 5. 6. 16:19 Web/Html


Metadata content : base link meta noscript script style title

메타 데이터 콘텐츠는 콘텐츠의 나머지 표현이나 동작을 설정 내용, 또는 그 다른 문서와 함께 문서의 관계를 설정하거나 정보를 전달

 

Flow content : a abbr address area (if it is a descendant of a map element) article aside audio b bdi bdo blockquote br button canvas cite code data datalist del details dfn dialog div dl em embed fieldset figure footer form h1 h2 h3 h4 h5 h6 header hr i iframe img input ins kbd keygen label link (if the itemprop attribute is present) main map mark math menu meta (if the itemprop attribute is present) meter nav noscript object ol output p pre progress q ruby s samp script section select small span strong style (if the scoped attribute is present) sub sup svg table textarea time u ul var video wbr text

문서 및 응용 프로그램의 본문에 사용되는 대부분의 요소는 Flow content로 분류

 

Sectioning content : article aside nav section

머리글과 바닥 글의 범위를 정의하는 내용으로 잠재적 제목과 개요를 제공

 

Heading content : h1 h2 h3 h4 h5 h6

섹션의 헤더 (명시적으로 Sectioning content요소를 사용하여 표시하거나, heading content 자체에 내포하는지 여부)를 정의

 

Phrasing content : a abbr area (if it is a descendant of a map element) audio b bdi bdo br button canvas cite code data datalist del dfn em embed i iframe img input ins kbd keygen label link (if the itemprop attribute is present) map mark math meta (if the itemprop attribute is present) meter noscript object output progress q ruby s samp script select small span strong sub sup svg textarea time u var video wbr text

문서의 텍스트뿐만 아니라 내부 단락 수준에서 해당 텍스트를 마크업하는 요소, 콘텐츠 형식 단락으로 실행

적어도 하나의 하위 요소 노드가 최소한 하나의 하위 텍스트 노드가 있어야 할 수 있습니다.

 

Embedded content : audio canvas embed iframe img math object svg video

문서 또는 문서에 삽입되는 또 다른 어휘의 내용에 다른 자원을 가진 콘텐츠.

 

Interactive content : a audio (if the controls attribute is present) button details embed iframe img (if the usemap attribute is present) input (if the type attribute is not in the hidden state) keygen label object (if the usemap attribute is present) select textarea video (if the controls attribute is present)

특별한 사용자 상호 작용을위한 것


출처:http://www.w3.org/

'Web > Html' 카테고리의 다른 글

[html5]Form 정리  (0) 2013.02.23
접근성을 높이는 html5 태그  (0) 2013.02.02
사운드 지원 audio 태그 사용방법  (0) 2013.01.30
동영상 재생 video태그  (0) 2013.01.30
html5 기본문서형식  (0) 2013.01.29

[html5]Form 정리

2013. 2. 23. 15:49 Web/Html

Form Method 전송방법 종류
- options : 
- get : 검색필드, 정보의 전송요청
- head: Meta정보만 전송요청
- post : 암호화
- put : 
- delete : 
- trace : 정보 요청
- connect : 연결요청


암호화하는 방법 enctype=""
- application/x-www-form-urlencoded :(기본값) 모든 문자를 인코딩 합니다.
- multipart/form-data :어떠한 문자 인코딩도 하지 않습니다. 주로 파일 업로드 컨트롤을 제공하는 경우 사용합니다.(이미지)
- text/plain :공백이 + 문자로 변환되며 특수 문자를 인코딩 하지 않습니다.


서식안에 있는 문자코드셋트 설정가능
accept-charset="UTF-8" 


폼안에 있는 fieldset 링크 가능 
FIELDSET - 해당 필드셋의 내용을 사용할 수 없게 하는 disabled 속성(오페라10 에서 확인). 필드셋이 폼 안에 있지 않아도 전송할 수 있는 form 속성(오페라10에서 지원).

<fieldset disabled="disabled" form="go">
    <legend>연락처</legend>
    <p><label>이메일 : <input type="email" /></label></p>
</fieldset>
<form method="post" action="#" id="go">
    <input type="submit" value="전송" />
</form>



 
pattern="[0-9]{3}-[0-9]{4}-[0-9]{4}"
novalidate="no" 문법검사 패스






폼예제,
enctyle 세가지의 용도
canvas..


'Web > Html' 카테고리의 다른 글

[html5]Content models 정리  (0) 2013.05.06
접근성을 높이는 html5 태그  (0) 2013.02.02
사운드 지원 audio 태그 사용방법  (0) 2013.01.30
동영상 재생 video태그  (0) 2013.01.30
html5 기본문서형식  (0) 2013.01.29

접근성을 높이는 html5 태그

2013. 2. 2. 15:14 Web/Html

태그
- 구조적 : Div
- 내용 : section(제목포함)
- 구분 : hr
- 독립가능한 글 : article
- 메인메뉴: nav
- 메뉴: menu, command (아직...)
- 서브메뉴: section
- address: 주소, 연락처 정도만
- small : 본문 내용에 대한 저작권 표시
- iframe: sandbox(스크립트방지), seamless(테두리지우지), 보안을 위한 방법

폼태그 생략가능
- formaction, formmethod 지정해주기
<fieldset>     
     <textarea cols="50" rows="6"></textarea>
     <input type="submit" value="update" formaction="#" formmethod="post">
</fieldset>


접근성 - WAI ARIA
- role =""

참고사이트
http://www.webstandards.org/

'Web > Html' 카테고리의 다른 글

[html5]Content models 정리  (0) 2013.05.06
[html5]Form 정리  (0) 2013.02.23
사운드 지원 audio 태그 사용방법  (0) 2013.01.30
동영상 재생 video태그  (0) 2013.01.30
html5 기본문서형식  (0) 2013.01.29

사운드 지원 audio 태그 사용방법

2013. 1. 30. 19:46 Web/Html


 <audio controls autoplay>
   <source src="" type="audio/ogg" /><!-- firefox, opera, Chrom -->
   <source src="" type="audio/mpeg" /><!-- ie9, Chrom, safari-->
 </audio>

<!--
※ 문제해결
1. firefox source 태그 버그로 자기가 지원하지 않는 파일 형식은 제대로 처리하지 못함.
   반드시 ogg를 먼저 선언해야 함 
2. 모바일에서 audio태그가 지원되지 않을경우 type속성 제거
-->

'Web > Html' 카테고리의 다른 글

[html5]Form 정리  (0) 2013.02.23
접근성을 높이는 html5 태그  (0) 2013.02.02
동영상 재생 video태그  (0) 2013.01.30
html5 기본문서형식  (0) 2013.01.29
IE 6-8 해결방법 html5shiv  (0) 2012.12.03

동영상 재생 video태그

2013. 1. 30. 19:40 Web/Html

플래시 플레이어 없이도 H.264코덱을 지원하는 웹 브라우저와
테오라 코덱을 지원하는 웹 브라우저 모두 동영상을 볼수 있다.


<video width="" height="" autoplay controls poster="">
   <source src="media/chrome.mp4" type="video/mp4" /><!-- 모바일 ie9, Chrom, safari-->
   <source src="media/chrome.ogv" type='video/ogg; codecs="theora, vorbis"' /><!-- firefox, opera, Chrom -->
</video>


 ※ 'video/ogg; codecs="theora, vorbis"' 작은따옴표안에 큰따옴표 넣기:반대 파이어폭스 재생 안됨
  
 ==속성설명==
 ▶ IE8 이상
 ▶ src 동영상 파일 경로
 ▶ poster 동영상이 화면에 나타나지 않을 경우 대신 표시할 그림
 ▶ preload 미리 다운로드 받아 재생단추를 눌렀을때 재생되게 함
 ▶ autoplay 자동 재생
 ▶ loop 반복 재생 지정
 ▶ controls 화면에 콘트롤 막대 추가
 ▶ width 화면의 너비
 ▶ height 화면의 높이
  

'Web > Html' 카테고리의 다른 글

접근성을 높이는 html5 태그  (0) 2013.02.02
사운드 지원 audio 태그 사용방법  (0) 2013.01.30
html5 기본문서형식  (0) 2013.01.29
IE 6-8 해결방법 html5shiv  (0) 2012.12.03
[그누보드]php 조건문 형식  (0) 2012.08.22
Copyright © HuckleberryM All Rights Reserved | JB All In One Designed by CMSFactory.NET