Rumah  >  Artikel  >  hujung hadapan web  >  Hanya susun ciri asas dan sintaks kemahiran tutorial HTML5_html5

Hanya susun ciri asas dan sintaks kemahiran tutorial HTML5_html5

WBOY
WBOYasal
2016-05-16 15:45:491567semak imbas

Gambaran Keseluruhan HTML5
HTML5 ialah versi utama standard HTML yang seterusnya, menggantikan HTML 4.01, XHTML 1.0 dan XHTML 1.1. HTML5 juga merupakan standard untuk menstruktur dan mempersembahkan kandungan di World Wide Web.

HTML5 ialah hasil kerjasama antara World Wide Web Consortium (W3C) dan Web Hypertext Technology Working Group (WHATWG).

Standard baharu ini menambahkan ciri seperti main balik video dan seret dan lepas, yang dahulunya bergantung pada pemalam penyemak imbas pihak ketiga seperti Adobe Flash, Microsoft Silverlight dan Google Gears.

Sokongan penyemak imbas
Versi terbaharu Apple Safari, Mozilla FireFox dan Opera menyokong kebanyakan ciri HTML5, dan IE9 turut menyokong beberapa ciri HTML5.

Pelayar mudah alih yang diprapasang pada iPhone, iPad dan telefon Android semuanya mempunyai sokongan yang baik untuk HTML5.

Ciri Baharu
HTML5 memperkenalkan banyak elemen dan atribut baharu untuk membantu kami membina tapak web moden. Berikut ialah ciri utama yang diperkenalkan oleh HTML5:

Unsur semantik baharu: seperti

,
dan
.

Borang 2.0: Penambahbaikan pada borang web HTML, memperkenalkan beberapa atribut baharu untuk teg

Storan tempatan yang berterusan: Agar tidak dilaksanakan melalui pemalam pihak ketiga.

WebSocket: Generasi seterusnya teknologi komunikasi dua hala untuk aplikasi web.

Acara tolak pelayan: HTML5 memperkenalkan acara daripada pelayan web kepada penyemak imbas web, juga dikenali sebagai acara tolak pelayan (SSE).

Kanvas: Menyokong lukisan 2D terprogram menggunakan JavaScript.

Audio dan Video: Benamkan audio atau video dalam halaman web tanpa menggunakan pemalam pihak ketiga.

Geolokasi: Pengguna boleh memilih untuk berkongsi lokasi geografi mereka dengan halaman web kami.

Microdata: Membolehkan kami membuat perbendaharaan kata tersuai di luar HTML5 dan memanjangkan halaman web dengan semantik tersuai.

Seret dan lepas: Seret dan lepas item pada halaman web yang sama dari satu lokasi ke lokasi lain.

Keserasian Ke Belakang
HTML5 direka bentuk agar serasi ke belakang dengan penyemak imbas sedia ada yang mungkin. Ciri baharu dibina berdasarkan ciri sedia ada dan membolehkan kami menyediakan kandungan sandaran untuk pelayar lama.

Adalah disyorkan untuk menggunakan sejumlah kecil kod JavaScript untuk mengesan sokongan bagi ciri HTML5 individu.

Sintaks HTML5

HTML5 mempunyai sintaks HTML "sendiri" yang serasi dengan dokumen HTML 4 dan XHTML1 yang telah diterbitkan di web, tetapi tidak serasi dengan ciri SGML yang lebih kompleks dalam HTML 4.

HTML5 tidak mempunyai peraturan sintaks dalam XHTML yang memerlukan nama teg huruf kecil, atribut petikan, atribut mesti mempunyai nilai dan semua elemen kosong mesti ditutup.

Tetapi HTML5 lebih fleksibel dan menyokong bentuk berikut:

Huruf besar nama tag.
Petikan berganda untuk atribut adalah pilihan.
Nilai atribut adalah pilihan.
Menutup elemen kosong adalah pilihan.
DOCTYPE
Dalam versi lama HTML, DOCTYPE sangat panjang kerana bahasa HTML adalah berdasarkan SGML dan perlu merujuk DTD.

Pengarang HTML5 boleh menggunakan sintaks mudah untuk menentukan DOCTYPE borang:

Kod XML/HTMLSalin kandungan ke papan keratan
  1. >

Sintaks di atas tidak sensitif huruf besar.

Pengekodan Aksara
Pengarang HTML5 boleh menentukan pengekodan aksara menggunakan sintaks mudah seperti berikut:

Kod XML/HTMLSalin kandungan ke papan keratan
  1. <meta charset="UTF-8"> 

Sintaks di atas tidak sensitif huruf besar.

teg
Pendekatan biasa ialah menambah atribut jenis dengan nilai "teks/javascript" pada elemen skrip, seperti yang ditunjukkan di bawah:

Kod XML/HTMLSalin kandungan ke papan keratan
  1. <skrip taip="teks/javascript" src="scriptfile.js"> skrip>

HTML5 mengalih keluar maklumat tambahan yang diperlukan dan kami boleh menggunakan sintaks mudah seperti ini:

Kod XML/HTMLSalin kandungan ke papan keratan
  1. <skrip src="scriptfile.js">skrip> 

tag
Setakat ini kami telah menulis

Kod XML/HTMLSalin kandungan ke papan keratan
  1. <pautan rel="stylesheet" taip="teks/css" href="stylefile.css">
HTML5 mengalih keluar maklumat tambahan yang diperlukan dan kami boleh menggunakan sintaks mudah seperti ini:

Kod XML/HTMLSalin kandungan ke papan keratan
  1. <pautan rel="stylesheet" href="stylefile.css">

Elemen HTML5
Elemen HTML5 ditandakan dengan teg permulaan dan penamat. Teg layak menggunakan nama teg antara kurungan sudut.

Perbezaan antara teg mula dan teg akhir ialah nama teg yang terakhir mengandungi garis miring di hadapannya.

Berikut ialah contoh elemen HTML5:

Kod XML/HTMLSalin kandungan ke papan keratan
  1. <p>... p> 

HTML5-Tag-Namen berücksichtigen nicht die Groß-/Kleinschreibung und können ausschließlich aus Großbuchstaben oder einer Mischung daraus bestehen. Die gängigste Konvention besteht jedoch darin, immer Kleinbuchstaben zu verwenden.

Die meisten Elemente enthalten Inhalte, zum Beispiel enthält

...

Einige Elemente können jedoch keinen Inhalt enthalten und werden als Whitespace-Elemente bezeichnet. Zum Beispiel br, hr, link und meta usw.

HTML5-Dokumentation
Um eine bessere Struktur zu erhalten, werden folgende Tags eingeführt:

Abschnitt: Dieses Tag stellt einen allgemeinen Dokument- oder Anwendungsabschnitt dar. Es kann mit h1-h6 verwendet werden, um die Dokumentstruktur darzustellen.

Artikel: Dieses Tag stellt einen separaten Teil des Dokumentinhalts dar, beispielsweise einen Blogeintrag oder einen Zeitungsartikel.

Nebenbei: Dieses Tag stellt einen Inhaltsblock dar, der in geringem Zusammenhang mit dem Rest der Seite steht.

Header: Dieses Tag repräsentiert den Header eines Abschnitts.

Fußzeile: Dieses Tag stellt die Fußnote eines Abschnitts dar, der Informationen zum Autor, zum Urheberrecht und andere Informationen enthalten kann.

nav: Dieses Tag stellt die Abschnitte dar, die zum Navigieren im Dokument verwendet werden.

Dialog: Mit diesem Tag können Konversationen markiert werden.

Abbildung: Dieses Tag kann verwendet werden, um Titel mit bestimmten eingebetteten Inhalten wie Diagrammen und Videos zu verknüpfen.
Das Markup eines HTML5-Dokuments sieht folgendermaßen aus:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. >
  2. <html>
  3. <Kopf>
  4.  <meta charset="utf- 8"> 
  5.  <Titel>... Titel>
  6. Kopf>
  7. <Körper>
  8. <Kopfzeile>... Kopfzeile>
  9. <nav>... nav>
  10. <Artikel>
  11.  <Abschnitt> 
  12.  … 
  13.  Abschnitt> 
  14. Artikel>
  15. <beiseite>... beiseite>
  16. <Fußzeile>... Fußzeile>
  17. Körper>
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