HTML5의 새로운 기능

XHTML이 HTML을 대체하기 시작했다면 HTML5의 실용성은 두 구문을 통합하고 HTML의 추상 DOM 표현을 표현하기 위해 동일한 효과적인 방법을 사용한다는 것입니다. HTML5 사양은 HTML4, XHTML1 및 DOM 레벨 2HTML을 결합하고 이에 따라 업데이트됩니다.

HTML5는 HTML 사양의 XML 직렬화 형식으로 XHTML 1을 대체합니다. 개발자는 완화된 HTML 구문이나 엄격한 XML 구문을 사용하여 HTML5 문서의 형식을 지정할 수 있습니다.

HTML5에는 다음과 같은 새로운 기능과 업데이트된 기능이 포함되어 있습니다.

1. 새로운 HTML 문서 유형을 추가했습니다: 2. 몇 가지 새로운 구조적 마크업 요소( , , , 등)를 추가했습니다. 3. 이전 버전과 호환되는 HTML 및 XHTML 구문 분석 규칙 4. 멀티미디어 콘텐츠를 위한 및 5. 더 많은 입력 요소 유형 값으로 현지 날짜, 시간, 색상 및 숫자를 선택할 수 있습니다. 6. 프레임이 HTML에서 제거되었습니다(그러나 ifame은 이를 유지하고 샌드박스 처리했습니다). 7. 2D 도면, 미디어 재생, 미디어 유형 등록, 드래그 앤 드롭, 문서 간 메시지 전송을 위한 API 8. 오프라인 브라우징을 위한 웹 애플리케이션 캐시

1. 캔버스 요소

그래픽, 그리기 경로, 직사각형, 원, 문자 및 이미지 추가 방법을 정의합니다.

먼저 캔버스 요소를 만들고 요소의 ID, 너비, 높이를 지정합니다.

然后通过javas来绘制。Canvas元素本身没有绘图能力，所有的绘制工作必须在javascript内部完成渐变。 var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75); JavaScript는 ID를 사용하여 캔버스 요소를 찾습니다.

var c=document.getElementById("myCanvas"); 그런 다음 컨텍스트 개체를 만듭니다.

var cxt=c.getContext("2d"); getContext("2d") 개체는 경로, 직사각형, 원, 문자 그리기 및 이미지 추가를 위한 여러 메서드가 포함된 내장 HTML5 개체입니다.

다음 두 줄의 코드는 빨간색 직사각형을 그립니다.

cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75); fillStyle 메소드는 빨간색으로 염색하고, fillRect 메소드는 모양, 위치, 크기를 지정합니다.

다음 두 줄의 코드는 직선을 그립니다.

cxt.moveTo(100,100);

cxt.lineTo(200,200);

다음 코드 줄은 원을 그립니다.

cxt.arc(70,18,15,0,Math.PI*2,false);

이 속성 값은 무엇에 해당하나요? 70과 18은 각각 X축과 Y축, 15는 원의 반경, 0은 각도, Math.PI*2는 pi, false는 의미합니다. 시계 방향 및 true는 시계 반대 방향을 의미합니다.

색상 그라데이션 효과도 얻을 수 있습니다.

var c=document.getElementById("myCanvas");

var cxt=c.getContext("2d");

var grd=cxt.createLinearGradient(0,0,175,50);

grd.addColorStop(0,"#FF0000");

grd.addColorStop(1,"#00FF00");

cxt.fillStyle=grd;

cxt.fillRect(0,0,175,50);

다른 효과도 있습니다:

2차 곡선CurreTo

글꼴 채우기텍스트

2. 오디오 오디오 및 비디오

비디오는 다양한 비디오 파일에 연결할 수 있는 여러 소스 요소도 지원합니다. 속성 값: autoplay=”autoplay”는 준비되는 대로 재생됩니다. loop=재생 후 “loop”가 다시 재생됩니다

preload="예비 로드"

음소거="음소거"

볼륨-=0.1 볼륨 감소

볼륨+=0.1 볼륨 더하기

CurrentTime+=10 10초 빨리감기

CurrentTime-=10 10초 전으로 돌아가기

PlaybackRate=1 재생 가속(기본 재생 속도)

오디오의 속성값은 비디오의 속성값과 동일합니다

3. 보관

HTML5는 클라이언트 측에 데이터를 저장하는 두 가지 새로운 방법을 제공합니다.

LocalStorage - 시간 제한 없는 데이터 저장

localStorage 방식으로 저장되는 데이터에는 시간 제한이 없습니다. 데이터는 다음 날, 다음 주 또는 연도 이후에도 계속 사용할 수 있습니다.

sessionStorage - 세션에 대한 데이터 저장

sessionStorage 메소드는 세션에 대한 데이터를 저장합니다. 사용자가 브라우저 창을 닫으면 데이터가 삭제됩니다.

4. 의미 태그

태그는 외부 콘텐츠(구조 요소)를 정의합니다. 페이지 콘텐츠 외부의 콘텐츠를 정의합니다. 옆의 내용은 기사의 내용과 연관되어 있습니다. (구조적 요소) 미디어 콘텐츠와 해당 제목의 그룹을 정의합니다. (구조적 요소) 태그는 문서의 섹션(section)을 정의합니다. 장, 머리글, 바닥글 또는 문서의 기타 부분(구조적 요소)

5. 새로운 양식 유형

1. 이메일

email 类型用于应该包含 e-mail 地址的输入域。在提交表单时，会自动验证 email 域的值。

E-mail: type="email" name="user_email" />

2、url

url 类型用于应该包含 URL 地址的输入域。在提交表单时，会自动验证 url 域的值。

Homepage: type="url" name="user_url" />

3、number

number 类型用于应该包含数值的输入域。还能够设定对所接受的数字的限定：

Points: type="number" name="points" min="1" max="10" />

4、range

range 类型用于应该包含一定范围内数字值的输入域。

range 类型显示为滑动条。还能够设定对所接受的数字的限定：

type="range" name="points" min="1" max="10" /> 5、Date pickers (date, month, week, time, datetime, datetime-local)

HTML5 拥有多个可供选取日期和时间的新输入类型

Date: type="date" name="user_date" />

6、search

search 类型用于搜索域，比如站点搜索或 Google 搜索。search 域显示为常规的文本域。

7、color颜色的选择

HTML5의 새로운 기능

관련 기사