Rumah >hujung hadapan web >tutorial css >Templat HTML5: Starter Base HTML Boilerplate untuk mana -mana projek

Templat HTML5: Starter Base HTML Boilerplate untuk mana -mana projek

Joseph Gordon-Levitt
Joseph Gordon-Levittasal
2025-02-08 08:50:08486semak imbas

Bina templat HTML5 anda sendiri: Panduan Ringkas

HTML5 Template: A Base Starter HTML Boilerplate for Any Project

Artikel ini akan membimbing anda tentang cara membuat templat HTML5 anda sendiri. Kami akan langkah demi langkah menerangkan unsur -unsur utama templat asas HTML, dan akhirnya menyediakan templat mudah yang boleh anda gunakan dan membina selanjutnya.

Selepas membaca artikel ini, anda akan mempunyai templat HTML5 anda sendiri. Jika anda ingin mendapatkan kod templat HTML sekarang, baca artikel ini kemudian, inilah templat HTML5 terakhir kami.

mata utama

    templat HTML5, sebagai templat yang boleh diguna semula, mengandungi elemen HTML yang diperlukan, membantu mengelakkan penulisan kod berulang pada permulaan setiap projek.
  • Templat HTML5 asas harus mengandungi pengisytiharan jenis dokumen,
  • unsur -unsur dengan atribut bahasa, pengekodan karakter melalui , dan tetapan Viewport untuk reka bentuk responsif. <meta charset="utf-8"> Unsur -unsur utama Template Html5
  • bahagian biasanya mengandungi metadata untuk SEO, pautan ke gaya CSS, dan fail JavaScript pilihan.
  • Untuk pengoptimuman media sosial, menambah tag meta graf terbuka boleh meningkatkan kesan paparan kandungan apabila dikongsi di platform sosial.
  • termasuk ikon Favicon dan Apple Touch dalam template membantu membina identiti jenama dan meningkatkan pengalaman pengguna merentasi peranti.
  • Meletakkan fail JavaScript sebelum ditutup
  • tag dapat meningkatkan kelajuan pemuatan halaman kerana ia membolehkan penyemak imbas menjadikan halaman lebih cepat dengan melambatkan skrip pemuatan.
Apakah templat HTML?

Setiap laman web adalah berbeza, tetapi dari satu laman web ke laman web yang lain, banyak perkara pada dasarnya sama. Daripada menulis kod yang sama berulang kali, buat "templat" anda sendiri. Templat adalah templat yang anda gunakan setiap kali anda memulakan projek, yang dapat menghalang anda dari bermula dari awal.

Wikipedia menerangkan templat sebagai:

Coretan kod muncul berulang kali di beberapa tempat, dengan sedikit perubahan.

Semasa anda belajar HTML5 dan tambahkan teknologi baru ke kotak alat anda, anda mungkin ingin membina templat HTML untuk diri anda untuk memulakan semua projek masa depan. Ia pasti patut dilakukan, dan terdapat banyak titik permulaan dalam talian yang dapat membantu anda membina templat HTML5 anda sendiri.

contoh templat html5 yang sangat mudah

Templat lengkap yang disediakan pada akhir artikel ini mengandungi banyak kandungan. Tetapi anda tidak perlu melakukannya yang mewah - terutamanya apabila anda baru mula belajar. Berikut adalah templat html5 "pemula" yang sangat mudah, yang mungkin satu -satunya perkara yang anda perlukan:

Jika anda menampal kod di atas ke dalam fail .html, anda akan mempunyai laman web! Templat HTML5 asas ini mengandungi beberapa elemen yang disenaraikan di bahagian seterusnya, serta elemen tajuk mudah yang akan dipaparkan dalam pelayar web anda.
<code class="language-html"><!DOCTYPE html>


  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTML5 Boilerplate</title>
  <link rel="stylesheet" href="styles.css">


  <h1>Page Title</h1>
  

</code>

mari kita lihat dengan lebih dekat strukturnya.

Struktur templat html5

templat HTML biasanya mengandungi bahagian berikut:

  1. Deklarasi Jenis Dokumen (atau Doctype)
  2. elemen
  3. Pengekodan aksara
  4. elemen viewport
  5. <title></title>, penerangan dan pengarang
  6. Buka elemen graf untuk kad sosial
  7. Ikon Favicon dan Touch
  8. pautan stylesheet CSS
  9. pautan fail JavaScript

Di samping pengisytiharan jenis dokumen dan elemen, kebanyakan unsur yang disenaraikan di atas terletak di bahagian dari templat HTML.

html5 jenis pernyataan jenis dokumen

templat HTML5 anda perlu bermula dengan pengisytiharan jenis dokumen atau Doctype . Doctype adalah satu cara untuk memberitahu penyemak imbas atau mana -mana parser lain jenis dokumen yang dilihatnya. Untuk fail HTML, ini bermakna versi tertentu dan jenis HTML. DOCTYPE harus selalu menjadi item pertama di bahagian atas mana -mana fail HTML. Ramai tahun yang lalu, pengisytiharan Doctype adalah hodoh dan sukar untuk mengingati kekeliruan, biasanya ditetapkan sebagai "XHTML ketat" atau "peralihan HTML".

dengan kedatangan HTML5, perkara -perkara yang tidak dapat difahami yang tidak dapat difahami hilang, dan sekarang anda hanya memerlukan ini:

<code class="language-html"><!DOCTYPE html>


  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTML5 Boilerplate</title>
  <link rel="stylesheet" href="styles.css">


  <h1>Page Title</h1>
  

</code>

Mudah dan jelas. "5" hilang dengan jelas dari kenyataan itu. Walaupun versi semasa tag web dipanggil "HTML5", ia benar -benar hanya evolusi piawaian HTML sebelumnya -spesifikasi masa depan hanya akan menjadi pembangunan yang kita ada hari ini. Tidak akan ada "html6", jadi tag web keadaan semasa biasanya hanya dipanggil "html".

Oleh kerana penyemak imbas perlu menyokong kandungan lama di web, ia tidak bergantung kepada DOCTYPE untuk memberitahu penyemak imbas apa ciri yang harus disokong dalam dokumen tertentu. Dengan kata lain, hanya Doctype tidak membuat halaman anda mematuhi ciri HTML moden. Malah, tanpa mengira DOCTYPE yang digunakan, pelayar akan menentukan kes sokongan ciri oleh kes. Malah, anda boleh menggunakan Doctype lama dengan elemen HTML5 baru pada halaman dan halaman menjadikan cara yang sama seperti ketika menggunakan Doctype baru.

elemen

Elemen

adalah elemen peringkat teratas dalam fail HTML -yang bermaksud ia mengandungi segala -galanya kecuali DOCTYPE dalam dokumen. Elemen dibahagikan kepada dua bahagian- dan bahagian. Semua kandungan lain dalam fail laman web akan diletakkan di dalam atau di dalam elemen . Kod berikut menunjukkan elemen , yang terletak selepas pengisytiharan Doctype dan mengandungi unsur -unsur dan :

<code class="language-html"><!DOCTYPE html></code>

cara menggunakan tag dalam html Bahagian

mengandungi maklumat penting mengenai dokumen, yang tidak dipaparkan kepada pengguna akhir - seperti pengekodan aksara dan pautan ke fail CSS, dan mungkin fail JavaScript. Maklumat ini digunakan oleh mesin seperti penyemak imbas, enjin carian, dan pembaca skrin:

Semua elemen yang terkandung di antara tag
<code class="language-html">
  
  
  
  
</code>
...

di atas adalah penting, tetapi pengguna akhir tidak melihatnya - kecuali untuk teks , ia akan muncul dalam carian dalam talian dan tag penyemak imbas.

cara menggunakan tag dalam html

Bahagian

mengandungi semua yang dipaparkan dalam penyemak imbas - seperti teks, imej, dll. Jika anda ingin menunjukkan sesuatu kepada pengguna akhir, pastikan untuk meletakkannya di antara dan off ... tags:

<code class="language-html"><!DOCTYPE html>


  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTML5 Boilerplate</title>
  <link rel="stylesheet" href="styles.css">


  <h1>Page Title</h1>
  

</code>

HTML5 Template: A Base Starter HTML Boilerplate for Any Project

Apakah atributnya? lang Elemen

mestilah mengandungi atribut , seperti yang ditunjukkan dalam kod di atas (). Tujuan utamanya adalah untuk memberitahu teknologi bantuan seperti pembaca skrin bagaimana untuk mengucapkannya apabila membaca dengan kuat. (Harta ini tidak diperlukan untuk pengesahan halaman, tetapi kebanyakan pengesahan akan mengeluarkan amaran jika anda tidak memasukkannya.) lang Nilai atribut

yang ditunjukkan di atas adalah

, yang menyatakan bahawa dokumen itu ditulis dalam bahasa Inggeris. Semua bahasa yang diucapkan mempunyai nilai, seperti lang dalam bahasa Perancis, en dalam bahasa Jerman, fr dalam bahasa Hindi, dll. (Anda boleh mencari senarai lengkap kod bahasa di Wikipedia.) de hi

pengekodan aksara dokumen html

Baris pertama dalam seksyen Dokumen HTML

adalah garis yang mentakrifkan pengekodan watak dokumen. Surat dan simbol yang kita baca di laman web ditakrifkan sebagai satu siri nombor, dan beberapa aksara (seperti huruf) dikodkan dalam banyak cara. Oleh itu, adalah berguna untuk memberitahu komputer anda yang mengodkan halaman web anda harus merujuk. Pengekodan watak penunjuk adalah ciri pilihan yang tidak menyebabkan sebarang amaran dalam pengesahan, tetapi untuk kebanyakan halaman HTML ia disyorkan:

<code class="language-html"><!DOCTYPE html></code>
Nota: Untuk memastikan bahawa beberapa pelayar yang lebih tua membaca pengekodan aksara dengan betul, keseluruhan pengekodan pengekodan aksara mesti dimasukkan ke suatu tempat dalam 512 aksara pertama dokumen. Ia juga harus muncul sebelum mana-mana elemen berasaskan kandungan (seperti elemen

yang muncul kemudian dalam contoh kami). <title></title> Mengapa menggunakan pengekodan aksara UTF-8 dalam templat HTML5?

Contoh pengekodan aksara di atas menggunakan set aksara UTF-8. Dalam hampir semua kes,

adalah nilai yang perlu anda gunakan dalam dokumen anda. Pengekodan ini merangkumi pelbagai watak yang tidak termasuk dalam pengekodan lain. Anda mungkin menemui watak -watak aneh di web - sebagai contoh - yang jelas merupakan pepijat. Ini biasanya kerana penyemak imbas tidak dapat mencari aksara yang diharapkan dalam set aksara yang ditentukan dalam dokumen.

utf-8 UTF-8 merangkumi pelbagai watak, termasuk banyak watak dalam pelbagai bahasa di seluruh dunia, serta banyak simbol berguna. Seperti yang dijelaskan oleh World Wide Web Web:

Pengekodan berasaskan Unicode (seperti UTF-8) boleh menyokong pelbagai bahasa dan boleh disesuaikan dengan mana-mana halaman dan bentuk bercampur bahasa. Penggunaannya juga boleh menghapuskan logik sisi pelayan, dengan itu secara individu menentukan pengekodan aksara untuk setiap halaman perkhidmatan atau untuk setiap penyerahan bentuk masuk. Ini sangat mengurangkan kerumitan pengendalian laman web atau aplikasi berbilang bahasa.

Penjelasan penuh pengekodan watak adalah di luar skop artikel ini, tetapi jika anda ingin menggali lebih mendalam, anda boleh membaca tentang pengekodan aksara dalam spesifikasi HTML.

Apa maksud

X-UA-Compatible?

anda kadang -kadang melihat baris ini dalam dokumen HTML anda:

<code class="language-html"><!DOCTYPE html>


  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTML5 Boilerplate</title>
  <link rel="stylesheet" href="styles.css">


  <h1>Page Title</h1>
  

</code>

Tag Meta ini membolehkan penulis web memilih versi Internet Explorer yang harus menjadikan halaman tersebut. Sekarang bahawa Internet Explorer sebahagian besarnya hanya memori yang buruk, anda boleh mengeluarkan garis ini dengan selamat dari kod anda. (Kami telah mengeluarkannya dari templat HTML5.) Jika anda pasti halaman anda mungkin dilihat dalam versi yang lebih lama dari IE, ia mungkin bernilai memasukkannya. Anda boleh membaca lebih lanjut mengenai tag meta ini di laman web Microsoft.

elemen viewport

Elemen Viewport adalah ciri yang akan anda lihat dalam hampir setiap templat HTML5. Ia sangat penting untuk reka bentuk web responsif dan reka bentuk pertama mudah alih:

<code class="language-html"><!DOCTYPE html></code>

Elemen <meta> ini mengandungi dua sifat yang berfungsi bersama sebagai set nama/nilai. Dalam kes ini, nama itu ditetapkan kepada viewport dan nilai adalah width=device-width, initial-scale=1. Ini hanya untuk peranti mudah alih sahaja. Anda akan melihat bahawa terdapat dua bahagian nilai:

  • width=device-width: Lebar piksel Viewport yang anda mahu laman web hadir.
  • initial-scale: Ini harus menjadi nombor positif antara 0.0 dan 10.0. Nilai "1" menunjukkan nisbah 1: 1 antara lebar peranti dan saiz viewport.

Anda boleh membaca lebih lanjut mengenai sifat-sifat meta-elemen ini di MDN, tetapi sekarang anda hanya perlu tahu bahawa dalam kebanyakan kes, meta-elemen dan tetapannya adalah yang terbaik untuk laman web responsif pertama mudah alih.

<title></title>, penerangan dan pengarang

Bahagian seterusnya templat asas HTML mengandungi tiga baris berikut:

<code class="language-html">
  
  
  
  
</code>

<title></title> adalah apa yang dipaparkan dalam bar tajuk penyemak imbas (contohnya, apabila anda melayang ke atas tab penyemak imbas), yang juga dipaparkan dalam hasil carian. Elemen ini adalah satu -satunya elemen yang diperlukan dalam bahagian . Keterangan dan pengarang pengarang adalah pilihan, tetapi mereka memberikan maklumat penting untuk enjin carian. Dalam hasil carian, tajuk dan perihalan dalam contoh kod di atas akan ditunjukkan di bawah.

HTML5 Template: A Base Starter HTML Boilerplate for Any Project

anda boleh meletakkan bilangan elemen elemen yang sah dalam

.

Buka elemen graf untuk kad sosial

Seperti yang disebutkan di atas, semua elemen meta adalah pilihan, tetapi banyak yang baik untuk pemasaran SEO dan media sosial. Bahagian seterusnya templat HTML5 mengandungi beberapa pilihan meta-elemen ini:

<code class="language-html">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTML5 Boilerplate</title>
  <link rel="stylesheet" href="styles.css">
    
</code>
unsur-unsur ini menggunakan protokol graf terbuka yang dipanggil, dan terdapat banyak elemen lain yang boleh anda gunakan. Ini adalah unsur -unsur yang paling anda gunakan. Anda boleh melihat senarai lengkap pilihan meta graf terbuka yang tersedia di laman web Open Graph.

unsur -unsur yang disertakan di sini akan meningkatkan penampilan halaman web apabila dihubungkan dengan jawatan media sosial. Sebagai contoh, elemen lima <meta> yang disertakan di sini akan muncul dalam kad sosial yang tertanam dengan data berikut:

  • Tajuk kandungan
  • Disediakan jenis kandungan
  • URL Spesifikasi Kandungan
  • Keterangan Kandungan
  • imej yang dikaitkan dengan kandungan

Apabila anda melihat jawatan yang dikongsi di media sosial, anda biasanya akan melihat bit data ini ditambah secara automatik ke jawatan media sosial. Sebagai contoh, jika anda memasukkan pautan ke laman utama GitHub, perkara berikut akan dipaparkan dalam tweet.

HTML5 Template: A Base Starter HTML Boilerplate for Any Project

ikon favicon dan sentuh

Bahagian seterusnya templat HTML5 mengandungi unsur -unsur

yang menunjukkan sumber yang mengandungi sebagai ikon Favicon dan Apple Touch:

<link>

Favicon akan muncul dalam tab Pelayar apabila seseorang memeriksa laman web anda.
<code class="language-html"><!DOCTYPE html>


  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTML5 Boilerplate</title>
  <link rel="stylesheet" href="styles.css">


  <h1>Page Title</h1>
  

</code>
Fail digunakan dalam pelayar yang lebih tua dan tidak perlu dimasukkan ke dalam kod. Selagi fail

anda dimasukkan ke dalam direktori root projek, penyemak imbas secara automatik akan menemuinya. favicon.ico Fail digunakan dalam pelayar moden yang menyokong ikon SVG. Anda juga boleh menggunakan fail .png sebaliknya. favicon.ico favicon.svg Elemen terakhir merujuk ikon yang digunakan pada peranti Apple apabila menambah halaman ke skrin utama pengguna.

Anda boleh memasukkan pilihan tambahan di sini, termasuk fail manifes aplikasi web yang merujuk ikon lain. Untuk perbincangan penuh, kami mengesyorkan agar anda membaca artikel Andrey Sitnik mengenai topik ini. Tetapi yang termasuk di sini cukup untuk template pemula HTML yang mudah.

Mengandungi CSS Stylesheets dan JavaScript Files

Dua bahagian penting templat HTML yang bermula adalah rujukan kepada satu atau lebih stylesheets dan mungkin fail JavaScript. Sudah tentu, kedua -duanya adalah pilihan, walaupun beberapa laman web tidak mempunyai sekurang -kurangnya beberapa gaya CSS.

termasuk CSS Stylesheet dalam templat HTML

stylesheets boleh dimasukkan ke mana -mana sahaja dalam dokumen, tetapi biasanya anda akan melihatnya di bahagian

:

Elemen

<code class="language-html"><!DOCTYPE html></code>
menunjuk penyemak imbas web ke lembaran gaya luaran supaya ia boleh menggunakan gaya CSS ini ke halaman. Elemen

memerlukan atribut <link> menjadi <link>. Pada masa lalu, biasanya terdapat juga atribut rel, tetapi ia tidak pernah diperlukan, jadi jika anda mendapati kod lama yang mengandunginya di web, hanya padamkannya. stylesheet type Perhatikan bahawa kami menambah rentetan pertanyaan

pada akhir pautan CSS. Ini benar -benar pilihan. Ini adalah helah yang berguna apabila anda mengemas kini lembaran gaya untuk mengemas kini rentetan pertanyaan ini (contohnya, kemas kini ke 1.1 atau 2.0), kerana berbuat demikian memastikan bahawa penyemak imbas akan membuang mana -mana salinan fail CSS yang lama, cache dan memuatkan versi yang baru.

perlu diperhatikan bahawa anda tidak perlu menggunakan elemen <link> untuk memasukkan CSS di laman web, kerana anda boleh meletakkan semua gaya di dalam <style></style> ... tag halaman itu sendiri, terletak di Bahagian . Ini sangat mudah apabila bereksperimen dengan susun atur, tetapi secara umumnya tidak disyorkan untuk melakukannya di tapak aktif, kerana gaya ini tidak dapat diakses di halaman lain, mengakibatkan kod tidak cekap dan/atau pendua.

Sertakan fail JavaScript dalam templat HTML

kod javascript biasanya berlalu ⋮ <p> </p>

<code class="language-html"><!DOCTYPE html>


  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTML5 Boilerplate</title>
  <link rel="stylesheet" href="styles.css">


  <h1>Page Title</h1>
  

</code>
Benamkan skrip dalam

tag:

arahan mengenai pelayar lama dan elemen baru <article></article> <aside></aside> <recipe></recipe> Apabila HTML5 diperkenalkan, ia mengandungi banyak elemen baru seperti <ziggy></ziggy> dan . Anda mungkin berfikir bahawa sokongan untuk unsur -unsur yang tidak dikenali adalah isu utama untuk pelayar yang lebih tua - tetapi itu bukan kes itu! Kebanyakan penyemak imbas tidak benar -benar peduli apa tag yang anda gunakan. Sekiranya anda mempunyai dokumen HTML yang mengandungi elemen (atau elemen ), dan CSS anda melekatkan gaya tertentu ke elemen itu, hampir setiap penyemak imbas akan mengendalikannya seperti ini benar -benar normal, tanpa menggunakan gaya anda .

Sudah tentu, andaian seperti itu tidak mengesahkan dan mungkin ada masalah kebolehcapaian, tetapi ia akan diberikan dengan betul dalam hampir semua pelayar - pengecualian adalah versi lama Internet Explorer (IE). Sebelum versi 9, IE menyekat unsur -unsur yang tidak diiktiraf daripada menerima gaya. Enjin rendering merawat unsur -unsur misteri ini sebagai "unsur -unsur yang tidak diketahui", jadi anda tidak boleh mengubah penampilan atau tingkah laku mereka. Ini termasuk bukan sahaja unsur -unsur yang kita bayangkan, tetapi juga sebarang unsur yang tidak ditakrifkan pada masa membangunkan versi pelayar ini, termasuk unsur -unsur HTML5 baru.

bernasib baik, penyemak imbas yang lebih tua yang tidak menyokong gaya elemen baru tidak hadir pada masa kini, jadi anda boleh menggunakan elemen HTML yang baru dalam hampir mana -mana projek tanpa perlu risau.

Ia diilhamkan oleh karya Sjoerd Visscher, yang menjadikan unsur -unsur HTML5 baru bergaya dalam versi lama IE. Sebenarnya, ini tidak perlu hari ini. Seperti yang ditunjukkan oleh Caniuse.com, elemen HTML5 disokong dalam semua pelayar yang digunakan.

Templat HTML5 Lengkap

Ini adalah templat html5 terakhir kami - templat mudah yang boleh anda gunakan untuk mana -mana projek:
<code class="language-html"><!DOCTYPE html></code>

Anda boleh meletakkan kod templat HTML5 yang mudah dan mudah digunakan ini ke mana-mana projek hari ini! Atas dasar ini, anda boleh menambah apa sahaja yang anda mahu antara tag dan

.

Kesimpulan

Terdapat banyak templat dan kerangka pemula HTML dalam talian, dengan fail CSS dan JavaScript yang siap sedia dan banyak kandungan pra-menulis yang boleh anda gunakan dan mengubah suai seperti yang anda suka. Ini bukan matlamat kami. Templat asas yang kami sediakan di sini mengandungi semua yang anda perlukan ketika merancang laman web mana -mana supaya anda tidak perlu bermula dari awal setiap kali.

Jangan ragu untuk menyalin templat halaman HTML asas yang kami tunjukkan pada mulanya, atau templat penuh yang kami tunjukkan di atas dan menggunakannya dalam projek anda. Dari masa ke masa, anda mungkin mendapati bahawa terdapat kandungan yang anda tidak perlukan sering, dan beberapa perkara yang tidak kami sebutkan di sini yang anda gunakan dengan kerap, jadi anda boleh mengemas kini templat anda sesuai dengan aliran kerja anda.

Langkah seterusnya

Cara yang baik untuk mengambil susun atur web anda ke peringkat seterusnya ialah menggunakan Prinsip Reka Bentuk Web yang indah, edisi keempat. Buku ini akan mengajar anda merancang prinsip dan dan untuk menunjukkan kepada anda bagaimana untuk melaksanakannya di web. Ia telah ditulis semula pada September 2020 dan mengandungi teknologi canggih yang anda tidak baca di tempat lain.

Untuk mengasah pengetahuan CSS anda, kursus projek CSS moden kami akan membantu anda menguasai versi canggih terkini CSS3.

Selain itu, anda boleh mengambil laman web atau pembangunan aplikasi web anda ke peringkat seterusnya dengan UI interaktif dan programatik, reaktif. Sebagai contoh, lihat sumber luas SitePoint pada JavaScript dan React. Dan belajar bagaimana untuk memulakan projek baru dengan lebih cepat menggunakan panduan kami pada alat web dan perpustakaan web yang terbaik. Atau, jika anda ingin membina pengalaman web tanpa belajar pengekodan, baca panduan starter kami mengenai pergerakan berkomunikasi. Alat COSTLESS terkini adalah penukar permainan. Buat pertama kalinya mereka mempunyai kuasa yang cukup untuk menyediakan alternatif yang kuat untuk pengekodan dalam banyak kes.

HTML5 Template FAQ

Akhirnya, kami akan menjawab soalan yang sering ditanya mengenai kod templat HTML5.

Apakah templat dalam html?

Templat adalah templat halaman HTML yang digunakan setiap kali anda memulakan projek, dengan itu mengelakkan bermula dari awal. Ia termasuk unsur -unsur biasa seperti pengisytiharan jenis dokumen dan elemen HTML asas yang muncul di setiap laman web.

Adakah templat templat?

Ya. Templat adalah template pemula HTML yang sangat mudah yang mengandungi pautan ke unsur -unsur asas yang muncul di mana -mana laman web, seperti pengekodan aksara,

dan elemen, dan fail CSS dan JavaScript.

bagaimana membuat templat dalam html?

Satu cara untuk membuat templat HTML anda sendiri adalah untuk mendapatkan mana -mana laman web, menyalin kod sumbernya, dan kemudian memadam segala -galanya kecuali unsur -unsur paling asas yang muncul di setiap laman web. Atau anda boleh mendapatkan templat HTML5 siap sedia kami dan tampalkannya ke dalam fail .html dan anda sudah bersedia untuk pergi!

Apakah templat HTML5 yang digunakan?

Apabila merancang laman web, tidak ada yang lebih buruk daripada menulis semua kod yang membosankan dari awal bermula dengan halaman .html kosong. Templat HTML5 kami memberikan anda semua kod templat HTML yang anda perlukan untuk memulakan berjalan supaya anda dapat mula bekerja pada reka bentuk dan kandungan unik anda dengan segera.

Apakah contoh templat?

Terdapat banyak contoh templat HTML5 di Internet. Dari masa ke masa, anda boleh membuat templat anda sendiri berdasarkan cara anda menulis html sendiri. Contoh templat HTML5 kami menyediakan semua elemen asas yang anda perlukan di kebanyakan laman web.

sebagai permulaan yang sangat mudah, anda hanya boleh menggunakan ini:

<code class="language-html"><!DOCTYPE html>


  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTML5 Boilerplate</title>
  <link rel="stylesheet" href="styles.css">


  <h1>Page Title</h1>
  

</code>

Apakah kod permulaan untuk HTML?

Dokumen HTML Sentiasa bermula dengan pengisytiharan jenis dokumen: <!DOCTYPE html>. Kemudian terdapat tag , yang mengandungi semua kandungan lain di laman web. Kedua -dua elemen kanak -kanak adalah unsur -unsur dan . Templat HTML5 kami mengandungi semua kod permulaan asas yang diperlukan untuk mana -mana laman web.

Adakah setiap fail HTML memerlukan templat?

Idealnya, ya. Templat HTML menyediakan jumlah minimum kod untuk halaman HTML untuk melaksanakan sebarang tindakan yang berguna dalam pelayar web. Anda boleh menggunakan kod templat HTML pada setiap halaman laman web anda. Biasanya, unsur -unsur biasa templat akan disuntik ke dalam halaman anda dari satu sumber, seperti rangka kerja atau memasukkan fail, supaya anda dapat mengemas kini templat untuk semua halaman sekaligus. Templat HTML5 kami menyediakan semua kod templat HTML yang anda perlukan untuk memulakan.

Atas ialah kandungan terperinci Templat HTML5: Starter Base HTML Boilerplate untuk mana -mana projek. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

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