Emmet, जिसे पहले Zen Coding के नाम से जाना जाता था, HTML या CSS को कोड करते समय आपको अपनी उत्पादकता बढ़ाने के लिए सबसे अच्छा उपकरण होना चाहिए। यह कोड पूरा होने की तरह ही काम करता है, लेकिन यह अधिक शक्तिशाली और आश्चर्यजनक है। यह आपके HTML / CSS को सरल रूप से जटिल से स्वचालित करने में सक्षम है।
एम्मेट टेक्स्ट एडिटर या आईडीई (इंटीग्रेटेड डेवलपमेंट एनवायरनमेंट) जैसे ड्रीमवाइवर, एक्लिप्स, सबलेम टेक्स्ट, टेक्स्टमैट, एक्सप्रेसो, कोडा, ब्रैकेट्स, नोटपैड ++, पीएचपीएसटॉर्म और कई अन्य के लिए अच्छा समर्थन प्रदान करता है। यह JSFiddle, JSBin, CodePen, IceCoder और Codio जैसे ऑनलाइन संपादन टूल का भी समर्थन करता है।
सिंटैक्स लिखते समय आपकी टैब कीबोर्ड कुंजी टाइप करके एम्मेट का काम होता है। निम्नलिखित सबसे आम प्रतीक हैं जिनका आप उपयोग कर सकते हैं। उन्हें कार्रवाई में देखने के लिए, कृपया पढ़ना जारी रखें।
एम्मेट - एचटीएमएल बेस्ट ट्रिक्स
जब आप एममैट के साथ HTML लिखेंगे तो आप हैरान रह जाएंगे। जैसा कि पहले कहा गया है, एम्मेट एक साधारण HTML को बहुत जटिल में संक्षिप्त करने में सक्षम है। और वे केवल कोड की एक पंक्ति पर लिखे गए हैं। डिफ़ॉल्ट रूप से, यदि आप अज्ञात टैग नाम संक्षिप्त करते हैं, तो एम्मेट स्वचालित रूप से आपके द्वारा लिखे गए टैग को लिख देगा। इसे समझने के लिए नीचे दिए गए एनीमेशन देखें।
1. घोंसला बनाना
कुछ तत्वों को घोंसले में लाने के लिए आपको बस बड़े संकेत जोड़ने की आवश्यकता है > प्रत्येक टैग के बाद आप उपयोग करना चाहते हैं। उदाहरण के लिए, जब मुझे nav, div, ul और li साथ header आवश्यकता होती है, तो मुझे केवल header>nav>div>ul>li और हिट टैब कुंजी टाइप करनी होती है।
2. सहोदर
यदि आप अपने तत्वों को घोंसला नहीं बनाना चाहते हैं, तो आप केवल उन टैग्स के बाद प्लस + चिन्ह का उपयोग कर सकते हैं जिन्हें आप जोड़ना चाहते हैं। उदाहरण के लिए, header+section+article+footer header, section, article और footer article लिए एक अलग स्थान देगा।
3. ऊपर चढ़ो
जब आप एक बच्चे के तत्व के अंदर होते हैं और उस बच्चे के बाहर एक और तत्व रखना चाहते हैं, तो आप आसानी से ^ साइन के साथ एक तत्व पर चढ़ सकते हैं। यदि आप इसे दो बार टाइप करते हैं, तो आप दोहरे तत्व और इसी तरह चढ़ेंगे। उदाहरण के लिए, यदि आप header>div>h1>nav टाइप करते हैं, तो आपके पास नेवी तत्व अभी भी h1 के अंदर ही होगा। इसे बाहर निकालने के लिए, बस अंतिम > साइन को ^ बदलें।
4. कक्षा जोड़ें
एम्मेट टैग के भीतर अपने पसंदीदा वर्ग के नाम को भी शामिल करने में सक्षम है। आप जिस चिन्ह का उपयोग करेंगे, वह सीएसएस में वर्ग चयनकर्ता की तरह ही है जो एक डॉट है . संकेत। उदाहरण के लिए, यदि मुझे .container वर्ग, h1 साथ .title और nav .fixed साथ .fixed, तो मुझे div.container>header>h1.title+nav.fixed ।
अगर आप अंदर एक से अधिक क्लास करना चाहते हैं, तो डॉट के साथ-साथ फर्स्ट क्लास के बाद अपनी अतिरिक्त क्लास टाइप करें . संकेत। उदाहरण: div.container.center का उत्पादन करेगा ।
5. आईडी जोड़ें
क्लास के अलावा, आप # टैग के साथ अपने टैग के अंदर एक आईडी भी जोड़ सकते हैं। उपयोग कक्षा को जोड़ने जैसा है लेकिन आप अंदर डबल आईडी नहीं लिख सकते हैं। यदि आप ऐसा करने की कोशिश करते हैं, तो एम्मेट केवल आपके द्वारा टाइप की गई अंतिम आईडी पढ़ेगा।
6. टेक्स्ट जोड़ें
एम्मेट सिर्फ इतना सरल नहीं है कि सिर्फ कुछ टैग संक्षिप्त करें, आप अपने अंदर टेक्स्ट की लाइन भी जोड़ सकते हैं। कुछ पाठ जोड़ने के लिए, आपको बस कर्ली ब्रैकेट {} चिह्न के साथ पाठ को लपेटना होगा। आपको एक बड़ा > चिन्ह जोड़ने की आवश्यकता नहीं है क्योंकि टैग के अंदर पाठ अपने आप जुड़ जाएगा।
7. गुण जोड़ें
यदि आप कक्षा और आईडी के अलावा एक और विशेषता जोड़ना चाहते हैं, तो केवल वह विशेषता रखें जिसे आप ब्रैकेट [] साइन के अंदर जोड़ना चाहते हैं। उदाहरण के लिए, मैं एक ऐसी छवि बनाना चाहता हूं, जिसमें logo.png स्रोत हो, जिसके साथ मैं पूरी तरह से img[src="logo.png"] टाइप करूं।
8. समूह बनाना
जब आप अंदर कई नेस्टेड के साथ एक तत्व रखना चाहते हैं, तो उन्हें () साइन के साथ समूहित करना आपको आसानी से प्राप्त करने में मदद करेगा। उदाहरण के लिए, मैं एक ऐसा कंटेनर रखना चाहता हूं जिसमें हेडर और नेव के अंदर हेडर हो और हेडर के बाहर एक और सेक्शन, मैं बस लिखूंगा: .container>(header>h1+nav.fixed)+(section>.content+.sidebar) ।
9. गुणन
यह सुविधा Emmet से आपकी पसंदीदा में से एक बन सकती है। गुणा के साथ, हम किसी भी तत्व को जितना चाहें उतना गुणा कर सकते हैं। इसका उपयोग करने के लिए बस एक स्टार जोड़ें * साइन इन करें तत्व के बाद आप गुणा करना चाहते हैं और तत्व की संख्या जोड़ सकते हैं। उदाहरण के लिए, मैं उल के अंदर पांच ली आइटम लिखना चाहता हूं, फिर सही वाक्यविन्यास ul>li*5 ।
10. स्वचालित नंबर
स्वचालित नंबरिंग आपको आसानी से बढ़ती संख्या के साथ अलग नाम लिखने में मदद करेगी। इस सुविधा के लिए सही सिंटैक्स एक डॉलर $ चिह्न है। गुणन के साथ ऑटो नंबरिंग का सबसे अच्छा उपयोग किया जाता है। उदाहरण के लिए, मैं अपने पिछले li आइटम को आइटम 1 से आइटम 5 तक एक वर्ग के साथ जोड़ना चाहता item5 । इसलिए, मुझे डॉलर के चिह्न के साथ अतिरिक्त वर्ग का नाम जोड़ना होगा: ul>li.item$*5 ।
11. लोरम
यदि आपने कुछ डमी टेक्स्ट लिखकर लिपसम जेनरेटर जैसे लिप्स डॉट कॉम को खोलकर लिखा था, तो एम्मेट के साथ आपको अब ऐसा करने की जरूरत नहीं है। एम्मेट lipsum टेक्स्ट जेनरेटर को भी lipsum या lipsum सिंटैक्स के साथ lipsum करता है। आप यह भी निर्दिष्ट कर सकते हैं कि आपका पाठ कब तक बन जाएगा। उदाहरण के लिए, मैं 10 शब्द लंबे समय के साथ कुछ पाठ करना चाहता हूं, फिर मैं lorem10 टाइप lorem10 ।
12. ऑटो दस्तावेज़
जब आप एक नई परियोजना शुरू कर रहे हैं, तो एचटीएमएल संरचना को मैन्युअल रूप से लिखने या अन्य संसाधनों से चिपकाने की नकल करने के बजाय, एम्मेट इसे आपके लिए बेहतर कर सकता है। आपको बस एक विस्मयादिबोधक टाइप करना है ! साइन, हिट टैब और जादू होता है। यह आपके लिए HTML5 दस्तावेज़ संरचना उत्पन्न करेगा, यदि आप इसके बजाय HTML4 का उपयोग करना चाहते हैं, तो बस html:4t लिखें।
13. लिंक
यदि आपके पास एक फ़ेविकॉन, आरएसएस या बाहरी सीएसएस फ़ाइल है जिसे आप अपने दस्तावेज़ में जोड़ना चाहते हैं, तो आप उन्हें तेजी से लिखने के लिए लिंक ट्रिक्स का उपयोग कर सकते हैं। एक फ़ेविकॉन शामिल करने के लिए, link:favicon टाइप link:favicon तब यह आपको फ़ेविकॉन लिंक उत्पन्न करेगा जिसमें डिफ़ॉल्ट फ़ेविकॉन.इको फ़ाइल अंदर होगी। और सीएसएस के लिए, link:css आपको डिफ़ॉल्ट स्टाइल के साथ एक सीएसएस लिंक उत्पन्न करेगा। अंदर शैली नाम। और RSS डिफ़ॉल्ट नाम के रूप में rss.xml होगा।
आप एक तेज संसाधन बनाने के लिए उन्हें प्लस + साइन के साथ जोड़ सकते हैं।
14. लंगर
डिफ़ॉल्ट रूप से, जब आप a टैग टाइप करते हैं तो टैब हिट करते हैं, तो आपको href विशेषता के साथ एक पूर्ण टैग मिलेगा। यदि आप इसे उदाहरण के लिए लिंक के साथ जोड़ते हैं तो आप // मान जोड़ सकते हैं a:link । और अगर आप इसके बजाय एक मेल लिंक करना चाहते हैं, तो a:mail उपयोग करें।
15. स्मार्ट स्किपिंग
आखिरी HTML ट्रिक्स जो मैं आपको दूंगा वह है स्मार्ट स्किपिंग फीचर। मूल रूप से, आप टैग नाम तब नहीं लिखते हैं जब आप उसके अंदर कक्षा या आईडी रखना चाहते हैं। यह केवल कुछ निश्चित शर्त पर लागू होता है।
सबसे पहले, अगर आप आईडी या कक्षा के साथ एक div चाहते हैं, तो आपको टैग नाम लिखने की आवश्यकता नहीं है, बस सीधे उसके नाम के साथ आईडी या वर्ग चिह्न लिखें।
दूसरा, जब आप ul टैग के अंदर होते हैं, तो आप li टैग लिखना छोड़ देते हैं यदि इसमें कोई क्लास या आईडी है।
और आखिरी को table टैग के भीतर लागू किया जाता है। यदि आपके पास कक्षा या आईडी है तो आप tr और td टैग लिखना छोड़ सकते हैं और Emmet अपने आप उन्हें आपके लिए जोड़ देगा।
एम्मेट - बेस्ट सीएसएस ट्रिक्स
जब आप HTML के कुछ गुर सीख लेते हैं, तो अब CSS का समय आ गया है। शीर्ष छवि में दिखाए गए कुछ सामान्य प्रतीक सीएसएस के साथ काम नहीं करेंगे। वे बड़े होते हैं > और ऊपर चढ़ते हैं ^ प्रतीक। यदि आप उनका उपयोग करते हैं, तो वे प्लस + प्रतीक की तरह ही उत्पादन करेंगे। तो, चलो चलें।
1. चौड़ाई और ऊँचाई
एम्मेट के साथ width और height को परिभाषित करना बहुत आसान है। आपको बस उनमें से पहला शब्द लिखना है, उसके बाद जिस आकार को आप जोड़ना चाहते हैं। डिफ़ॉल्ट रूप से, यदि आप इकाइयों को निर्दिष्ट नहीं करते हैं, तो Emmet उन्हें px इकाई के साथ उत्पन्न करेगा। उपलब्ध इकाई प्रतीक प्रतिशत और em ।
2. पाठ
पाठ संपत्ति प्रतीक का उपयोग करने के लिए कुछ आसान हैं और डिफ़ॉल्ट मान के साथ उत्पन्न होंगे। ta left वैल्यू के साथ text-align उत्पन्न करेगा, td text-decoration जिसमें none वैल्यू none होगी और tt uppercase मान के साथ text-transform हो जाएगा।
3. पृष्ठभूमि
पृष्ठभूमि जोड़ने के लिए, बस bg संक्षिप्त नाम का उपयोग करें। आप इसे background-image पाने के लिए bgi साथ जोड़ सकते हैं, background-color लिए bgc और background-repeat लिए bgr । आप पृष्ठभूमि की संपत्ति की पूरी सूची प्राप्त करने के लिए bg+ भी लिख सकते हैं।
4. फॉन्ट फेस
प्लस चिन्ह केवल पृष्ठभूमि के लिए लागू नहीं है। @font-face, आप @font-face प्रॉपर्टी की पूरी सूची के लिए @f+ लिख सकते हैं। यदि आप बिना प्लस चिह्न के @font-face टाइप @f, तो आपको केवल एक मूल @font-face मिलेगा।
5. विविध
अन्य बेहतरीन ट्रिक्स हैं आप animation टेक्स्ट के साथ animation लिखना संक्षिप्त कर सकते हैं। यदि आप एक ऋण - चिह्न जोड़ते हैं, तो आपको पूरे मूल्य के साथ एनीमेशन संपत्ति मिलेगी। @kf टेक्स्ट भी है जो @keyframe की पूरी सूची तैयार करेगा।
निष्कर्ष
Emmet आपकी विकास प्रक्रिया को कारगर बनाने के लिए एक बहुत बड़ा समय बचाने वाला उपकरण है। यदि आप सिर्फ एम्मेट को जानते हैं, तो अब इसे आज़माने में देर नहीं लगेगी। ये ट्रिक सिर्फ Emmet के कुछ फीचर्स हैं। विशेष रूप से CSS के लिए Emmet में अन्य प्रतीक और सिंटैक्स के टन हैं। अपने रीडिंग को आगे बढ़ाने के लिए बस एम्स डॉक्स या चीट शीट पर जाएं।
