Home-theater-designers
Semasa anda membina laman web baru, akhir-akhir ini anda mahu laman web ini serasi dengan HTML5. Tetapi anda juga tidak mahu meluangkan masa untuk mempelajari selok-belok HTML5 dari awal, bukan?
Nasib baik, yang Templat Boiler HTML5 boleh tolong. Ini templat front-end sederhana yang boleh anda gunakan untuk membuat laman web HTML5 hanya dalam beberapa minit. Tetapi ia juga cukup kuat sehingga anda dapat menggunakannya sebagai asas laman web yang lengkap dan lengkap.
bolehkah anda menggunakan ram saiz berbeza
Tutorial HTML5 Boilerplate ini akan membahas apa yang terdapat dalam templat, asas-asas yang perlu anda ketahui tentang cara menggunakannya, dan beberapa sumber untuk pembelajaran lebih lanjut. Saya juga akan menunjukkan kepada anda bagaimana saya menggunakan templat untuk membuat laman web yang sangat asas dengan hanya beberapa baris HTML.
Templat Boiler HTML5
Apabila anda memuat turun templat dari HTML5 Boilerplate, anda mendapat sejumlah folder dan fail. Berikut adalah kandungan fail ZIP:
css
---main.css
---normalize.css
doc
img
js
---main.js
---plugins.js
---vendor
---jquery.min.js
---modernizr.min.js
.editorconfig
.htaccess
404.html
browserconfig.xml
favicon.ico
humans.txt
icon.png
index.html
robots.txt
site.webmanifest
tile.png
tile-wide.pngKami tidak akan membahas setiap elemen dalam templat di sini, hanya asasnya. Untuk memastikan anda mempunyai sumber untuk menggunakan semua fail, kami akan memulakan dengan dokumen bantuan.
Dokumentasi Bantuan Boilerplate HTML5
Boilerplate mempunyai koleksi dokumen bantuan yang dihoskan di GitHub . Ini adalah pertolongan besar apabila anda mempunyai pertanyaan teknikal atau tertanya-tanya mengapa sesuatu direka bentuk seperti itu.
Hampir semua perkara dalam dokumentasi juga dimasukkan ke dalam folder doc templat. Anda akan melihat sebilangan fail Markdown (.md) yang sangat membantu dalam mengetahui cara membina laman Boilerplate anda.
Sekiranya anda ingin membaca semuanya, mulakan dengan TOC.md dan ikuti pautan dari sana ke fail Markdown yang lain. Sekiranya anda mencari bantuan mengenai masalah tertentu, cari fail yang sepertinya berkaitan; use.md adalah tempat yang baik untuk bermula.
Bermula dengan CSS HTML5 Boilerplate
Templat Boilerplate HTML5 dilengkapi dengan dua fail CSS: main.css dan normalize.css.
Fail kedua, normalize.css, membantu penyemak imbas yang berbeza membuat elemen dengan cara yang konsisten. Untuk mengetahui lebih lanjut mengenai cara kerjanya, lihat projek normalize.css di GitHub .
Sementara itu, main.css adalah tempat anda memasukkan kod yang anda perlukan format laman web anda dengan CSS . CSS standard yang disertakan dengan templat adalah hasil penyelidikan yang dilakukan oleh pembangun dan komuniti HTML5 Boilerplate. Ia boleh dibaca dan dipaparkan dengan baik di penyemak imbas yang berbeza.
Sekiranya anda ingin menambahkan CSS anda sendiri, anda boleh menambahkannya ke bahagian Gaya Custom Pengarang. Saya akan menambah sedikit gaya pautan untuk halaman contoh kami:
Terdapat juga sebilangan kelas pembantu yang berguna termasuk dalam CSS asas. Sebahagian daripada mereka menyembunyikan item dari penyemak imbas standard dan pembaca skrin (atau beberapa kombinasi).
Juga di main.css anda akan mendapat sokongan untuk reka bentuk responsif dan tetapan cetak yang berguna.
Semua item ini dijelaskan dengan jelas melalui komen di CSS:
Secara umum, anda boleh memulakan dengan CSS asas.
Menambah HTML Anda Sendiri ke Templat
Boilerplate merangkumi dua fail HTML: 404.html dan index.html.
Halaman indeks adalah tempat anda akan membuat halaman utama anda (atau satu-satunya halaman anda, jika anda memerlukan satu halaman kecil).
Sekiranya anda membuka halaman indeks di penyemak imbas, anda akan melihat satu baris teks. Tetapi melihat ke dalam HTML menunjukkan banyak lagi penyembunyian dalam kod tersebut. Satu-satunya perkara yang perlu anda bimbangkan ialah menukar kod Analitis Google (cari teks 'UA-XXXXX-Y' dan gantikan dengan kod penjejakan anda sendiri).
Selebihnya HTML di halaman indeks merangkumi maklumat untuk aplikasi web, pemberitahuan untuk penyemak imbas lama, dan JavaScript yang berguna. Semasa anda memulakan, anda tidak perlu mengacaukan semua ini.
Namun, menjadikannya sudah diisi sebelumnya, adalah cara yang baik untuk memastikan bahawa laman web anda bersedia untuk memanfaatkan HTML5 secara maksimal.
Untuk membuat halaman anda, masukkan HTML anda di antara tag dalam fail. Berikut adalah beberapa maklumat asas yang akan saya tambahkan mengenai diri saya:
Ingin membuat lebih banyak halaman? Buat salinan fail ini dan namakan semula sehingga anda tidak perlu menyalin dan menampal semua HTML. Kemudian tambahkan kandungan anda.
Sekiranya anda ingin menyesuaikan halaman 404 anda, ubah saja fail HTML. Tidak pasti apa yang hendak diletakkan di halaman 404 anda? Lihat contoh reka bentuk halaman 404 yang hebat ini.
Menambah Favicon (dan Ikon Lain)
Ingin menggantikan favicon anda? Kemudian favicon.ico adalah fail yang perlu anda ganti.
Sekiranya anda belum memilikinya, anda perlu membuatnya. Anda boleh menggunakan penjana favicon dalam talian atau merancang sendiri. Pastikan hanya 16 x 16 piksel dan mempunyai jenis fail .ico.
yang manakah dalam kes komputer menggunakan watt paling sedikit?
Adalah idea yang baik untuk memasukkan pemikiran ke dalam favicon anda. Gunakan favicon terkenal ini untuk membimbing percambahan fikiran anda. Pastikan bahawa apabila anda menambah favicon baru, itu dinamakan favicon.ico.
Anda mungkin menyedari bahawa terdapat tiga gambar lain di direktori root laman web anda: icon.png, tile.png, dan tile-wide.png. Untuk apa ini?
- icon.png digunakan untuk ikon sentuhan Apple. Sekiranya anda membina aplikasi web, ikon ini akan digunakan ketika pengguna iPhone atau iPad menambahkan aplikasi tersebut ke skrin utama mereka.
- tile.png dan tile-wide.png adalah untuk fungsi 'pin' Windows, dan akan muncul di Windows 10.
Sebaiknya berikan ikon untuk semua kes ini --- tetapi jika anda tidak membuat aplikasi web, ini boleh menjadi keutamaan yang lebih rendah.
Menambah Lebih Berfungsi
Setelah anda menambahkan HTML dan favicon anda (serta CSS yang mungkin anda mahu sertakan), laman web anda siap untuk diterbitkan. Begitulah mudahnya menggunakan Boilerplate HTML5. Muat naik ke pelayan anda, dan anda sudah selesai!
Inilah rupa halaman kami:
Seperti yang anda lihat, hanya beberapa baris teks yang telah membuat laman web berfungsi sepenuhnya (jika agak hambar). Ia tidak banyak, tetapi hanya memerlukan beberapa minit. Dan sangat boleh diperkembangkan dengan HTML5. Itulah kehebatan templat Boilerplate.
Tetapi ada banyak lagi yang boleh anda lakukan dengan templat Boilerplate jika anda mahu. Sekiranya ada sesuatu yang spesifik yang anda cari, ada kemungkinan anda akan menemuinya dalam dokumentasi bantuan.
Sekiranya anda tidak pasti apa yang boleh anda lakukan dengan HTML5, tetapi anda ingin mengetahui, terdapat banyak tutorial reka bentuk web di luar sana untuk membantu anda.
Berkongsi Berkongsi Tweet E-mel Adakah Baik untuk Memasang Windows 11 pada PC yang tidak serasi?Anda kini boleh memasang Windows 11 pada PC lama dengan fail ISO rasmi ... tetapi adakah idea yang baik untuk melakukannya?
Baca Seterusnya Topik-topik yang berkaitan- Pengaturcaraan
- HTML5
- Tutorial Pengekodan
Dann adalah strategi kandungan dan perunding pemasaran yang membantu syarikat menghasilkan permintaan dan petunjuk. Dia juga menulis blog mengenai strategi dan pemasaran konten di dannalbright.com.
Lagi Dari Dann AlbrightLanggan buletin kami
Sertailah buletin kami untuk mendapatkan petua, ulasan, ebook percuma, dan tawaran eksklusif!
Klik di sini untuk melanggan