mari kita lihat dengan lebih dekat strukturnya. <\/p>\n
<\/p> Struktur templat html5
\n<\/strong> templat HTML biasanya mengandungi bahagian berikut: <\/p>\n
Deklarasi Jenis Dokumen (atau Doctype) <\/li>\n
<\/code> elemen <\/li>\n
Pengekodan aksara <\/li>\n
elemen viewport <\/li>\n
<\/code>, penerangan dan pengarang <\/li>\n<li> Buka elemen graf untuk kad sosial <\/li>\n<li> Ikon Favicon dan Touch <\/li>\n<li> pautan stylesheet CSS <\/li>\n<li> pautan fail JavaScript <\/li>\n<\/ol>\n<p> Di samping pengisytiharan jenis dokumen dan <code><html><\/code> elemen, kebanyakan unsur yang disenaraikan di atas terletak di bahagian <code><head><\/code> dari templat HTML. <\/p>\n<p> <strong> html5 jenis pernyataan jenis dokumen <\/strong> <\/p>\n<p> templat HTML5 anda perlu bermula dengan pengisytiharan jenis dokumen atau <em> Doctype <\/em>. 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\". <\/p>\n<p> dengan kedatangan HTML5, perkara -perkara yang tidak dapat difahami yang tidak dapat difahami hilang, dan sekarang anda hanya memerlukan ini: <\/p>\n<pre class='brush:php;toolbar:false;'><!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n <title>HTML5 Boilerplate<\/title>\n <link rel=\"stylesheet\" href=\"styles.css\">\n<\/head>\n<body>
<h1><a href="http://miracleart.cn/">国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂</a></h1>\n <h1>Page Title<\/h1>\n <??>\n<\/body>\n<\/html><\/pre>\n<p> 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\". <\/p>\n<p> 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. <\/p>\n<p> <strong> <code><html><\/code> elemen <\/strong> <\/p>\nElemen <p> <code><html><\/code> adalah elemen peringkat teratas dalam fail HTML -yang bermaksud ia mengandungi segala -galanya kecuali DOCTYPE dalam dokumen. Elemen <code><html><\/code> dibahagikan kepada dua bahagian- <code><head><\/code> dan <code><body><\/code> bahagian. Semua kandungan lain dalam fail laman web akan diletakkan di dalam atau di dalam elemen <code><html><\/code>. Kod berikut menunjukkan elemen <code><html><\/code>, yang terletak selepas pengisytiharan Doctype dan mengandungi unsur -unsur <code><html><\/code> dan <code><head><\/code>: <code><body><\/code>\n<\/p>\n<pre class='brush:php;toolbar:false;'><!DOCTYPE html><\/pre> <p> cara menggunakan tag dalam html <strong> <\/strong>\nBahagian <\/p> <p> 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: <code><head><\/code>\n<\/p>\nSemua elemen yang terkandung di antara tag <pre class='brush:php;toolbar:false;'><html lang=\"en\">\n <head>\n <\/head>\n <body>\n <\/body>\n<\/html><\/pre> ... <p> di atas adalah penting, tetapi pengguna akhir tidak melihatnya - kecuali untuk teks <code><head><\/code>, ia akan muncul dalam carian dalam talian dan tag penyemak imbas. <code><\/head><\/code><p> <strong> cara menggunakan tag dalam html <\/strong> <\/p>\nBahagian <p> <code><body><\/code> 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 <code><body><\/code> ... <code><\/body><\/code> tags: <\/p>\n<pre class='brush:php;toolbar:false;'><!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n <title>HTML5 Boilerplate<\/title>\n <link rel=\"stylesheet\" href=\"styles.css\">\n<\/head>\n<body>\n <h1>Page Title<\/h1>\n <??>\n<\/body>\n<\/html><\/pre>\n<p> <img src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/173897581228837.jpg\" alt=\"HTML5 Template: A Base Starter HTML Boilerplate for Any Project \" \/> <s>\n<\/p> <p> <strong> Apakah atributnya? <code>lang<\/code> <\/strong>\nElemen <\/p> <p> mestilah mengandungi atribut <code><html><\/code>, seperti yang ditunjukkan dalam kod di atas (<st>). 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.) <code>lang<\/code>\n<code><html lang=\"en\"><\/code> Nilai atribut <\/p> yang ditunjukkan di atas adalah <p>, yang menyatakan bahawa dokumen itu ditulis dalam bahasa Inggeris. Semua bahasa yang diucapkan mempunyai nilai, seperti <code>lang<\/code> dalam bahasa Perancis, <code>en<\/code> dalam bahasa Jerman, <code>fr<\/code> dalam bahasa Hindi, dll. (Anda boleh mencari senarai lengkap kod bahasa di Wikipedia.) <code>de<\/code>\n<code>hi<\/code> <\/p> pengekodan aksara dokumen html <p> <strong>\nBaris pertama dalam seksyen <\/strong> Dokumen HTML <\/p> 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: <p>\n<code><head><\/code>\n<\/p> <pre class='brush:php;toolbar:false;'><!DOCTYPE html><\/pre> 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 <p> yang muncul kemudian dalam contoh kami). <em> <code><title><\/code>\n<\/em> Mengapa menggunakan pengekodan aksara UTF-8 dalam templat HTML5? <\/p>\n<h3> Contoh pengekodan aksara di atas menggunakan set aksara UTF-8. Dalam hampir semua kes, <\/h3> 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. <p>\n<code>utf-8<\/code> 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: <\/p>\n<p>\n<\/p> 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. <blockquote><\/blockquote>\n<p> 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. <\/p>\nApa maksud <p> <strong> <code>X-UA-Compatible<\/code>? <\/strong> <\/p>\n<p> anda kadang -kadang melihat baris ini dalam <code><head><\/code> dokumen HTML anda: <\/p>\n<pre class='brush:php;toolbar:false;'><!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n <title>HTML5 Boilerplate<\/title>\n <link rel=\"stylesheet\" href=\"styles.css\">\n<\/head>\n<body>\n <h1>Page Title<\/h1>\n <??>\n<\/body>\n<\/html><\/pre>\n<p> 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. <\/p>\n<p> <strong> elemen viewport <\/strong> <\/p>\n<p> 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: <\/p>\n<pre class='brush:php;toolbar:false;'><!DOCTYPE html><\/pre>\n<p> Elemen <code><meta><\/code> ini mengandungi dua sifat yang berfungsi bersama sebagai set nama\/nilai. Dalam kes ini, nama itu ditetapkan kepada <code>viewport<\/code> dan nilai adalah <code>width=device-width, initial-scale=1<\/code>. Ini hanya untuk peranti mudah alih sahaja. Anda akan melihat bahawa terdapat dua bahagian nilai: <\/p>\n<ul>\n<li> <code>width=device-width<\/code>: Lebar piksel Viewport yang anda mahu laman web hadir. <\/li>\n<li> <code>initial-scale<\/code>: Ini harus menjadi nombor positif antara 0.0 dan 10.0. Nilai \"1\" menunjukkan nisbah 1: 1 antara lebar peranti dan saiz viewport. <\/li>\n<\/ul>\n<p> 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. <\/p>\n<p> <strong> <code><title><\/code>, penerangan dan pengarang <\/strong> <\/p>\n<p> Bahagian seterusnya templat asas HTML mengandungi tiga baris berikut: <\/p>\n<pre class='brush:php;toolbar:false;'><html lang=\"en\">\n <head>\n <\/head>\n <body>\n <\/body>\n<\/html><\/pre>\n<p> <code><title><\/code> 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 <code><head><\/code>. 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. <\/p>\n<p> <img src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/173897581334276.jpg\" alt=\"HTML5 Template: A Base Starter HTML Boilerplate for Any Project \" \/> <s>\n<\/p> anda boleh meletakkan bilangan elemen elemen yang sah dalam <p>. <code><head><\/code>\n<\/p> <p> Buka elemen graf untuk kad sosial <strong> <\/strong>\n<\/p> 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: <p>\n<\/p>\n<pre class='brush:php;toolbar:false;'><head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n <title>HTML5 Boilerplate<\/title>\n <link rel=\"stylesheet\" href=\"styles.css\">\n <??> \n<\/head><\/pre> 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. <p><p> unsur -unsur yang disertakan di sini akan meningkatkan penampilan halaman web apabila dihubungkan dengan jawatan media sosial. Sebagai contoh, elemen lima <code><meta><\/code> yang disertakan di sini akan muncul dalam kad sosial yang tertanam dengan data berikut: <\/p>\n<ul>\n<li> Tajuk kandungan <\/li>\n<li> Disediakan jenis kandungan <\/li>\n<li> URL Spesifikasi Kandungan <\/li>\n<li> Keterangan Kandungan <\/li>\n<li> imej yang dikaitkan dengan kandungan <\/li>\n<\/ul>\n<p> 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. <\/p>\n<p> <img src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/173897581532472.jpg\" alt=\"HTML5 Template: A Base Starter HTML Boilerplate for Any Project \" \/> <s>\n<\/p> <s> ikon favicon dan sentuh <p> <strong>\n<\/strong> Bahagian seterusnya templat HTML5 mengandungi unsur -unsur <\/p> yang menunjukkan sumber yang mengandungi sebagai ikon Favicon dan Apple Touch: <p>\n<code><link><\/code>\n<\/p> Favicon akan muncul dalam tab Pelayar apabila seseorang memeriksa laman web anda. <pre class='brush:php;toolbar:false;'><!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n <title>HTML5 Boilerplate<\/title>\n <link rel=\"stylesheet\" href=\"styles.css\">\n<\/head>\n<body>\n <h1>Page Title<\/h1>\n <??>\n<\/body>\n<\/html><\/pre> Fail digunakan dalam pelayar yang lebih tua dan tidak perlu dimasukkan ke dalam kod. Selagi fail <p> anda dimasukkan ke dalam direktori root projek, penyemak imbas secara automatik akan menemuinya. <code>favicon.ico<\/code> Fail digunakan dalam pelayar moden yang menyokong ikon SVG. Anda juga boleh menggunakan fail .png sebaliknya. <code>favicon.ico<\/code>\n<code>favicon.svg<\/code> Elemen terakhir merujuk ikon yang digunakan pada peranti Apple apabila menambah halaman ke skrin utama pengguna. <\/p>\n<p> 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. <\/p>\n<p> <\/p> Mengandungi CSS Stylesheets dan JavaScript Files <p> <strong>\n<\/strong> 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. <\/p>\n<p> termasuk CSS Stylesheet dalam templat HTML <\/p>\n<h3> stylesheets boleh dimasukkan ke mana -mana sahaja dalam dokumen, tetapi biasanya anda akan melihatnya di bahagian <\/h3>: <p>\n<code><head><\/code>\nElemen <\/p> <pre class='brush:php;toolbar:false;'><!DOCTYPE html><\/pre> menunjuk penyemak imbas web ke lembaran gaya luaran supaya ia boleh menggunakan gaya CSS ini ke halaman. Elemen <p> memerlukan atribut <code><link><\/code> menjadi <code><link><\/code>. Pada masa lalu, biasanya terdapat juga atribut <code>rel<\/code>, tetapi ia tidak pernah diperlukan, jadi jika anda mendapati kod lama yang mengandunginya di web, hanya padamkannya. <code>stylesheet<\/code>\n<code>type<\/code> Perhatikan bahawa kami menambah rentetan pertanyaan <\/p> 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. <p><p> perlu diperhatikan bahawa anda tidak perlu menggunakan elemen <code><link><\/code> untuk memasukkan CSS di laman web, kerana anda boleh meletakkan semua gaya di dalam <code><style><\/code> ... <code><\/style><\/code> tag halaman itu sendiri, terletak di Bahagian <code><head><\/code>. 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. <\/p>\n<h3> Sertakan fail JavaScript dalam templat HTML <\/h3>\n<p> kod javascript biasanya berlalu <code><\/pre>\n ?\n <p> \n<\/body><\/code> <code><\/p><\/code>\n<pre class='brush:php;toolbar:false;'><!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n <title>HTML5 Boilerplate<\/title>\n <link rel=\"stylesheet\" href=\"styles.css\">\n<\/head>\n<body>\n <h1>Page Title<\/h1>\n <??>\n<\/body>\n<\/html><\/pre> Benamkan skrip dalam <p> tag: <strong>\n<\/strong>\n<\/p> <p> arahan mengenai pelayar lama dan elemen baru <code><article><\/code> <code><aside><\/code>\n<code><recipe><\/code> Apabila HTML5 diperkenalkan, ia mengandungi banyak elemen baru seperti <code><ziggy><\/code> dan <\/aside>. 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 <\/article> (atau elemen <\/ziggy>), dan CSS anda melekatkan gaya tertentu ke elemen itu, hampir setiap penyemak imbas akan mengendalikannya seperti ini benar -benar normal, tanpa menggunakan gaya anda . <\/recipe> <\/p> <p> <\/p> <p>\n<\/p> 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. <p>\n<em> 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. <\/em>\n<\/p> 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. <p>\n<strong> <\/strong> Templat HTML5 Lengkap <\/p> <p>\n<\/p> Ini adalah templat html5 terakhir kami - templat mudah yang boleh anda gunakan untuk mana -mana projek: <pre class='brush:php;toolbar:false;'><!DOCTYPE html><\/pre>\n<p>\n<code><body><\/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 <code><\/body><\/code> dan <\/p>. <p>\n<strong> <\/strong> Kesimpulan <\/p>
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<script>var V_PATH="/";window.onerror=function(){ return true; };</script>
</head>
<body data-commit-time="2023-12-28T14:50:12+08:00" class="editor_body body2_2">
<link rel="stylesheet" type="text/css" href="/static/csshw/stylehw.css">
<header>
<div id="377j5v51b" class="head">
<div id="377j5v51b" class="haed_left">
<div id="377j5v51b" class="haed_logo">
<a href="http://miracleart.cn/ms/" title="" class="haed_logo_a">
<img src="/static/imghw/logo.png" alt="" class="haed_logoimg">
</a>
</div>
<div id="377j5v51b" class="head_nav">
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="masyarakat" class="head_nava head_nava-template1">masyarakat</a>
<div class="377j5v51b" id="dropdown-template1" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://miracleart.cn/ms/article.html" title="Artikel" class="languagechoosea on">Artikel</a>
<a href="http://miracleart.cn/ms/faq/zt" title="Topik" class="languagechoosea">Topik</a>
<a href="http://miracleart.cn/ms/wenda.html" title="Soal Jawab" class="languagechoosea">Soal Jawab</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="Belajar" class="head_nava head_nava-template1_1">Belajar</a>
<div class="377j5v51b" id="dropdown-template1_1" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://miracleart.cn/ms/course.html" title="Kursus" class="languagechoosea on">Kursus</a>
<a href="http://miracleart.cn/ms/dic/" title="Kamus Pengaturcaraan" class="languagechoosea">Kamus Pengaturcaraan</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="Perpustakaan Alatan" class="head_nava head_nava-template1_2">Perpustakaan Alatan</a>
<div class="377j5v51b" id="dropdown-template1_2" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://miracleart.cn/ms/toolset/development-tools" title="Alat pembangunan" class="languagechoosea on">Alat pembangunan</a>
<a href="http://miracleart.cn/ms/toolset/website-source-code" title="Kod sumber laman web" class="languagechoosea">Kod sumber laman web</a>
<a href="http://miracleart.cn/ms/toolset/php-libraries" title="Perpustakaan PHP" class="languagechoosea">Perpustakaan PHP</a>
<a href="http://miracleart.cn/ms/toolset/js-special-effects" title="Kesan khas JS" class="languagechoosea on">Kesan khas JS</a>
<a href="http://miracleart.cn/ms/toolset/website-materials" title="Bahan laman web" class="languagechoosea on">Bahan laman web</a>
<a href="http://miracleart.cn/ms/toolset/extension-plug-ins" title="Pemalam sambungan" class="languagechoosea on">Pemalam sambungan</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="http://miracleart.cn/ms/ai" title="Alat AI" class="head_nava head_nava-template1_3">Alat AI</a>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="Masa lapang" class="head_nava head_nava-template1_3">Masa lapang</a>
<div class="377j5v51b" id="dropdown-template1_3" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://miracleart.cn/ms/game" title="Muat Turun Permainan" class="languagechoosea on">Muat Turun Permainan</a>
<a href="http://miracleart.cn/ms/mobile-game-tutorial/" title="Tutorial Permainan" class="languagechoosea">Tutorial Permainan</a>
</div>
</div>
</div>
</div>
</div>
<div id="377j5v51b" class="head_search">
<input id="key_words" onkeydown="if (event.keyCode == 13) searchs('ms')" class="search-input" type="text" autocomplete="off" name="keywords" required="required" placeholder="Block,address,transaction,news" value="">
<a href="javascript:;" title="cari" onclick="searchs('ms')"><img src="/static/imghw/find.png" alt="cari"></a>
</div>
<div id="377j5v51b" class="head_right">
<div id="377j5v51b" class="haed_language">
<a href="javascript:;" class="layui-btn haed_language_btn">Melayu<i class="layui-icon layui-icon-triangle-d"></i></a>
<div class="377j5v51b" id="dropdown-template" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="javascript:setlang('zh-cn');" title="簡(jiǎn)體中文" class="languagechoosea">簡(jiǎn)體中文</a>
<a href="javascript:setlang('en');" title="English" class="languagechoosea">English</a>
<a href="javascript:setlang('zh-tw');" title="繁體中文" class="languagechoosea">繁體中文</a>
<a href="javascript:setlang('ja');" title="日本語(yǔ)" class="languagechoosea">日本語(yǔ)</a>
<a href="javascript:setlang('ko');" title="???" class="languagechoosea">???</a>
<a href="javascript:;" title="Melayu" class="languagechoosea">Melayu</a>
<a href="javascript:setlang('fr');" title="Fran?ais" class="languagechoosea">Fran?ais</a>
<a href="javascript:setlang('de');" title="Deutsch" class="languagechoosea">Deutsch</a>
</div>
</div>
</div>
<span id="377j5v51b" class="head_right_line"></span>
<div style="display: block;" id="login" class="haed_login ">
<a href="javascript:;" title="Login" class="haed_logina ">Login</a>
</div>
<div style="display: block;" id="reg" class="head_signup login">
<a href="javascript:;" title="singup" class="head_signupa">singup</a>
</div>
</div>
</div>
</header>
<main>
<div id="377j5v51b" class="Article_Details_main">
<div id="377j5v51b" class="Article_Details_main1">
<div id="377j5v51b" class="Article_Details_main1L">
<div id="377j5v51b" class="Article_Details_main1Lmain" id="Article_Details_main1Lmain">
<div id="377j5v51b" class="Article_Details_main1L1">Jadual Kandungan</div>
<div id="377j5v51b" class="Article_Details_main1L2" id="Article_Details_main1L2">
<!-- 左側(cè)懸浮，文章定位標(biāo)題1 id="Article_Details_main1L2s_1"-->
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Contoh-pengekodan-aksara-di-atas-menggunakan-set-aksara-UTF-Dalam-hampir-semua-kes" title=" Contoh pengekodan aksara di atas menggunakan set aksara UTF-8. Dalam hampir semua kes, " > Contoh pengekodan aksara di atas menggunakan set aksara UTF-8. Dalam hampir semua kes, </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#stylesheets-boleh-dimasukkan-ke-mana-mana-sahaja-dalam-dokumen-tetapi-biasanya-anda-akan-melihatnya-di-bahagian" title=" stylesheets boleh dimasukkan ke mana -mana sahaja dalam dokumen, tetapi biasanya anda akan melihatnya di bahagian " > stylesheets boleh dimasukkan ke mana -mana sahaja dalam dokumen, tetapi biasanya anda akan melihatnya di bahagian </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Sertakan-fail-JavaScript-dalam-templat-HTML" title=" Sertakan fail JavaScript dalam templat HTML " > Sertakan fail JavaScript dalam templat HTML </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Apakah-templat-HTML-yang-digunakan" title=" Apakah templat HTML5 yang digunakan? " > Apakah templat HTML5 yang digunakan? </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Apakah-contoh-templat" title=" Apakah contoh templat? " > Apakah contoh templat? </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Apakah-kod-permulaan-untuk-HTML" title=" Apakah kod permulaan untuk HTML? " > Apakah kod permulaan untuk HTML? </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Adakah-setiap-fail-HTML-memerlukan-templat" title=" Adakah setiap fail HTML memerlukan templat? " > Adakah setiap fail HTML memerlukan templat? </a>
</div>
</div>
</div>
</div>
<div id="377j5v51b" class="Article_Details_main1M">
<div id="377j5v51b" class="phpgenera_Details_mainL1">
<a href="http://miracleart.cn/ms/" title="Rumah"
class="phpgenera_Details_mainL1a">Rumah</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="http://miracleart.cn/ms/web-designer.html"
class="phpgenera_Details_mainL1a">hujung hadapan web</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="http://miracleart.cn/ms/css-tutorial.html"
class="phpgenera_Details_mainL1a">tutorial css</a>
<img src="/static/imghw/top_right.png" alt="" />
<span>Templat HTML5: Starter Base HTML Boilerplate untuk mana -mana projek</span>
</div>
<div id="377j5v51b" class="Articlelist_txts">
<div id="377j5v51b" class="Articlelist_txts_info">
<h1 class="Articlelist_txts_title">Templat HTML5: Starter Base HTML Boilerplate untuk mana -mana projek</h1>
<div id="377j5v51b" class="Articlelist_txts_info_head">
<div id="377j5v51b" class="author_info">
<a href="http://miracleart.cn/ms/member/1468495.html" class="author_avatar">
<img class="lazy" data-src="https://img.php.cn/upload/avatar/000/000/001/66ea810373f2f131.png" src="/static/imghw/default1.png" alt="Joseph Gordon-Levitt">
</a>
<div id="377j5v51b" class="author_detail">
<a href="http://miracleart.cn/ms/member/1468495.html" class="author_name">Joseph Gordon-Levitt</a>
</div>
</div>
</div>
<span id="377j5v51b" class="Articlelist_txts_time">Feb 08, 2025 am 08:50 AM</span>
</div>
</div>
<hr />
<div id="377j5v51b" class="article_main php-article">
<div id="377j5v51b" class="article-list-left detail-content-wrap content">
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="3461856641">
</ins>
<p> Bina templat HTML5 anda sendiri: Panduan Ringkas </p>
<p> <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173897581160448.jpg" class="lazy" alt="HTML5 Template: A Base Starter HTML Boilerplate for Any Project "> <s>
</s></p> 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. <p>
</p> 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. <p>
</p> <p> mata utama <strong> </strong>
</p>
<ul> templat HTML5, sebagai templat yang boleh diguna semula, mengandungi elemen HTML yang diperlukan, membantu mengelakkan penulisan kod berulang pada permulaan setiap projek. <li>
</li> Templat HTML5 asas harus mengandungi pengisytiharan jenis dokumen, <li> unsur -unsur dengan atribut bahasa, pengekodan karakter melalui <code></code>, dan tetapan Viewport untuk reka bentuk responsif. <code><meta charset="utf-8"></code>
Unsur -unsur utama Template Html5 </li> bahagian biasanya mengandungi metadata untuk SEO, pautan ke gaya CSS, dan fail JavaScript pilihan. <li>
<code></code> Untuk pengoptimuman media sosial, menambah tag meta graf terbuka boleh meningkatkan kesan paparan kandungan apabila dikongsi di platform sosial. </li>
<li> termasuk ikon Favicon dan Apple Touch dalam template membantu membina identiti jenama dan meningkatkan pengalaman pengguna merentasi peranti. </li>
<li> Meletakkan fail JavaScript sebelum ditutup </li> tag dapat meningkatkan kelajuan pemuatan halaman kerana ia membolehkan penyemak imbas menjadikan halaman lebih cepat dengan melambatkan skrip pemuatan. <li>
<code></code>
</li> </ul> Apakah templat HTML? <p> <strong>
</strong> 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. </p>
<p> Wikipedia menerangkan templat sebagai: </p>
<p>
</p> Coretan kod muncul berulang kali di beberapa tempat, dengan sedikit perubahan. <blockquote>
<p>
</p> 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. </blockquote>
<p> </p> contoh templat html5 yang sangat mudah <p> <strong>
</strong> 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: </p>
<p>
</p> 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. <pre class='brush:php;toolbar:false;'><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML5 Boilerplate</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Page Title</h1>
<??>
</body>
</html></pre>
<p> mari kita lihat dengan lebih dekat strukturnya. </p>
<p> </p> Struktur templat html5 <p> <strong>
</strong> templat HTML biasanya mengandungi bahagian berikut: </p><ol>
<li> Deklarasi Jenis Dokumen (atau Doctype) </li>
<li> <code><html></code> elemen </li>
<li> Pengekodan aksara </li>
<li> elemen viewport </li>
<li> <code><title></code>, penerangan dan pengarang </li>
<li> Buka elemen graf untuk kad sosial </li>
<li> Ikon Favicon dan Touch </li>
<li> pautan stylesheet CSS </li>
<li> pautan fail JavaScript </li>
</ol>
<p> Di samping pengisytiharan jenis dokumen dan <code><html></code> elemen, kebanyakan unsur yang disenaraikan di atas terletak di bahagian <code><head></code> dari templat HTML. </p>
<p> <strong> html5 jenis pernyataan jenis dokumen </strong> </p>
<p> templat HTML5 anda perlu bermula dengan pengisytiharan jenis dokumen atau <em> Doctype </em>. 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". </p>
<p> dengan kedatangan HTML5, perkara -perkara yang tidak dapat difahami yang tidak dapat difahami hilang, dan sekarang anda hanya memerlukan ini: </p>
<pre class='brush:php;toolbar:false;'><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML5 Boilerplate</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Page Title</h1>
<??>
</body>
</html></pre>
<p> 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". </p>
<p> 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. </p>
<p> <strong> <code><html></code> elemen </strong> </p>
Elemen <p> <code><html></code> adalah elemen peringkat teratas dalam fail HTML -yang bermaksud ia mengandungi segala -galanya kecuali DOCTYPE dalam dokumen. Elemen <code><html></code> dibahagikan kepada dua bahagian- <code><head></code> dan <code><body></code> bahagian. Semua kandungan lain dalam fail laman web akan diletakkan di dalam atau di dalam elemen <code><html></code>. Kod berikut menunjukkan elemen <code><html></code>, yang terletak selepas pengisytiharan Doctype dan mengandungi unsur -unsur <code><html></code> dan <code><head></code>: <code><body></code>
</p>
<pre class='brush:php;toolbar:false;'><!DOCTYPE html></pre> <p> cara menggunakan tag dalam html <strong> </strong>
Bahagian </p> <p> 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: <code><head></code>
</p>
Semua elemen yang terkandung di antara tag <pre class='brush:php;toolbar:false;'><html lang="en">
<head>
</head>
<body>
</body>
</html></pre> ... <p> di atas adalah penting, tetapi pengguna akhir tidak melihatnya - kecuali untuk teks <code><head></code>, ia akan muncul dalam carian dalam talian dan tag penyemak imbas. <code></head></code><p> <strong> cara menggunakan tag dalam html </strong> </p>
Bahagian <p> <code><body></code> 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 <code><body></code> ... <code></body></code> tags: </p>
<pre class='brush:php;toolbar:false;'><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML5 Boilerplate</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Page Title</h1>
<??>
</body>
</html></pre>
<p> <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173897581228837.jpg" class="lazy" alt="HTML5 Template: A Base Starter HTML Boilerplate for Any Project " /> <s>
</p> <p> <strong> Apakah atributnya? <code>lang</code> </strong>
Elemen </p> <p> mestilah mengandungi atribut <code><html></code>, seperti yang ditunjukkan dalam kod di atas (<st>). 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.) <code>lang</code>
<code><html lang="en"></code> Nilai atribut </p> yang ditunjukkan di atas adalah <p>, yang menyatakan bahawa dokumen itu ditulis dalam bahasa Inggeris. Semua bahasa yang diucapkan mempunyai nilai, seperti <code>lang</code> dalam bahasa Perancis, <code>en</code> dalam bahasa Jerman, <code>fr</code> dalam bahasa Hindi, dll. (Anda boleh mencari senarai lengkap kod bahasa di Wikipedia.) <code>de</code>
<code>hi</code> </p> pengekodan aksara dokumen html <p> <strong>
Baris pertama dalam seksyen </strong> Dokumen HTML </p> 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: <p>
<code><head></code>
</p> <pre class='brush:php;toolbar:false;'><!DOCTYPE html></pre> 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 <p> yang muncul kemudian dalam contoh kami). <em> <code><title></code>
</em> Mengapa menggunakan pengekodan aksara UTF-8 dalam templat HTML5? </p>
<h3 id="Contoh-pengekodan-aksara-di-atas-menggunakan-set-aksara-UTF-Dalam-hampir-semua-kes"> Contoh pengekodan aksara di atas menggunakan set aksara UTF-8. Dalam hampir semua kes, </h3> 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. <p>
<code>utf-8</code> 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: </p>
<p>
</p> 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. <blockquote></blockquote>
<p> 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. </p>
Apa maksud <p> <strong> <code>X-UA-Compatible</code>? </strong> </p>
<p> anda kadang -kadang melihat baris ini dalam <code><head></code> dokumen HTML anda: </p>
<pre class='brush:php;toolbar:false;'><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML5 Boilerplate</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Page Title</h1>
<??>
</body>
</html></pre>
<p> 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. </p>
<p> <strong> elemen viewport </strong> </p>
<p> 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: </p>
<pre class='brush:php;toolbar:false;'><!DOCTYPE html></pre>
<p> Elemen <code><meta></code> ini mengandungi dua sifat yang berfungsi bersama sebagai set nama/nilai. Dalam kes ini, nama itu ditetapkan kepada <code>viewport</code> dan nilai adalah <code>width=device-width, initial-scale=1</code>. Ini hanya untuk peranti mudah alih sahaja. Anda akan melihat bahawa terdapat dua bahagian nilai: </p>
<ul>
<li> <code>width=device-width</code>: Lebar piksel Viewport yang anda mahu laman web hadir. </li>
<li> <code>initial-scale</code>: Ini harus menjadi nombor positif antara 0.0 dan 10.0. Nilai "1" menunjukkan nisbah 1: 1 antara lebar peranti dan saiz viewport. </li>
</ul>
<p> 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. </p>
<p> <strong> <code><title></code>, penerangan dan pengarang </strong> </p>
<p> Bahagian seterusnya templat asas HTML mengandungi tiga baris berikut: </p>
<pre class='brush:php;toolbar:false;'><html lang="en">
<head>
</head>
<body>
</body>
</html></pre>
<p> <code><title></code> 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 <code><head></code>. 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. </p>
<p> <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173897581334276.jpg" class="lazy" alt="HTML5 Template: A Base Starter HTML Boilerplate for Any Project " /> <s>
</p> anda boleh meletakkan bilangan elemen elemen yang sah dalam <p>. <code><head></code>
</p> <p> Buka elemen graf untuk kad sosial <strong> </strong>
</p> 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: <p>
</p>
<pre class='brush:php;toolbar:false;'><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML5 Boilerplate</title>
<link rel="stylesheet" href="styles.css">
<??>
</head></pre> 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. <p><p> unsur -unsur yang disertakan di sini akan meningkatkan penampilan halaman web apabila dihubungkan dengan jawatan media sosial. Sebagai contoh, elemen lima <code><meta></code> yang disertakan di sini akan muncul dalam kad sosial yang tertanam dengan data berikut: </p>
<ul>
<li> Tajuk kandungan </li>
<li> Disediakan jenis kandungan </li>
<li> URL Spesifikasi Kandungan </li>
<li> Keterangan Kandungan </li>
<li> imej yang dikaitkan dengan kandungan </li>
</ul>
<p> 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. </p>
<p> <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173897581532472.jpg" class="lazy" alt="HTML5 Template: A Base Starter HTML Boilerplate for Any Project " /> <s>
</p> <s> ikon favicon dan sentuh <p> <strong>
</strong> Bahagian seterusnya templat HTML5 mengandungi unsur -unsur </p> yang menunjukkan sumber yang mengandungi sebagai ikon Favicon dan Apple Touch: <p>
<code><link></code>
</p> Favicon akan muncul dalam tab Pelayar apabila seseorang memeriksa laman web anda. <pre class='brush:php;toolbar:false;'><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML5 Boilerplate</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Page Title</h1>
<??>
</body>
</html></pre> Fail digunakan dalam pelayar yang lebih tua dan tidak perlu dimasukkan ke dalam kod. Selagi fail <p> anda dimasukkan ke dalam direktori root projek, penyemak imbas secara automatik akan menemuinya. <code>favicon.ico</code> Fail digunakan dalam pelayar moden yang menyokong ikon SVG. Anda juga boleh menggunakan fail .png sebaliknya. <code>favicon.ico</code>
<code>favicon.svg</code> Elemen terakhir merujuk ikon yang digunakan pada peranti Apple apabila menambah halaman ke skrin utama pengguna. </p>
<p> 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. </p>
<p> </p> Mengandungi CSS Stylesheets dan JavaScript Files <p> <strong>
</strong> 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. </p>
<p> termasuk CSS Stylesheet dalam templat HTML </p>
<h3 id="stylesheets-boleh-dimasukkan-ke-mana-mana-sahaja-dalam-dokumen-tetapi-biasanya-anda-akan-melihatnya-di-bahagian"> stylesheets boleh dimasukkan ke mana -mana sahaja dalam dokumen, tetapi biasanya anda akan melihatnya di bahagian </h3>: <p>
<code><head></code>
Elemen </p> <pre class='brush:php;toolbar:false;'><!DOCTYPE html></pre> menunjuk penyemak imbas web ke lembaran gaya luaran supaya ia boleh menggunakan gaya CSS ini ke halaman. Elemen <p> memerlukan atribut <code><link></code> menjadi <code><link></code>. Pada masa lalu, biasanya terdapat juga atribut <code>rel</code>, tetapi ia tidak pernah diperlukan, jadi jika anda mendapati kod lama yang mengandunginya di web, hanya padamkannya. <code>stylesheet</code>
<code>type</code> Perhatikan bahawa kami menambah rentetan pertanyaan </p> 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. <p><p> perlu diperhatikan bahawa anda tidak perlu menggunakan elemen <code><link></code> untuk memasukkan CSS di laman web, kerana anda boleh meletakkan semua gaya di dalam <code><style></code> ... <code></style></code> tag halaman itu sendiri, terletak di Bahagian <code><head></code>. 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. </p>
<h3 id="Sertakan-fail-JavaScript-dalam-templat-HTML"> Sertakan fail JavaScript dalam templat HTML </h3>
<p> kod javascript biasanya berlalu <code></pre>
?
<p>
</body></code> <code></p></code>
<pre class='brush:php;toolbar:false;'><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML5 Boilerplate</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Page Title</h1>
<??>
</body>
</html></pre> Benamkan skrip dalam <p> tag: <strong>
</strong>
</p> <p> arahan mengenai pelayar lama dan elemen baru <code><article></code> <code><aside></code>
<code><recipe></code> Apabila HTML5 diperkenalkan, ia mengandungi banyak elemen baru seperti <code><ziggy></code> dan </aside>. 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 </article> (atau elemen </ziggy>), dan CSS anda melekatkan gaya tertentu ke elemen itu, hampir setiap penyemak imbas akan mengendalikannya seperti ini benar -benar normal, tanpa menggunakan gaya anda . </recipe> </p> <p> </p> <p>
</p> 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. <p>
<em> 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. </em>
</p> 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. <p>
<strong> </strong> Templat HTML5 Lengkap </p> <p>
</p> Ini adalah templat html5 terakhir kami - templat mudah yang boleh anda gunakan untuk mana -mana projek: <pre class='brush:php;toolbar:false;'><!DOCTYPE html></pre>
<p>
<code><body></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 <code></body></code> dan </p>. <p>
<strong> </strong> Kesimpulan </p> <p> 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. </p>
<p> 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. </p>
<p> <strong> Langkah seterusnya </strong> </p>
<p> 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 <em> dan </em> 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. </p>
<p> Untuk mengasah pengetahuan CSS anda, kursus projek CSS moden kami akan membantu anda menguasai versi canggih terkini CSS3. </p>
<p> 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. </p>
<p> <strong> HTML5 Template FAQ </strong>
</p> Akhirnya, kami akan menjawab soalan yang sering ditanya mengenai kod templat HTML5. <p>
</p> Apakah templat dalam html? <h3>
</h3> 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. <p>
</p> Adakah templat templat? <h3>
</h3> 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, <p> dan <code><head></code> elemen, dan fail CSS dan JavaScript. <code><body></code>
</p> bagaimana membuat templat dalam html? <h3>
</h3> 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! <p><h3 id="Apakah-templat-HTML-yang-digunakan"> Apakah templat HTML5 yang digunakan? </h3>
<p> 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. </p>
<h3 id="Apakah-contoh-templat"> Apakah contoh templat? </h3>
<p> 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. </p>
<p> sebagai permulaan yang sangat mudah, anda hanya boleh menggunakan ini: </p>
<pre class='brush:php;toolbar:false;'><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML5 Boilerplate</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Page Title</h1>
<??>
</body>
</html></pre>
<h3 id="Apakah-kod-permulaan-untuk-HTML"> Apakah kod permulaan untuk HTML? </h3>
<p> Dokumen HTML Sentiasa bermula dengan pengisytiharan jenis dokumen: <code><!DOCTYPE html></code>. Kemudian terdapat tag <code></code>, yang mengandungi semua kandungan lain di laman web. Kedua -dua elemen kanak -kanak <code></code> adalah unsur -unsur <code></code> dan <code></code>. Templat HTML5 kami mengandungi semua kod permulaan asas yang diperlukan untuk mana -mana laman web. </p>
<h3 id="Adakah-setiap-fail-HTML-memerlukan-templat"> Adakah setiap fail HTML memerlukan templat? </h3>
<p> 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. </p><p>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!</p>
</div>
</div>
<div id="377j5v51b" class="wzconShengming_sp">
<div id="377j5v51b" class="bzsmdiv_sp">Kenyataan Laman Web ini</div>
<div>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</div>
</div>
</div>
<ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="2507867629"></ins>
<div id="377j5v51b" class="AI_ToolDetails_main4sR">
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="3653428331"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<!-- <div id="377j5v51b" class="phpgenera_Details_mainR4">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>Artikel Panas</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottom">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://miracleart.cn/ms/faq/1796819578.html" title="Bagaimana untuk memperbaiki KB5060533 gagal dipasang di Windows 10?" class="phpgenera_Details_mainR4_bottom_title">Bagaimana untuk memperbaiki KB5060533 gagal dipasang di Windows 10?</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 minggu yang lalu</span>
<span>By DDD</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://miracleart.cn/ms/faq/1796819730.html" title="Dune: Awakening - Di mana untuk mendapatkan kain terlindung" class="phpgenera_Details_mainR4_bottom_title">Dune: Awakening - Di mana untuk mendapatkan kain terlindung</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>3 minggu yang lalu</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://miracleart.cn/ms/faq/1796819016.html" title="Log masuk Gmail: Cara mendaftar, mendaftar masuk, atau mendaftar keluar dari Gmail - Minitool" class="phpgenera_Details_mainR4_bottom_title">Log masuk Gmail: Cara mendaftar, mendaftar masuk, atau mendaftar keluar dari Gmail - Minitool</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>1 bulan yang lalu</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://miracleart.cn/ms/faq/1796819994.html" title="Bagaimana untuk memperbaiki KB5060999 gagal dipasang di Windows 11?" class="phpgenera_Details_mainR4_bottom_title">Bagaimana untuk memperbaiki KB5060999 gagal dipasang di Windows 11?</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>3 minggu yang lalu</span>
<span>By DDD</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://miracleart.cn/ms/faq/1796819536.html" title="Panduan Guild di Grail Tercemar: Kejatuhan Avalon" class="phpgenera_Details_mainR4_bottom_title">Panduan Guild di Grail Tercemar: Kejatuhan Avalon</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 minggu yang lalu</span>
<span>By Jack chen</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://miracleart.cn/ms/article.html">Tunjukkan Lagi</a>
</div>
</div>
</div> -->
<div id="377j5v51b" class="phpgenera_Details_mainR3">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hottools2.png" alt="" />
<h2>Alat AI Hot</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_bottom">
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://miracleart.cn/ms/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173410641626608.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undress AI Tool" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://miracleart.cn/ms/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title">
<h3>Undress AI Tool</h3>
</a>
<p>Gambar buka pakaian secara percuma</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://miracleart.cn/ms/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411540686492.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undresser.AI Undress" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://miracleart.cn/ms/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title">
<h3>Undresser.AI Undress</h3>
</a>
<p>Apl berkuasa AI untuk mencipta foto bogel yang realistik</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://miracleart.cn/ms/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411552797167.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Clothes Remover" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://miracleart.cn/ms/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title">
<h3>AI Clothes Remover</h3>
</a>
<p>Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://miracleart.cn/ms/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411529149311.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Clothoff.io" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://miracleart.cn/ms/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title">
<h3>Clothoff.io</h3>
</a>
<p>Penyingkiran pakaian AI</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://miracleart.cn/ms/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173414504068133.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Video Face Swap" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://miracleart.cn/ms/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_title">
<h3>Video Face Swap</h3>
</a>
<p>Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!</p>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://miracleart.cn/ms/ai">Tunjukkan Lagi</a>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>Artikel Panas</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottom">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://miracleart.cn/ms/faq/1796819578.html" title="Bagaimana untuk memperbaiki KB5060533 gagal dipasang di Windows 10?" class="phpgenera_Details_mainR4_bottom_title">Bagaimana untuk memperbaiki KB5060533 gagal dipasang di Windows 10?</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 minggu yang lalu</span>
<span>By DDD</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://miracleart.cn/ms/faq/1796819730.html" title="Dune: Awakening - Di mana untuk mendapatkan kain terlindung" class="phpgenera_Details_mainR4_bottom_title">Dune: Awakening - Di mana untuk mendapatkan kain terlindung</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>3 minggu yang lalu</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://miracleart.cn/ms/faq/1796819016.html" title="Log masuk Gmail: Cara mendaftar, mendaftar masuk, atau mendaftar keluar dari Gmail - Minitool" class="phpgenera_Details_mainR4_bottom_title">Log masuk Gmail: Cara mendaftar, mendaftar masuk, atau mendaftar keluar dari Gmail - Minitool</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>1 bulan yang lalu</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://miracleart.cn/ms/faq/1796819994.html" title="Bagaimana untuk memperbaiki KB5060999 gagal dipasang di Windows 11?" class="phpgenera_Details_mainR4_bottom_title">Bagaimana untuk memperbaiki KB5060999 gagal dipasang di Windows 11?</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>3 minggu yang lalu</span>
<span>By DDD</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://miracleart.cn/ms/faq/1796819536.html" title="Panduan Guild di Grail Tercemar: Kejatuhan Avalon" class="phpgenera_Details_mainR4_bottom_title">Panduan Guild di Grail Tercemar: Kejatuhan Avalon</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 minggu yang lalu</span>
<span>By Jack chen</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://miracleart.cn/ms/article.html">Tunjukkan Lagi</a>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hottools2.png" alt="" />
<h2>Alat panas</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_bottom">
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://miracleart.cn/ms/toolset/development-tools/92" title="Notepad++7.3.1" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab96f0f39f7357.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Notepad++7.3.1" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://miracleart.cn/ms/toolset/development-tools/92" title="Notepad++7.3.1" class="phpmain_tab2_mids_title">
<h3>Notepad++7.3.1</h3>
</a>
<p>Editor kod yang mudah digunakan dan percuma</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://miracleart.cn/ms/toolset/development-tools/93" title="SublimeText3 versi Cina" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97a3baad9677.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 versi Cina" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://miracleart.cn/ms/toolset/development-tools/93" title="SublimeText3 versi Cina" class="phpmain_tab2_mids_title">
<h3>SublimeText3 versi Cina</h3>
</a>
<p>Versi Cina, sangat mudah digunakan</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://miracleart.cn/ms/toolset/development-tools/121" title="Hantar Studio 13.0.1" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97ecd1ab2670.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Hantar Studio 13.0.1" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://miracleart.cn/ms/toolset/development-tools/121" title="Hantar Studio 13.0.1" class="phpmain_tab2_mids_title">
<h3>Hantar Studio 13.0.1</h3>
</a>
<p>Persekitaran pembangunan bersepadu PHP yang berkuasa</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://miracleart.cn/ms/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d0e0fc74683535.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Dreamweaver CS6" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://miracleart.cn/ms/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_title">
<h3>Dreamweaver CS6</h3>
</a>
<p>Alat pembangunan web visual</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://miracleart.cn/ms/toolset/development-tools/500" title="SublimeText3 versi Mac" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d34035e2757995.png?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 versi Mac" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://miracleart.cn/ms/toolset/development-tools/500" title="SublimeText3 versi Mac" class="phpmain_tab2_mids_title">
<h3>SublimeText3 versi Mac</h3>
</a>
<p>Perisian penyuntingan kod peringkat Tuhan (SublimeText3)</p>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://miracleart.cn/ms/ai">Tunjukkan Lagi</a>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>Topik panas</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottom">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://miracleart.cn/ms/faq/gmailyxdlrkzn" title="Di manakah pintu masuk log masuk untuk e-mel gmail?" class="phpgenera_Details_mainR4_bottom_title">Di manakah pintu masuk log masuk untuk e-mel gmail?</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>8517</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>17</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://miracleart.cn/ms/faq/java-tutorial" title="Tutorial Java" class="phpgenera_Details_mainR4_bottom_title">Tutorial Java</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1744</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>16</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://miracleart.cn/ms/faq/cakephp-tutor" title="Tutorial CakePHP" class="phpgenera_Details_mainR4_bottom_title">Tutorial CakePHP</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1596</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>56</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://miracleart.cn/ms/faq/laravel-tutori" title="Tutorial Laravel" class="phpgenera_Details_mainR4_bottom_title">Tutorial Laravel</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1537</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>28</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://miracleart.cn/ms/faq/php-tutorial" title="Tutorial PHP" class="phpgenera_Details_mainR4_bottom_title">Tutorial PHP</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1396</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>31</span>
</div>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://miracleart.cn/ms/faq/zt">Tunjukkan Lagi</a>
</div>
</div>
</div>
</div>
</div>
<div id="377j5v51b" class="Article_Details_main2">
<div id="377j5v51b" class="phpgenera_Details_mainL4">
<div id="377j5v51b" class="phpmain1_2_top">
<a href="javascript:void(0);" class="phpmain1_2_top_title">Related knowledge<img
src="/static/imghw/index2_title2.png" alt="" /></a>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainL4_info">
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://miracleart.cn/ms/faq/1796819239.html" title="Bagaimanakah saya boleh memasukkan CSS hanya pada beberapa halaman?" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/174957130281670.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Bagaimanakah saya boleh memasukkan CSS hanya pada beberapa halaman?" />
</a>
<a href="http://miracleart.cn/ms/faq/1796819239.html" title="Bagaimanakah saya boleh memasukkan CSS hanya pada beberapa halaman?" class="phphistorical_Version2_mids_title">Bagaimanakah saya boleh memasukkan CSS hanya pada beberapa halaman?</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 11, 2025 am 12:01 AM</span>
<p class="Articlelist_txts_p">Terdapat tiga cara untuk secara selektif memasukkan CSS pada halaman tertentu: 1. Inline CSS, sesuai untuk halaman yang tidak sering diakses atau memerlukan gaya unik; 2. Muatkan fail CSS luaran menggunakan keadaan JavaScript, sesuai untuk situasi di mana fleksibiliti diperlukan; 3. Pembendungan di sebelah pelayan, sesuai untuk senario menggunakan bahasa sisi pelayan. Pendekatan ini dapat mengoptimumkan prestasi laman web dan penyelenggaraan, tetapi memerlukan keseimbangan modularitas dan prestasi.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://miracleart.cn/ms/faq/1796819001.html" title="Flexbox vs Grid: Memahami perbezaan utama dalam susun atur CSS" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/174948499050663.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Flexbox vs Grid: Memahami perbezaan utama dalam susun atur CSS" />
</a>
<a href="http://miracleart.cn/ms/faq/1796819001.html" title="Flexbox vs Grid: Memahami perbezaan utama dalam susun atur CSS" class="phphistorical_Version2_mids_title">Flexbox vs Grid: Memahami perbezaan utama dalam susun atur CSS</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 10, 2025 am 12:03 AM</span>
<p class="Articlelist_txts_p">Flexboxisidealforone-dimensiallayouts, whilgridsuitstwo-dimensi, complexlayouts.useflexboxforaligningitemsinasingleaxisandgridforprecisecontroloverrowsandcolumnsinintricatedesigns.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://miracleart.cn/ms/faq/1796819129.html" title="Membuat pemberitahuan auto-penutup dengan popover HTML" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/242/473/174951991745342.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Membuat pemberitahuan auto-penutup dengan popover HTML" />
</a>
<a href="http://miracleart.cn/ms/faq/1796819129.html" title="Membuat pemberitahuan auto-penutup dengan popover HTML" class="phphistorical_Version2_mids_title">Membuat pemberitahuan auto-penutup dengan popover HTML</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 10, 2025 am 09:45 AM</span>
<p class="Articlelist_txts_p">Atribut HTML Popover mengubah elemen ke dalam elemen lapisan atas yang boleh dibuka dan ditutup dengan butang atau JavaScript. Popovers boleh dibuang beberapa cara, tetapi tidak ada pilihan untuk menutupnya secara automatik. Preethi mempunyai teknik yang anda boleh</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://miracleart.cn/ms/faq/1796823628.html" title="Apa itu 'menyekat CSS'?" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175069693197174.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Apa itu 'menyekat CSS'?" />
</a>
<a href="http://miracleart.cn/ms/faq/1796823628.html" title="Apa itu 'menyekat CSS'?" class="phphistorical_Version2_mids_title">Apa itu 'menyekat CSS'?</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 24, 2025 am 12:42 AM</span>
<p class="Articlelist_txts_p">CSS Blok halaman yang diberikan kerana pelayar melihat CSS dalam talian dan luaran sebagai sumber utama secara lalai, terutamanya dengan stylesheet yang diimport, header sejumlah besar CSS sebaris, dan gaya pertanyaan media yang tidak dapat dioptimumkan. 1. Ekstrak CSS kritikal dan membenamkannya ke HTML; 2. Kelewatan memuatkan CSS bukan kritikal melalui JavaScript; 3. Gunakan atribut media untuk mengoptimumkan pemuatan seperti gaya cetak; 4. Memampatkan dan menggabungkan CSS untuk mengurangkan permintaan. Adalah disyorkan untuk menggunakan alat untuk mengekstrak CSS utama, menggabungkan REL = "Preload" pemuatan asynchronous, dan menggunakan media yang ditangguhkan dengan munasabah untuk mengelakkan pemisahan yang berlebihan dan kawalan skrip kompleks.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://miracleart.cn/ms/faq/1796820543.html" title="Cara menggunakan lotties di figma" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/242/473/174986743677204.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Cara menggunakan lotties di figma" />
</a>
<a href="http://miracleart.cn/ms/faq/1796820543.html" title="Cara menggunakan lotties di figma" class="phphistorical_Version2_mids_title">Cara menggunakan lotties di figma</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 14, 2025 am 10:17 AM</span>
<p class="Articlelist_txts_p">Dalam tutorial berikut, saya akan menunjukkan kepada anda cara membuat animasi Lottie di Figma. Kami akan menggunakan dua reka bentuk yang berwarna -warni untuk memperlihatkan bagaimana anda boleh menghidupkan di Figma, dan kemudian saya akan menunjukkan kepada anda bagaimana untuk pergi dari Figma ke animasi Lottie. Yang anda perlukan hanyalah ara percuma</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://miracleart.cn/ms/faq/1796820287.html" title="Batasan Breaking: Membina teka -teki Tangram dengan CSS (s)" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/242/473/174978559468682.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Batasan Breaking: Membina teka -teki Tangram dengan CSS (s)" />
</a>
<a href="http://miracleart.cn/ms/faq/1796820287.html" title="Batasan Breaking: Membina teka -teki Tangram dengan CSS (s)" class="phphistorical_Version2_mids_title">Batasan Breaking: Membina teka -teki Tangram dengan CSS (s)</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 13, 2025 am 11:33 AM</span>
<p class="Articlelist_txts_p">Kami meletakkannya pada ujian dan ternyata SASS boleh menggantikan JavaScript, sekurang-kurangnya ketika datang ke logik dan tingkah laku teka-teki peringkat rendah. Dengan apa -apa tetapi peta, campuran, fungsi, dan banyak matematik, kami berjaya membawa teka -teki Tangram kami ke kehidupan, tidak J</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://miracleart.cn/ms/faq/1796822133.html" title="Luaran vs CSS Dalaman: Apakah pendekatan terbaik?" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175035152168797.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Luaran vs CSS Dalaman: Apakah pendekatan terbaik?" />
</a>
<a href="http://miracleart.cn/ms/faq/1796822133.html" title="Luaran vs CSS Dalaman: Apakah pendekatan terbaik?" class="phphistorical_Version2_mids_title">Luaran vs CSS Dalaman: Apakah pendekatan terbaik?</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 20, 2025 am 12:45 AM</span>
<p class="Articlelist_txts_p">Thebestapproachforcssdependonstantheproject'ssspecificneeds.forlargerprojects, externalcssisbetterduetomaintainabilityability;</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://miracleart.cn/ms/faq/1796821588.html" title="Adakah CSS saya mesti berada di bawah kes?" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175026415047262.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Adakah CSS saya mesti berada di bawah kes?" />
</a>
<a href="http://miracleart.cn/ms/faq/1796821588.html" title="Adakah CSS saya mesti berada di bawah kes?" class="phphistorical_Version2_mids_title">Adakah CSS saya mesti berada di bawah kes?</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 19, 2025 am 12:29 AM</span>
<p class="Articlelist_txts_p">Tidak, cssdoesnothavetobeinlowercase.however, menggunakanLowerCaseisRecommendorfendfor: 1) Consistencyandreadability, 2) Mengelakkaningerrorsinrelatedtechnologies, 3) potensiformanceBenefits, dan4) peningkatan yang lebih baik.</p>
</div>
</div>
<a href="http://miracleart.cn/ms/web-designer.html" class="phpgenera_Details_mainL4_botton">
<span>See all articles</span>
<img src="/static/imghw/down_right.png" alt="" />
</a>
</div>
</div>
</div>
</main>
<footer>
<div id="377j5v51b" class="footer">
<div id="377j5v51b" class="footertop">
<img src="/static/imghw/logo.png" alt="">
<p>Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！</p>
</div>
<div id="377j5v51b" class="footermid">
<a href="http://miracleart.cn/ms/about/us.html">Tentang kita</a>
<a href="http://miracleart.cn/ms/about/disclaimer.html">Penafian</a>
<a href="http://miracleart.cn/ms/update/article_0_1.html">Sitemap</a>
</div>
<div id="377j5v51b" class="footerbottom">
<p>
? php.cn All rights reserved
</p>
</div>
</div>
</footer>
<input type="hidden" id="verifycode" value="/captcha.html">
<link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all' />
<footer>
<div class="friendship-link">
<p>感谢您访问我们的网站，您可能还对以下资源感兴趣：</p>
<a href="http://miracleart.cn/" title="国产av日韩一区二区三区精品">国产av日韩一区二区三区精品</a>
<div class="friend-links">
</div>
</div>
</footer>
<script>
(function(){
var bp = document.createElement('script');
var curProtocol = window.location.protocol.split(':')[0];
if (curProtocol === 'https') {
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
}
else {
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
}
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(bp, s);
})();
</script>
</body><div id="nzr5d" class="pl_css_ganrao" style="display: none;"><style id="nzr5d"></style><output id="nzr5d"><thead id="nzr5d"></thead></output><menuitem id="nzr5d"><u id="nzr5d"></u></menuitem><label id="nzr5d"><acronym id="nzr5d"><output id="nzr5d"><style id="nzr5d"></style></output></acronym></label><pre id="nzr5d"></pre><em id="nzr5d"></em><thead id="nzr5d"><em id="nzr5d"></em></thead><pre id="nzr5d"><mark id="nzr5d"></mark></pre><output id="nzr5d"></output><font id="nzr5d"><var id="nzr5d"><progress id="nzr5d"><small id="nzr5d"></small></progress></var></font><pre id="nzr5d"><sub id="nzr5d"></sub></pre><rp id="nzr5d"><strong id="nzr5d"></strong></rp><b id="nzr5d"></b><progress id="nzr5d"><small id="nzr5d"><sup id="nzr5d"><mark id="nzr5d"></mark></sup></small></progress><th id="nzr5d"></th><pre id="nzr5d"><ins id="nzr5d"><strong id="nzr5d"><span id="nzr5d"></span></strong></ins></pre><output id="nzr5d"></output><dl id="nzr5d"><ruby id="nzr5d"></ruby></dl><address id="nzr5d"><dfn id="nzr5d"></dfn></address><address id="nzr5d"></address><var id="nzr5d"><strike id="nzr5d"></strike></var><strike id="nzr5d"></strike><dfn id="nzr5d"></dfn><pre id="nzr5d"><span id="nzr5d"><nobr id="nzr5d"><legend id="nzr5d"></legend></nobr></span></pre><ins id="nzr5d"></ins><nobr id="nzr5d"></nobr><dl id="nzr5d"><output id="nzr5d"></output></dl><nobr id="nzr5d"><p id="nzr5d"></p></nobr><track id="nzr5d"></track><big id="nzr5d"><strong id="nzr5d"><pre id="nzr5d"><video id="nzr5d"></video></pre></strong></big><strong id="nzr5d"><div id="nzr5d"></div></strong><font id="nzr5d"><dfn id="nzr5d"><big id="nzr5d"><small id="nzr5d"></small></big></dfn></font><dfn id="nzr5d"><ol id="nzr5d"><ins id="nzr5d"><strong id="nzr5d"></strong></ins></ol></dfn><th id="nzr5d"><label id="nzr5d"><address id="nzr5d"><ruby id="nzr5d"></ruby></address></label></th><label id="nzr5d"></label><label id="nzr5d"></label><mark id="nzr5d"><dfn id="nzr5d"></dfn></mark><label id="nzr5d"><form id="nzr5d"></form></label><strike id="nzr5d"><small id="nzr5d"><sup id="nzr5d"><big id="nzr5d"></big></sup></small></strike><span id="nzr5d"></span><strong id="nzr5d"></strong><strike id="nzr5d"></strike><ol id="nzr5d"><progress id="nzr5d"></progress></ol><legend id="nzr5d"><sub id="nzr5d"><video id="nzr5d"><legend id="nzr5d"></legend></video></sub></legend><pre id="nzr5d"><rp id="nzr5d"><strong id="nzr5d"><sub id="nzr5d"></sub></strong></rp></pre><var id="nzr5d"><progress id="nzr5d"><dfn id="nzr5d"><sup id="nzr5d"></sup></dfn></progress></var><label id="nzr5d"><meter id="nzr5d"></meter></label><tt id="nzr5d"><video id="nzr5d"><p id="nzr5d"><sub id="nzr5d"></sub></p></video></tt><dfn id="nzr5d"><sup id="nzr5d"></sup></dfn><mark id="nzr5d"><pre id="nzr5d"><sub id="nzr5d"><ins id="nzr5d"></ins></sub></pre></mark><thead id="nzr5d"><dfn id="nzr5d"></dfn></thead><th id="nzr5d"></th><thead id="nzr5d"><font id="nzr5d"></font></thead><big id="nzr5d"><small id="nzr5d"></small></big><label id="nzr5d"><menuitem id="nzr5d"></menuitem></label><dfn id="nzr5d"><var id="nzr5d"><progress id="nzr5d"><dfn id="nzr5d"></dfn></progress></var></dfn><form id="nzr5d"></form><nobr id="nzr5d"></nobr><b id="nzr5d"><strong id="nzr5d"></strong></b><form id="nzr5d"></form><label id="nzr5d"><address id="nzr5d"></address></label><thead id="nzr5d"><optgroup id="nzr5d"><ol id="nzr5d"><progress id="nzr5d"></progress></ol></optgroup></thead><thead id="nzr5d"><em id="nzr5d"><th id="nzr5d"><thead id="nzr5d"></thead></th></em></thead><u id="nzr5d"><label id="nzr5d"><div id="nzr5d"><label id="nzr5d"></label></div></label></u><span id="nzr5d"><nobr id="nzr5d"><legend id="nzr5d"><tt id="nzr5d"></tt></legend></nobr></span><track id="nzr5d"><i id="nzr5d"><font id="nzr5d"><ruby id="nzr5d"></ruby></font></i></track><optgroup id="nzr5d"><pre id="nzr5d"><ins id="nzr5d"><pre id="nzr5d"></pre></ins></pre></optgroup><b id="nzr5d"><label id="nzr5d"></label></b><rp id="nzr5d"></rp><listing id="nzr5d"></listing><pre id="nzr5d"><mark id="nzr5d"></mark></pre><mark id="nzr5d"></mark><big id="nzr5d"><dfn id="nzr5d"></dfn></big><menuitem id="nzr5d"></menuitem><optgroup id="nzr5d"><sup id="nzr5d"></sup></optgroup><ruby id="nzr5d"><style id="nzr5d"></style></ruby><address id="nzr5d"><track id="nzr5d"><i id="nzr5d"><font id="nzr5d"></font></i></track></address><strong id="nzr5d"><sub id="nzr5d"></sub></strong><sup id="nzr5d"><strike id="nzr5d"><small id="nzr5d"><track id="nzr5d"></track></small></strike></sup><pre id="nzr5d"></pre><track id="nzr5d"><strike id="nzr5d"></strike></track><menuitem id="nzr5d"></menuitem><thead id="nzr5d"></thead><track id="nzr5d"></track><rp id="nzr5d"><pre id="nzr5d"><span id="nzr5d"><rp id="nzr5d"></rp></span></pre></rp><menuitem id="nzr5d"><form id="nzr5d"></form></menuitem><pre id="nzr5d"></pre><ins id="nzr5d"></ins><sub id="nzr5d"><rp id="nzr5d"><pre id="nzr5d"><span id="nzr5d"></span></pre></rp></sub><listing id="nzr5d"><legend id="nzr5d"></legend></listing><span id="nzr5d"><video id="nzr5d"><pre id="nzr5d"><thead id="nzr5d"></thead></pre></video></span><sup id="nzr5d"><progress id="nzr5d"></progress></sup><tt id="nzr5d"></tt><video id="nzr5d"></video><ins id="nzr5d"></ins><ins id="nzr5d"><dfn id="nzr5d"><sup id="nzr5d"><ins id="nzr5d"></ins></sup></dfn></ins><font id="nzr5d"></font><u id="nzr5d"></u><u id="nzr5d"><listing id="nzr5d"><div id="nzr5d"><u id="nzr5d"></u></div></listing></u><listing id="nzr5d"><div id="nzr5d"><b id="nzr5d"><dl id="nzr5d"></dl></b></div></listing></div>
</html>