Tutorial HTML5


HTML5 ialah versi terkini HTML yang telah disiapkan oleh World Wide Web Consortium (W3C) pada Oktober 2014.

HTML5 direka bentuk untuk menyokong multimedia pada peranti mudah alih.

HTML5 mudah dipelajari.

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 adalah 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

  • untuk elemen video dan audio main balik media

  • Sokongan yang lebih baik untuk storan luar talian setempat

  • Elemen kandungan khas baharu, seperti artikel, pengaki, pengepala, nav, bahagian

  • Kawalan borang baharu, seperti kalendar, tarikh, masa, e-mel, url, carian

HTML5 <DOCTYPE>

<!doctype> Pengisytiharan mesti terletak pada baris pertama dalam dokumen HTML5 Ia sangat mudah digunakan: 

<!DOCTYPE html>

Dokumen HTML5 terkecil

di bawah Ia adalah sebuah. 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 bercelaru akan muncul.

Peningkatan HTML5

  • Elemen baharu

  • Atribut baharu

  • Menyokong sepenuhnya 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 <video>

  • HTML5 <audio>

HTML5 Aplikasi

Menggunakan HTML5 anda hanya boleh membangunkan aplikasi

  • Storan data setempat

  • Akses fail setempat

  • Data SQL Setempat

  • Rujukan Cache

  • Javascript Worker

  • XHTMLHttpRequest 2

Grafik HTML5

Menggunakan HTML5 anda boleh melukis grafik:

  • Gunakan elemen <

  • menggunakan SVG sebaris

  • menggunakan CSS3 2D/3D

HTML5 menggunakan CSS3

  • Pemilih baharu

  • Atribut baharu

  • Animasi

  • Penukaran 2D/3D

  • Sudut bulat

  • Kesan bayang-bayang

  • Fon boleh dimuat turun

Untuk mengetahui lebih lanjut tentang CSS3, sila lihat tutorial CSS3 di tapak ini.

Elemen Semantik

HTML5 menambah banyak elemen semantik seperti berikut:

标签描述
<article>定义页面独立的内容区域。
<aside>定义页面的侧边栏内容。
<bdi>允许您设置一段文本，使其脱离其父元素的文本方向设置。
<command>定义命令按钮，比如单选按钮、复选框或按钮
<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 dalam setiap bab

Dengan editor HTML kami, anda boleh mengedit HTML dan kemudian klik butang untuk Lihat hasilnya.

Instance

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<meta charset="utf-8">
</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>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Klik butang "Cubalah" untuk melihat keputusan dalam talian.

Sokongan Penyemak Imbas HTML5

Versi Safari, Chrome, Firefox dan Opera terkini menyokong beberapa ciri HTML5. Internet Explorer 9 akan menyokong ciri HTML5 tertentu.

Kaedah penyemak imbas di bawah IE9 agar serasi dengan HTML5 ialah menggunakan pakej html5shiv sumber statik Baidu: 

<!--[if lt IE9]> 
<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->

Selepas memuatkan, mulakan CSS daripada teg baharu: 

/*html5*/
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}

Manual Rujukan HTML5

Dalam tapak ini anda boleh menemui teg dan penerangan atribut tentang HTML5 Untuk butiran, sila klik Manual Rujukan HTML5.