HTML5의 새로운 기능

HTML5의 새로운 기능: 1. 의미 태그(머리글, 바닥글, 탐색 등) 2. WebStorage 저장 메커니즘 3. 양식 유형(이메일, 텔, 날짜 등) 미디어 요소 비디오 및 오디오 6. 캔버스.

이 튜토리얼의 운영 환경: Windows 7 시스템, HTML5 버전, Dell G3 컴퓨터.

HTML5는 차세대 HTML이며 HTML, XHTML 및 HTML DOM의 새로운 표준이 될 것입니다.

HTML5는 W3C와 WHATWG 간의 협력의 결과입니다. W3C 与 WHATWG 合作的结果。

为 HTML5 建立的一些规则：

• 新特性应该基于 HTML、CSS、DOM 以及 JavaScript。
• 减少对外部插件的需求（比如 Flash）
• 更优秀的错误处理
• 更多取代脚本的标记
• HTML5 应该独立于设备
• 开发进程应对公众透明

浏览器支持

最新版本的 Chrome、Firefox、Safari以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。国内的 遨游浏览器（Maxthon），以及基于IE或Chromium（Chrome的工程版或称实验版）所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹 浏览器等国产浏览器同样具备支持HTML5的能力。

新特性

HTML5 中新增的一些有趣的新特性：

1、语义化标签

header<span style="font-family:Microsoft Yahei, Hiragino Sans GB, Helvetica, Helvetica Neue, 微软雅黑, Tahoma, Arial, sans-serif">  </span>footer 、 nav 、 aside 、 section 、 meau 、 template 、 article 、 audio 、 video 、 canvas 等

2、webStorage 储存机制 sessionStorage 和 localStorageHTML5에 설정된 몇 가지 규칙:

새로운 기능은 HTML, CSS, DOM 및 JavaScript를 기반으로 해야 합니다.

외부 플러그인(예: Flash)의 필요성 감소

• 더 나은 오류 처리

스크립트 대체를 위한 추가 마크업

HTML5는 장치 독립적이어야 함

• 개발 프로세스는 대중에게 투명해야 함

브라우저 지원

최신 버전의 Chrome, Firefox, Safari 및 Opera는 특정 HTML5 기능을 지원합니다. Internet Explorer 9은 특정 HTML5 기능을 지원합니다. 국내 Maxthon은 물론, IE나 Chromium(크롬의 엔지니어링 버전 또는 실험 버전) 기반의 360 브라우저, Sogou 브라우저, QQ 브라우저, Cheetah 브라우저 등 국내 브라우저도 HTML5 기능을 지원합니다.

새로운 기능

HTML5에 추가된 몇 가지 흥미로운 새 기능:

1 의미 체계 태그

header<span style="font- family:Microsoft Yahei , Hiragino Sans GB, Helvetica, Helvetica Neue, å¼®è½̅é≥…é»', Tahoma, Arial, sans-serif"> </span>footer , nav , aside , section , meau , template , article , 오디오, 비디오, 캔버스 등

2 webStorage 저장 메커니즘 sessionStorage 및 <code>localStorage

webStorage: HTML5를 사용하여 사용자 검색 데이터를 로컬에 저장합니다. 이전에는 로컬 저장소에서 쿠키를 사용했습니다. 하지만 웹 스토리지는 더욱 안전하고 빨라야 합니다. 이러한 데이터는 서버에 저장되지 않으며 사용자가 웹사이트 데이터를 요청할 때만 사용됩니다. 또한 웹사이트 성능에 영향을 주지 않고 많은 양의 데이터를 저장할 수도 있습니다. 데이터는 키/값 쌍으로 존재하며, 웹 페이지의 데이터는 해당 웹 페이지에서만 액세스하고 사용할 수 있습니다.

웹 저장소는 sessionStorage와 localStorage의 두 가지 유형으로 구분됩니다. 즉, 이 두 가지 유형은 저장소의 인스턴스입니다. sessionStorage는 세션에 데이터를 저장하고 브라우저가 닫히면 사라지는 반면 localStorage는 항상 클라이언트에 로컬로 데이터를 저장한다는 문자 그대로의 의미에서 명확하게 알 수 있습니다. API에서 제공하는 방법은 다음과 같습니다.

setItem (key, value) ——  保存数据，以键值对的方式储存信息。

getItem (key) ——  获取数据，将键值传入，即可获取到对应的value值。

removeItem (key) ——  删除单个数据，根据键值移除对应的信息。

clear () ——  删除所有的数据

key (index) —— 获取某个索引的key

localStorage: 시간 제한 없는 데이터 저장

localStorage의 수명 주기는 영구적입니다. localStorage를 사용하여 데이터를 저장하는 경우, 브라우저를 닫더라도 데이터를 적극적으로 삭제하지 않는 한 데이터는 사라지지 않습니다. localStorage에는 길이 속성이 있으므로 해당 데이터 레코드 수를 확인할 수 있습니다. 사용법은 다음과 같습니다:

var storage = null;                          //判断浏览器是否支持localStorage
    if(window.localStorage){
        storage.setItem("name", "Rick");     //调用setItem方法，存储数据
            alert(storage.getItem("name"));  //调用getItem方法，弹框显示 name 为 Rick
            storage.removeItem("name");      //调用removeItem方法，移除数据
            alert(storage.getItem("name"));  //调用getItem方法，弹框显示 name 为 null
    }

sessionStorage: 세션을 위한 데이터 저장🎜🎜 sessionStorage의 수명주기는 브라우저가 닫히기 전입니다. 즉, 전체 브라우저가 닫힐 때까지 데이터는 항상 존재합니다. sessionStorage에도 length 속성이 있으며 기본적인 판단 및 사용법은 localStorage와 동일합니다. 다음 사항에 유의해야 합니다. 🎜 (1) 페이지를 새로 고쳐도 데이터는 지워지지 않습니다. 🎜 (2) 현재 페이지에서 열린 링크만 sessionStorage 데이터에 액세스할 수 있습니다. 🎜 (3) window.open을 사용하여 페이지를 엽니다. 변경 localtion.href 메소드는 sessionStorage 내부의 데이터를 얻을 수 있습니다. 🎜🎜🎜3. 기록 개체 🎜🎜🎜 기록 개체는 창이 열리는 순간부터 사용자의 인터넷 액세스 기록을 저장합니다. 🎜🎜사용자 기록에서 뒤로 또는 앞으로 임의로 이동하려면 go() 메서드를 사용하세요. 🎜🎜이 메서드는 뒤로 또는 앞으로 이동할 페이지 수를 나타내는 정수 값인 매개 변수를 허용합니다. 🎜🎜음수는 뒤로 점프를 나타냅니다(독립 실행형 브라우저의 "뒤로" 버튼과 유사) 🎜🎜양수는 앞으로 점프를 나타냅니다(독립 실행형 브라우저의 "앞으로" 버튼과 유사) 🎜

history.go(-1) // 后退一页 
history.go(1) // 前进一页 
history.go(2) // 前进两页

🎜할 수도 있습니다 give go() 이 메소드는 문자열 매개변수를 전달하고 브라우저는 문자열을 포함하는 기록의 첫 번째 위치로 이동합니다. 앞으로 또는 뒤로 이동할 수 있습니다. 어느 위치가 가장 가까운지에 따라 다릅니다. 기록에 문자열이 포함되어 있지 않으면 이 메서드는 아무 작업도 수행하지 않습니다.🎜

history.go('wrox.com') // 调到最近的 wrox.com 页面

🎜 go() 대신 back() 및 forward() 두 가지 단축 메서드를 사용할 수도 있습니다. 두 방법 모두 브라우저의 "뒤로" 및 "앞으로" 버튼을 모방합니다. 🎜

history.back() // 后退一页
history.forward() // 前进一页

🎜🎜4. 양식 요소 업그레이드🎜🎜

传统的表单元素：form、laber、textarea、select、button...

input（text、password、radio、checkbox、file、submit、reset、button）

Html5给input新增加一些类型（search、email、number、tell、range、color、date）

升级：给表单元素新增加属性placeholder（给表单元素设置提示信息）

升级：提供了新的下拉框方式

5、多媒体

用于回放的 video 和 audio 元素

6、用于绘画的 canvas

定义图形,绘制路径，矩形，圆形，字符以及添加图像的方法 。

　　首先创建canvas元素，并规定元素的id、宽度和高度撒的：

　　　　　　
　然后通过javas来绘制。Canvas元素本身没有绘图能力，所有的绘制工作必须在javascript内部完成渐变。
　　　　　　

　　JavaScript 使用 id 来寻找 canvas 元素：

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

　　然后，创建 context 对象：

　　　　　　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是圆周率，false代表顺时针而true是逆时针。

　　颜色的渐变效果也是可以实现的：

　　　　<script type="text/javascript">
　　　　　　　　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);
　　　　 </script>

　　还有一些其他效果:

　　　　曲线quadraticCurreTo

　　　　字体fillText

推荐教程：《html视频教程》

위 내용은 HTML5의 새로운 기능의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!