5 एचटीएमएल सुविधाएँ जिनके बारे में आप नहीं जानते होंगे

के लिए भाषा इतनी सरल और सीखने में आसान है, HTML निश्चित रूप से प्रदान करता है उपयोगी सुविधाओं की अप्रत्याशित राशि, जिनमें से कई के बारे में हम में से अधिकांश भी नहीं जानते हैं। कई बार साथ रहना मुश्किल होता है और आप सोच सकते हैं कि सब “आप नहीं जानते होंगे” लेख सबसे हाल के टैग के बारे में होना चाहिए, HTML में कुछ भी हैं काफी सहायक विशेषताएं जो पहले से ही थोड़ी देर के लिए आसपास हैं.

वर्तनी जाँचने से लेकर कीबोर्ड शॉर्टकट जोड़ने तक, इस लेख में, मैं आपको दिखाता हूँ पाँच कम-व्यापक रूप से ज्ञात HTML सुविधाएँ.

1. स्पेलिंग की जाँच करें जैसे आप लिखते हैं

अक्षर जाँच लें गुण उपयोगकर्ता एक तत्व टाइप कर रहा है, जबकि वर्तनी की जाँच करने के लिए ब्राउज़रों को संकेत देता है। यह विशेषता वैश्विक है, जिसका अर्थ है, आप इसे किसी भी HTML टैग में जोड़ सकते हैं.

हालांकि, यह केवल उन तत्वों पर काम करता है जो कर सकते हैं पाठ इनपुट लें. यह वैश्विक होना उपयोगी है क्योंकि यह हो सकता है बाल तत्वों द्वारा विरासत में मिला. उदाहरण के लिए, इसे एक में जोड़ें

टैग और इसके सभी बाल तत्व जो पाठ इनपुट लेते हैं, इस विशेषता को प्राप्त करेंगे.

वर्तनी जाँच कार्य करता है सभी पाठ प्रकार: टेक्स्ट, खोज, यूआरएल, तथा ईमेल. यह भी काम करता है </code>, और संपादन योग्य तत्व</strong> (तत्वों के साथ <code>contenteditable</code> विशेषता).</p> <p>इसका मान एक खाली स्ट्रिंग हो सकता है, <code>सच</code>, या <code>असत्य</code>. खाली स्ट्रिंग और <code>सच</code> मर्जी <strong>वर्तनी परीक्षक सक्षम करें</strong>.</p> <pre name="code"> <input type="text" spellcheck="true" placeholder="Type something here"> <p contenteditable="true" spellcheck="true"> यहाँ कुछ टाइप करें </p> </pre> <p>उपरोक्त कोड में, <strong>दोनों <code><div></code> तथा <code><p></code> टैग वर्तनी जाँचेंगे</strong> जब कोई उपयोगकर्ता उनमें टाइप कर रहा हो.</p> <p>यदि उपयोगकर्ता के पास है <strong>अक्षम वर्तनी जाँच</strong> ब्राउज़र सेटिंग्स में वर्तनी की जाँच नहीं की जाएगी, <strong>भले ही <code>अक्षर जाँच लें</code> जोड़ा गया</strong>.</p> <h4>2. समझौता सीडीएन संसाधनों से सुरक्षित रहें</h4> <p>यह स्क्रिप्ट और स्टाइलशीट फ़ाइलों जैसे संसाधनों की मेजबानी के लिए बहुत आम है <abbr>CDN</abbr>रों। लेकिन, यदि <strong>सीडीएन से समझौता हो जाता है</strong>, इसलिए उन होस्ट की गई फ़ाइलों को करें, और यदि आपकी वेबसाइट पर किसी भी प्रकार के संसाधन से छेड़छाड़ की जाती है, तो यह आपकी साइट है!</p> <p>मोज़िला डेवलपर नेटवर्क समस्या के बारे में क्या कहता है देखें:</p> <blockquote><p><q>... CDN का उपयोग करना एक जोखिम के साथ भी आता है, अगर कोई हमलावर CDN पर नियंत्रण हासिल कर लेता है, तो हमलावर CDN की फ़ाइलों में मनमानी दुर्भावनापूर्ण सामग्री को इंजेक्ट कर सकता है (या पूरी तरह से फ़ाइलों को बदल सकता है) और इस प्रकार संभावित रूप से सभी साइटों को लाने के लिए भी कर सकता है: उस सीडीएन से.</q></p></blockquote> <p>इसे रोकने के लिए, <strong>सबस्रोइट इंटीग्रिटी (SRI)</strong> W3C द्वारा 2014 की शुरुआत में पेश किया गया था। यह योजना <strong>हैश मान की तुलना करता है</strong> (इनपुट में हैश फ़ंक्शन को लागू करने का परिणाम) <strong>एक संसाधन का</strong> इसे मान्य करने के लिए.</p> <p>कहो, पर एक जावास्क्रिप्ट फ़ाइल है <code>https://example.com/example.js</code>. पहले तुम <strong>हैश फ़ंक्शन लागू करें</strong> उस फ़ाइल के लिए, फिर <strong>उत्पादित हैश मान जोड़ें</strong> को <strong><code>अखंडता</code> गुण</strong> का <strong><code><script></code> tag</strong> that imports <code>example.js</code> to your website.</p> <pre name="code"> <script src="https://example.com/example.js" integrity="sha384-Li9vy3DqF8tnTXuiaAJuML3ky+er10rcgNR/VqsVpcw+ThHmYcwiB1pbOxEbzJr7" crossorigin="anonymous"></script> </pre> <p>अब, जब भी उपरोक्त कोड वाले आपकी साइट के वेब पेज को लोड करना होगा <code>example.js</code>, ब्राउज़र <strong>पहले हैश फ़ंक्शन लागू करता है</strong>, और भार और चलाता है <code>example.js</code> केवल जब इसकी <strong>हैश वैल्यू मैच करता है <code>अखंडता</code> मूल्य</strong>.</p> <p>अगर <strong><code>example.com</code> समझौता किया गया था</strong> तथा <strong><code>example.js</code> दखल दिया गया था</strong> तब के हैश मान के साथ <code>example.js</code> मैच नहीं होगा <strong><code>अखंडता</code> मूल्य</strong>. </p> <p>अधिकांश सामान्य CDN पहले से ही प्रदान करते हैं <strong>एसआरआई <code>अखंडता</code> मान</strong>, लेकिन आप यहां एक भी उत्पन्न कर सकते हैं.</p> <h4>3. सबमिट बटन में फॉर्म लक्ष्य को ओवरराइड करें</h4> <p>आप सबसे अधिक संभावना से परिचित हैं <strong><code>लक्ष्य</code> गुण</strong>, वह जो फैसला करता है <strong>जहाँ एक हाइपरलिंक संसाधन खोला जाता है</strong>, उदाहरण के लिए एक ही पृष्ठ पर या एक नए टैब में। आप यह भी जान सकते हैं कि वही <code>लक्ष्य</code> में प्रयुक्त विशेषता <code><form></code> टैग तय करता है <strong>जहां फॉर्म सबमिट करने से प्रतिक्रिया दिखाई जाती है</strong>.</p> <p>HTML5 के शुरुआती ड्राफ्ट में से एक में, <code>formtarget</code> चार अन्य फार्म जमा करने की विशेषताओं के साथ परिभाषित किया गया था: <strong><code>formaction</code>, <code>formenctype</code>, <code>formmethod</code></strong>, तथा <strong><code>formnovalidate</code></strong>. </p> <p>ये विशेषताएँ हो सकती हैं <strong>सबमिट बटन के साथ प्रयोग किया जाता है</strong>, और वे अपनी संबंधित विशेषताओं को ओवरराइड करते हैं <code><form></code> टैग जो बटन से संबंधित है.</p> <p>इसलिए, जब एक बटन का उपयोग करके एक फॉर्म सबमिट किया जाता है जिसमें ए <code>formtarget</code> विशेषता, <strong>प्रतिक्रिया के अनुसार दिखाया गया है <code>formtarget</code> मूल्य</strong>, के स्थान पर <code>लक्ष्य</code> का मूल्य <code><form></code>.</p> <pre name="code"> <form action="/save" target="_self" > <input type="submit" name="save" /> <input type="submit" name="print" formaction="/print" formtarget="_blank" /> </form> </pre> <p>उपरोक्त कोड में, जब दूसरा सबमिट बटन का उपयोग करके फॉर्म जमा किया जाता है (<code>छाप</code> ), प्रतिक्रिया होगी <strong>एक नए ब्राउज़िंग संदर्भ में दिखाई देते हैं</strong>, एक नए टैब की तरह.</p> <h4>4. तत्वों को शब्दार्थ से छिपाएँ</h4> <p>जब यह आता है <strong>छिपने वाले तत्व</strong>, हम सभी छिपने वाले तत्वों के विभिन्न चरणों से गुजरे: उपयोग कर रहे हैं <strong><code>अस्पष्टता: 0</code>, <code>visibility: hidden</code>, <code>ऊंचाई: 0; चौड़ाई: 0</code>, <code>कुछ भी डिस्प्ले मत करो</code>, <code>पाठ इंडेंट: -999px</code></strong> हमारे सीएसएस फ़ाइल में.</p> <p>प्रत्येक विधि का अपना उद्देश्य है, उनमें से कोई भी निरर्थक नहीं है, और इसलिए यह एक नहीं है: द <strong><code>छिपा हुआ</code> HTML विशेषता</strong>. अगर कोई तत्व है <code>छिपा हुआ</code> इस पर निर्दिष्ट, यह छिपा हुआ होगा.</p> <pre name="code"> <div hidden>... </div> </pre> <p>यह काम करता है <strong>उसी तरह <code>कुछ भी डिस्प्ले मत करो;</code> सीएसएस नियम;</strong> के साथ तत्व <code>छिपा हुआ</code> गुण <strong>प्रदान नहीं करता है</strong> पेज पर। तत्व के अंदर किसी भी स्क्रिप्ट को निष्पादित किया जाएगा, और यदि यह एक प्रपत्र नियंत्रण है तो इसे साथ प्रस्तुत किया जाएगा <strong>फ़ॉर्म सबमिट करने के दौरान अन्य फ़ॉर्म नियंत्रण</strong>.</p> <p>हालांकि, का लाभ <code>छिपा हुआ</code> वह यह है <strong>शब्दार्थ रूप से उपयुक्त</strong>, सब के बाद, HTML5 सभी शब्दार्थों के बारे में है और <code>छिपा हुआ</code> HTML5 प्रवेश का हिस्सा है!</p> <p>इसके अलावा, जब कोई तत्व छिपा होता है, तो यह होना चाहिए <strong>सभी प्लेटफार्मों में छिपा हुआ है</strong>, न केवल वेब ब्राउज़र में बल्कि स्क्रीन्रेडर्स, टीवी, प्रोजेक्टर आदि में.</p> <p>यह भी है <strong>शैली-निर्भर नहीं</strong>, भले ही आप एक पृष्ठ से लेखक सीएसएस को हटा दें, तत्व छिपा रहेगा। जबकि के मामले में <code>कुछ भी डिस्प्ले मत करो;</code> ऐसा नहीं होगा। तो, के बारे में सोचो <code>छिपा हुआ</code> के रूप में <strong>के आयरनक्लाड संस्करण <code>कुछ भी डिस्प्ले मत करो;</code></strong>.</p> <h4>5. कीबोर्ड शॉर्टकट जोड़ें</h4> <p> <strong><code>आगमन चाबी</code> वैश्विक विशेषता</strong> एचटीएमएल 4 और पहले से ही परिभाषित किया गया था <strong>एक कीबोर्ड शॉर्टकट बनाता है</strong> जिसके साथ उपयोगकर्ता पृष्ठ पर एक तत्व संचालित कर सकता है.</p> <p>एक शॉर्टकट के लिए कुंजी संयोजन <strong>दो चीजों पर निर्भर</strong>:</p> <ol><li> <strong><code>आगमन चाबी</code> मूल्य</strong> हम एक तत्व को देते हैं</li> <li> <strong>ब्राउज़र द्वारा उपयोग की जाने वाली पूर्व-नियत कुंजियाँ</strong> उसी तत्व के लिए</li> </ol><figure> <img src="//savtec.org/img/images_1/5-html-features-you-might-not-know-about.jpg"><figcaption>छवि: मोज़िला डेवलपर नेटवर्क</figcaption></figure><p>इस उदाहरण को लें:</p> <pre name="code"> <button accesskey="v" onclick="alert('View Click')"> राय </button> </pre> <p>फ़ायरफ़ॉक्स में, यदि आप <strong>कुंजी संयोजन Alt + Shift + V (या Alt + नियंत्रण + V) दबाएँ</strong> macOS में) आपको अलर्ट मिलेगा “क्लिक किया हुआ देखें”.</p> <p>चूंकि पूर्वनिर्धारित ब्राउज़र कुंजियाँ प्रत्येक ब्राउज़र और ओएस के साथ बदलती हैं, इसलिए यह आपको अनुशंसित है <strong>उपयोगकर्ताओं को मुख्य संयोजनों के बारे में बताएं</strong> शॉर्टकट के लिए उपयोग किया जाता है.</p> <div class="rek-block"> <center> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6284591903398394" data-ad-slot="6432271471" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </center> </div> </div> </div> <div class="col-md-4"> <div class="bar"> <div class="rek-block"> <center> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6284591903398394" data-ad-slot="6432271471" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </center> </div> <div class="barpost"> <div class="bar-post-img"><a href="/articles/coding/5-img-css-properties-you-should-know.html"><img src="//savtec.org/img/images/5-img-css-properties-you-should-know.gif" alt=""></a></div> <div class="bar-post-h1"> <a href="/articles/coding/5-img-css-properties-you-should-know.html">5 <आईएमजी> सीएसएस गुण आपको पता होना चाहिए</a> </div> </div> <div class="barpost"> <div class="bar-post-img"><a href="/articles/howto/5-iphone-apps-to-keep-track-of-your-investments.html"><img src="//savtec.org/img/images_5/5-iphone-apps-to-keep-track-of-your-investments_7.png" alt=""></a></div> <div class="bar-post-h1"> <a href="/articles/howto/5-iphone-apps-to-keep-track-of-your-investments.html">5 iPhone Apps अपने निवेश का ट्रैक रखने के लिए</a> </div> </div> <div class="barpost"> <div class="bar-post-img"><a href="/articles/software-reviews/5-hard-drive-formatting-and-partitioning-utilities.html"><img src="//savtec.org/img/images/5-hard-drive-formatting-and-partitioning-utilities_3.jpg" alt=""></a></div> <div class="bar-post-h1"> <a href="/articles/software-reviews/5-hard-drive-formatting-and-partitioning-utilities.html">5 हार्ड ड्राइव स्वरूपण और विभाजन उपयोगिताएँ</a> </div> </div> </div> </div> </div> </div> <div class="prevnext"> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">अगला लेख</div> <div class="post-img"><a href="/articles/howto/5-ideas-windows-10-should-copy-from-mac-os-x-yosemite.html"> <img src="//savtec.org/img/images_6/5-ideas-windows-10-should-copy-from-mac-os-x-yosemite_5.jpg" alt=""> </a></div> <div class="post-h1"> <a href="/articles/howto/5-ideas-windows-10-should-copy-from-mac-os-x-yosemite.html">5 विचार विंडोज 10 को मैक ओएस एक्स योसेमाइट से कॉपी करना चाहिए</a> </div> </div> </div> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">पिछला लेख</div> <div class="post-img"><a href="/articles/coding/5-html-elements-you-might-not-know-how-to-use.html"> <img src="//savtec.org/img/images_1/5-html-elements-you-might-not-know-how-to-use.jpg" alt=""> </a></div> <div class="post-h1"> <a href="/articles/coding/5-html-elements-you-might-not-know-how-to-use.html">5 एचटीएमएल एलिमेंट्स जिन्हें आप नहीं जानते कि कैसे इस्तेमाल करना है</a> </div> </div> </div> </div> </div> </div> <footer> <div class="container"> <div class="langs-block"> <ul class="langs-list"> <li class="site-lang"><a href="https://www.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-TH"></i></a></li> <li class="site-lang"><a href="https://de.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-DE"></i></a></li> <li class="site-lang"><a href="https://ar.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-AE"></i></a></li> <li class="site-lang"><a href="https://bg.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-BG"></i></a></li> <li class="site-lang"><a href="https://cs.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-CZ"></i></a></li> <li class="site-lang"><a href="https://da.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-DK"></i></a></li> <li class="site-lang"><a href="https://el.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-GR"></i></a></li> <li class="site-lang"><a href="https://es.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-ES"></i></a></li> <li class="site-lang"><a href="https://et.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-EE"></i></a></li> <li class="site-lang"><a href="https://fi.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-FI"></i></a></li> <li class="site-lang"><a href="https://fr.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-FR"></i></a></li> <li class="site-lang"><a href="https://he.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-IL"></i></a></li> <li class="site-lang"><a href="https://hi.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-IN"></i></a></li> <li class="site-lang"><a href="https://hr.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-HR"></i></a></li> <li class="site-lang"><a href="https://hu.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-HU"></i></a></li> <li class="site-lang"><a href="https://id.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-ID"></i></a></li> <li class="site-lang"><a href="https://it.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-IT"></i></a></li> <li class="site-lang"><a href="https://ja.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-JP"></i></a></li> <li class="site-lang"><a href="https://ko.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-KR"></i></a></li> <li class="site-lang"><a href="https://lt.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-LT"></i></a></li> <li class="site-lang"><a href="https://lv.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-LV"></i></a></li> <li class="site-lang"><a href="https://ms.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-MY"></i></a></li> <li class="site-lang"><a href="https://nl.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-NL"></i></a></li> <li class="site-lang"><a href="https://no.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-NO"></i></a></li> <li class="site-lang"><a href="https://pl.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-PL"></i></a></li> <li class="site-lang"><a href="https://pt.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-PT"></i></a></li> <li class="site-lang"><a href="https://ro.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-RO"></i></a></li> <li class="site-lang"><a href="https://ru.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-RU"></i></a></li> <li class="site-lang"><a href="https://sk.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-SK"></i></a></li> <li class="site-lang"><a href="https://sl.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-SI"></i></a></li> <li class="site-lang"><a href="https://sr.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-RS"></i></a></li> <li class="site-lang"><a href="https://sv.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-SE"></i></a></li> <li class="site-lang"><a href="https://tr.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-TR"></i></a></li> <li class="site-lang"><a href="https://ua.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-UA"></i></a></li> <li class="site-lang"><a href="https://vi.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-VN"></i></a></li> </ul> </div> <div class="row align-items-center"> <div class="col-md-3"> © <script> var currentTime = new Date(); var year = currentTime.getFullYear(); document.write(year); </script> <a href="/">Savtec</a> </div> <div class="col-md-9"> उपयोगी जानकारी और वेब विकास युक्तियाँ। प्रोग्रामिंग, वेब डिज़ाइन, CSS, HTML, JAVASCRIPT। कॉन्फ़िगर करें और WINDOWS पुनर्स्थापित करें। खरोंच से साइटों और अनुप्रयोगों का निर्माण। </div> </div> </div> </footer> <link rel="stylesheet" href="css/flags.css"> <script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script> <script> SimpleJekyllSearch({ searchInput: document.getElementById('search-input'), resultsContainer: document.getElementById('results-container'), json: '/search.json', searchResultTemplate: '<li><a href="{url}">{title}</a></li>' }) </script> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script> <script> window.addEventListener("load", function(){ window.cookieconsent.initialise({ "palette": { "popup": { "background": "#edeff5", "text": "#838391" }, "button": { "background": "#4b81e8" } }, "theme": "classic", "position": "bottom-right" })}); </script> </body> </html>