html5 기본 태그(html5 비디오 태그 html5 새 태그 사용법)_html5 튜토리얼 기술

1. 선언문 변경

2. 문자 인코딩 변경을 지정합니다. html5에서는 utf-8

사용을 권장합니다.

3. HTML5에서는 종결자 없이

를 허용합니다. 이는 오류가 아닙니다.

4. 종료 태그는 작성할 수 없습니다:area,base,br,col,command,embed,hr,img,input,keygen,link,meta,param,source,track,wbr

5. 종료 태그를 생략할 수 있는 요소는 li, dt, dd, p, rt, rp, optgroup, option, colgroup, thead, tbody, tfoot, tr, td, th

6. 모든 태그를 생략할 수 있는 요소는 html, head, body, colgroup, tbody

7. <입력 유형=텍스트> 이전에는 속성 값 텍스트에 큰따옴표가 있어야 했지만 이제는 생략할 수 있습니다.

8. html5 마크업 예시 보기

9. 새로운 구조 요소 섹션: 컨테이너 요소. 장, 머리글, 바닥글은 h1, h2...와 함께 사용되어 문서 구조를 나타낼 수 있습니다. 제목 내용을 캡슐화하는 데에도 사용할 수 있지만 부적절한 제목은 없습니다. 동작을 정의하기 위해 컨테이너 요소의 스타일을 직접 지정하거나 스크립트를 작성해야 하는 경우 섹션 대신 div를 사용하는 것이 좋습니다. 기능: 페이지 내용을 여러 단위로 나눕니다. 자체적으로 완전하고 독립적인 콘텐츠를 갖고 있는 기사 요소와 혼동하지 마십시오. 요약: ① 섹션 요소를 스타일 설정을 위한 페이지 컨테이너로 사용하지 마십시오. 이는 div 요소의 작업입니다. ② Article 요소, Aside 요소, nav 요소를 사용하기 적합하다면 section 요소를 사용하지 마세요. ③제목이 없는 콘텐츠 블록에는 섹션 요소를 사용하지 마세요.

10. 새로운 구조 요소 기사: 블록 수준 요소. 문맥상 관련이 없는 페이지의 독립적인 콘텐츠를 나타냅니다. 독립성을 강조하고, 섹션은 분할 또는 청킹을 강조하며, 기사는 독립성을 강조합니다.

11. 새로운 구조 요소: 블록 수준 요소. 기사 요소의 콘텐츠 위치와 기사 요소의 콘텐츠와 관련된 보조 콘텐츠를 나타냅니다.

12. 새로운 구조 요소 헤더: 블록 수준 요소. 전체 페이지의 제목입니다. 헤더에는 하나 이상의 제목(h1-h6), hgroup 요소 또는 nav 요소가 있어야 합니다.

13. 새로운 구조 요소 hgroup: 블록 수준 요소. 전체 페이지의 제목이나 페이지 내의 콘텐츠 블록을 결합하는 데 사용됩니다. 메인 타이틀이 하나만 있는 경우 hgroup은 필요하지 않습니다.

14. 새로운 구조 요소 바닥글: 블록 수준 요소. 콘텐츠 블록의 바닥글입니다.

15. 새로운 구조 요소 주소: 인라인 요소. 작성자, 이메일 등을 포함한 문서 연락처 정보를 표시합니다.

16. 새로운 구조 요소 탐색: 블록 수준 요소. 탐색 링크. 기존 탐색, 사이드바 탐색, 페이지 내 탐색 및 페이지 넘기기 탐색. H5에서는 nav 대신 메뉴를 사용하지 마십시오. 메뉴 요소는 명령을 실행하는 일련의 메뉴입니다. 보다 정확하게는 웹 애플리케이션에 사용됩니다.

17. 새로운 구조 요소 그림: 블록 수준 요소. 독립적인 스트림 콘텐츠 조각은 일반적으로 문서 주제 스트림 콘텐츠의 독립적인 단위를 나타냅니다. figcaption 요소를 사용하여 그림 요소 그룹에 캡션을 추가합니다.

18. 새로운 요소 비디오: 비디오를 정의합니다.

코드 복사

코드는 다음과 같습니다.

19. 새로운 요소 오디오: 오디오를 정의합니다.

코드 복사

코드는 다음과 같습니다.

20. 새로운 요소 삽입: 다양한 미디어 삽입, 형식은 midi, wav, aiff, au, mp3 등이 가능합니다.

21

코드 복사

코드는 다음과 같습니다.

< 개체 너비= "320" height="240" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6 ,0, 40,0"> name="src" value=""borse.wav"/" />

22. 새 요소 표시: 강조 표시된 텍스트. 스팬과 매우 유사

23. 새로운 요소 진행률: 실행 중인 프로세스를 나타내고 시간이 많이 걸리는 함수 프로세스를 JavaScript로 표시합니다.

코드 복사

코드는 다음과 같습니다.

<미터>

24. 새로운 요소 Time: 날짜와 시간을 나타냅니다.

코드 복사

코드는 다음과 같습니다.

< /시간>

Span
은 H4.25에서 사용됩니다. 새로운 요소 ruby: 루비 주석을 나타냅니다. h4에서는 볼 수 없는 한한

26. 새로운 요소 rt: 문자의 해석이나 발음을 나타냅니다

27. 새로운 요소 rp: Ruby 요소를 지원하지 않는 브라우저에 표시되는 콘텐츠를 정의하기 위해 Ruby에서 사용됩니다.

28. 새로운 요소 wbr: 부드러운 줄 바꿈을 나타냅니다. br과의 차이점은 br은 여기서 줄 바꿈을 수행해야 함을 의미하고, wbr은 브라우저 또는 상위 요소의 너비가 충분히 넓을 때 너비가 충분하지 않으면 줄 바꿈이 수행되지 않음을 의미합니다. 여기에서 줄이 자동으로 줄바꿈됩니다. Wbr은 문자 기반 언어에 매우 유용하지만 중국어에는 큰 영향을 미치지 않는 것 같습니다. H4에서는 사용할 수 없습니다.

29. 새로운 요소 Canvas: 그래픽을 나타냅니다. 예: 차트, 이미지. 그러나 요소 자체에는 동작이 없습니다. 캔버스만 제공되며 클라이언트 JavaScript에 그리기 API가 표시되므로 스크립트가 이 캔버스에 그림을 그릴 수 있습니다.

코드 복사

코드는 다음과 같습니다.

30. 새 요소 명령: 명령 버튼을 나타냅니다. 예: 라디오 버튼, 체크박스, 버튼.

코드 복사

코드는 다음과 같습니다.

html4에는

이 없습니다.

31. 새로운 요소 세부정보: 세부정보 사용자가 필요로 하고 얻을 수 있는 세부 정보를 나타냅니다. 요약과 함께 사용할 수 있습니다. 요약은 제목이나 범례를 제공합니다.

코드 복사

코드는 다음과 같습니다.

summary>html5

32. 새 요소 datagrid: 데이터 목록을 나타냅니다. summary>html5

. 트리 목록에 표시

33. 새로운 요소 keygen: 키 생성을 나타냅니다

34. 새로운 요소 출력: 다양한 출력 유형을 나타냅니다. 스크립트 등

35. 새로운 요소 소스: 미디어 요소. 미디어 자산을 정의합니다. H4에서 param

사용

36. 새 요소 메뉴: 메뉴 목록을 나타냅니다.

코드 복사코드는 다음과 같습니다.

< li>< ;/li>

h4에서는 메뉴 사용을 권장하지 않습니다.

37. 새로운 입력 요소 유형 이메일: 이메일을 입력해야 하는 텍스트 입력 상자를 나타냅니다.

38. 새로운 입력 요소 유형 url: URL 주소를 입력해야 함을 나타냅니다.

39. 새로운 입력 요소 유형 번호: 숫자 값을 입력해야 함을 나타냅니다.

40. 새로운 입력 요소 유형 범위: 특정 범위 내의 숫자 값을 입력해야 함을 나타냅니다.

41. 새로운 입력 요소 유형 날짜 선택기: h5에는 날짜와 시간을 선택할 수 있는 여러 개의 새로운 입력 텍스트 상자가 있습니다.

코드 복사코드는 다음과 같습니다.

날짜---- --- ------일, 월, 연도 선택

월------------월,연도 선택
주------------ 주 및 연도 선택
시간------------시간(시간 및 분) 선택
날짜/시간------시간, 일, 월, 연도 선택(utc 시간) )
Datetime-local—시간, 일, 월, 연도 선택(현지 시간)

44. 1) 요소 폐지: 일부 브라우저에서만 지원하는 요소: 애플릿, bgsound(IE에서만 지원), 깜박임, 선택 윤곽 및 기타 요소. bgsound(ie에서만 지원), marquee(ie에서만 지원)이므로 h5에서는 폐지됩니다. 애플릿 - 삽입 또는 개체로 대체될 수 있습니다. Bgsound - 오디오로 대체될 수 있습니다. Marquee는 js 프로그래밍으로 대체될 수 있습니다.

2) 태그 매뉴얼 정의: 요소를 결합하는데 사용됩니다. 이용안내 : 주로 그림과 그림설명의 조합에 사용됩니다:

코드복사코드는 다음과 같습니다.

에 대한 설명은 다음과 같습니다. 이미지 정보

3) 라벨 매뉴얼 설명: 메뉴 목록을 정의합니다. 양식 컨트롤을 나열하려면 이 레이블을 사용하십시오. 사용 가이드: 메뉴 목록 또는 메뉴 옵션을 정의하기 위해 메뉴 블록에서 사용됩니다:

코드 복사

코드는 다음과 같습니다.

<메뉴>

HTML 5

CSS

< ;li>JavaScript