Saya telah melakukan pengembangan front-end selama hampir 3 tahun. Hari ini saya ingin berbicara dengan Anda tentang beberapa pengalaman pribadi saya dalam pengembangan front-end WEB (tentu saja itu semua adalah pemahaman pribadi saya. Mohon sertakan dan koreksi saya jika ada. adalah apa pun yang saya katakan tidak pantas atau salah). Mari saya mulai dengan standar WEB.
Apa standar WEB?
Haha, katanya standar WEB, tapi di sini saya terutama merangkum beberapa pengalaman XHTML1.1 dan CSS2.1. Karena WEB mencakup begitu banyak konten, "standar WEB" adalah nama umum untuk serangkaian standar, termasuk HTML4.0, XHTML1.1, CSS2.1, XML1.0, RSS2.0, ECMAScript1.1, dan DOM1 dan sebagainya. Jadi di sini saya ingin menunjukkan kepada Anda bahwa standar WEB bukanlah yang kami sebut DIV+CSS.
Baru saja disebutkan di atas - DIV+CSS, haha, biar saya jelaskan di sini, ini sebenarnya salah. Istilah akurat DIV+CSS (pemahaman pribadi) adalah: menggunakan XHTML1.1 dalam standar WEB yang direkomendasikan oleh W3C dikombinasikan dengan style sheet CSS2.0 untuk membuat halaman. DIV harus mengacu pada tag XHTML, sedangkan tampilan CSS mengacu pada Lembar gaya CSS.
Manfaat pengembangan menggunakan standar WEB
Jadi mengapa W3C merekomendasikan metode produksi halaman seperti itu? Mari kita lihat sekilas keuntungan menggunakan pengembangan standar WEB (pemahaman pribadi) dibandingkan tata letak TABLE sebelumnya?
1. Menghemat biaya pengoperasian dan menghemat uang!
Haha, apakah Anda tertarik dengan sesuatu yang dapat membantu Anda menghemat uang? Tentu saja saya sangat tertarik. Lihat bagaimana metode produksi standar WEB kami tercapai?
Dengan menggunakan standar WEB untuk memproduksi, kita dapat mencapai pemisahan ekspresi yang sangat formal. Kami menggunakan XHTML untuk mengekspresikan (data) dan CSS untuk mengontrol bentuk (presentasi elemen halaman). Pada halaman yang ditulis dengan baik, kode XHTML pada dasarnya berisi data yang ingin dilihat pengguna, serta hal-hal dekoratif lainnya, semuanya dikontrol oleh CSS kami. Dengan cara ini, ukuran halaman (XHTML) kita akan sangat berkurang, sehingga biaya bandwidth Anda akan berkurang. Bagaimana cara menguranginya? Bayangkan beranda YAHOO berukuran 1K, dan 1.000.000 orang mengunjunginya bersama-sama berapa banyak bandwidth yang dihemat? Dan bandwidth bisa dimanfaatkan lebih maksimal.
CSS kami mengontrol gaya semua elemen halaman. Sekarang jika Anda ingin mengubah gaya situs web secara keseluruhan, Anda hanya perlu meluangkan beberapa menit untuk memodifikasi file CSS, dan Anda dapat melakukannya dengan mudah. Biaya perawatan juga turun, menghemat banyak uang bukan? Selain itu, Anda akan membuka halaman ini lebih cepat. Sebuah halaman yang membuat Anda menunggu setengah menit. Kecuali jika informasi di dalamnya sangat berguna bagi Anda, pada dasarnya kami tidak punya banyak waktu untuk menunggu.
2. Lebih ramah pengguna dan berpeluang mendapatkan lebih banyak pengguna.
Sekarang mari kita bicara tentang keramahan pengguna. Pertama saya ingin mengklasifikasikan pengguna kami ke dalam kategori.
Kategori 1: Pengguna biasa (setiap orang yang mengunjungi situs web kami);
Kategori 2: Mesin pencari;
Halaman yang dikembangkan menggunakan standar WEB memiliki struktur yang jelas, ukuran halaman kecil, dan kompatibilitas browser yang baik. Ketika pengguna biasa mengaksesnya, halaman terbuka dengan cepat, dan browser mana pun yang digunakan pengguna, mereka dapat mengakses (menampilkan) halaman tersebut secara normal, dan struktur halaman jelas, serta data yang mereka cari dapat dengan mudah dijelajahi.
Untuk mesin pencari, halaman bagus yang dikembangkan menggunakan standar WEB telah dioptimalkan SEO. Sangat ramah untuk dikunjungi dan mudah untuk memahami di mana judul (tag H1~H6) di halaman Anda dan di mana Judulnya tag), dimana isi yang ingin ditekankan dalam paragraf (tag kuat), dll, dapat dengan mudah dianalisis. Seperti yang kita ketahui bersama, situs dengan SEO yang baik mempunyai peluang lebih besar untuk terindeks oleh mesin pencari. Hal ini juga berarti website Anda akan lebih banyak dikunjungi oleh pengguna awam sehingga membawa lebih banyak pengguna ke situs Anda.
Seseorang dapat membantu kita menghemat banyak uang dan meningkatkan efisiensi kerja. Pada saat yang sama, ini dapat meningkatkan kecepatan penelusuran halaman, ramah pengguna, dan bahkan dapat memberi Anda lebih banyak pengguna tanpa mengeluarkan uang untuk publisitas. Apakah Anda pikir Anda akan menggunakannya? Haha, ini juga alasan mengapa W3C kami merekomendasikan penggunaan standar WEB untuk situs terbuka. Teknologi ini juga telah diakui oleh pengguna kami, jadi Anda sekarang perlu mempelajari standar WEB. ^-^!
Haha, saya sudah selesai mereview kursus dasar, dan sekarang saya secara resmi mulai berbicara tentang skill XHTML dan CSS.
Tata letak yang masuk akal
Beberapa teman akan mulai bertanya, mengapa kita mulai berbicara tentang tata letak yang masuk akal dari awal? Haha, kami telah menyebutkan beberapa poin pengetahuan sebelumnya - "struktur yang jelas, optimasi SEO, ukuran halaman kecil, dan kode XHTML pada dasarnya berisi semua kebutuhan pengguna Lihat di datanya”. Hal-hal ini adalah hasil dari tata letak kami yang masuk akal. Dan saya pribadi merasa bahwa segala sesuatu yang kami hasilkan menggunakan standar WEB dimulai dari titik pengetahuan ini, jadi saya akan membicarakan topik ini terlebih dahulu.
Lalu semua orang akan mulai bertanya, halaman seperti apa yang dianggap tata letak yang masuk akal? Ini adalah pertanyaan yang bagus. Ini juga salah satu pertanyaan yang paling sering diajukan ketika kita pertama kali mulai belajar menggunakan standar WEB. Saya sering merasa terganggu dengan pertanyaan ini .
Sebelum kita mulai berbicara tentang elemen-elemen yang harus dicapai oleh halaman yang ditata dengan baik, akan lebih intuitif bagi kita untuk menggunakan contoh untuk menjelaskannya. Mari kita lihat gambar ini terlebih dahulu:
http://www.yaohaixiao.com/samples/myblog/index.htm
Ya, ini adalah halaman detail artikel, tidak ada tata letak kolom kiri dan kanan, tetapi yang ingin saya fokuskan di sini adalah tata letak yang masuk akal. Saya akan memperkenalkan elemen mengambang secara detail di artikel selanjutnya. Oke, kembali ke topik tadi, semua orang sudah melihat halaman ini.