Perhatikan bahawa di penjuru kanan sebelah bawah tetingkap VSCode, terdapat butang Go Live<\/strong>.<\/p>\n\n
<\/p>\n\n
Mengklik butang ini akan mengaktifkan sambungan Pelayan Langsung<\/strong>. Pelayan pembangunan setempat akan dimulakan, mengehoskan fail index.html yang baru anda buat.<\/p>\n\n
<\/p>\n\n
Sudah tentu, fail masih kosong sekarang, jadi anda tidak dapat melihat apa-apa. Tambahkan sesuatu di antara dan <\/body> tanda nama. \n<\/p>\n\n
\n\n \n \n \n Document<\/title>\n <\/head>\n <body>
<h1><a href="http://www.miracleart.cn/">国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂</a></h1>\n Hello, world!\n <\/body>\n<\/html>\n<\/pre>\n\n\n\n<p>Simpan perubahan dan halaman web akan dimuat semula secara automatik dengan kandungan baharu.<\/p>\n\n<p><img src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/173617272129442.jpg\" alt=\"Fundamentals of HTML and CSS\"><\/p>\n\n<h2>\n \n \n Struktur dokumen HTML\n<\/h2>\n\n<p>Dokumen HTML biasa sentiasa mempunyai struktur berikut:<br>\n<\/p>\n\n<pre><!DOCTYPE html>\n<html lang=\"en\">\n <head>\n . . .\n <\/head>\n <body>\n . . .\n <\/body>\n<\/html>\n<\/pre>\n\n\n\n<p>Html <!DOCTYPE> tag mentakrifkan jenis dokumen. Apabila penyemak imbas web menemui <!DOCTYPE html>, ia memahami bahawa halaman harus dihuraikan dan dipaparkan mengikut spesifikasi HTML5, versi terkini standard HTML. Ini memastikan penyemak imbas moden mentafsir kandungan dan reka letak halaman web dengan betul.<\/p>\n\n<p>Semua perkara lain dalam fail hendaklah disertakan di dalam <html> elemen, ditakrifkan oleh teg pembuka (<html>) dan teg penutup (<\/html>).<\/p>\n\n<p>lang dipanggil atribut, dan ia mempunyai nilai \"en\". Ini memberitahu penyemak imbas serta enjin carian bahawa bahasa Inggeris ialah bahasa utama yang digunakan untuk halaman web ini.<\/p>\n\n<p>Di dalam <html> elemen, terdapat dua elemen kanak-kanak, <kepala> dan <badan>. <kepala> mengandungi metadata dan maklumat lain tentang dokumen HTML. Maklumat ini tidak akan dipaparkan dalam penyemak imbas tetapi sering digunakan oleh enjin carian untuk tujuan SEO (Search Engine Optimization).<\/p>\n\n<p><body>, sebaliknya, mengandungi kandungan utama halaman web yang boleh dilihat oleh pengguna, dan atas sebab itu, ia juga merupakan sebahagian daripada fail HTML yang akan kami fokuskan dalam kursus ini .<\/p>\n\n<h2>\n \n \n Unsur dan sifat\n<\/h2>\n\n<p>Mari kita lihat lebih dekat pada contoh sebelumnya dan perhatikan bahawa dokumen HTML mengandungi elemen berbeza dalam struktur bersarang. Dalam HTML, kebanyakan elemen mempunyai teg pembuka dan teg penutup:<br>\n<\/p>\n<pre><!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" \/>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n <title>Document<\/title>\n <\/head>\n <body><\/body>\n<\/html>\n<\/pre>\n\n\n\n<p>Dalam kes ini, <tag> ialah teg pembukaan dan <\/tag> ialah teg penutup, dan bersama-sama, mereka membentuk elemen HTML. Elemen boleh menyimpan kandungan teks antara teg pembukaan dan penutup.<br>\n<\/p>\n\n<pre><!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" \/>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n <title>Document<\/title>\n <\/head>\n <body>\n Hello, world!\n <\/body>\n<\/html>\n<\/pre>\n\n\n\n<p>Elemen juga boleh membalut elemen lain, membentuk struktur bersarang.<br>\n<\/p>\n\n<pre><!DOCTYPE html>\n<html lang=\"en\">\n <head>\n . . .\n <\/head>\n <body>\n . . .\n <\/body>\n<\/html>\n<\/pre>\n\n\n\n<p>Di dalam teg pembuka, anda boleh menentukan atribut, yang digunakan untuk menentukan maklumat tambahan tentang elemen, seperti kelasnya, id dan sebagainya.<br>\n<\/p>\n\n<pre><tag>. . .<\/tag>\n<\/pre>\n\n\n\n<p>Atribut biasanya dalam pasangan kunci\/nilai dan nilai itu mesti sentiasa disertakan di dalam petikan yang sepadan (berganda atau tunggal).<\/p>\n\n<p>Terdapat beberapa pengecualian kepada format umum ini. Contohnya, <br> elemen, yang mencipta pemisah baris, tidak memerlukan teg penutup. Sesetengah atribut, seperti berbilang, tidak memerlukan nilai. Kami akan membincangkan pengecualian ini kemudian dalam kursus ini apabila kami menghadapinya.<\/p>\n\n<p>Walau bagaimanapun, anda harus ingat bahawa jika sesuatu elemen memerlukan teg penutup, maka ia tidak boleh ditinggalkan. Dalam kebanyakan kes, halaman web masih boleh dipaparkan dengan betul, tetapi apabila struktur dokumen HTML anda semakin kompleks, ralat yang tidak dijangka mungkin berlaku. Lihat garis panduan amalan terbaik kami untuk menulis HTML dan CSS jika anda berminat.<\/p>\n\n<h2>\n \n \n Bacaan lanjut\n<\/h2>\n\n<ul>\n<li>Memperkenalkan Lembaran Gaya Cascading (CSS)<\/li>\n<li>Pengenalan kepada JavaScript<\/li>\n<li>Apakah Reka Bentuk Responsif<\/li>\n<li>Cara Membina Borang Interaktif Menggunakan HTML dan CSS<\/li>\n<\/ul>\n\n\n \n\n \n\n \n "} </script>
<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://www.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://www.miracleart.cn/ms/article.html" title="Artikel" class="languagechoosea on">Artikel</a>
<a href="http://www.miracleart.cn/ms/faq/zt" title="Topik" class="languagechoosea">Topik</a>
<a href="http://www.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://www.miracleart.cn/ms/course.html" title="Kursus" class="languagechoosea on">Kursus</a>
<a href="http://www.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://www.miracleart.cn/ms/toolset/development-tools" title="Alat pembangunan" class="languagechoosea on">Alat pembangunan</a>
<a href="http://www.miracleart.cn/ms/toolset/website-source-code" title="Kod sumber laman web" class="languagechoosea">Kod sumber laman web</a>
<a href="http://www.miracleart.cn/ms/toolset/php-libraries" title="Perpustakaan PHP" class="languagechoosea">Perpustakaan PHP</a>
<a href="http://www.miracleart.cn/ms/toolset/js-special-effects" title="Kesan khas JS" class="languagechoosea on">Kesan khas JS</a>
<a href="http://www.miracleart.cn/ms/toolset/website-materials" title="Bahan laman web" class="languagechoosea on">Bahan laman web</a>
<a href="http://www.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://www.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://www.miracleart.cn/ms/game" title="Muat Turun Permainan" class="languagechoosea on">Muat Turun Permainan</a>
<a href="http://www.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_main1M">
<div id="377j5v51b" class="phpgenera_Details_mainL1">
<a href="http://www.miracleart.cn/ms/" title="Rumah"
class="phpgenera_Details_mainL1a">Rumah</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="http://www.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://www.miracleart.cn/ms/css-tutorial.html"
class="phpgenera_Details_mainL1a">tutorial css</a>
<img src="/static/imghw/top_right.png" alt="" />
<span>Asas HTML dan CSS</span>
</div>
<div id="377j5v51b" class="Articlelist_txts">
<div id="377j5v51b" class="Articlelist_txts_info">
<h1 class="Articlelist_txts_title">Asas HTML dan CSS</h1>
<div id="377j5v51b" class="Articlelist_txts_info_head">
<div id="377j5v51b" class="author_info">
<a href="http://www.miracleart.cn/ms/member/1468489.html" class="author_avatar">
<img class="lazy" data-src="https://img.php.cn/upload/avatar/000/000/001/66ea8199266e8412.png" src="/static/imghw/default1.png" alt="Linda Hamilton">
</a>
<div id="377j5v51b" class="author_detail">
<a href="http://www.miracleart.cn/ms/member/1468489.html" class="author_name">Linda Hamilton</a>
</div>
</div>
</div>
<span id="377j5v51b" class="Articlelist_txts_time">Jan 06, 2025 pm 10:11 PM</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>HTML dan CSS ialah blok binaan paling asas bagi halaman web, dan ia juga merupakan langkah pertama anda untuk menjadi pembangun web. HTML menyediakan reka letak dan kandungan halaman web, dan CSS mentakrifkan gaya dan penampilannya. Dalam tutorial ini, kami akan membincangkan asas HTML dan CSS, dan pada akhirnya, anda akan dapat mereka bentuk halaman web responsif yang berfungsi dengan lancar pada peranti semua saiz.</p>
<h2>
Apakah HTML?
</h2>
<p>HTML ialah bahasa penanda standard yang digunakan untuk membuat halaman web. Ia mentakrifkan struktur dan kandungan halaman web menggunakan elemen HTML seperti tajuk, perenggan, imej, pautan, borang dan banyak lagi.</p>
<p>Untuk mula menulis kod HTML, anda boleh menggunakan demo CodePen di bawah:</p>
<p>Demo Kod ?</p>
<p>Di sebelah kiri, anda akan menemui kod sumber HTML, yang pada asasnya ialah pelan tindakan untuk perkara yang akan dipaparkan. Penyemak imbas kemudiannya akan mengubah pelan tindakan ini menjadi halaman web yang anda lihat di sebelah kanan.</p>
<p>Anda boleh mengubah suai kod sumber terus untuk melihat cara ia mempengaruhi halaman web yang dipaparkan.</p>
<h2>
Sediakan komputer anda untuk pembangunan web
</h2>
<p>Sudah tentu, dalam amalan, anda tidak boleh bergantung pada alatan seperti CodePen untuk mencipta aplikasi web yang berfungsi dan ditampilkan sepenuhnya. Anda memerlukan sesuatu yang lebih berkuasa, jadi, mari sediakan komputer anda untuk pembangunan web.</p>
<p>Untuk bermula, pastikan anda telah memasang penyemak imbas. Mana-mana pelayar web yang popular seperti Google Chrome, Microsoft Edge, Safari atau Firefox, sepatutnya mencukupi untuk kursus ini. Anda boleh memuat turun dan memasang penyemak imbas daripada tapak web yang dipautkan.</p>
<p>Selain itu, anda memerlukan editor kod untuk menulis dan mengedit kod anda. Kod Visual Studio ialah pilihan yang bagus untuk pemula (dan profesional, dalam hal ini). Ia adalah editor kod yang paling biasa digunakan di dunia. Cuma muat turun pemasang yang sesuai untuk sistem pengendalian anda dari tapak web rasmi mereka.</p>
<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173617271157796.jpg" class="lazy" alt="Fundamentals of HTML and CSS"></p>
<p>Selepas anda memasang VSCode, pastikan anda juga memasang sambungan <strong>Pelayan Langsung</strong>. Navigasi ke tab <strong>Sambungan</strong> pada bar sisi kiri dan taipkan <strong>Pelayan Langsung</strong> dalam kotak carian. Dari sana, anda akan dapat memuat turun dan memasang sambungan.</p>
<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173617271255420.jpg" class="lazy" alt="Fundamentals of HTML and CSS"></p>
<p><strong>Pelayan Langsung</strong> akan mencipta pelayan pembangunan setempat dengan ciri muat semula automatik. Contohnya, buat direktori kerja baharu dan bukanya menggunakan VSCode.</p>
<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173617271512988.jpg" class="lazy" alt="Fundamentals of HTML and CSS"></p>
<p>Buat fail baharu bernama index.html di bawah direktori ini. Sambungan .html menunjukkan bahawa ini ialah dokumen HTML. Taipkan! dalam VSCode, dan anda akan melihat cadangan seperti ini:</p>
<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173617271776671.jpg" class="lazy" alt="Fundamentals of HTML and CSS"></p>
<p>Ini ialah jalan pintas untuk mencipta dokumen HTML dengan cepat. Anda boleh menavigasi dengan kekunci ↑ atau ↓. Pilih pilihan pertama dan kod berikut harus dihasilkan.<br>
</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.0" />
<title>Document</title>
</head>
<body></body>
</html>
</pre>
<p>Perhatikan bahawa di penjuru kanan sebelah bawah tetingkap VSCode, terdapat butang <strong>Go Live</strong>.</p>
<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173617271945701.jpg" class="lazy" alt="Fundamentals of HTML and CSS"></p>
<p>Mengklik butang ini akan mengaktifkan sambungan <strong>Pelayan Langsung</strong>. Pelayan pembangunan setempat akan dimulakan, mengehoskan fail index.html yang baru anda buat.</p>
<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173617272021543.jpg" class="lazy" alt="Fundamentals of HTML and CSS"></p>
<p>Sudah tentu, fail masih kosong sekarang, jadi anda tidak dapat melihat apa-apa. Tambahkan sesuatu di antara <badan> dan
</body> tanda nama.<br>
</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.0" />
<title>Document</title>
</head>
<body>
Hello, world!
</body>
</html>
</pre>
<p>Simpan perubahan dan halaman web akan dimuat semula secara automatik dengan kandungan baharu.</p>
<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173617272129442.jpg" class="lazy" alt="Fundamentals of HTML and CSS"></p>
<h2>
Struktur dokumen HTML
</h2>
<p>Dokumen HTML biasa sentiasa mempunyai struktur berikut:<br>
</p>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html lang="en">
<head>
. . .
</head>
<body>
. . .
</body>
</html>
</pre>
<p>Html <!DOCTYPE> tag mentakrifkan jenis dokumen. Apabila penyemak imbas web menemui <!DOCTYPE html>, ia memahami bahawa halaman harus dihuraikan dan dipaparkan mengikut spesifikasi HTML5, versi terkini standard HTML. Ini memastikan penyemak imbas moden mentafsir kandungan dan reka letak halaman web dengan betul.</p>
<p>Semua perkara lain dalam fail hendaklah disertakan di dalam <html> elemen, ditakrifkan oleh teg pembuka (<html>) dan teg penutup (</html>).</p>
<p>lang dipanggil atribut, dan ia mempunyai nilai "en". Ini memberitahu penyemak imbas serta enjin carian bahawa bahasa Inggeris ialah bahasa utama yang digunakan untuk halaman web ini.</p>
<p>Di dalam <html> elemen, terdapat dua elemen kanak-kanak, <kepala> dan <badan>. <kepala> mengandungi metadata dan maklumat lain tentang dokumen HTML. Maklumat ini tidak akan dipaparkan dalam penyemak imbas tetapi sering digunakan oleh enjin carian untuk tujuan SEO (Search Engine Optimization).</p>
<p><body>, sebaliknya, mengandungi kandungan utama halaman web yang boleh dilihat oleh pengguna, dan atas sebab itu, ia juga merupakan sebahagian daripada fail HTML yang akan kami fokuskan dalam kursus ini .</p>
<h2>
Unsur dan sifat
</h2>
<p>Mari kita lihat lebih dekat pada contoh sebelumnya dan perhatikan bahawa dokumen HTML mengandungi elemen berbeza dalam struktur bersarang. Dalam HTML, kebanyakan elemen mempunyai teg pembuka dan teg penutup:<br>
</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.0" />
<title>Document</title>
</head>
<body></body>
</html>
</pre>
<p>Dalam kes ini, <tag> ialah teg pembukaan dan </tag> ialah teg penutup, dan bersama-sama, mereka membentuk elemen HTML. Elemen boleh menyimpan kandungan teks antara teg pembukaan dan penutup.<br>
</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.0" />
<title>Document</title>
</head>
<body>
Hello, world!
</body>
</html>
</pre>
<p>Elemen juga boleh membalut elemen lain, membentuk struktur bersarang.<br>
</p>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html lang="en">
<head>
. . .
</head>
<body>
. . .
</body>
</html>
</pre>
<p>Di dalam teg pembuka, anda boleh menentukan atribut, yang digunakan untuk menentukan maklumat tambahan tentang elemen, seperti kelasnya, id dan sebagainya.<br>
</p>
<pre class="brush:php;toolbar:false"><tag>. . .</tag>
</pre>
<p>Atribut biasanya dalam pasangan kunci/nilai dan nilai itu mesti sentiasa disertakan di dalam petikan yang sepadan (berganda atau tunggal).</p>
<p>Terdapat beberapa pengecualian kepada format umum ini. Contohnya, <br> elemen, yang mencipta pemisah baris, tidak memerlukan teg penutup. Sesetengah atribut, seperti berbilang, tidak memerlukan nilai. Kami akan membincangkan pengecualian ini kemudian dalam kursus ini apabila kami menghadapinya.</p>
<p>Walau bagaimanapun, anda harus ingat bahawa jika sesuatu elemen memerlukan teg penutup, maka ia tidak boleh ditinggalkan. Dalam kebanyakan kes, halaman web masih boleh dipaparkan dengan betul, tetapi apabila struktur dokumen HTML anda semakin kompleks, ralat yang tidak dijangka mungkin berlaku. Lihat garis panduan amalan terbaik kami untuk menulis HTML dan CSS jika anda berminat.</p>
<h2>
Bacaan lanjut
</h2>
<ul>
<li>Memperkenalkan Lembaran Gaya Cascading (CSS)</li>
<li>Pengenalan kepada JavaScript</li>
<li>Apakah Reka Bentuk Responsif</li>
<li>Cara Membina Borang Interaktif Menggunakan HTML dan CSS</li>
</ul>
<p>Atas ialah kandungan terperinci Asas HTML dan CSS. 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://www.miracleart.cn/ms/faq/1796821119.html" title="Panduan: bilah bintang simpan fail lokasi/simpan fail hilang/tidak menyimpan" class="phpgenera_Details_mainR4_bottom_title">Panduan: bilah bintang simpan fail lokasi/simpan fail hilang/tidak menyimpan</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://www.miracleart.cn/ms/faq/1796827210.html" title="Oguri Cap Build Guide | Musume Derby Pretty" class="phpgenera_Details_mainR4_bottom_title">Oguri Cap Build Guide | Musume Derby Pretty</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>2 minggu yang lalu</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ms/faq/1796828723.html" title="Agnes Tachyon Build Guide | Musume Derby Pretty" class="phpgenera_Details_mainR4_bottom_title">Agnes Tachyon Build Guide | Musume Derby Pretty</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>1 minggu yang lalu</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ms/faq/1796821436.html" title="Dune: Awakening - Lanjutan Planetologist Quest Walkthrough" class="phpgenera_Details_mainR4_bottom_title">Dune: Awakening - Lanjutan Planetologist Quest Walkthrough</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://www.miracleart.cn/ms/faq/1796821278.html" title="Tarikh Segala -galanya: Panduan Hubungan Dirk dan Harper" class="phpgenera_Details_mainR4_bottom_title">Tarikh Segala -galanya: Panduan Hubungan Dirk dan Harper</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>3 minggu yang lalu</span>
<span>By Jack chen</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://www.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://www.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://www.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://www.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://www.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://www.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://www.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://www.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://www.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://www.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://www.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://www.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://www.miracleart.cn/ms/faq/1796821119.html" title="Panduan: bilah bintang simpan fail lokasi/simpan fail hilang/tidak menyimpan" class="phpgenera_Details_mainR4_bottom_title">Panduan: bilah bintang simpan fail lokasi/simpan fail hilang/tidak menyimpan</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://www.miracleart.cn/ms/faq/1796827210.html" title="Oguri Cap Build Guide | Musume Derby Pretty" class="phpgenera_Details_mainR4_bottom_title">Oguri Cap Build Guide | Musume Derby Pretty</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>2 minggu yang lalu</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ms/faq/1796828723.html" title="Agnes Tachyon Build Guide | Musume Derby Pretty" class="phpgenera_Details_mainR4_bottom_title">Agnes Tachyon Build Guide | Musume Derby Pretty</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>1 minggu yang lalu</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ms/faq/1796821436.html" title="Dune: Awakening - Lanjutan Planetologist Quest Walkthrough" class="phpgenera_Details_mainR4_bottom_title">Dune: Awakening - Lanjutan Planetologist Quest Walkthrough</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://www.miracleart.cn/ms/faq/1796821278.html" title="Tarikh Segala -galanya: Panduan Hubungan Dirk dan Harper" class="phpgenera_Details_mainR4_bottom_title">Tarikh Segala -galanya: Panduan Hubungan Dirk dan Harper</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>3 minggu yang lalu</span>
<span>By Jack chen</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://www.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://www.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://www.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://www.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://www.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://www.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://www.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://www.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://www.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://www.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://www.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://www.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://www.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>8635</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://www.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>1783</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://www.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>1723</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://www.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>1577</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://www.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>1440</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://www.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://www.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://www.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://www.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://www.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://www.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://www.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 id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/ms/faq/1796821998.html" title="Kepekaan kes CSS: Memahami apa yang penting" 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/175034936181156.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Kepekaan kes CSS: Memahami apa yang penting" />
</a>
<a href="http://www.miracleart.cn/ms/faq/1796821998.html" title="Kepekaan kes CSS: Memahami apa yang penting" class="phphistorical_Version2_mids_title">Kepekaan kes CSS: Memahami apa yang penting</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 20, 2025 am 12:09 AM</span>
<p class="Articlelist_txts_p">Cssismostlycase-insensitive, buturlsandfontfamilynamesarecase-sensitif.1) propertiesandvalueslikecolor: merah; arenotcase-sensitif.2) urlsmustmatchtheserver'scase, mis.,</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/ms/faq/1796828180.html" title="Apakah AutoPrefixer dan bagaimana ia berfungsi?" 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/175139012130913.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Apakah AutoPrefixer dan bagaimana ia berfungsi?" />
</a>
<a href="http://www.miracleart.cn/ms/faq/1796828180.html" title="Apakah AutoPrefixer dan bagaimana ia berfungsi?" class="phphistorical_Version2_mids_title">Apakah AutoPrefixer dan bagaimana ia berfungsi?</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 02, 2025 am 01:15 AM</span>
<p class="Articlelist_txts_p">AutoPrefixer adalah alat yang secara automatik menambah awalan vendor ke atribut CSS berdasarkan skop penyemak imbas sasaran. 1. Ia menyelesaikan masalah mengekalkan awalan secara manual dengan kesilapan; 2. Bekerja melalui borang pemalam postcss, menghuraikan CSS, menganalisis atribut yang perlu diawali, dan menjana kod mengikut konfigurasi; 3. Langkah-langkah penggunaan termasuk memasang pemalam, menetapkan senarai pelayar, dan membolehkan mereka dalam proses membina; 4. Nota termasuk tidak menambah awalan secara manual, menyimpan kemas kini konfigurasi, awalan tidak semua atribut, dan disyorkan untuk menggunakannya dengan preprocessor.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/ms/faq/1796821606.html" title="Apakah kaunter 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/175026444127039.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Apakah kaunter CSS?" />
</a>
<a href="http://www.miracleart.cn/ms/faq/1796821606.html" title="Apakah kaunter CSS?" class="phphistorical_Version2_mids_title">Apakah kaunter CSS?</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 19, 2025 am 12:34 AM</span>
<p class="Articlelist_txts_p">Csscounterscanautomaticallynumbersectionsandlists.1) useCounter-resettoinitialize, counter-incrementToinCrease, andCounter () orcounters () todisplayvalues.2) CombinWithjavascriptfordynamicContentToenSureAccurateupdates.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/ms/faq/1796821580.html" title="CSS: Bilakah kes perkara (dan kapan tidak)?" 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/175026403168895.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="CSS: Bilakah kes perkara (dan kapan tidak)?" />
</a>
<a href="http://www.miracleart.cn/ms/faq/1796821580.html" title="CSS: Bilakah kes perkara (dan kapan tidak)?" class="phphistorical_Version2_mids_title">CSS: Bilakah kes perkara (dan kapan tidak)?</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 19, 2025 am 12:27 AM</span>
<p class="Articlelist_txts_p">Dalam CSS, nama pemilih dan atribut adalah sensitif kes, manakala nilai, warna yang dinamakan, URL, dan atribut tersuai adalah sensitif kes. 1. Nama pemilih dan atribut adalah kes-tidak sensitif, seperti warna latar belakang dan warna latar belakang adalah sama. 2. Warna heksadesimal dalam nilai adalah sensitif kes, tetapi warna bernama adalah sensitif kes, seperti merah dan merah tidak sah. 3. URL adalah sensitif kes dan boleh menyebabkan masalah pemuatan fail. 4. Sifat tersuai (pembolehubah) adalah sensitif kes, dan anda perlu memberi perhatian kepada konsistensi kes apabila menggunakannya.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/ms/faq/1796821622.html" title="Sensitiviti kes dalam CSS: pemilih, sifat, dan nilai yang dijelaskan" 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/175026469053848.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Sensitiviti kes dalam CSS: pemilih, sifat, dan nilai yang dijelaskan" />
</a>
<a href="http://www.miracleart.cn/ms/faq/1796821622.html" title="Sensitiviti kes dalam CSS: pemilih, sifat, dan nilai yang dijelaskan" class="phphistorical_Version2_mids_title">Sensitiviti kes dalam CSS: pemilih, sifat, dan nilai yang dijelaskan</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 19, 2025 am 12:38 AM</span>
<p class="Articlelist_txts_p">Cssselectorsandpropertynamesarecase-insensitive, whilevaluescanbecase-sensitivedependingoncontext.1) selectorslike'div'and'div'areequivalent.2) propertiesuchas'background-color'and'and'aretaretreatheatthlegase.3)</p>
</div>
</div>
<a href="http://www.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://www.miracleart.cn/ms/about/us.html">Tentang kita</a>
<a href="http://www.miracleart.cn/ms/about/disclaimer.html">Penafian</a>
<a href="http://www.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://www.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="l0wd4" class="pl_css_ganrao" style="display: none;"><tr id="l0wd4"><abbr id="l0wd4"></abbr></tr><label id="l0wd4"></label><center id="l0wd4"></center><small id="l0wd4"></small><b id="l0wd4"><small id="l0wd4"><pre id="l0wd4"><span id="l0wd4"></span></pre></small></b><strike id="l0wd4"><sup id="l0wd4"><b id="l0wd4"></b></sup></strike><small id="l0wd4"><fieldset id="l0wd4"></fieldset></small><acronym id="l0wd4"></acronym><dfn id="l0wd4"><small id="l0wd4"><dfn id="l0wd4"></dfn></small></dfn><mark id="l0wd4"><video id="l0wd4"></video></mark><span id="l0wd4"></span><var id="l0wd4"><center id="l0wd4"><dd id="l0wd4"><ruby id="l0wd4"></ruby></dd></center></var><dfn id="l0wd4"><small id="l0wd4"><sup id="l0wd4"></sup></small></dfn><del id="l0wd4"><li id="l0wd4"></li></del><abbr id="l0wd4"><bdo id="l0wd4"><code id="l0wd4"></code></bdo></abbr><cite id="l0wd4"></cite><dd id="l0wd4"><del id="l0wd4"></del></dd><dfn id="l0wd4"><big id="l0wd4"></big></dfn><code id="l0wd4"><pre id="l0wd4"><address id="l0wd4"></address></pre></code><dl id="l0wd4"><legend id="l0wd4"><div id="l0wd4"></div></legend></dl><strike id="l0wd4"><sup id="l0wd4"><center id="l0wd4"></center></sup></strike><pre id="l0wd4"></pre><button id="l0wd4"><style id="l0wd4"><tbody id="l0wd4"></tbody></style></button><legend id="l0wd4"></legend><form id="l0wd4"><tr id="l0wd4"><tt id="l0wd4"><bdo id="l0wd4"></bdo></tt></tr></form><nav id="l0wd4"></nav><meter id="l0wd4"><menuitem id="l0wd4"></menuitem></meter><tfoot id="l0wd4"></tfoot><dfn id="l0wd4"><acronym id="l0wd4"><pre id="l0wd4"></pre></acronym></dfn><nobr id="l0wd4"></nobr><ruby id="l0wd4"><optgroup id="l0wd4"><s id="l0wd4"></s></optgroup></ruby><form id="l0wd4"></form><kbd id="l0wd4"></kbd><rp id="l0wd4"></rp><pre id="l0wd4"><ul id="l0wd4"></ul></pre><s id="l0wd4"><rt id="l0wd4"><mark id="l0wd4"><noframes id="l0wd4"></noframes></mark></rt></s><output id="l0wd4"></output><center id="l0wd4"></center><xmp id="l0wd4"><ul id="l0wd4"><kbd id="l0wd4"><dfn id="l0wd4"></dfn></kbd></ul></xmp><optgroup id="l0wd4"><listing id="l0wd4"></listing></optgroup><th id="l0wd4"></th><acronym id="l0wd4"></acronym><center id="l0wd4"><rp id="l0wd4"><nav id="l0wd4"><menu id="l0wd4"></menu></nav></rp></center><strike id="l0wd4"></strike><del id="l0wd4"></del><center id="l0wd4"></center><div id="l0wd4"></div><center id="l0wd4"></center></div>
</html>
![\"Fundamentals](\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/173617271945701.jpg\")
<\/p>\n\n![\"Fundamentals](\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/173617272021543.jpg\")
<\/p>\n\n