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> 文档内容...... </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> | 用于描述文档或文档某个部分的细节 |
| <dialog> | 定义对话框，比如提示框 |
| <summary> | 标签包含 details 元素的标题 |
| <figure> | 规定独立的流内容（图像、图表、照片、代码等等）。 |
| <figcaption> | 定义 <figure> 元素的标题 |
| <footer> | 定义 section 或 document 的页脚。 |
| <header> | 定义了文档的头部区域 |
| <mark> | 定义带有记号的文本。 |
| <meter> | 定义度量衡。仅用于已知最大和最小值的度量。 |
| <nav> | 定义导航链接的部分。 |
| <progress> | 定义任何类型的任务的进度。 |
| <ruby> | 定义 ruby 注释（中文注音或字符）。 |
| <rt> | 定义字符（中文注音或字符）的解释或发音。 |
| <rp> | 在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。 |
| <section> | 定义文档中的节（section、区段）。 |
| <time> | 定义日期或时间。 |
| <wbr> | 规定在文本中的何处适合添加换行符。 |
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中文网(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中文网(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>学习HTML就到PHP中文网</h1> <article> php中文网 —— php中文网！！ </article> </body> </html>
kod rujukan html5shiv.js mesti diletakkan dalam elemen <head> perlu memuatkan fail ini dahulu apabila menghuraikan elemen HTML5 baharu.
