Html5 Elemen Baharu
html
html5
HTML Tutorial
HTML Properties
HTML tags
HTML5 ialah peningkatan baharu daripada versi HTML 4.01 yang mempunyai banyak ciri baharu, ciri fungsi lanjutan, paparan halaman yang lebih baik dan banyak peningkatan lain untuk memadankan keperluan teknologi yang semakin meningkat. Unsur HTML5 yang paling banyak digunakan dan dikehendaki ialah
10 Elemen Baharu HTML5 Terbaik
HTML5 menyediakan elemen baharu untuk mempertingkatkan reka letak dokumen.
1.
Contoh:
<!DOCTYPE html> <html> <head> <title>Article Element</title> </head> <body> <article> <h2>EDUCBA</h2> <p>EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries. </p> </article> </body> </html>
Salin selepas log masuk
Output:
- Simpan kod di atas dalam fail dengan sambungan .html.
- Jalankan fail html dalam penyemak imbas, dan anda akan mendapat output yang ditunjukkan dalam imej di bawah.
2.
Contoh:
<!DOCTYPE html> <html> <head> <title>Figure Element</title> </head> <body> <p> EDUCBA is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries. </p> <figure> <img src="educba.png"/> </figure> </body> </html>
Salin selepas log masuk
Output:
Kod di atas akan menghasilkan output seperti yang ditunjukkan dalam imej di bawah,
3.
Contoh:
<!DOCTYPE html> <html> <head> <title>Figure Caption Element</title> </head> <body> <p> EDUCBA is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries. </p> <figure> <img src="educba.png"/> <figcaption>EDUCBA (Corporate Bridge Consultancy Pvt Ltd)</figcaption> </figure> </body> </html>
Salin selepas log masuk
Output:
Kod di atas memaparkan keputusan seperti yang ditunjukkan dalam imej di bawah,
4.
Contoh:
<!DOCTYPE html> <html> <head> <title>Header Element</title> </head> <body> <article> <header> <h1>Header One</h1> <h2>Header Two</h2> <h3>Header Three</h3> </header> <p>The content of the document goes here...</p> </article> </body> </html>
Salin selepas log masuk
Output:
Kod di atas memaparkan keputusan seperti yang ditunjukkan dalam imej di bawah,
5.
Contoh:
<!DOCTYPE html> <html> <head> <title>Footer Element</title> </head> <body> <footer> <p>Copyright © 2019 www.educba.com</p> <p>Contact: <a href="mailto:[email protected]">[email protected]</a> </footer> </body> </html>
Salin selepas log masuk
Output:
Kod di atas memaparkan keputusan seperti yang ditunjukkan dalam imej di bawah,
6.
Contoh:
<!DOCTYPE html> <html> <head> <title>Main Element</title> </head> <body> <header> <p>Header information</> </header> <main> <p>Main Information</p> <article> <h2>EDUCBA</h2> <p>EDUCBA is a leading global provider of skill based education...</p> </article> </main> <footer> <p>Footer Information</> </footer> </body> </html>
Salin selepas log masuk
Output:
Kod di atas akan menghasilkan output seperti yang ditunjukkan dalam imej di bawah,
7.
Contoh:
<!DOCTYPE html> <html> <head> <title>Mark Element</title> </head> <body> <article> <p><mark>EDUCBA</mark> is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries. </p> </article> </body> </html>
Salin selepas log masuk
Output:
Kod di atas memaparkan keputusan seperti yang ditunjukkan dalam imej di bawah,
8.
Contoh:
<!DOCTYPE html> <html> <head> <title>Nav Element</title> </head> <body> <header> <nav> <a href="#">HTML</a> | <a href="#">CSS</a> | <a href="#">JAVA</a> | <a href="#">PHP</a> | <a href="#">PYTHON</a> </nav> </header> </body> </html>
Salin selepas log masuk
Output:
Kod di atas akan menghasilkan output seperti yang ditunjukkan dalam imej di bawah,
9.
Contoh:
<!DOCTYPE html> <html> <head> <title>Section Element</title> </head> <body> <article> <h2> Main Article </h2> <p>Content of the main header will be displayed here...</p> <section> <h2>Section One</h2> <p>Content of the first section will be displayed...</p> </section> <section> <h2>Section Two</h2> <p>Content of the second section will be displayed...</p> </section> </article> </body> </html>
Salin selepas log masuk
Output:
Kod di atas memaparkan keputusan seperti yang ditunjukkan dalam imej di bawah,
10.
The tag which provides the text that can be displayed or hidden when the user clicks the heading.
Example:
<!DOCTYPE html> <html> <head> <title>Summary Element</title> </head> <body> <details> <summary> EDUCBA - Corporate Bridge Consultancy Pvt Ltd </summary> <p>It is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries.</p> </details> </body> </html>
Salin selepas log masuk
Output:
When you run the above code, it will display the result as shown below,
As shown in the image, click on the heading, and it will display the hidden text shown below the image,
Conclusion
So far, we have seen how new HTML5 elements are useful for various website creation tasks. These new elements read the document in a more accurate & standard way and develop more complex and efficient web apps. The new HTML5 elements give some additional extra features to generate interactive websites.
Atas ialah kandungan terperinci Html5 Elemen Baharu. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan Laman Web ini
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
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
3 minggu yang lalu
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
3 minggu yang lalu
By 尊渡假赌尊渡假赌尊渡假赌
Assassin's Creed Shadows: Penyelesaian Riddle Seashell
2 minggu yang lalu
By DDD
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
3 minggu yang lalu
By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Cara Membuka Segala -galanya Di Myrise
4 minggu yang lalu
By 尊渡假赌尊渡假赌尊渡假赌
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Tutorial CakePHP
1377
52
1377
52
Sempadan Jadual dalam HTML
Sep 04, 2024 pm 04:49 PM
Panduan untuk Sempadan Jadual dalam HTML. Di sini kita membincangkan pelbagai cara untuk menentukan sempadan jadual dengan contoh Sempadan Jadual dalam HTML.
HTML jidar-kiri
Sep 04, 2024 pm 04:48 PM
Panduan untuk HTML margin-kiri. Di sini kita membincangkan gambaran keseluruhan ringkas tentang HTML margin-left dan Contoh-contohnya bersama-sama dengan Pelaksanaan Kodnya.
Jadual Bersarang dalam HTML
Sep 04, 2024 pm 04:49 PM
Ini ialah panduan untuk Nested Table dalam HTML. Di sini kita membincangkan cara membuat jadual dalam jadual bersama-sama dengan contoh masing-masing.
Susun Atur Jadual HTML
Sep 04, 2024 pm 04:54 PM
Panduan untuk Susun Atur Jadual HTML. Di sini kita membincangkan Nilai Susun Atur Jadual HTML bersama-sama dengan contoh dan output n perincian.
Pemegang Tempat Input HTML
Sep 04, 2024 pm 04:54 PM
Panduan untuk Pemegang Tempat Input HTML. Di sini kita membincangkan Contoh Pemegang Tempat Input HTML bersama-sama dengan kod dan output.
Senarai Tertib HTML
Sep 04, 2024 pm 04:43 PM
Panduan kepada Senarai Tertib HTML. Di sini kami juga membincangkan pengenalan senarai dan jenis Tertib HTML bersama-sama dengan contoh mereka masing-masing
Memindahkan Teks dalam HTML
Sep 04, 2024 pm 04:45 PM
Panduan untuk Memindahkan Teks dalam HTML. Di sini kita membincangkan pengenalan, cara teg marquee berfungsi dengan sintaks dan contoh untuk dilaksanakan.
Butang onclick HTML
Sep 04, 2024 pm 04:49 PM
Panduan untuk Butang onclick HTML. Di sini kita membincangkan pengenalan, kerja, contoh dan onclick Event masing-masing dalam pelbagai acara.
