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://ipnx.cn/">亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱</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="wjcelcm34c" class="head">
<div id="wjcelcm34c" class="haed_left">
<div id="wjcelcm34c" class="haed_logo">
<a href="http://ipnx.cn/ms/" title="" class="haed_logo_a">
<img src="/static/imghw/logo.png" alt="" class="haed_logoimg">
</a>
</div>
<div id="wjcelcm34c" class="head_nav">
<div id="wjcelcm34c" class="head_navs">
<a href="javascript:;" title="masyarakat" class="head_nava head_nava-template1">masyarakat</a>
<div class="wjcelcm34c" id="dropdown-template1" style="display: none;">
<div id="wjcelcm34c" class="languagechoose">
<a href="http://ipnx.cn/ms/article.html" title="Artikel" class="languagechoosea on">Artikel</a>
<a href="http://ipnx.cn/ms/faq/zt" title="Topik" class="languagechoosea">Topik</a>
<a href="http://ipnx.cn/ms/wenda.html" title="Soal Jawab" class="languagechoosea">Soal Jawab</a>
</div>
</div>
</div>
<div id="wjcelcm34c" class="head_navs">
<a href="javascript:;" title="Belajar" class="head_nava head_nava-template1_1">Belajar</a>
<div class="wjcelcm34c" id="dropdown-template1_1" style="display: none;">
<div id="wjcelcm34c" class="languagechoose">
<a href="http://ipnx.cn/ms/course.html" title="Kursus" class="languagechoosea on">Kursus</a>
<a href="http://ipnx.cn/ms/dic/" title="Kamus Pengaturcaraan" class="languagechoosea">Kamus Pengaturcaraan</a>
</div>
</div>
</div>
<div id="wjcelcm34c" class="head_navs">
<a href="javascript:;" title="Perpustakaan Alatan" class="head_nava head_nava-template1_2">Perpustakaan Alatan</a>
<div class="wjcelcm34c" id="dropdown-template1_2" style="display: none;">
<div id="wjcelcm34c" class="languagechoose">
<a href="http://ipnx.cn/ms/toolset/development-tools" title="Alat pembangunan" class="languagechoosea on">Alat pembangunan</a>
<a href="http://ipnx.cn/ms/toolset/website-source-code" title="Kod sumber laman web" class="languagechoosea">Kod sumber laman web</a>
<a href="http://ipnx.cn/ms/toolset/php-libraries" title="Perpustakaan PHP" class="languagechoosea">Perpustakaan PHP</a>
<a href="http://ipnx.cn/ms/toolset/js-special-effects" title="Kesan khas JS" class="languagechoosea on">Kesan khas JS</a>
<a href="http://ipnx.cn/ms/toolset/website-materials" title="Bahan laman web" class="languagechoosea on">Bahan laman web</a>
<a href="http://ipnx.cn/ms/toolset/extension-plug-ins" title="Pemalam sambungan" class="languagechoosea on">Pemalam sambungan</a>
</div>
</div>
</div>
<div id="wjcelcm34c" class="head_navs">
<a href="http://ipnx.cn/ms/ai" title="Alat AI" class="head_nava head_nava-template1_3">Alat AI</a>
</div>
<div id="wjcelcm34c" class="head_navs">
<a href="javascript:;" title="Masa lapang" class="head_nava head_nava-template1_3">Masa lapang</a>
<div class="wjcelcm34c" id="dropdown-template1_3" style="display: none;">
<div id="wjcelcm34c" class="languagechoose">
<a href="http://ipnx.cn/ms/game" title="Muat Turun Permainan" class="languagechoosea on">Muat Turun Permainan</a>
<a href="http://ipnx.cn/ms/mobile-game-tutorial/" title="Tutorial Permainan" class="languagechoosea">Tutorial Permainan</a>
</div>
</div>
</div>
</div>
</div>
<div id="wjcelcm34c" 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="wjcelcm34c" class="head_right">
<div id="wjcelcm34c" 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="wjcelcm34c" id="dropdown-template" style="display: none;">
<div id="wjcelcm34c" 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="wjcelcm34c" 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="wjcelcm34c" class="Article_Details_main">
<div id="wjcelcm34c" class="Article_Details_main1">
<div id="wjcelcm34c" class="Article_Details_main1M">
<div id="wjcelcm34c" class="phpgenera_Details_mainL1">
<a href="http://ipnx.cn/ms/" title="Rumah"
class="phpgenera_Details_mainL1a">Rumah</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="http://ipnx.cn/ms/web-designer.html"
class="phpgenera_Details_mainL1a">hujung hadapan web</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="http://ipnx.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="wjcelcm34c" class="Articlelist_txts">
<div id="wjcelcm34c" class="Articlelist_txts_info">
<h1 class="Articlelist_txts_title">Asas HTML dan CSS</h1>
<div id="wjcelcm34c" class="Articlelist_txts_info_head">
<div id="wjcelcm34c" class="author_info">
<a href="http://ipnx.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="wjcelcm34c" class="author_detail">
<a href="http://ipnx.cn/ms/member/1468489.html" class="author_name">Linda Hamilton</a>
</div>
</div>
</div>
<span id="wjcelcm34c" class="Articlelist_txts_time">Jan 06, 2025 pm 10:11 PM</span>
</div>
</div>
<hr />
<div id="wjcelcm34c" class="article_main php-article">
<div id="wjcelcm34c" 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="wjcelcm34c" class="wzconShengming_sp">
<div id="wjcelcm34c" 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="wjcelcm34c" 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="wjcelcm34c" class="phpgenera_Details_mainR4">
<div id="wjcelcm34c" class="phpmain1_4R_readrank">
<div id="wjcelcm34c" 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="wjcelcm34c" class="phpgenera_Details_mainR4_bottom">
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.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="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<span>1 bulan yang lalu</span>
<span>By Jack chen</span>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/ms/faq/1796832397.html" title="Panduan Membina Rumput Wonder | Uma Musume Pretty Derby" class="phpgenera_Details_mainR4_bottom_title">Panduan Membina Rumput Wonder | Uma Musume Pretty Derby</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<span>3 minggu yang lalu</span>
<span>By Jack chen</span>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/ms/faq/1796833110.html" title="<??>: 99 Malam di Hutan - Semua Lencana Dan Cara Membuka Kunci Mereka" class="phpgenera_Details_mainR4_bottom_title"><??>: 99 Malam di Hutan - Semua Lencana Dan Cara Membuka Kunci Mereka</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<span>3 minggu yang lalu</span>
<span>By DDD</span>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/ms/faq/1796831605.html" title="Jadual Banner Pretty Derby Uma Musume (Julai 2025)" class="phpgenera_Details_mainR4_bottom_title">Jadual Banner Pretty Derby Uma Musume (Julai 2025)</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<span>3 minggu yang lalu</span>
<span>By Jack chen</span>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/ms/faq/1796828810.html" title="NYT 'Connections' Lifs for Rabu, 2 Julai: Petunjuk dan Jawapan untuk Permainan Hari Ini" class="phpgenera_Details_mainR4_bottom_title">NYT 'Connections' Lifs for Rabu, 2 Julai: Petunjuk dan Jawapan untuk Permainan Hari Ini</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<span>1 bulan yang lalu</span>
<span>By DDD</span>
</div>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR3_more">
<a href="http://ipnx.cn/ms/article.html">Tunjukkan Lagi</a>
</div>
</div>
</div> -->
<div id="wjcelcm34c" class="phpgenera_Details_mainR3">
<div id="wjcelcm34c" class="phpmain1_4R_readrank">
<div id="wjcelcm34c" 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="wjcelcm34c" class="phpgenera_Details_mainR3_bottom">
<div id="wjcelcm34c" class="phpmain_tab2_mids_top">
<a href="http://ipnx.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="wjcelcm34c" class="phpmain_tab2_mids_info">
<a href="http://ipnx.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="wjcelcm34c" class="phpmain_tab2_mids_top">
<a href="http://ipnx.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="wjcelcm34c" class="phpmain_tab2_mids_info">
<a href="http://ipnx.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="wjcelcm34c" class="phpmain_tab2_mids_top">
<a href="http://ipnx.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="wjcelcm34c" class="phpmain_tab2_mids_info">
<a href="http://ipnx.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="wjcelcm34c" class="phpmain_tab2_mids_top">
<a href="http://ipnx.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="wjcelcm34c" class="phpmain_tab2_mids_info">
<a href="http://ipnx.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="wjcelcm34c" class="phpmain_tab2_mids_top">
<a href="http://ipnx.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="wjcelcm34c" class="phpmain_tab2_mids_info">
<a href="http://ipnx.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="wjcelcm34c" class="phpgenera_Details_mainR3_more">
<a href="http://ipnx.cn/ms/ai">Tunjukkan Lagi</a>
</div>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4">
<div id="wjcelcm34c" class="phpmain1_4R_readrank">
<div id="wjcelcm34c" 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="wjcelcm34c" class="phpgenera_Details_mainR4_bottom">
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.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="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<span>1 bulan yang lalu</span>
<span>By Jack chen</span>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/ms/faq/1796832397.html" title="Panduan Membina Rumput Wonder | Uma Musume Pretty Derby" class="phpgenera_Details_mainR4_bottom_title">Panduan Membina Rumput Wonder | Uma Musume Pretty Derby</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<span>3 minggu yang lalu</span>
<span>By Jack chen</span>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/ms/faq/1796833110.html" title="<??>: 99 Malam di Hutan - Semua Lencana Dan Cara Membuka Kunci Mereka" class="phpgenera_Details_mainR4_bottom_title"><??>: 99 Malam di Hutan - Semua Lencana Dan Cara Membuka Kunci Mereka</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<span>3 minggu yang lalu</span>
<span>By DDD</span>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/ms/faq/1796831605.html" title="Jadual Banner Pretty Derby Uma Musume (Julai 2025)" class="phpgenera_Details_mainR4_bottom_title">Jadual Banner Pretty Derby Uma Musume (Julai 2025)</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<span>3 minggu yang lalu</span>
<span>By Jack chen</span>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/ms/faq/1796828810.html" title="NYT 'Connections' Lifs for Rabu, 2 Julai: Petunjuk dan Jawapan untuk Permainan Hari Ini" class="phpgenera_Details_mainR4_bottom_title">NYT 'Connections' Lifs for Rabu, 2 Julai: Petunjuk dan Jawapan untuk Permainan Hari Ini</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<span>1 bulan yang lalu</span>
<span>By DDD</span>
</div>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR3_more">
<a href="http://ipnx.cn/ms/article.html">Tunjukkan Lagi</a>
</div>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR3">
<div id="wjcelcm34c" class="phpmain1_4R_readrank">
<div id="wjcelcm34c" 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="wjcelcm34c" class="phpgenera_Details_mainR3_bottom">
<div id="wjcelcm34c" class="phpmain_tab2_mids_top">
<a href="http://ipnx.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="wjcelcm34c" class="phpmain_tab2_mids_info">
<a href="http://ipnx.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="wjcelcm34c" class="phpmain_tab2_mids_top">
<a href="http://ipnx.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="wjcelcm34c" class="phpmain_tab2_mids_info">
<a href="http://ipnx.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="wjcelcm34c" class="phpmain_tab2_mids_top">
<a href="http://ipnx.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="wjcelcm34c" class="phpmain_tab2_mids_info">
<a href="http://ipnx.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="wjcelcm34c" class="phpmain_tab2_mids_top">
<a href="http://ipnx.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="wjcelcm34c" class="phpmain_tab2_mids_info">
<a href="http://ipnx.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="wjcelcm34c" class="phpmain_tab2_mids_top">
<a href="http://ipnx.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="wjcelcm34c" class="phpmain_tab2_mids_info">
<a href="http://ipnx.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="wjcelcm34c" class="phpgenera_Details_mainR3_more">
<a href="http://ipnx.cn/ms/ai">Tunjukkan Lagi</a>
</div>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4">
<div id="wjcelcm34c" class="phpmain1_4R_readrank">
<div id="wjcelcm34c" 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="wjcelcm34c" class="phpgenera_Details_mainR4_bottom">
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/ms/faq/laravel-tutori" title="Tutorial Laravel" class="phpgenera_Details_mainR4_bottom_title">Tutorial Laravel</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1597</span>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>29</span>
</div>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/ms/faq/php-tutorial" title="Tutorial PHP" class="phpgenera_Details_mainR4_bottom_title">Tutorial PHP</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1488</span>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>72</span>
</div>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/ms/faq/nytminicrosswordanswe" title="Jawapan silang kata NYT mini" class="phpgenera_Details_mainR4_bottom_title">Jawapan silang kata NYT mini</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>268</span>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>587</span>
</div>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/ms/faq/newyorktimesdailybrief" title="Sambungan NYT menunjukkan dan jawapan" class="phpgenera_Details_mainR4_bottom_title">Sambungan NYT menunjukkan dan jawapan</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>130</span>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>836</span>
</div>
</div>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR3_more">
<a href="http://ipnx.cn/ms/faq/zt">Tunjukkan Lagi</a>
</div>
</div>
</div>
</div>
</div>
<div id="wjcelcm34c" class="Article_Details_main2">
<div id="wjcelcm34c" class="phpgenera_Details_mainL4">
<div id="wjcelcm34c" 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="wjcelcm34c" class="phpgenera_Details_mainL4_info">
<div id="wjcelcm34c" class="phphistorical_Version2_mids">
<a href="http://ipnx.cn/ms/faq/1796831408.html" title="Tutorial CSS untuk membuat pemuatan dan animasi pemuatan" 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/431/639/175181807052041.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Tutorial CSS untuk membuat pemuatan dan animasi pemuatan" />
</a>
<a href="http://ipnx.cn/ms/faq/1796831408.html" title="Tutorial CSS untuk membuat pemuatan dan animasi pemuatan" class="phphistorical_Version2_mids_title">Tutorial CSS untuk membuat pemuatan dan animasi pemuatan</a>
<span id="wjcelcm34c" class="Articlelist_txts_time">Jul 07, 2025 am 12:07 AM</span>
<p class="Articlelist_txts_p">Terdapat tiga cara untuk membuat pemutar pemuatan CSS: 1. Gunakan pemutar asas sempadan untuk mencapai animasi mudah melalui HTML dan CSS; 2. Gunakan pemutar tersuai pelbagai mata untuk mencapai kesan lompat melalui masa kelewatan yang berlainan; 3. Tambahkan pemutar dalam butang dan beralih kelas melalui JavaScript untuk memaparkan status pemuatan. Setiap pendekatan menekankan pentingnya butiran reka bentuk seperti warna, saiz, kebolehcapaian dan pengoptimuman prestasi untuk meningkatkan pengalaman pengguna.</p>
</div>
<div id="wjcelcm34c" class="phphistorical_Version2_mids">
<a href="http://ipnx.cn/ms/faq/1796831743.html" title="Menangani masalah dan awalan keserasian penyemak imbas 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/175182386183257.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Menangani masalah dan awalan keserasian penyemak imbas CSS" />
</a>
<a href="http://ipnx.cn/ms/faq/1796831743.html" title="Menangani masalah dan awalan keserasian penyemak imbas CSS" class="phphistorical_Version2_mids_title">Menangani masalah dan awalan keserasian penyemak imbas CSS</a>
<span id="wjcelcm34c" class="Articlelist_txts_time">Jul 07, 2025 am 01:44 AM</span>
<p class="Articlelist_txts_p">Untuk menangani keserasian pelayar CSS dan isu awalan, anda perlu memahami perbezaan sokongan penyemak imbas dan menggunakan awalan vendor dengan munasabah. 1. Memahami masalah biasa seperti Flexbox dan sokongan grid, kedudukan: prestasi tidak sah, dan prestasi animasi adalah berbeza; 2. Periksa status sokongan ciri CANIUSE Ciri; 3. Gunakan dengan betul -webkit-, -moz-, -ms-, -o- dan awalan pengeluar lain; 4. Adalah disyorkan untuk menggunakan autoprefixer untuk menambah awalan secara automatik; 5. Pasang postcss dan konfigurasi penyemak imbas untuk menentukan penyemak imbas sasaran; 6. Secara automatik mengendalikan keserasian semasa pembinaan; 7. Ciri -ciri pengesanan moden boleh digunakan untuk projek lama; 8. Tidak perlu meneruskan konsistensi semua pelayar,</p>
</div>
<div id="wjcelcm34c" class="phphistorical_Version2_mids">
<a href="http://ipnx.cn/ms/faq/1796834918.html" title="Gaya yang dikunjungi pautan berbeza dengan 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/175217558128323.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Gaya yang dikunjungi pautan berbeza dengan CSS" />
</a>
<a href="http://ipnx.cn/ms/faq/1796834918.html" title="Gaya yang dikunjungi pautan berbeza dengan CSS" class="phphistorical_Version2_mids_title">Gaya yang dikunjungi pautan berbeza dengan CSS</a>
<span id="wjcelcm34c" class="Articlelist_txts_time">Jul 11, 2025 am 03:26 AM</span>
<p class="Articlelist_txts_p">Menetapkan gaya pautan yang telah anda lawati dapat meningkatkan pengalaman pengguna, terutama di laman web yang berintensifkan kandungan untuk membantu pengguna menavigasi lebih baik. 1. Gunakan CSS: Kelas pseudo yang dilawati untuk menentukan gaya pautan yang dikunjungi, seperti perubahan warna; 2. Perhatikan bahawa penyemak imbas hanya membenarkan pengubahsuaian beberapa atribut disebabkan oleh sekatan privasi; 3. Pemilihan warna harus diselaraskan dengan gaya keseluruhan untuk mengelakkan ketangkasan; 4. Terminal mudah alih mungkin tidak memaparkan kesan ini, dan disyorkan untuk menggabungkannya dengan arahan visual lain seperti logo tambahan ikon.</p>
</div>
<div id="wjcelcm34c" class="phphistorical_Version2_mids">
<a href="http://ipnx.cn/ms/faq/1796833145.html" title="Membuat bentuk tersuai dengan laluan klip 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/175199577133591.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Membuat bentuk tersuai dengan laluan klip CSS" />
</a>
<a href="http://ipnx.cn/ms/faq/1796833145.html" title="Membuat bentuk tersuai dengan laluan klip CSS" class="phphistorical_Version2_mids_title">Membuat bentuk tersuai dengan laluan klip CSS</a>
<span id="wjcelcm34c" class="Articlelist_txts_time">Jul 09, 2025 am 01:29 AM</span>
<p class="Articlelist_txts_p">Gunakan atribut clip-path CSS untuk menanam unsur-unsur ke dalam bentuk tersuai, seperti segitiga, takik bulat, poligon, dan lain-lain, tanpa bergantung pada gambar atau SVG. Kelebihannya termasuk: 1. Menyokong pelbagai bentuk asas seperti Circle, Ellipse, Polygon, dan lain -lain; 2. Pelarasan responsif dan boleh disesuaikan dengan terminal mudah alih; 3. Mudah untuk animasi, dan boleh digabungkan dengan hover atau javascript untuk mencapai kesan dinamik; 4. Ia tidak menjejaskan aliran susun atur, dan hanya tanaman kawasan paparan. Penggunaan umum adalah seperti laluan klip bulat: bulatan (50pxatcenter) dan triangle clip-path: polygon (50%0%, 100 0%, 0 0%). Notis</p>
</div>
<div id="wjcelcm34c" class="phphistorical_Version2_mids">
<a href="http://ipnx.cn/ms/faq/1796834914.html" title="Apakah perbezaan antara paparan: inline, paparan: blok, dan paparan: blok sebaris?" 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/175217550090568.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Apakah perbezaan antara paparan: inline, paparan: blok, dan paparan: blok sebaris?" />
</a>
<a href="http://ipnx.cn/ms/faq/1796834914.html" title="Apakah perbezaan antara paparan: inline, paparan: blok, dan paparan: blok sebaris?" class="phphistorical_Version2_mids_title">Apakah perbezaan antara paparan: inline, paparan: blok, dan paparan: blok sebaris?</a>
<span id="wjcelcm34c" class="Articlelist_txts_time">Jul 11, 2025 am 03:25 AM</span>
<p class="Articlelist_txts_p">Themaindifferencesbetweendisplay: inline, block, andinline-blockinhtml/cssarelayoutbehavior, spaceusage, andstylingcontrol.1.inlineelementsflowwithtext, notstartonNewlines, abaikanwidth/height, andonyapplylylylylylinddding/</p>
</div>
<div id="wjcelcm34c" class="phphistorical_Version2_mids">
<a href="http://ipnx.cn/ms/faq/1796829809.html" title="Apakah API Lukisan 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/175156657090761.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Apakah API Lukisan CSS?" />
</a>
<a href="http://ipnx.cn/ms/faq/1796829809.html" title="Apakah API Lukisan CSS?" class="phphistorical_Version2_mids_title">Apakah API Lukisan CSS?</a>
<span id="wjcelcm34c" class="Articlelist_txts_time">Jul 04, 2025 am 02:16 AM</span>
<p class="Articlelist_txts_p">ThecsspaintingapienablesdynamicimageGenerationincsingjavascript.1.DevelopersCreateApaintWorkLetClassWithapaint () method.2.theyRegisteritViaregisterPaint ()</p>
</div>
<div id="wjcelcm34c" class="phphistorical_Version2_mids">
<a href="http://ipnx.cn/ms/faq/1796837251.html" title="Bagaimana untuk membuat imej responsif menggunakan 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/175251305059116.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Bagaimana untuk membuat imej responsif menggunakan CSS?" />
</a>
<a href="http://ipnx.cn/ms/faq/1796837251.html" title="Bagaimana untuk membuat imej responsif menggunakan CSS?" class="phphistorical_Version2_mids_title">Bagaimana untuk membuat imej responsif menggunakan CSS?</a>
<span id="wjcelcm34c" class="Articlelist_txts_time">Jul 15, 2025 am 01:10 AM</span>
<p class="Articlelist_txts_p">Untuk membuat imej responsif menggunakan CSS, ia boleh dicapai terutamanya melalui kaedah berikut: 1. Gunakan maksimum lebar: 100% dan ketinggian: auto untuk membolehkan imej menyesuaikan diri dengan lebar kontena sambil mengekalkan perkadaran; 2. Gunakan atribut SRCSET dan saiz HTML dengan bijak memuatkan sumber imej yang disesuaikan dengan skrin yang berbeza; 3. Gunakan objek-sesuai dan kedudukan objek untuk mengawal penanaman imej dan paparan fokus. Bersama -sama, kaedah ini memastikan bahawa imej dibentangkan dengan jelas dan indah pada peranti yang berbeza.</p>
</div>
<div id="wjcelcm34c" class="phphistorical_Version2_mids">
<a href="http://ipnx.cn/ms/faq/1796829041.html" title="Apa itu CSS dan apa yang ada?" 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/175147853176701.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Apa itu CSS dan apa yang ada?" />
</a>
<a href="http://ipnx.cn/ms/faq/1796829041.html" title="Apa itu CSS dan apa yang ada?" class="phphistorical_Version2_mids_title">Apa itu CSS dan apa yang ada?</a>
<span id="wjcelcm34c" class="Articlelist_txts_time">Jul 03, 2025 am 01:48 AM</span>
<p class="Articlelist_txts_p">Css, orcascadingstylesheets, isthepartofwebdevelopmentthatthatcontrolsawebpage'svisualappeARance, termasuk colors, fon, jarak, andlayout</p>
</div>
</div>
<a href="http://ipnx.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="wjcelcm34c" class="footer">
<div id="wjcelcm34c" 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="wjcelcm34c" class="footermid">
<a href="http://ipnx.cn/ms/about/us.html">Tentang kita</a>
<a href="http://ipnx.cn/ms/about/disclaimer.html">Penafian</a>
<a href="http://ipnx.cn/ms/update/article_0_1.html">Sitemap</a>
</div>
<div id="wjcelcm34c" 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://ipnx.cn/" title="亚洲国产日韩欧美一区二区三区">亚洲国产日韩欧美一区二区三区</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="k18rv" class="pl_css_ganrao" style="display: none;"><var id="k18rv"></var><var id="k18rv"></var><acronym id="k18rv"><tbody id="k18rv"><nav id="k18rv"><tt id="k18rv"></tt></nav></tbody></acronym><dfn id="k18rv"></dfn><fieldset id="k18rv"></fieldset><th id="k18rv"><sup id="k18rv"><rt id="k18rv"></rt></sup></th><object id="k18rv"></object><wbr id="k18rv"><nav id="k18rv"><ul id="k18rv"><thead id="k18rv"></thead></ul></nav></wbr><meter id="k18rv"></meter><dfn id="k18rv"><nav id="k18rv"></nav></dfn><track id="k18rv"><sub id="k18rv"><ol id="k18rv"><form id="k18rv"></form></ol></sub></track><small id="k18rv"><mark id="k18rv"></mark></small><i id="k18rv"><tr id="k18rv"></tr></i><dl id="k18rv"></dl><nav id="k18rv"></nav><sup id="k18rv"></sup><thead id="k18rv"></thead><del id="k18rv"></del><s id="k18rv"><u id="k18rv"></u></s><abbr id="k18rv"><menuitem id="k18rv"><fieldset id="k18rv"></fieldset></menuitem></abbr><listing id="k18rv"><output id="k18rv"><pre id="k18rv"></pre></output></listing><td id="k18rv"><style id="k18rv"><kbd id="k18rv"><tbody id="k18rv"></tbody></kbd></style></td><source id="k18rv"><tbody id="k18rv"><ins id="k18rv"></ins></tbody></source><dl id="k18rv"></dl><pre id="k18rv"></pre><tr id="k18rv"><xmp id="k18rv"><cite id="k18rv"><track id="k18rv"></track></cite></xmp></tr><table id="k18rv"><font id="k18rv"></font></table><meter id="k18rv"><sup id="k18rv"><noframes id="k18rv"><blockquote id="k18rv"></blockquote></noframes></sup></meter><sub id="k18rv"><p id="k18rv"><li id="k18rv"><pre id="k18rv"></pre></li></p></sub><output id="k18rv"><pre id="k18rv"></pre></output><acronym id="k18rv"><acronym id="k18rv"><abbr id="k18rv"><samp id="k18rv"></samp></abbr></acronym></acronym><cite id="k18rv"><option id="k18rv"><form id="k18rv"></form></option></cite><acronym id="k18rv"></acronym><td id="k18rv"><label id="k18rv"></label></td><label id="k18rv"><dfn id="k18rv"><center id="k18rv"></center></dfn></label><fieldset id="k18rv"><nobr id="k18rv"><pre id="k18rv"></pre></nobr></fieldset><code id="k18rv"><rp id="k18rv"></rp></code><tbody id="k18rv"></tbody><dfn id="k18rv"></dfn><kbd id="k18rv"><legend id="k18rv"></legend></kbd><u id="k18rv"></u><s id="k18rv"></s><td id="k18rv"></td><sup id="k18rv"></sup><cite id="k18rv"><li id="k18rv"><pre id="k18rv"></pre></li></cite><table id="k18rv"><font id="k18rv"></font></table><address id="k18rv"></address><nobr id="k18rv"><ins id="k18rv"><acronym id="k18rv"></acronym></ins></nobr><pre id="k18rv"></pre><b id="k18rv"><wbr id="k18rv"><small id="k18rv"></small></wbr></b><ins id="k18rv"></ins><thead id="k18rv"></thead><option id="k18rv"></option><meter id="k18rv"><sup id="k18rv"><noframes id="k18rv"><blockquote id="k18rv"></blockquote></noframes></sup></meter><strike id="k18rv"></strike><legend id="k18rv"></legend><p id="k18rv"><th id="k18rv"></th></p><label id="k18rv"><ul id="k18rv"></ul></label><optgroup id="k18rv"></optgroup><dd id="k18rv"><object id="k18rv"><abbr id="k18rv"><big id="k18rv"></big></abbr></object></dd><em id="k18rv"></em><strong id="k18rv"><del id="k18rv"><strike id="k18rv"><bdo id="k18rv"></bdo></strike></del></strong><acronym id="k18rv"></acronym><strike id="k18rv"></strike><thead id="k18rv"><object id="k18rv"><abbr id="k18rv"></abbr></object></thead><acronym id="k18rv"></acronym><code id="k18rv"><video id="k18rv"><tr id="k18rv"></tr></video></code><mark id="k18rv"><dl id="k18rv"><table id="k18rv"><font id="k18rv"></font></table></dl></mark><dl id="k18rv"><noframes id="k18rv"><blockquote id="k18rv"><rt id="k18rv"></rt></blockquote></noframes></dl><sup id="k18rv"><ol id="k18rv"></ol></sup><listing id="k18rv"><sup id="k18rv"><rt id="k18rv"></rt></sup></listing><acronym id="k18rv"><wbr id="k18rv"></wbr></acronym><dd id="k18rv"></dd><button id="k18rv"></button><dfn id="k18rv"><tt id="k18rv"><td id="k18rv"><style id="k18rv"></style></td></tt></dfn><strong id="k18rv"><em id="k18rv"><dd id="k18rv"></dd></em></strong><dfn id="k18rv"><blockquote id="k18rv"><i id="k18rv"><video id="k18rv"></video></i></blockquote></dfn><track id="k18rv"><dfn id="k18rv"><input id="k18rv"></input></dfn></track><tbody id="k18rv"></tbody><menuitem id="k18rv"></menuitem><code id="k18rv"></code><pre id="k18rv"><nav id="k18rv"><ul id="k18rv"><thead id="k18rv"></thead></ul></nav></pre><li id="k18rv"></li><ins id="k18rv"></ins><tr id="k18rv"><legend id="k18rv"></legend></tr><cite id="k18rv"><menu id="k18rv"><bdo id="k18rv"><form id="k18rv"></form></bdo></menu></cite><legend id="k18rv"></legend><kbd id="k18rv"><acronym id="k18rv"></acronym></kbd><em id="k18rv"><span id="k18rv"><center id="k18rv"><dl id="k18rv"></dl></center></span></em><table id="k18rv"><input id="k18rv"></input></table><acronym id="k18rv"></acronym><var id="k18rv"></var><code id="k18rv"></code><form id="k18rv"></form><pre id="k18rv"></pre><strong id="k18rv"></strong><legend id="k18rv"><legend id="k18rv"><abbr id="k18rv"></abbr></legend></legend><blockquote id="k18rv"></blockquote><tbody id="k18rv"></tbody><listing id="k18rv"></listing><cite id="k18rv"><input id="k18rv"></input></cite><fieldset id="k18rv"></fieldset><option id="k18rv"><small id="k18rv"></small></option><kbd id="k18rv"><output id="k18rv"></output></kbd><dfn id="k18rv"><u id="k18rv"><label id="k18rv"></label></u></dfn><dl id="k18rv"><th id="k18rv"><s id="k18rv"></s></th></dl><thead id="k18rv"></thead><menu id="k18rv"></menu><ruby id="k18rv"></ruby><thead id="k18rv"></thead><progress id="k18rv"><strong id="k18rv"><button id="k18rv"><span id="k18rv"></span></button></strong></progress><bdo id="k18rv"><ruby id="k18rv"><span id="k18rv"><optgroup id="k18rv"></optgroup></span></ruby></bdo><pre id="k18rv"></pre><strong id="k18rv"></strong><tt id="k18rv"><td id="k18rv"><bdo id="k18rv"></bdo></td></tt><tr id="k18rv"><sup id="k18rv"><option id="k18rv"></option></sup></tr><option id="k18rv"><dd id="k18rv"><i id="k18rv"><tr id="k18rv"></tr></i></dd></option><pre id="k18rv"></pre><abbr id="k18rv"><big id="k18rv"><strong id="k18rv"><option id="k18rv"></option></strong></big></abbr><acronym id="k18rv"><dfn id="k18rv"></dfn></acronym><listing id="k18rv"><acronym id="k18rv"><wbr id="k18rv"><strong id="k18rv"></strong></wbr></acronym></listing><dd id="k18rv"><pre id="k18rv"><ul id="k18rv"><big id="k18rv"></big></ul></pre></dd><address id="k18rv"><s id="k18rv"><kbd id="k18rv"></kbd></s></address><nobr id="k18rv"></nobr><center id="k18rv"><dl id="k18rv"></dl></center><xmp id="k18rv"><legend id="k18rv"><track id="k18rv"></track></legend></xmp><listing id="k18rv"><sup id="k18rv"><rt id="k18rv"></rt></sup></listing><sup id="k18rv"><ol id="k18rv"></ol></sup><meter id="k18rv"><sup id="k18rv"><noframes id="k18rv"><thead id="k18rv"></thead></noframes></sup></meter><progress id="k18rv"><legend id="k18rv"><track id="k18rv"></track></legend></progress><source id="k18rv"><tbody id="k18rv"><ins id="k18rv"><acronym id="k18rv"></acronym></ins></tbody></source><noframes id="k18rv"></noframes><legend id="k18rv"><optgroup id="k18rv"><menuitem id="k18rv"></menuitem></optgroup></legend><blockquote id="k18rv"></blockquote><rt id="k18rv"><table id="k18rv"><delect id="k18rv"></delect></table></rt><em id="k18rv"></em><em id="k18rv"></em><center id="k18rv"><tfoot id="k18rv"><optgroup id="k18rv"></optgroup></tfoot></center><object id="k18rv"></object><p id="k18rv"><th id="k18rv"></th></p><dd id="k18rv"></dd><rt id="k18rv"></rt><acronym id="k18rv"></acronym><pre id="k18rv"><abbr id="k18rv"></abbr></pre><legend id="k18rv"></legend><sup id="k18rv"></sup><th id="k18rv"></th><optgroup id="k18rv"><del id="k18rv"><strike id="k18rv"><nobr id="k18rv"></nobr></strike></del></optgroup><track id="k18rv"><menuitem id="k18rv"><ol id="k18rv"></ol></menuitem></track></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