cari

Rumah >hujung hadapan web >Tutorial H5 >HTML5 pengenalan awal tutorial_html5 kemahiran tutorial pengenalan yang mudah

HTML5 pengenalan awal tutorial_html5 kemahiran tutorial pengenalan yang mudah

WBOY
WBOYasal
2016-05-16 15:46:291263semak imbas

HTML5 mewakili masa depan; W3C (World Wide Web Consortium, World Wide Web Consortium) telah meninggalkan XHTML, menjadikan HTML5 sebagai standard rasmi dan diiktiraf.

HTML5 ialah generasi HTML yang seterusnya.
HTML5 akan menjadi standard baharu untuk HTML, XHTML dan HTML DOM, dengan matlamat untuk menggantikan standard HTML4.01 dan XHTML1.0 sedia ada. Ia berharap dapat mengurangkan pergantungan Aplikasi Internet Kaya (RIA) pada Flash, Silverlight, JavaFX, dll., dan menyediakan lebih banyak API yang boleh meningkatkan aplikasi rangkaian dengan berkesan.
Versi terakhir HTML telah dicipta 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.
HTML5 ialah hasil kerjasama antara W3C dan WHATWG.
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.
Sesetengah peraturan yang ditetapkan untuk HTML5:
Ciri baharu hendaklah berdasarkan HTML, CSS, DOM dan JavaScript.
Kurangkan keperluan untuk pemalam luaran (seperti Flash)
Pengendalian ralat yang lebih baik
Lebih banyak markup untuk menggantikan skrip
HTML5 harus bebas peranti
Proses pembangunan harus telus kepada orang ramai

Dokumen HTML5 yang paling mudah

Kod XML/HTMLSalin kandungan ke papan keratan
  1. >
  2. <tajuk>Dokumen HTML Keciltajuk>
  3. <p>Mari menggegarkan penyemak imbas, gaya HTML5.< ;/p> 

Dokumen HTML5 yang sangat ringkas yang mengandungi hanya satu baris teks. Ia kelihatan seperti ini dalam penyemak imbas:


Struktur yang lebih biasa menggunakan dan untuk memisahkan maklumat halaman daripada kandungan sebenar halaman dan menggunakan keseluruhan dokumen , dokumen semasa kelihatan seperti ini:

Kod XML/HTMLSalin kandungan ke papan keratan
  1. >
  2. <html>
  3. <kepala>
  4. <tajuk>Dokumen HTML Keciltajuk>
  5. kepala>
  6. <badan>
  7. <p>Mari menggegarkan penyemak imbas, gaya HTML5.< ;/p> 
  8. badan>
  9. html>

, dan HTML5 tidak memerlukan elemen ini, tetapi gaya penulisan ini lebih baik.

Jenis Dokumen HTML5

Kod XML/HTMLSalin kandungan ke papan keratan
  1. >


Baris pertama mestilah pengisytiharan jenis dokumen tertentu, yang digunakan untuk memberitahu piawaian yang diikuti oleh penanda dokumen berikutnya. Pengisytiharan jenis dokumen HTML5 adalah sangat mudah.

Pengekodan aksara

Kebanyakan tapak web kini menggunakan pengekodan UTF-8, yang ringkas, cepat untuk ditukar dan menyokong mana-mana aksara bukan bahasa Inggeris yang anda mahukan.

Menambahkan maklumat pengekodan aksara dalam HTML5 adalah sangat mudah. ​​Tambahkan elemen dalam , seperti berikut:

Kod XML/HTMLSalin kandungan ke papan keratan
  1. <kepala>
  2. <meta charset="utf- 8"> 
  3. <tajuk>Dokumen HTML Keciltajuk>
  4. kepala>


Alat reka bentuk Dreamweaver secara automatik menambah metamaklumat ini apabila membuat halaman web baharu dan juga menyimpan fail dalam pengekodan UTF. Jika anda menggunakan editor teks yang paling mudah, ingat untuk memilih pengekodan yang betul (UTF-8) semasa menyimpan.

Bahasa Halaman

Adalah amalan yang baik untuk menunjukkan bahasa semula jadi yang digunakan dalam halaman web. Untuk menentukan bahasa untuk kandungan, gunakan atribut lang pada sebarang elemen.

Untuk menambah perihalan bahasa pada keseluruhan halaman, anda perlu menentukan atribut lang untuk elemen

Kod XML/HTMLSalin kandungan ke papan keratan
  1. <html lang="zh-CN"> 

Perincian maklumat ini juga berguna untuk pembaca skrin jika halaman mengandungi teks dalam berbilang bahasa.

Tambah helaian gaya

Selagi ia adalah laman web yang direka secara profesional, ia pasti akan menggunakan helaian gaya. Apabila menentukan helaian gaya CSS untuk digunakan, anda perlu menambah elemen dalam , seperti berikut:

Kod XML/HTMLSalin kandungan ke papan keratan
  1. <kepala>
  2. <meta charset="utf- 8"> 
  3. <tajuk>Dokumen HTML Keciltajuk>
  4. <pautan rel="stylesheet" href="TinyHTML5.css">
  5. kepala>


Tambah JavaScript

Menambah JavaScript dalam HTML5 adalah serupa dengan menambahkannya pada halaman tradisional, contohnya:

Kod XML/HTMLSalin kandungan ke papan keratan
  1. <kepala>
  2. <meta charset="utf- 8"> 
  3. <tajuk>Dokumen HTML Keciltajuk>
  4. <pautan rel="stylesheet" href="TinyHTML5.css">
  5. <skrip src="TinyHTML5. js">skrip>
  6. kepala>


Tidak perlu menambah atribut language="JavaScript". Penyemak imbas menganggap anda mahu menggunakan JavaScript.

Nota Khas:

Jika anda ingin menghabiskan banyak masa menguji halaman yang mengandungi JavaScript dalam IE, anda juga harus menambah ulasan khas yang dipanggil tanda Web (disimpan daripada url=). seperti berikut :

Kod XML/HTMLSalin kandungan ke papan keratan
  1. <kepala>
  2. <meta charset="utf- 8"> 
  4. <tajuk>Dokumen HTML Keciltajuk>


Komen ini memberitahu IE untuk menganggap halaman sebagai dimuat turun dari tapak web jauh Jika tidak, IE akan bertukar kepada mod kunci khas dan muncul amaran keselamatan selepas anda mengklik "Benarkan kandungan yang disekat" Kod JavaScript tidak akan. dilaksanakan sehingga selepas butang ditekan.

(0014) merujuk kepada panjang rentetan about:internet.

Keputusan akhir

Kod HTML5 yang lengkap dan cantik akhirnya kelihatan seperti ini:

Kod XML/HTMLSalin kandungan ke papan keratan
  1. >
  2. <html lang="zh- CN"> 
  3. <kepala>
  4. <meta charset="utf- 8"> 
  6. <tajuk>Dokumen HTML Keciltajuk>
  7. <pautan rel="stylesheet" href="TinyHTML5.css">
  8. <skrip src="TinyHTML5. js">skrip>
  9. kepala>
  11. <badan>
  12. <p>Mari menggegarkan penyemak imbas, gaya HTML5.< ;/p> 
  13. badan>
  14. html>
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Analisis mendalam tentang penggunaan objek Blob dalam kemahiran tutorial HTML5_html5Artikel seterusnya：Analisis mendalam tentang penggunaan objek Blob dalam kemahiran tutorial HTML5_html5

Artikel berkaitan

Lihat lagi