HTML5 CSS3 standard WEB baharu dan kemahiran tutorial support_html5 penyemak imbas

Oleh kerana ia berasal dari nota, saya hanya akan menyenaraikan tajuk dan ciri tatabahasa untuk setiap entri Saya tidak mempunyai masa untuk menulis penjelasan terperinci dan contoh yang boleh dilaksanakan buat masa ini, tetapi saya akan memberikan alamat dokumen yang berkaitan yang sudah menyokong ciri ini Pelayar juga akan menyediakan pelaksanaan alternatif/peralihan untuk penyemak imbas yang tidak disokong. Nah, ini pada asalnya nota yang saya ambil secara peribadi. Saya sangat suka mencatat pada Evernote Walaupun kali terakhir saya melihat artikel Teacher Lewu, saya berkata bahawa usia saya sekarang baru sahaja memasuki tempoh ingatan puncak. keyakinan masih perlu dipukul! Sebagai contoh, apabila berbincang dengan orang lain tentang apa yang dikatakan badut itu kepada pendakwa raya di hospital dalam The Dark Knight yang mengubahnya menjadi Two-Face, saya tidak ingat satu baris dialog pun, dan apakah nama watak itu semasa Penny memainkan Age. Conan dalam Big Bang Theory S2? "Queen Penelope", saya sangat kagum apabila saya melihatnya sehingga saya tidak dapat mengingati Odyssey sebulan kemudian. Saya sentiasa berasa lebih tenang apabila meninggalkan nota... Ah, saya keluar topik lagi.

Artikel ini telah menyusun beberapa piawaian baharu yang paling penting (atau agak popular) Walaupun kebanyakannya masih draf w3c dan masih berada di awal peringkat Pengesyoran, ia telah menjadi sangat dicari dalam pusingan baharu. perang penyemak imbas. Selebriti, sejumlah besar demo yang berkaitan dan pakej API telah muncul dalam komuniti pembangun, dan beberapa telah memasuki persekitaran pengeluaran (seperti aplikasi luar talian gmail Google pada iPhone, sebenarnya, saya fikir dalam bidang web hari ini,). peralihan daripada teknologi proprietari pengeluar kepada Kitaran menukar piawaian jawatankuasa kepada teknologi tujuan umum untuk menghasilkan aplikasi pembunuh telah dipercepatkan dengan ketara Adakah kerana permintaan untuk aplikasi web terlalu tinggi sekarang... KEMASKINI: . Saya tiba-tiba terfikir apabila saya menyiarkan artikel lembut di solidot sebentar tadi Fahami cara menyatakan masalah ini: Malah, banyak pengeluar penyemak imbas juga merupakan pembangun aplikasi berasaskan pelayar dan penetap standard web, sama seperti jurutera yang membina pentas juga pelakon pentas dan pengarah gerakan tarian, jadi Google, Mozilla dan Apple tidak berusaha keras untuk melaksanakan piawaian teknikal yang kondusif untuk pembangunan aplikasi web Walaupun mereka masih W3C Working Draft, pasukan IE tidak mempunyai motivasi. ekonomi yang dirancang tidak bertenaga XD...

Memandangkan ia berasal daripada nota, saya hanya akan menyenaraikan tajuk dan ciri tatabahasa untuk setiap entri. Saya tidak mempunyai masa untuk menulis penjelasan terperinci dan contoh yang boleh dilaksanakan buat masa ini, tetapi saya akan memberikan alamat dokumen yang berkaitan. Selain menyenaraikan Pelayar yang disokong dengan ciri ini juga akan menyediakan pelaksanaan alternatif/peralihan untuk pelayar yang tidak menyokongnya.

================================ Garis pemisah di mana karut berakhir ======================= ==

Pertanyaan Media CSS3

Pengesanan jenis media untuk keseluruhan fail css pautan luaran dan sebahagian daripada kod css sebab popularitinya yang tinggi adalah kerana peranti mudah alih...

1. <pautan media="semua dan (orientasi:potret)” src= "screen.css" taip=" teks/css">

1. @media semua dan (warna min: 4) { ... }

standard w3c: http://www.w3.org/TR/css3-mediaqueries/
Dokumentasi MDC: https://developer.mozilla.org/En/CSS/Media_queries
Dokumentasi Opera: http ://www.opera.com/docs/specs/css/

Sokongan: Firefox 3.5, Safari 3, Opera 7

Transformasi 2D CSS3

ubah bentuk css, sesetengah orang menggunakan pemalam jquery ini untuk mencapai kesan pseudo 3D dan kesan putaran

1. -moz-transform: putar(-45deg) skew(15deg, 15deg);

1. sprite.gaya['-webkit-transform'] = 'putar(' v 'rad)';

standard w3c: http://www.w3.org/TR/css3-2d-transforms/
Dokumentasi MDC: https://developer.mozilla.org/En/CSS/CSS_transform_functions
blog webkit Pengenalan: http://webkit.org/blog/130/css-transforms/

Sokongan: Firefox 3.5, Safari 3.1
Alternatif/Peralihan: Penapis Matriks IE5.5 http://msdn.microsoft.com/en-us/library/ms533014(VS .85).aspx

Peralihan CSS3 dan Animasi CSS

Animasi CSS yang sangat dinanti-nantikan, draf yang dicadangkan oleh pasukan webkit, peralihan melaksanakan kecerunan atribut mudah dan animasi mentakrifkan kesan animasi yang lebih kompleks

1. sifat peralihan: lebar;
2. tempoh peralihan: 1s;
4. nama-animasi: 'diagonal-slide';
5. tempoh-animasi: 5s;
6. kiraan lelaran-animasi: 10;
7. @keyframes 'diagonal-slide' {}

standard w3c: http://www.w3.org/TR/css3-transitions/
standard w3c: http://www.w3.org/TR/css3-animations/
blog webkit Pengenalan : http://webkit.org/blog/138/css-animation/
Pengenalan daripada rakan sekelas John: http://ejohn.org/blog/css-animations-and-javascript/

Sokongan: Safari 3.1

Fon boleh dimuat turun CSS3

Dapat membenamkan sebarang fon dalam halaman web adalah impian pereka...tetapi satu-satunya yang disokong di sini ialah truetype dan opentype

1. @font-muka {}

standard w3c: http://www.w3.org/TR/css3-fonts/#font-resources
Dokumentasi MSDN: http://msdn.microsoft.com/en-us/library/ms530303( VS.85).aspx
Dokumentasi MDC: https://developer.mozilla.org/en/CSS/@font-face

Sokongan: Firefox 3.5, Safari 3.1, Opera 10.0, IE4.0

Bonus: Keserasian dengan sifat CSS3 yang lain

Dokumen yang diselenggara oleh pelajar ppk: http://www.quirksmode.org/css/contents.html
Dokumen yang diselenggara oleh css3.info: http://www.css3.info/modules/selector-compat/
Halaman ujian: http://westciv.com/iphonetests/

Storan HTML5 DOM

Storan berterusan mudah dalam bentuk pasangan nilai kunci

1. window.localStorage
2. window.sessionStorage //Boleh merentas domain, dikosongkan apabila tab ditutup

standard w3c: http://www.w3.org/TR/webstorage/
Senarai keserasian diselenggara oleh rakan sekelas ppk: http://www.quirksmode.org/dom/html5.html#localstorage
Dokumentasi MDC: https://developer.mozilla.org/en/DOM/Storage
Dokumentasi MSDN: http://msdn.microsoft.com/en-us/library/cc197062(VS.85).aspx

Sokongan: Firefox 3.5, Safari 4.0, IE 8.0

Cache Aplikasi Luar Talian HTML5

Gunakan fail manifes untuk cache sumber statik (imej, css, js, dll.) untuk kegunaan luar talian, bukan data berstruktur

1. <html manifes="foo. nyata">

1. MANIFEST CACHE
2. index.html
3. gaya/default.css
4. imej/logo.png

standard w3c: http://www.w3.org/TR/offline-webapps/#offline
Dokumentasi MDC: https://developer.mozilla.org/en/Offline_resources_in_Firefox

Sokongan: Firefox 3.5

Storan Pangkalan Data HTML5

Pangkalan data tempatan, menyokong SQL, mula-mula dilaksanakan oleh Google Gears Penyunting draf w3c semasa juga merupakan jurutera Google... Tetapi anehnya, API Gears tidak serasi dengan draf semasa Chrome Gears yang digabungkan. Api pangkalan data telah memadamkan api html5 yang dilaksanakan oleh webkit... Dan apabila Google melaksanakan fungsi luar talian gmail pada iPhone, ia juga menggunakan api webkit... Ia benar-benar mengelirukan...

1. var db = tetingkap.openDatabase("nota", "", "Aplikasi Nota Contoh!", 1048576) ;
2. db.transaksi(fungsi(tx) {
3. tx.executeSql('PILIH * DARI Nota', [], fungsi(tx, rs) {});
4. });

standard w3c: http://www.w3.org/TR/offline-webapps/#sql
Pengenalan kepada blog webkit: http://webkit.org/blog/126/webkit-does-html5- client-side-database-storage/
dokumentasi iphone: http://developer.apple.com/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/UsingtheJavascriptDatabase/UsingtheJavascriptDatabase.html#//apple_ref/doc/uid/TP40003 -256-CH SW1

Sokongan: Safari 3.1
Alternatif/Peralihan: Gears http://code.google.com/p/gears/wiki/Database2API

Pekerja Web HTML5

Berbilang utas, melakukan operasi kompleks di latar belakang, tidak boleh mengendalikan DOM, berkomunikasi antara utas melalui acara mesej

1. var MyWorker = baharu Pekerja ('my_worker.js');
2. myWorker.onmessage = fungsi(acara) { acara.data };
3. myWorker.postMessage(str);

standard w3c: http://www.w3.org/TR/workers/

Dokumen MDC: https://developer.mozilla.org/En/Using_web_workers

Sokongan: Firefox 3.5
Alternatif/Peralihan: Gears http://code.google.com/p/gears/wiki/HTML5WorkerProposal

Geolokasi HTML5

Geo API

1. tetingkap.navigator.geolokasi

standard w3c: http://www.w3.org/TR/geolocation-API/

Dokumentasi MDC: https://developer.mozilla.org/En/Using_geolocation

Disokong: Firefox 3.5
Alternatif/Peralihan: Gears http://code.google.com/p/gears/wiki/GeolocationAPI

HTML5 Seret dan Lepas

Acara seret asli

1. ondragstart
2. ondrag
3. ondragend
4. //Semasa proses menyeret
5. ondragenter
6. ondragover
7. ondraleave
8. ondrop

standard w3c: http://www.w3.org/TR/html5/editing.html#dnd
Dokumen MDC: https://developer.mozilla.org/En/DragDrop/Drag_and_Drop
epal Dokumentasi: http://developer.apple.com/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/DragAndDrop.html#//apple_ref/doc/uid/30001233

Sokongan: Firefox 3.5, Safari 2.0, Chrome 1.0, IE 5.0

Audio dan Video HTML5

Kelebihan menggunakan teg html untuk membenamkan video dan audio bukanlah "format sumber terbuka", tetapi "keterbukaan", yang membolehkan multimedia berinteraksi dengan elemen halaman lain, atau menggunakan teknologi halaman untuk "memashup" dengan video ini jenis gabungan rawak Keupayaan untuk berinteraksi dengan RIA adalah asas kepada kemakmuran teknologi web, dan ia juga merupakan kelemahan terbesar bekas RIA tertutup seperti kilat.

1. <video kawalan>
2. <sumber src="zombie. ogg” taip=”video/ogg ”/>
3. <sumber src="zombie. mp4″ taip=”video/mp4 ″/>
4. video>

Dokumentasi MDC: https://developer.mozilla.org/En/Using_audio_and_video_in_Firefox
Pengenalan kepada blog webkit: http://webkit.org/blog/140/html5-media-support/

Sokongan: Firefox 3.5, Safari 3.0, Chrome 3.0
Alternatif/Peralihan: Benam bersarang dengan teg video http://hacks.mozilla.org/2009/06/html5 - video-fallbacks-markup/

Kanvas HTML5

Dicipta oleh Apple dan pertama kali digunakan dalam papan pemuka, pada masa ini teknologi imej js arus perdana, mozilla sudah pun melaksanakan OpenGL ES standard Canvas 3D Selain itu, dikatakan bahawa pasukan IE telah melakukan banyak kerja untuk menyokong kanvas. . Sebenarnya, api kanvas agak rendah Terutama dari segi interaksi, ia tidak seintuitif svg, jadi terdapat banyak perpustakaan yang merangkumnya.

1. var ctx = $('#kanvas ')[0].getContext( "2hb");
2. ctx.fillStyle = "#00A308" ;
3. ctx.beginPath();
4. ctx.arka(220, 220, 50, 0, Matematik.PI*2, benar);
5. ctx.closePath();
6. ctx.isi();

Dokumentasi MDC: https://developer.mozilla.org/en/Canvas_tutorial

Sokongan: Firefox 1.5, Safari 2.0, Chrome 1.0, Opera 9.0
Alternatif/Peralihan: excanvas.js http://code.google.com/p/explorercanvas/

SVG

standard w3c: http://www.w3.org/TR/SVG12/

Tutorial IBM DW: http://www.ibm.com/developerworks/cn/views/xml/tutorials.jsp?cv_doc_id =84896

Sokongan: Firefox 1.5, Safari 3.0, Chrome 1.0, Opera 9.0
Alternatif/Peralihan: raphael.js http://raphaeljs.com/

Permintaan XMLHttp 2

Terutama untuk meningkatkan keupayaan dan peristiwa merentas domain semasa proses permintaan

standard w3c: http://www.w3.org/TR/XMLHttpRequest2/

Dokumentasi MDC: https://developer.mozilla.org/En/Using_XMLHttpRequest#Monitoring_progress
XDomainRequest (XDR)
Dokumentasi MSDN: http://msdn.microsoft.com/en-us/library/cc288060(VS.85).aspx

Sokongan: Firefox 3.5 (sebahagian dilaksanakan), IE 8.0 (sebahagiannya dilaksanakan)

Kawalan Akses

Kawalan akses merentas domain yang telah lama ditunggu-tunggu pada masa ini terdapat beberapa perbezaan antara Firefox 3.5 dan IE8 Saya tidak tahu sama ada XDR dan XDM yang dibangunkan oleh IE8 sedia untuk diserahkan kepada w3c untuk penyeragaman...

Access-Control-Allow-Origin: http://foo.example

standard w3c: http://www.w3.org/TR/cors/
Dokumen MDC: https://developer.mozilla.org/En/HTTP_Access_Control
Mesej Merentas Dokumen (XDM)
Dokumentasi MSDN: http://msdn.microsoft.com/en-us/library/cc197057(VS.85).aspx

Sokongan: Firefox 3.5, IE8.0

E4X (ECMA-357)

Firefox dan ActionScript3 telah pun melaksanakan sesuatu... Tetapi sebenarnya, sekarang json begitu popular, nampaknya tidak kisah sama ada ada E4X atau tidak ~ (karut, sebenarnya, senang menulis objek dom terus dalam kod js dan bukannya rentetan html) Banyak)

Dokumentasi MDC: https://developer.mozilla.org/en/E4X

Sokongan: Firefox 1.5

ECMAScript 5 Native JSON

Sokongan JSON asli seratus kali lebih pantas dan lebih selamat daripada eval Juga ambil perhatian bahawa json2.js Douglas Crockford ialah penterjemah js yang dilaksanakan dalam js, jadi ia lebih selamat

.

1. JSON.huraikan( teks, terjemah )
2. JSON.stringify( obj, terjemah )
3. String.prototaip.kepadaJSON
4. Boolean.prototaip.kepadaJSON
5. Nombor.prototaip.kepada JSON
6. Tarikh.prototaip.kepada JSON

Dokumentasi MDC: http://blog.mozilla.com/webdev/2009/02/12/native-json-in-firefox-31/
Dokumentasi MSDN: http://blogs.msdn.com/ ie/archive/2008/09/10/native-json-in-ie8.aspx

Sokongan: Firefox 3.5, IE8
Alternatif/Peralihan: json2.js http://www.json.org/json2.js

Tambahan Tatasusunan ECMAScript 5

Kaedah tatasusunan yang dilaksanakan dalam js1.6 adalah terutamanya untukSetiap, peta, penapis, yang merupakan kaedah yang sangat penting dalam pengaturcaraan berfungsi, serta pertanyaan terbalik

1. Array.prototaip.indexOf( str )
2. Array.prototaip.lastIndexOf( str )
3. Array.prototaip.setiap( fn )
4. Array.prototaip.beberapa( fn )
5. Array.prototaip.penapis( fn )
6. Array.prototaip.forEach( fn )
7. Array.prototaip.peta( fn )

Dokumentasi MDC: https://developer.mozilla.org/en/New_in_JavaScript_1.6#Array_extras

Sokongan: Firefox2.0, Safari 3.0, Google Chrome 1.0, Opera 9.5
Alternatif/Peralihan: Semua boleh disimulasikan dengan memanjangkan Array.prototype

ECMAScript 5 isArray()

Bezakan antara tatasusunan dan objek

1. Array.is Array([]) // benar

Sokongan: Tiada
Alternatif/Peralihan: Array.isArray = function(a){ return Object.prototype.toString.call(a) === "[object Array] ”;};

Objek ECMAScript 5

Dalam perkataan kuliah GOOGLE I/O: sistem objek yang lebih mantap

1. Objek.getPrototypeOf( obj )

Penjelasan rakan sekelas John: http://ejohn.org/blog/objectgetprototypeof/

Sokongan: Firefox3.5
Alternatif/Peralihan: object.__proto__ atau object.constructor.prototype

1. Objek.buat( proto, props ) //Klon atau mewarisi objek
3. Objek.kunci( obj ) //Pemetaan struktur data
4. Objek.getOwnPropertyNames( obj )
6. Objek.preventExtensions( obj ) //Tidak boleh menambah atribut baharu
7. Objek.boleh Dipanjangkan( obj )
9. Objek.meterai( obj ) //Konfigurasi atribut tidak boleh dipadam dan diubah suai, dan atribut baharu tidak boleh ditambah
10. Objek.dimeterai( obj )
12. Objek.bekukan( obj ) //Konfigurasi atribut tidak boleh dipadam atau diubah suai, atribut baharu tidak boleh ditambah dan atribut tidak boleh ditulis
13. Objek.adalah Beku( obj )

Penjelasan rakan sekelas John: http://ejohn.org/blog/ecmascript-5-objects-and-properties/

Sokongan: Tiada
Penggantian/Peralihan: Object.create dan Object.keys boleh dilaksanakan sendiri

Penerangan Harta ECMAScript 5

Kawalan akses sifat objek

1. Objek.getOwnPropertyDescriptor( obj, prop )
2. Objek.takrifkan Harta( obj, prop, desc )
3. Objek.tentukan Sifat( obj, props )
4. desc = {
5. nilai: benar,
6. boleh ditulis: palsu, //Ubah suai
7.  terbilang: benar, //untuk dalam
8.  boleh dikonfigurasikan: benar, //Padam dan ubah suai atribut
9. dapatkan: fungsi(){ kembali nama;  set
:
10. fungsi(nilai){ nama = nilai; }

    Penjelasan rakan sekelas John: http://ejohn.org/blog/ecmascript-5-objects-and-properties/

    Sokongan: Tiada
    Penggantian/Peralihan: Object.defineProperties sebenarnya bersamaan dengan jQuery.extend, digunakan untuk melaksanakan Mixin
    
    

    ECMAScript 5 Getters and Setters

    Kaedah akses atribut dalam kedua-dua python dan ruby

    1. obj = {
    2. dapatkan innerHTML() { kembali …; },
    3. set innerHTML(newHTML) { … }
    4. };

    Dokumentasi MDC: https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Getters_and_Setters

    Sokongan: Firefox 2.0, Safari 3.0, Google Chrome 1.0, Opera 9.5
    Alternatif/Peralihan:

    Kaedah lama bukan standard dalam Firefox 1.5

    1. HTMLElement.prototaip.__defineGetter__("innerHTML", fungsi () {});
    2. HTMLElement.prototaip.__defineSetter__("innerHTML", fungsi (val ) {});

    Sokongan: Firefox 2.0, Safari 3.0, Google Chrome 1.0, Opera 9.5

    Standard

    1. Objek.tentukan Harta(dokumen.badan, "innerHTML", { dapatkan : fungsi () {} });

    MSDN-Dokumentation: http://msdn.microsoft.com/en-us/library/dd229916(VS.85).aspx

    Unterstützung: IE8 (kann nur mit DOM verwendet werden)
    
    

    ECMAScript 5 Strikter Modus

    Der strikte Modus von ES5 löscht Elemente, die in der alten Version wahrscheinlich Probleme verursachen könnten, und meldet Fehler explizit, um das Debuggen zu erleichtern

    1. "use strict"; //Ausnahme wird unter den folgenden Umständen ausgelöst
    2. //Wert undefinierten Variablen zuweisen
    3. //Der Vorgang wird auf eine nicht beschreibbare, nicht konfigurierbare oder nicht erweiterbare Eigenschaft gesetzt
    4. //Variablen, Funktionen, Parameter löschen
    5. //Attribute in Objektliteralen wiederholt definieren
    6. //eval wird als Schlüsselwort verwendet und Variablen werden in der Auswertungszeichenfolge
    definiert
    7. //Argumente überschreiben
    8. //Verwenden Sie arguments.caller und arguments.callee (anonyme Funktionen müssen benannt werden, um sich selbst zu referenzieren)
    9. //(function(){ ... }).call( null ); // Ausnahme
    10. //Verwenden mit

    Erklärung von Klassenkamerad John: http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/

    Unterstützung: Keine
    Alternativen/Übergänge: ... Beginnen Sie von nun an mit der Entwicklung ernsthafter Programmiergewohnheiten
    
    

    Weitere neue Funktionen von ECMAScript 5

    Wenn Sie einen Verweis auf eine Funktion übergeben, binden Sie diesen

    1. Funktion.Prototyp.bind(thisArg, arg1, arg2....) /

    Unterstützung: Keine
    Alternativen/Übergänge: Prototyp http://www.prototypejs.org/api/function/bind

    ISO-formatierte Daten

    1. Datum.Prototyp.toISOString() // Druckt 2009-05-21T16:06:05.000TZ

    Unterstützt: Keine
    Alternative/Übergang: datejs http://code.google.com/p/datejs/

    1. String.Prototyp.trimm()

    Unterstützung: Firefox3.5
    Alternative/Übergang: Verschiedene reguläre Implementierungen http://blog.stevenlevithan.com/archives/faster-trim-javascript
    
    
    ===================Die Trennlinie, an der der Unsinn wieder beginnt================= = =====

    Eigentlich habe ich dieses Ding in der Hoffnung gepostet, eine Atmosphäre der Innovation zu fördern und mehr Menschen klar zu machen, dass viele neue Technologien in die „praktische“ Phase eingetreten sind.

    Wenn Sie nur ein experimentelles Webspiel oder eine Anwendung erstellen möchten, die nur auf einer bestimmten Plattform (z. B. iPhone, Greasemonkey) verwendet werden kann, reicht die Unterstützung des Firefox3.5-Webkits aus.

    Wenn Sie die Mainstream-Plattform nicht ignorieren können, gibt es viele Technologien, die es Ihnen ermöglichen, kompatible Schnittstellen elegant zu degradieren oder andere Methoden zu wählen, um sie zu implementieren.

    Wenn Sie beispielsweise nicht auf den IE warten können: Die Vererbung und Zugriffskontrolle von ES5-Objekten wurde von den altmodischen Schlüsselwörtern der ES4/ActionScript3-Zeit (Klasse erweitert private Statik) in Object.create(p.) geändert , attrs).defineProperty(o, n, attrs).defineProperties( o, attrs).freeze().getOwnPropertyNames().map(fn), es dient nicht nur der Coolness...

    Viele Leute beschweren sich gerne: „Ich hatte noch nie in meinem Leben die Gelegenheit, HTML5 zu verwenden“, aber solange Sie den Blick von der großen Handfläche unter Ihren Füßen abwenden und woanders hinschauen, werden Sie feststellen, dass sich die Welt tatsächlich verändert die ganze Zeit XD