डेवलपर टूल · HTML WYSIWYG एडिटर
एंटर बनाम शिफ्ट+एंटर: एडिटर <p>, <div> और <br> के बीच कैसे चयन करते हैं
· यह काम किस प्रकार करता है
HTML संतोषप्रद पाठ संपादन
ब्राउज़र एडिटर के पीछे पैराग्राफ मॉडल की व्याख्या करता है: क्यों Enter एक <p> या एक <div> बना सकता है, क्यों Shift+Enter <br> सम्मिलित करता है, और यह आपकी रिक्ति कैसे तय करता है।
CMS में रिक्ति गलत क्यों है लेकिन एडिटर में ठीक है - क्लासिक डबल-गैप या नो-गैप समस्या के साथ खुलता है
जब टुकड़ा CMS में प्रवेश करता है तो एडिटर में आरामदायक दिखाई देने वाली रिक्ति बदल सकती है क्योंकि ब्लॉक गंतव्य स्टाइलशीट से मार्जिन प्राप्त करते हैं। बीआर द्वारा अलग किए गए दो पैराग्राफ और दो पंक्तियाँ संरचनात्मक रूप से भिन्न हैं, भले ही एक पूर्वावलोकन उन्हें समान ऊर्ध्वाधर दूरी देता हो।
ToolAcre स्रोत में उस अंतर को उजागर करता है। इसमें कॉपी किए गए मार्जिन या इनलाइन शैलियाँ नहीं हैं, इसलिए पैराग्राफ़ रिक्ति पूर्वावलोकन रैपर या बाद के गंतव्य CSS से आती है। लेखकों को अर्थ के आधार पर संरचना का चयन करना चाहिए और एक अस्थायी दृश्य सही दिखने तक खाली कीस्ट्रोक जोड़ने के बजाय क्रमबद्ध तत्वों को सत्यापित करना चाहिए।
ब्लॉक बनाम इनलाइन ब्रेक - बताते हैं कि <p> और <div> अपने स्वयं के मार्जिन वाले ब्लॉक हैं, जबकि <br> एक ब्लॉक के अंदर एक लाइन ब्रेक है
पैराग्राफ और डिव ब्लॉक कंटेनर हैं; br दूसरे प्रवाह के अंदर एक शून्य लाइन-ब्रेक तत्व है। यह एडिटर p और br को अनुमति देता है लेकिन div को नहीं। चिपकाए गए div को खोल दिया जाता है, उसके शब्दों को संरक्षित किया जाता है और आवरण को हटाते समय वंशजों को अनुमति दी जाती है। सेनिटाइज़्ड br `<br />` के रूप में उत्सर्जित होता है।
एक डाक पता जानबूझकर लाइन ब्रेक के साथ एक पैराग्राफ हो सकता है क्योंकि इसकी लाइनें एक इकाई बनाती हैं। दो स्वतंत्र विचारों को दो अनुच्छेदों के रूप में बेहतर ढंग से दर्शाया गया है। गंतव्य लगातार पी मार्जिन को स्टाइल कर सकता है, जबकि ऊर्ध्वाधर स्पेसर के रूप में उपयोग किए जाने वाले बार-बार बीआर तत्व सीधे सामग्री में उपस्थिति को एन्कोड करते हैं।
यहां Enter जो करता है वह ब्राउज़र-निर्भर है और ToolAcre द्वारा कॉन्फ़िगर नहीं किया गया है
ToolAcre डिफ़ॉल्ट पैराग्राफ सेपरेटर कमांड या इंटरसेप्ट इंटरसेप्ट सेट नहीं करता है। कंटेंटएडिटेबल ब्राउज़र कुंजी को संभालता है, और इनपुट श्रोता बाद में आउटपुट को रीफ्रेश करता है। रिपॉजिटरी सीमाएं चेतावनी देती हैं कि इंजन का व्यवहार अलग-अलग होता है, इसलिए यह दावा करना कि Enter हमेशा p बनाता है, हमेशा div बनाता है या एक संस्करण-विशिष्ट नियम का पालन करता है, संगतता मार्गदर्शन का आविष्कार होगा।
इसके बाद स्वच्छता कदम जो भी क्रमांकन आता है उसे सीमित कर देता है। ब्राउज़र द्वारा निर्मित div div के रूप में जीवित नहीं रह सकता, हालाँकि इसका पाठ बना रह सकता है। इससे अंतिम स्रोत फिर से जीवित मध्यवर्ती वृक्ष से भिन्न हो सकता है। इसलिए स्रोत मोड स्पष्ट पी तत्वों को स्थापित करने का स्थान है जब स्थिर पैराग्राफ अर्थ मायने रखता है।
सॉफ़्ट ब्रेक को स्रोत में लिखा जा सकता है, लेकिन कोई Shift+Enter अनुबंध लागू नहीं किया गया है
टूलबार में कोई "सॉफ्ट ब्रेक" बटन नहीं है और कोड Shift+Enter पंजीकृत नहीं करता है। एक ब्राउज़र उस इशारे को लागू कर सकता है, लेकिन यह आलेख इसके आउटपुट का वादा नहीं करता है। स्रोत मोड एक अनुमत ब्र को बनाए रख सकता है, जो दृश्य परिणाम का निरीक्षण करने के बाद पैराग्राफ के भीतर एक ब्रेक को व्यक्त करने का एक नियतात्मक तरीका प्रदान करता है।
कीबोर्ड का व्यवहार चयन और संपादन स्थिति पर भी निर्भर करता है जिसका मॉड्यूल परीक्षण नहीं करता है। अपने काम में शामिल सटीक ब्राउज़र का उपयोग करें, फिर स्रोत पढ़ें। यदि इशारा एक अवांछित ब्लॉक उत्पन्न करता है, तो किसी अन्य एडिटर ढांचे से कॉपी किए गए शॉर्टकट विवरण पर भरोसा करने के बजाय स्पष्ट रूप से टुकड़े को फिर से लिखें।
व्यावहारिक उदाहरण: एक पता बनाएं और नोट करें, फिर भविष्यवाणी करने के बजाय निरीक्षण करें
किसी पते के लिए, प्राप्तकर्ता, सड़क और इलाके के बीच बीआर के साथ एक पी बनाने के लिए स्रोत मोड का उपयोग करें। संक्षिप्त नोट के लिए, दो पी तत्व बनाएं। विज़ुअल मोड पर लौटें, जहां सम्मिलन से पहले स्रोत को साफ किया जाता है, और यह माने बिना पूर्वावलोकन की तुलना करें कि इसका मार्जिन अंतिम वेबसाइट से मेल खाता है।
फिर HTML को कॉपी करें और डाउनलोड HTML से अलग से टुकड़े का निरीक्षण करें। कॉपी किए गए परिणाम में सेनिटाइज़्ड बॉडी मार्कअप शामिल है; डाउनलोड में ToolAcre के पूर्वावलोकन CSS के साथ एक संपूर्ण दस्तावेज़ शामिल है। यह अंतर समझा सकता है कि डाउनलोड की गई फ़ाइल को खोलना कॉपी किए गए टुकड़े को विभिन्न शैलियों वाले सिस्टम में चिपकाने की तुलना में अधिक संपूर्ण क्यों दिखता है।
खाली पैराग्राफ और गैर-ब्रेकिंग रिक्त स्थान केवल तभी बनाए रखे जाते हैं जब पुनर्लेखक द्वारा समर्थित हो
एक खाली अनुमत अनुच्छेद रह सकता है क्योंकि पी स्वीकृत है और कोई भी नियम खाली ब्लॉकों को नहीं हटाता है। एक ज्ञात गैर-ब्रेकिंग-स्पेस इकाई इसका डिकोडेड चरित्र बन सकती है और बाद में स्थानीय इकाई कार्यान्वयन के अनुसार बच सकती है; कोड विशेष रूप से स्पेसर पैराग्राफ को लक्षित करने वाला क्लीनअप नियम प्रदान नहीं करता है।
इसलिए, "अभी सेनिटाइज़ करें" कोई लेआउट क्लीनर नहीं है। यह असमर्थित मार्कअप और विशेषताओं को हटा देता है, टैग और प्रारूप स्रोत को संतुलित करता है, लेकिन यह संरचनात्मक रूप से अनुमत शून्यता को बनाए रख सकता है। स्रोत या विज़ुअल मोड में जानबूझकर रिक्ति कलाकृतियों को हटाएं, और गंतव्य CSS को रिक्त ब्लॉक जमा करने के बजाय सामान्य मार्जिन प्रदान करने दें।
इसमें क्या शामिल नहीं है - CSS मार्जिन-संक्षिप्त नियम या एडिटर-फ्रेमवर्क कॉन्फ़िगरेशन
यह आलेख मार्जिन कोलैप्सिंग, फ्रेमवर्क सेपरेटर कॉन्फ़िगरेशन, ब्राउज़र-दर-ब्राउज़र कीबोर्ड मैट्रिसेस या ईमेल स्पेसिंग क्वर्की को कवर नहीं करता है। यह यह भी दावा नहीं करता कि पूर्वावलोकन CMS को पुन: प्रस्तुत करता है। लाइट सैंडबॉक्स अपने स्वयं के बॉडी फॉन्ट, लाइन ऊंचाई, पैडिंग और ब्रेक व्यवहार का उपयोग करता है।
न ही यह फ़िल्टर किए गए आउटपुट को सार्वभौमिक रूप से सुरक्षित प्रकाशन मानता है। दुर्भावनापूर्ण सबमिशन के लिए गंतव्य के लिए उपयुक्त सर्वर-साइड सैनिटाइजेशन की आवश्यकता होती है, भले ही डिस्पोजेबल स्थानीय पूर्वावलोकन निष्क्रिय रहे। अनुच्छेद शब्दार्थ, ब्राउज़र संपादन व्यवहार और सुरक्षा नीति तीन अलग-अलग चिंताएँ हैं जिन्हें एक "सही दिखता है" परीक्षण में संक्षिप्त नहीं किया जाना चाहिए।
टेकअवे: वह विराम चुनें जो अर्थ से मेल खाता हो - मॉडल का सारांश देता है और कैसे ToolAcre का HTML WYSIWYG एडिटर आपको यह जांचने देता है कि प्रत्येक कुंजी कौन सा तत्व उत्पन्न करती है
वह ब्रेक चुनें जो सामग्री से मेल खाता हो, लेकिन कीप्रेस की भविष्यवाणी करने के बजाय सत्यापित करें। ToolAcre सीधे स्रोत तक पहुंच देता है, p और br को स्वीकार करता है, div को खोलता है और एक सैंडबॉक्स्ड रेंडरिंग दिखाता है। वे तथ्य Enter या Shift+Enter के बारे में कोई वादा किए बिना दोहराए जाने योग्य वर्कफ़्लो का समर्थन करते हैं।
एक छोटा पता और नोट बनाएं, दो बार मोड स्विच करें, और सुनिश्चित करें कि इच्छित संरचना स्वच्छता से बची रहे। यदि कोई गंतव्य आश्चर्यजनक अंतराल लागू करता है, तो अधिक खाली HTML डालने के बजाय उसके CSS का निरीक्षण करें। स्थिर अर्थ एक अलग पूर्वावलोकन में ट्यून किए गए रिक्ति से बेहतर यात्रा करता है।