Apakah struktur tiga peringkat bahagian hadapan web?

Struktur tiga lapisan bahagian hadapan web ialah: 1. Lapisan struktur, yang dicipta oleh bahasa penanda​​​seperti HTML atau XHTML Ia digunakan untuk menyimpan semua kandungan yang pelanggan ingin membaca atau melihat, dan boleh memasukkan teks dan imej , hiperpautan dan multimedia (video, audio, dsb.). 2. Lapisan pembentangan, yang dicipta oleh CSS, mengandungi arahan gaya tentang cara memaparkan dokumen web dalam pelayar web. 3. Lapisan tingkah laku, bertanggungjawab untuk menjawab soalan "bagaimana kandungan harus bertindak balas terhadap peristiwa" dan menjadikan tapak web interaktif, membenarkan halaman bertindak balas kepada tindakan pengguna atau berubah berdasarkan satu set syarat.

Persekitaran pengendalian tutorial ini: sistem Windows 7, komputer Dell G3.

Web front-end ialah halaman web yang dipaparkan kepada pengguna, iaitu bahagian front-end tapak web.

Idea pembangunan bahagian hadapan Web adalah untuk membahagikan halaman web kepada tiga peringkat, iaitu: lapisan struktur, lapisan persembahan (gaya), dan lapisan tingkah laku.

• Lapisan struktur (lapisan struktur) dicipta oleh bahasa penanda seperti HTML atau XHTML. Teg, perkataan yang muncul dalam kurungan sudut, menerangkan maksud semantik kandungan web, tetapi teg ini tidak mengandungi sebarang maklumat tentang cara memaparkan kandungan tersebut. Sebagai contoh, teg P menyatakan semantik sedemikian: "Ini ialah perenggan teks." CSS menjawab persoalan bagaimana untuk memaparkan kandungan yang berkaitan.

• Lapisan tingkah laku (lapisan tingkah laku) bertanggungjawab untuk menjawab soalan "bagaimana kandungan harus bertindak balas terhadap peristiwa." Ini adalah kawasan yang dikuasai oleh bahasa Javascript dan DOM.

• Lapisan pembentangan dan gelagat halaman web sentiasa wujud, walaupun kami tidak memberikan sebarang arahan khusus secara eksplisit. Pada ketika ini, penyemak imbas web akan menggunakan gaya lalai dan pengendali acara lalainya pada lapisan struktur halaman web. Sebagai contoh, penyemak imbas akan meninggalkan jidar halaman apabila memaparkan elemen "segmen teks" Sesetengah penyemak imbas akan muncul kotak gesaan yang menunjukkan nilai atribut tajuk elemen apabila pengguna menuding tetikus ke atas elemen, dsb.
  HTML: Lapisan Struktur

Lapisan struktur atau kandungan halaman web ialah kod HTML asas halaman tersebut. Sama seperti rangka kerja rumah membina asas yang kukuh untuk seluruh rumah, asas HTML yang kukuh mewujudkan platform di mana tapak web boleh dibuat.

Lapisan struktur digunakan untuk menyimpan semua kandungan yang ingin dibaca atau dilihat oleh pelanggan. Struktur HTML boleh mengandungi teks dan imej, dan ia termasuk hiperpautan yang digunakan pelawat untuk menavigasi tapak web. Ini dikodkan dalam HTML5 yang mematuhi piawaian dan boleh termasuk teks, imej dan multimedia (video, audio, dsb.). takrif. Fail ini mengandungi arahan penggayaan untuk cara memaparkan dokumen dalam pelayar web. Lapisan gaya biasanya termasuk pertanyaan media yang mengubah paparan tapak berdasarkan saiz skrin dan peranti. Semua gaya visual untuk tapak web anda hendaklah dalam helaian gaya luaran. Anda boleh menggunakan berbilang helaian gaya, tetapi perlu diingat bahawa setiap fail CSS memerlukan permintaan HTTP untuk mengambilnya, yang menjejaskan prestasi tapak.

JavaScript: Lapisan Tingkah Laku

Lapisan tingkah laku menjadikan tapak web interaktif, membenarkan halaman bertindak balas kepada tindakan pengguna atau perubahan berdasarkan satu set syarat. JavaScript ialah bahasa yang paling biasa digunakan untuk lapisan tingkah laku, tetapi CGI dan PHP juga kerap digunakan. Apabila pembangun merujuk kepada lapisan tingkah laku, kebanyakannya merujuk kepada lapisan yang diaktifkan terus dalam penyemak imbas web. Anda boleh menggunakan lapisan ini untuk berinteraksi secara langsung dengan DOM (Document Object Model). Menulis HTML yang sah dalam lapisan kandungan adalah sangat penting untuk interaksi DOM dalam lapisan tingkah laku. Apabila membina lapisan tingkah laku, fail skrip luaran harus digunakan sama seperti CSS untuk mengoptimumkan kelajuan dan prestasi.

Meluaskan pengetahuan: faedah melapis

1 Sumber yang dikongsi:

Apabila anda Bila anda menulis fail CSS atau JavaScript luaran, fail itu boleh digunakan oleh mana-mana halaman di tapak anda. Jika anda perlu membuat perubahan pada fail ini, mungkin mengemas kini beberapa gaya tipografi di tapak anda, setiap halaman yang menggunakan helaian gaya ini akan mendapat perubahan. Tidak perlu mengedit setiap halaman tapak web anda secara individu, yang boleh menjadi tugas yang susah payah untuk tapak web yang besar.

2. Kelajuan muat turun yang lebih pantas:

Selepas skrip atau helaian gaya dimuat turun oleh pelanggan buat kali pertama, penyemak imbas web akan cachenya. Oleh kerana sumber yang dikongsi ini kini disertakan dalam cache penyemak imbas, halaman lain yang diminta dalam penyemak imbas dimuatkan dengan lebih cepat, meningkatkan kelajuan dan prestasi halaman keseluruhan.

3. Pasukan berbilang orang:

Jika anda mempunyai beberapa orang yang bekerja di tapak web pada masa yang sama, anda boleh menggunakan sistem yang membenarkan fail disemak masuk dan keluar untuk memastikan Semua orang menggunakan versi terkini. Lebih sukar jika gaya dan tingkah laku dijalin dengan dokumentasi struktur.

4. Pengoptimuman enjin carian:

Tapak web yang memisahkan gaya dan struktur dengan jelas berkemungkinan berprestasi lebih baik dengan enjin carian kerana mereka boleh merangkak kandungan dan memahami halaman dengan lebih berkesan tanpa terperangkap dalam gaya visual dan maklumat tingkah laku.

5 Kebolehaksesan:

Helaian gaya luaran dan fail skrip lebih mudah diakses oleh orang dan penyemak imbas. Perisian seperti pembaca skrin boleh bekerja dengan lebih mudah dengan kandungan dalam lapisan struktur tanpa perlu berurusan dengan gaya yang tidak boleh digunakan.

6. Keserasian Ke Belakang:

Tapak yang direka bentuk dengan lapisan pembangunan berasingan lebih berkemungkinan serasi ke belakang kerana gaya CSS tertentu tidak boleh digunakan atau JavaScript dilumpuhkan penyemak imbas dan peranti masih boleh melihat HTML. Anda kemudiannya boleh mempertingkatkan tapak web anda secara beransur-ansur menggunakan ciri penyemak imbas yang menyokongnya.

(Mempelajari perkongsian video: Bermula dengan bahagian hadapan web)

Atas ialah kandungan terperinci Apakah struktur tiga peringkat bahagian hadapan web?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!