Dalam kode sumber halaman sebelumnya, saya sering melihat pernyataan seperti itu:
<li>Some text here.<li>Some new text here.<li>You get the idea.Mungkin di masa lalu kita bisa mentolerir tag HTML yang tidak tertutup seperti itu, tetapi dalam standar hari ini, ini sangat tidak diinginkan dan harus dihindari 100%. Pastikan untuk memperhatikan menutup tag HTML Anda, jika tidak, ia tidak akan melewati verifikasi dan dapat menyebabkan beberapa masalah yang tidak terduga.
Yang terbaik adalah menggunakan formulir ini:
<ul><li>Some text here. </li><li>Some new text here. </li><li>You get the idea. </li></ul>Penulis telah bergabung dengan banyak forum CSS sebelumnya, di mana jika seorang pengguna mengalami masalah, kami akan menyarankan agar ia melakukan dua hal terlebih dahulu:
Biasanya ada empat jenis dokumen untuk dipilih :Doctype mendefinisikan bahwa sebelum tag HTML muncul, ia memberi tahu browser apakah halaman ini berisi html, xhtml, atau campuran keduanya, sehingga browser dapat dengan benar mengurai tag.
1. <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd>2. <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd>3. <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>4. <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>Selalu ada pendapat berbeda tentang jenis deklarasi jenis dokumen apa yang akan digunakan. Secara umum diyakini bahwa pernyataan yang paling ketat adalah pilihan terbaik, tetapi penelitian menunjukkan bahwa sebagian besar browser akan mengurai pernyataan tersebut dengan cara yang normal, sehingga banyak orang memilih untuk menggunakan standar HTML4.01. Intinya memilih pernyataan adalah bahwa itu tidak benar -benar cocok untuk Anda, jadi Anda harus mempertimbangkan secara komprehensif memilih pernyataan yang sesuai dengan proyek Anda.
Ketika Anda sibuk menulis kode, Anda mungkin sering menambahkan sedikit kode CSS tertanam dengan santai atau malas, seperti ini:
<p style=color: red;>武林网</p>Ini terlihat nyaman dan tidak memiliki masalah, tetapi akan menyebabkan masalah dalam kode Anda.
Ketika Anda mulai menulis kode, yang terbaik adalah mulai menambahkan kode gaya setelah struktur konten selesai.
Metode pengkodean ini seperti memerangi gerilya, yang merupakan pendekatan peniru. -Chris Coyier
Pendekatan yang lebih baik adalah mendefinisikan gaya P ini dalam file stylesheet:
someElement > p {color: red;}Secara teori, Anda dapat memperkenalkan stylesheet CSS di mana saja, tetapi spesifikasi HTML merekomendasikan memperkenalkannya di tag kepala halaman web, yang dapat mempercepat rendering halaman.
Selama proses pengembangan Yahoo, kami menemukan bahwa memperkenalkan lembaran gaya ke dalam tag kepala akan mempercepat pemuatan halaman web.
Karena ini memungkinkan halaman untuk diterjemahkan langkah demi langkah. - Tim Yslow
<head><title>My Favorites Kinds of Corn</title><link rel=stylesheet type=text/css media=screen href=path/to/file.css /><link rel=stylesheet type=text/css media=screen href=path/to/anotherFile.css /></head>Salah satu prinsip yang perlu diingat adalah membuat halaman hadir di depan pengguna secepat mungkin. Saat skrip dimuat, halaman berhenti memuat sampai skrip dimuat sepenuhnya. Jadi itu akan membuang lebih banyak waktu untuk pengguna.
Jika file JS Anda hanya ingin mengimplementasikan fungsi tertentu (seperti acara klik tombol), maka Anda dapat dengan aman memperkenalkannya di bagian bawah tubuh, yang jelas merupakan cara terbaik untuk melakukannya.
Misalnya : <p>And now you know my favorite kinds of corn. </p><script type=text/javascript src=path/to/file.js></script><script type=text/javascript src=path/to/anotherFile.js></script></body></html>Bertahun -tahun yang lalu, ada cara untuk secara langsung menambahkan kode JS ke tag HTML. Terutama sangat umum di album foto sederhana. Pada dasarnya, acara OnClick dilampirkan pada tag, dan efeknya setara dengan beberapa kode JS. Tidak perlu membahas terlalu banyak, metode ini tidak boleh digunakan, kode harus ditransfer ke file JS eksternal dan kemudian AddEventListener / attachEvent ke pendengar waktu. Atau gunakan kerangka kerja seperti jQuery, yang membutuhkan penggunaan metode clock.
$('a#moreCornInfoLink').click(function() {alert('Want to learn more about corn?');});Banyak orang tidak terlalu memahami pentingnya dan nilai verifikasi standar. Penulis menganalisis masalah ini secara rinci di blog. Singkatnya, verifikasi standar adalah untuk Anda, bukan untuk Anda menimbulkan masalah.
Jika Anda baru saja mulai bekerja dalam produksi halaman web, sangat disarankan agar Anda mengunduh bilah alat pengembangan web ini dan menggunakan verifikasi standar HTML dan verifikasi standar CSS kapan saja selama proses pengkodean. Jika Anda berpikir CSS adalah bahasa yang sangat mudah dipelajari, itu akan membuat Anda mati. Kode rumit Anda akan membuat halaman Anda penuh dengan celah dan masalah terus -menerus. Cara yang baik adalah memverifikasi, memverifikasi, dan kemudian memverifikasi.
Firebug adalah plug-in terbaik yang layak untuk pengembangan web. Ini tidak hanya men -debug JavaScript, tetapi juga memungkinkan Anda untuk secara intuitif memahami properti dan lokasi tag halaman. Tak perlu dikatakan, unduh!
Menurut pengamatan penulis, sebagian besar pengguna hanya menggunakan 20% fungsi Firebug, yang benar -benar sia -sia. Anda mungkin juga menghabiskan beberapa jam mempelajari alat ini dalam sistem, dan saya percaya itu akan membuat Anda dua kali lipat hasil dengan setengah usaha.
Tutorial Firebug :Secara teori, Anda dapat menulis tanda dengan santai seperti ini:
<DIV><P>Here's an interesting fact about corn. </P></DIV>Yang terbaik adalah tidak menulis dengan cara ini. Tidak ada gunanya memasukkan lebih banyak surat dan itu akan membuat kode jelek, yang bagus:
<div><p>Here's an interesting fact about corn. </p></div>Penulis merekomendasikan agar Anda menggunakan keenam tag ini di halaman web Anda. Meskipun kebanyakan orang hanya akan menggunakan empat yang pertama, H yang paling banyak digunakan akan memiliki banyak manfaat, seperti ramah perangkat, ramah mesin pencari, dll. Anda mungkin juga mengganti tag P Anda dengan H6.
Hari ini, penulis memprakarsai diskusi di Twitter: Haruskah H1 didefinisikan pada logo atau pada judul artikel, 80% orang memilih yang terakhir.
Tentu saja, cara menggunakannya tergantung pada kebutuhan Anda, tetapi saya sarankan bahwa ketika Anda mengatur blog, Anda harus mengatur judul artikel sebagai H1, yang sangat bermanfaat untuk Optimalisasi Mesin Pencari (SEO).
Selama beberapa tahun terakhir, tim Yahoo telah melakukan banyak pekerjaan hebat dalam pengembangan front-end. Belum lama ini, mereka merilis ekstensi Firebug yang disebut Yslow, yang akan menganalisis <halaman web Anda dan mengembalikan transkrip, yang dengan hati -hati menganalisis semua aspek halaman web ini dan mengusulkan area yang membutuhkan perbaikan. Meskipun agak keras, itu pasti akan membantu Anda. Sangat disarankan - Yslow!
Biasanya situs web memiliki menu navigasi, Anda dapat mendefinisikannya dengan cara ini:
<div id=nav><a href=#>Home </a><a href=#>About </a><a href=#>Contact </a></div>Jika Anda ingin menulis kode yang indah, sebaiknya tidak menggunakan metode ini.
Mengapa menggunakan UL untuk menu navigasi tata letak?
-Karena Ul lahir untuk mempersiapkan daftar definisi
Yang terbaik adalah mendefinisikannya seperti ini:
<ul id=nav><li><a href=#>Home</a></li><li><a href=#>About</a></li><li><a href=#>Contact</a></li></ul>IE selalu menjadi mimpi buruk bagi pengembang front-end!
Jika stylesheet CSS Anda pada dasarnya diselesaikan, Anda dapat membuat stylesheet terpisah untuk IE, dan kemudian ini hanya akan berlaku untuk IE:
<!--[if lt IE 7]><link rel=stylesheet type=text/css media=screen href=path/to/ie.css /><![endif]-->Arti dari kode -kode ini adalah: jika browser pengguna IE6 atau di bawah, maka kode ini akan berlaku. Jika Anda ingin menyertakan IE7, ubah [jika IE 7] menjadi [jika LTE IE 7].
Apakah Anda pengguna Windows atau Mac, ada banyak editor yang sangat baik untuk Anda pilih:
Melihat kembali halaman pertama yang sebagian besar dari kita tulis, kita pasti akan menemukan divitas div yang serius. Biasanya naluri pemula adalah membungkus paragraf dengan div dan kemudian menempatkan lebih banyak div untuk mengendalikan posisi. - Sebenarnya, ini adalah pendekatan yang tidak efisien dan berbahaya.
Setelah menulis halaman web, Anda harus memeriksanya berkali -kali untuk meminimalkan jumlah elemen.
Jika Anda dapat menggunakan tata letak UL, jangan gunakan DIV untuk tata letak daftar.
Sama seperti kunci untuk menulis artikel adalah mengurangi, mengurangi, dan mengurangi, menulis halaman juga harus mengikuti standar ini.
Manfaat menambahkan atribut alt ke gambar sudah jelas - ini memungkinkan pengguna yang menonaktifkan gambar atau menggunakan perangkat khusus untuk mendapatkan akses ke informasi pangeran Anda dan juga ramah pada mesin pencari gambar.
Firefox tidak mendukung Atribut Alt Gambar yang Menampilkan, Anda dapat menambahkan Atribut Judul:
<img src=cornImage.jpg alt=武林网title=武林网/>Saya sering belajar dan bekerja sampai pagi tanpa menyadarinya, dan saya pikir ini adalah situasi yang baik.
Milikku ~ ha! Waktu (saat-saat ah-ha, merujuk pada saat-saat ketika cahaya langit atau pencerahan yang tiba-tiba) biasanya terjadi larut malam. Sebagai contoh, saya benar -benar memahami konsep penutupan dalam JavaScript, dalam hal ini. Jika Anda belum mengalami momen yang indah seperti itu, cobalah sekarang!
Tidak ada yang dapat membantu Anda belajar HTML lebih cepat daripada meniru idola Anda. Pada awalnya, kita semua harus bersedia membuat mesin fotokopi dan kemudian perlahan -lahan mengembangkan gaya kita sendiri. Teliti kode halaman situs web favorit Anda dan lihat bagaimana mereka mengimplementasikannya. Ini adalah satu -satunya cara bagi para ahli, Anda harus mencobanya. Catatan: Belajar saja dan tiru gaya pengkodean mereka, bukan salin dan salin!
Perhatikan berbagai efek javascript keren di internet. Jika Anda tampaknya menggunakan plug-in, Anda dapat menemukan nama plug-in berdasarkan nama file di tag kepala dalam kode sumbernya, dan kemudian Anda dapat belajar menggunakannya untuk Anda sendiri.
Ini sangat diperlukan saat Anda membuat situs web untuk perusahaan lain. Apakah Anda tidak menggunakan tag blockquote sendiri? Maka pengguna dapat menggunakannya, bukankah Anda menggunakan diri Anda sendiri? Pengguna mungkin juga. Luangkan waktu untuk membuat halaman yang menampilkan gaya elemen seperti UL, OL, P, H1-H6, Blockquotes, dll., Dan periksa apakah ada kelalaian.
Catatan Penerjemah: Judul bahasa Inggris asli menggunakan Twitter
Ada banyak API yang dapat ditambahkan ke halaman web secara gratis sekarang, dan alat -alat ini sangat kuat. Ini dapat membantu Anda menerapkan banyak fungsi pintar, dan yang lebih penting, ini dapat membantu Anda mempromosikan situs web.
Photoshop adalah alat penting bagi insinyur front-end. Jika Anda sudah mahir dalam HTML dan CSS, Anda mungkin juga mempelajari lebih lanjut tentang Photoshop.
Meskipun beberapa tag HTML jarang digunakan, Anda harus tetap memahaminya. Misalnya, ABBR, mengutip, dll., Anda harus mempelajarinya jika terjadi keadaan darurat.
Ada banyak sumber daya yang sangat baik di internet, dan ada banyak ahli yang tersembunyi di masyarakat. Di sini Anda dapat belajar sendiri dan bertanya kepada pengembang yang berpengalaman.
Reset CSS juga Reset CSS, yang berarti mengatur ulang beberapa gaya tag HTML, atau gaya default.
Ada juga perdebatan sengit tentang apakah reset CSS harus digunakan, dan penulis merekomendasikannya. Pertama -tama Anda dapat memilih beberapa reset CSS dewasa, dan kemudian perlahan berevolusi menjadi sesuatu yang cocok untuk Anda.
Sederhananya, Anda harus menyelaraskan elemen web Anda sebanyak mungkin. Anda dapat mengamati situs web yang Anda sukai, dan logo, judul, grafik, dan paragrafnya jelas sangat benar. Kalau tidak, itu akan tampak kacau dan tidak profesional.
Sekarang setelah Anda menguasai HTML, CSS, dan pengetahuan Photoshop, Anda juga perlu belajar cara mengubah PSD menjadi gambar dan latar belakang di halaman web. Berikut dua tutorial yang bagus:
Ada banyak kerangka kerja yang sangat baik untuk JavaScript dan CSS, tetapi jika Anda seorang pemula, jangan terburu -buru menggunakannya. Jika Anda tidak dapat menguasai CSS dengan terampil, menggunakan kerangka kerja akan membingungkan sistem pengetahuan Anda.
Kerangka kerja CSS dirancang untuk pengembang yang terampil, yang akan menghemat banyak waktu.