Pengenalan kepada HTML5
Apakah rupa HTML5 dan cara menggunakannya? Malah, dalam bab pertama tutorial HTML kami, kod yang digunakan dalam contoh yang kami berikan kepada anda semuanya ditulis dalam HTML. Mari kita lihat dengan lebih dekat HTML5
Pengenalan kepada HTML5
 |
|
Apakah HTML5?
HTML5 ialah standard HTML generasi akan datang.
HTML, versi sebelumnya HTML 4.01 dilahirkan pada tahun 1999. Dunia Web telah berubah secara dramatik sejak itu.
HTML5 masih dalam proses. Walau bagaimanapun, kebanyakan penyemak imbas moden sudah mempunyai beberapa sokongan HTML5.
Bagaimanakah HTML5 bermula?
HTML5 ialah hasil kerjasama antara W3C dan WHATWG, yang merujuk kepada Kumpulan Kerja Teknologi Aplikasi Hiperteks Web. .
WHATWG berfungsi pada borang dan aplikasi web, manakala W3C memfokuskan pada XHTML 2.0. Pada tahun 2006, kedua-dua pihak memutuskan untuk bekerjasama untuk mencipta versi baharu HTML.
Beberapa ciri baharu yang menarik dalam HTML5:
elemen kanvas untuk lukisan
elemen video dan audio untuk main balik media
asli Sokongan yang lebih baik untuk storan luar talian
Elemen kandungan khas baharu, seperti artikel, pengaki, pengepala, navigasi, bahagian
Kawalan borang baharu, seperti kalendar, tarikh, masa, e-mel, url , cari
HTML5 <!DOCTYPE>
<! baris pertama dalam dokumen HTML5. Ia sangat mudah untuk digunakan:
<!DOCTYPE html>
Anda boleh melihat jika contoh bab pertama kami bermula dengan <!DOCTYPE>
Dokumen HTML5 terkecil
Dokumen HTML5 terkecil berikut ialah dokumen HTML5 ringkas:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文檔標題</title> </head> <body> 文檔內(nèi)容...... </body> </html>
Nota: Untuk halaman web Cina, anda perlu menggunakan <meta charset="utf-8"> untuk mengisytiharkan pengekodan, jika tidak, aksara yang bercelaru akan muncul.
Peningkatan HTML5
Elemen baharu
Baharu hartanah
Sokongan penuh untuk CSS3
Video dan Audio
grafik 2D/3D
Storan Setempat
Data SQL Setempat
Aplikasi Web
Multimedia HTML5
Menggunakan HTML5, anda hanya boleh memainkan video dan audio pada halaman web. HTML5
AplikasiMenggunakan HTML5 anda hanya boleh membangunkan aplikasi
Storan data setempat
Akses Fail setempat
Data SQL Setempat
Rujukan Cache
Javascript Worker
Lukis grafik:
menggunakan elemen <kanvas>
menggunakan SVG sebaris
menggunakan CSS3 2D/3D
HTML5 menggunakan CSS3
Pemilih baharu
-
Hartanah baharu
Animasi
Penukaran 2D/3D
Sudut bulat
Kesan bayang
Fon boleh dimuat turun
Sila ketahui lebih lanjut tentang CSS3 Lihat tapak ini Tutorial CSS3.
Elemen Semantik
HTML5 menambah banyak elemen semantik seperti berikut:
?
| Penerangan | ||||||||||
| <article> | Tentukan kawasan kandungan bebas pada halaman. | ||||||||||
| < aside> | Tentukan kandungan bar sisi halaman . | ||||||||||
| < bdi> | Membenarkan anda menetapkan bahagian teks supaya Ia memisahkan diri daripada tetapan arah teks unsur induknya. | ||||||||||
| < command> | Tentukan butang arahan, seperti radio pilihan Butang, kotak semak atau butang |
| <details> | 用于描述文檔或文檔某個部分的細節(jié) |
| <dialog> | 定義對話框，比如提示框 |
| <summary> | 標簽包含 details 元素的標題 |
| <figure> | 規(guī)定獨立的流內(nèi)容（圖像、圖表、照片、代碼等等）。 |
| <figcaption> | 定義 <figure> 元素的標題 |
| <footer> | 定義 section 或 document 的頁腳。 |
| <header> | 定義了文檔的頭部區(qū)域 |
| <mark> | 定義帶有記號的文本。 |
| <meter> | 定義度量衡。僅用于已知最大和最小值的度量。 |
| <nav> | 定義導(dǎo)航鏈接的部分。 |
| <progress> | 定義任何類型的任務(wù)的進度。 |
| <ruby> | 定義 ruby 注釋（中文注音或字符）。 |
| <rt> | 定義字符（中文注音或字符）的解釋或發(fā)音。 |
| <rp> | 在 ruby 注釋中使用，定義不支持 ruby 元素的瀏覽器所顯示的內(nèi)容。 |
| <section> | 定義文檔中的節(jié)（section、區(qū)段）。 |
| <time> | 定義日期或時間。 |
| <wbr> | 規(guī)定在文本中的何處適合添加換行符。 |
Borang HTML5
Elemen borang baharu, atribut baharu, jenis input baharu, pengesahan automatik.
Elemen dialih keluar
Elemen HTML 4.01 berikut telah dialih keluar dalam HTML5:
<akronim>
<applet>
<basefont>
<besar>
<center>
<dir>
<font>
<bingkai>
<frameset>
<noframes>
<strike>
Contoh
Contoh berikut menunjukkan kepada anda cara memainkan video di halaman web
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文檔標題</title> </head> <body> <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> 你的瀏覽器不支持 video 標簽。 </video> </body> </html>
Anda Anda boleh mencari video secara setempat dan meletakkan lokasi serta nama video dalam src Cubalah
menyokong penyemak imbas HTML5
Versi terkini Safari, Chrome, Firefox dan Opera menyokong beberapa ciri HTML5. Internet Explorer 9 akan menyokong ciri HTML5 tertentu.
Anda boleh menjadikan beberapa penyemak imbas lama (yang tidak menyokong HTML5) menyokong HTML5.
Pelayar moden menyokong HTML5.
Selain itu, semua penyemak imbas, lama dan baharu, secara automatik akan menganggap elemen yang tidak dikenali sebagai elemen sebaris.
Disebabkan ini, anda boleh "mengajar " penyemak imbas untuk mengendalikan elemen HTML "Tidak diketahui".
Anda juga boleh mengajar pelayar IE6 (Windows XP 2001) untuk mengendalikan elemen HTML yang tidak diketahui.
Mentakrifkan elemen HTML5 sebagai elemen blok
HTML5 mentakrifkan 8 elemen semantik HTML baharu. Semua elemen ini adalah elemen peringkat blok.
Untuk membolehkan versi lama penyemak imbas memaparkan elemen ini dengan betul, anda boleh menetapkan nilai atribut paparan CSS untuk menyekat:
pengepala , bahagian, pengaki, ketepikan, nav, utama, artikel, rajah {
paparan: sekat;
}
Tambah elemen baharu pada HTML
Anda boleh menambah elemen baharu pada HTML.
Contoh ini menambah elemen baharu pada HTML dan mentakrifkan gaya untuk elemen tersebut dinamakan <myHero>:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>php中文網(wǎng)(php.cn)</title>
<meta charset="utf-8">
<title>為 HTML 添加新元素</title>
<script>document.createElement("myHero")</script>
<style>
myHero {
display: block;
background-color: #9dddd7;
padding:40px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>我的第一個標題</h1>
<p>我的第一個段落。</p>
<myHero>我的第一個新元素</myHero>
</body>
</html>Jalankan atur cara untuk melihat
.Pernyataan JavaScript document.createElement("myHero") adalah untuk menambah elemen baharu pada pelayar IE.
Isu pelayar Internet Explorer
Anda boleh menggunakan kaedah di atas untuk menambah elemen HTML5 untuk pelayar IE, tetapi:
Internet Explorer 8 dan pelayar IE yang lebih awal tidak menyokong kaedah di atas.
Kami boleh menyelesaikan masalah ini menggunakan "HTML5 Enable JavaScript", " shiv" yang dicipta oleh Sjoerd Visscher:
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> ;
<![endif]-->
Kod di atas ialah ulasan, yang digunakan untuk membaca fail html5.js apabila versi pelayar IE lebih kecil daripada IE9 , dan menghuraikannya.
Nota: Pengguna domestik sila gunakan perpustakaan sumber statik Baidu (pustaka sumber Google tidak stabil di China):
<!--[if lt IE 9]>
<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif ]-->
html5shiv ialah penyelesaian yang lebih baik untuk penyemak imbas IE. html5shiv terutamanya menyelesaikan masalah bahawa elemen baharu yang dicadangkan oleh HTML5 tidak diiktiraf oleh IE6-8 Unsur baharu ini tidak boleh digunakan sebagai nod induk untuk membungkus elemen anak dan gaya CSS tidak boleh digunakan.
Penyelesaian Shiv yang sempurna
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>php中文網(wǎng)(php.cn)</title> <meta charset="utf-8"> <title>渲染 HTML5</title> <!--[if lt IE 9]> <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script> <![endif]--> </head> <body> <h1>學(xué)習HTML就到PHP中文網(wǎng)</h1> <article> php中文網(wǎng) —— php中文網(wǎng)??！ </article> </body> </html>
kod rujukan html5shiv.js mesti diletakkan dalam elemen <head> perlu memuatkan fail ini dahulu apabila menghuraikan elemen HTML5 baharu.
