Emmet, yang sebelum ini dikenali sebagai Zen Coding, adalah salah satu alat yang terbaik yang anda perlukan untuk meningkatkan produktiviti anda semasa pengkodan HTML atau CSS. Ia berfungsi seperti penyiapan kod, tetapi ia lebih berkuasa dan menakjubkan. Ia dapat mengautomasikan HTML / CSS anda dari satu bentuk mudah ke yang kompleks.
Emmet menawarkan sokongan yang baik untuk editor teks atau IDE (Persekitaran Pembangunan Bersepadu) seperti Dreamweaver, Eclipse, Teks Sublime, TextMate, Expresso, Coda, Kurungan, Notepad ++, PHPStorm dan banyak lagi. Ia juga menyokong alat pengeditan dalam talian seperti JSFiddle, JSBin, CodePen, IceCoder dan Codio .
Cara kerja Emmet adalah dengan menaip kekunci papan kekunci anda apabila selesai menulis sintaks. Berikut adalah simbol Emmet yang paling biasa yang boleh anda gunakan. Untuk melihat mereka dalam tindakan, sila teruskan membaca.
Emmet - HTML Trik Terbaik
Anda akan kagum ketika menulis HTML dengan Emmet seperti yang saya lakukan. Seperti yang dinyatakan sebelum ini, Emmet dapat menyingkat HTML mudah untuk menjadi sangat kompleks. Dan mereka ditulis hanya pada satu baris kod. Secara lalai, jika anda menyingkat nama tag yang tidak diketahui, Emmet secara automatik akan menulis tag yang anda tulis. Lihat animasi di bawah untuk memahami dengan mudah.
1. Bersarang
Untuk sarang beberapa unsur anda hanya perlu menambah tanda yang lebih besar > selepas setiap tag yang anda mahu gunakan. Sebagai contoh, apabila saya ingin mempunyai header dengan nav, div, ul dan li di dalam saya hanya perlu menaip header>nav>div>ul>li dan kekunci tab hit.
2. Bersedialah
Jika anda tidak mahu sarang elemen anda, anda hanya boleh menggunakan tanda + ditambah diikuti dengan teg yang anda mahu tambah. Sebagai contoh, header+section+article+footer akan memberi tempat yang berbeza untuk header, section, article dan footer .
3. Mendaki
Apabila anda berada di dalam elemen kanak-kanak dan ingin mempunyai elemen lain di luar kanak-kanak itu, anda boleh dengan mudah memanjat satu elemen dengan tanda ^ . Jika anda menaipnya dua kali, maka anda akan memanjat elemen ganda dan sebagainya. Sebagai contoh, jika anda menaip header>div>h1>nav anda akan mempunyai elemen nav masih dalam h1. Untuk mengeluarkannya, hanya gantikan tanda > terakhir dengan ^ .
4. Tambah Kelas
Emmet juga dapat memasukkan nama kelas pilihan anda dalam tag. Tanda yang akan anda gunakan adalah sama seperti pemilih kelas dalam CSS yang merupakan titik . tanda. Sebagai contoh, jika saya ingin mempunyai kelas div Dengan kelas .container, h1 dengan .title dan nav dengan .fixed, maka saya hanya perlu menulis div.container>header>h1.title+nav.fixed .
Jika anda ingin mempunyai lebih daripada satu kelas di dalam, maka taip kelas tambahan anda selepas kelas pertama bersama dengan titik . tanda. Contoh: div.container.center akan menghasilkan .
5. Tambah ID
Selain kelas, anda juga boleh menambah ID di dalam tag anda dengan # tanda. Penggunaannya adalah sama seperti menambah kelas tetapi anda tidak boleh memasukkan ID berganda di dalamnya. Jika anda cuba berbuat demikian, Emmet hanya akan membaca ID terakhir yang anda taipkan.
6. Tambah Teks
Emmet bukan semata-mata seperti hanya menyingkat beberapa teg, anda juga boleh menambah baris teks di dalamnya. Untuk menambah beberapa teks, anda hanya perlu membungkus teks dengan tanda kurung {} tanda kerinting. Anda tidak perlu menambah tanda > lebih besar kerana teks akan ditambahkan secara automatik di dalam teg.
7. Tambah Atribut
Jika anda ingin menambah atribut lain selain daripada kelas dan id, letakkan atribut yang anda mahu tambah di dalam tanda kurung [] . Sebagai contoh, saya ingin mempunyai imej yang mempunyai sumber logo.png dengan alt logo, jadi saya hanya taip img[src="logo.png"] .
8. Pengkumpulan
Apabila anda ingin mempunyai elemen dengan pelbagai bersarang di dalam, maka pengelompokkannya dengan tanda () akan membantu anda mencapai ini dengan mudah. Sebagai contoh, saya ingin mempunyai bekas yang mempunyai tajuk dengan h1 dan nav dalam dan seksyen lain di luar tajuk, saya hanya akan menulis: .container>(header>h1+nav.fixed)+(section>.content+.sidebar) .
9. Pendaraban
Ciri ini mungkin menjadi salah satu kegemaran anda dari Emmet. Sebagaimana pendaraban, kita boleh membiak mana-mana elemen sebanyak yang kita mahu. Untuk menggunakannya, tambahkan tanda bintang * selepas elemen yang anda ingin kalikan dan tambahkan bilangan elemen. Sebagai contoh, saya ingin menulis lima item li di dalam ul, maka sintaks yang betul adalah ul>li*5 .
10. Penomboran automatik
Penomboran automatik akan membantu anda dengan mudah menulis nama yang berlainan dengan jumlah yang semakin meningkat. Sintaks yang betul untuk ciri ini adalah tanda dolar $ . Penomboran secara automatik digunakan dengan pendaraban yang terbaik. Sebagai contoh, saya ingin menambah item li sebelumnya saya dengan kelas dari item1 hingga item5 . Jadi, saya hanya perlu menambah nama kelas tambahan dengan tanda dolar: ul>li.item$*5 .
11. Lorem
Sekiranya anda digunakan untuk menulis beberapa teks dummy dengan membuka penjana lipsum seperti lipsum.com, dengan Emmet anda tidak perlu melakukannya lagi. Emmet juga menyokong penjana teks dummy dengan sintaks lipsum atau lipsum . Anda juga boleh menentukan berapa lama teks anda akan menjadi. Sebagai contoh, saya ingin mempunyai beberapa teks dengan panjang 10 perkataan, maka saya akan menaip lorem10 .
12. Dokumen Auto
Apabila anda memulakan projek baru, bukannya menulis struktur html secara manual atau menyalin paste dari sumber lain, Emmet boleh melakukannya untuk anda dengan lebih baik. Apa yang perlu anda lakukan ialah menaip exclamatory ! tanda, tekan tab dan keajaiban berlaku. Itu akan menghasilkan struktur dokumen HTML5 untuk anda, jika anda mahu menggunakan HTML4 sebaliknya, maka hanya ketik html:4t .
13. Pautan
Jika anda mempunyai favicon, rss atau fail CSS luaran yang anda ingin tambahkan pada dokumen anda, anda boleh menggunakan helah pautan untuk menulisnya dengan lebih cepat. Untuk memasukkan favicon, taip link:favicon maka ia akan menghasilkan pautan favicon dengan nama fail favicon.ico lalai di dalamnya. Dan untuk css, link:css akan menghasilkan link CSS dengan nama style.css gaya default. Dan RSS akan menjadi rss.xml sebagai nama lalai.
Anda boleh menggabungkannya dengan tanda + untuk menghasilkan sumber yang lebih pantas.
14. Anchor
Secara lalai, apabila anda menaip teg kemudian memukul tab, anda akan mendapat tag lengkap dengan sifat href di dalamnya. Tetapi anda boleh menambah // nilai jika anda menggabungkannya dengan pautan misalnya a:link . Dan jika anda ingin mempunyai pautan mel sebaliknya, gunakanlah a:mail .
15. Skipping Pintar
Petua HTML terakhir yang saya akan berikan kepada anda adalah ciri melompat pintar. Pada asasnya, anda tidak menulis nama tag apabila anda ingin mempunyai kelas atau id di dalamnya. Ini hanya terpakai pada beberapa keadaan tertentu.
Pertama, jika anda ingin mempunyai div dengan ID atau kelas di dalamnya, anda tidak perlu menulis nama tag, hanya menulis secara langsung id atau simbol kelas bersama dengan namanya.
Kedua, apabila anda berada di dalam tag ul, anda melangkau menulis tag li jika ia mempunyai kelas atau id.
Dan yang terakhir digunakan dalam tag table . Anda boleh melangkau penulisan tr dan td tag jika mereka mempunyai kelas atau id dan Emmet secara automatik akan menambahnya untuk anda.
Emmet - Trik CSS Terbaik
Selepas anda mempelajari beberapa helah HTML, kini sudah tiba masanya untuk CSS. Beberapa simbol biasa yang ditunjukkan dalam imej teratas tidak akan berfungsi dengan CSS. Mereka lebih besar > dan naik simbol. Sekiranya anda menggunakannya, mereka akan menghasilkan seperti simbol plus + . Jadi, mari kita pergi.
1. Lebar & Ketinggian
Mendefinisikan width dan height dengan Emmet sangat mudah. Anda hanya perlu menulis perkataan pertama diikuti saiz yang anda mahu tambah. Secara lalai, jika anda tidak menentukan unit, Emmet akan menghasilkannya dengan unit px . Simbol unit yang tersedia adalah % peratus dan em .
2. Teks
Terdapat beberapa simbol ciri teks mudah digunakan dan akan dihasilkan dengan nilai lalai. ta akan menjana text-align dengan nilai left, td akan menjadi text-decoration dengan none nilai dan tt akan menjadi text-transform dengan nilai uppercase .
3. Latar Belakang
Untuk menambah latar belakang, gunakan bg singkatan. Anda boleh menggabungkannya dengan bgi untuk mendapatkan background-image background-color bgr untuk background-color dan bgr untuk background-repeat . Anda juga boleh menulis bg+ untuk mendapatkan senarai penuh latar belakang harta.
4. Face Font
Tanda tambah bukan hanya berkaitan dengan latar belakang. Untuk @font-face, anda boleh menulis @f+ untuk senarai lengkap @font-face property. Jika anda mengetik @f tanpa tanda tambah, maka anda akan mendapat asas @font-face sahaja.
5. Pelbagai
Petua hebat yang lain ialah anda boleh menyingkat animation penulisan dengan anim teks. Sekiranya anda menambah tanda tolak, anda akan mendapat harta animasi dengan nilai penuh. Terdapat juga @kf teks yang akan menghasilkan senarai penuh @keyframe .
Kesimpulannya
Emmet adalah alat penjimatan masa yang sangat besar untuk menyelaraskan proses pembangunan anda. Sekiranya anda hanya mengenali Emmet, ia tidak terlalu lewat untuk mencuba sekarang. Kiat itu hanya beberapa ciri Emmet. Terdapat banyak simbol dan sintaks lain dalam Emmet, terutama untuk CSS. Hanya menuju ke emmet docs atau cheat sheet untuk meneruskan bacaan anda.
