Apa yang baharu dalam html5

Ciri-ciri baharu HTML5: 1. Teg semantik (header, footer, nav, dsb.); ); 5. Elemen media video dan audio;

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi HTML5, komputer Dell G3.

HTML5 ialah generasi HTML seterusnya dan akan menjadi standard baharu untuk HTML, XHTML dan HTML DOM.

HTML5 ialah hasil kerjasama antara W3C dan WHATWG.

Sesetengah peraturan yang ditetapkan untuk HTML5:

• Ciri baharu hendaklah berdasarkan HTML, CSS, DOM dan JavaScript.
• Mengurangkan keperluan untuk pemalam luaran (seperti Flash)
• Pengendalian ralat yang lebih baik
• Lebih banyak markup untuk menggantikan skrip
• HTML5 hendaklah bebas peranti
• Proses pembangunan hendaklah telus kepada orang ramai

Sokongan penyemak imbas

Versi terkini Chrome, Firefox, Safari dan Opera menyokong ciri HTML5 tertentu. Internet Explorer 9 akan menyokong ciri HTML5 tertentu. Maxthon Domestik, serta penyemak imbas domestik seperti 360 Browser, Sogou Browser, QQ Browser dan Cheetah Browser berdasarkan IE atau Chromium (versi kejuruteraan atau versi percubaan Chrome) juga menyokong keupayaan HTML5.

Ciri baharu

Beberapa ciri baharu yang menarik ditambah dalam HTML5:

1 Teg semantik

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, dsb.

2. webStorage mekanisme storan sessionStorage dan localStorage

webStorage: Gunakan HTML5 untuk menyimpan data penyemakan imbas pengguna secara setempat. Terdahulu, storan tempatan menggunakan kuki. Tetapi storan Web perlu lebih selamat dan lebih pantas Data ini tidak akan disimpan pada pelayan, tetapi data ini hanya akan digunakan apabila pengguna meminta data tapak web. Ia juga boleh menyimpan sejumlah besar data tanpa menjejaskan prestasi tapak web. Data wujud dalam pasangan kunci/nilai, dan data halaman web hanya boleh diakses dan digunakan oleh halaman web tersebut.

Storan Web terbahagi kepada dua jenis: sessionStorage dan localStorage, iaitu, kedua-duanya adalah contoh Storan. Ia boleh dilihat dengan jelas daripada makna literal bahawa sessionStorage menyimpan data dalam sesi dan hilang apabila penyemak imbas ditutup manakala localStorage sentiasa menyimpan data secara setempat pada klien. Kaedah yang disediakan oleh APInya adalah seperti berikut:

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

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

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

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

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

• localStorage: penyimpanan data tanpa had masa

Kitaran hayat localStorage adalah kekal. Jika anda menggunakan localStorage untuk menyimpan data, walaupun anda menutup pelayar, data tidak akan hilang melainkan anda secara aktif memadam data Kaedah yang digunakan adalah seperti yang ditunjukkan di atas. localStorage mempunyai atribut panjang, anda boleh menyemak jumlah rekod data yang ada. Penggunaannya adalah seperti berikut:

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: Storan data untuk sesi

Kitaran hayat sessionStorage adalah sebelum penyemak imbas ditutup. Dalam erti kata lain, data akan sentiasa wujud sehingga keseluruhan pelayar ditutup. sessionStorage juga mempunyai atribut panjang, dan pertimbangan dan penggunaan asasnya adalah sama seperti localStorage. Perkara berikut perlu diambil perhatian:
(1) Muat semula halaman tidak akan memadam data
(2) Hanya pautan yang dibuka pada halaman semasa boleh mengakses data storan sesi
(3) Gunakan tetingkap .Buka dibuka halaman dan menukar kaedah localtion.href untuk mendapatkan data di dalam sessionStorage; saat tingkap dibuka.

Gunakan kaedah go() untuk melompat sewenang-wenangnya dalam sejarah pengguna, sama ada ke belakang atau ke hadapan. Kaedah ini menerima parameter, nilai integer yang mewakili bilangan halaman untuk melompat ke belakang atau ke hadapan.

Nombor negatif mewakili lompatan ke belakang (serupa dengan butang "kembali" penyemak imbas yang berdiri sendiri)

Nombor positif mewakili lompatan ke hadapan (serupa dengan butang "ke hadapan" bagi yang berdiri sendiri pelayar)

Anda juga boleh menghantar parameter rentetan ke kaedah go() Pada masa ini, penyemak imbas akan melompat ke kedudukan pertama dalam sejarah yang mengandungi rentetan-----mungkin pergi ke hadapan, atau Mei berundur. Bergantung pada lokasi mana yang paling dekat. Jika sejarah tidak mengandungi rentetan, maka kaedah ini tidak melakukan apa-apa

Anda juga boleh menggunakan dua kaedah trengkas back() dan forward() dan bukannya go(). Kedua-dua kaedah meniru butang "belakang" dan "maju" penyemak imbas.

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

4. Naik taraf elemen borang

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

传统的表单元素：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视频教程》

Atas ialah kandungan terperinci Apa yang baharu dalam html5. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!