5 ميزات 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. أن تكون في مأمن من موارد CDN للخطر</h4> <p>من الشائع جداً استضافة الموارد ، مثل البرامج النصية وملفات ورقة أنماط ، من خلال <abbr>CDN</abbr>الصورة. ولكن ، إذا كان <strong>CDN يحصل للخطر</strong>, وكذلك الحال بالنسبة لتلك الملفات المستضافة ، وإذا تم اختراق أي مورد تم جلبه على موقع الويب الخاص بك ، فذلك يعني قيام موقعك بذلك!</p> <p>شاهد ما تقوله شبكة مطوري Mozilla حول المشكلة:</p> <blockquote><p><q>... يأتي استخدام شبكات CDN أيضًا في خطر ، لأنه إذا تمكن المهاجم من السيطرة على CDN ، فيمكن للمهاجم حقن محتوى ضار تعسفي في ملفات على CDN (أو استبدال الملفات بالكامل) وبالتالي يمكن أيضًا أن يهاجم جميع المواقع التي تجلب الملفات من ذلك CDN.</q></p></blockquote> <p>لمنع هذا, <strong>تكامل المصادر الفرعية (SRI)</strong> تم تقديمه في أوائل عام 2014 بواسطة W3C. هذا المخطط <strong>يقارن قيمة التجزئة</strong> (نتيجة لتطبيق دالة هاش على مدخلات) <strong>من المورد</strong> للتحقق من صحة ذلك.</p> <p>قل ، هناك ملف JavaScript في <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>معظم CDNs المشتركة توفر بالفعل <strong>SRI <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>الرؤية: مخفي</code>, <code>ارتفاع: 0؛ عرض: 0</code>, <code>عرض لا شيء</code>, <code>النص في الهامش: -999px</code></strong> في ملف CSS لدينا.</p> <p>كل طريقة لها غرضها ، لا يوجد منها لا لزوم لها ، وليس هذا واحد: <strong><code>مخفي</code> سمة HTML</strong>. إذا كان عنصر لديه <code>مخفي</code> المحدد على ذلك ، سوف تكون مخفية.</p> <pre name="code"> <div hidden>... </div> </pre> <p>وهي تعمل <strong>بنفس طريقة <code>عرض لا شيء؛</code> حكم CSS ؛</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>, حتى إذا قمت بفصل المؤلف CSS عن الصفحة ، فسيظل العنصر مخفيًا. بينما في حالة <code>عرض لا شيء؛</code> هذا لن يحدث. لذلك ، فكر في <code>مخفي</code> كما <strong>نسخة حديدية من <code>عرض لا شيء؛</code></strong>.</p> <h4>5. إضافة اختصارات لوحة المفاتيح</h4> <p>ال <strong><code>مفتاح الوصول</code> السمة العالمية</strong> تم تعريف بالفعل في HTML4 و <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>الصورة: شبكة مطوري Mozilla</figcaption></figure><p>خذ هذا المثال:</p> <pre name="code"> <button accesskey="v" onclick="alert('View Click')"> رأي </button> </pre> <p>في فايرفوكس ، إذا كنت <strong>اضغط على تركيبة المفاتيح Alt + Shift + V (أو Alt + Control + V</strong> في ماك) ستحصل على التنبيه “عرض النقر”.</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 <img> خصائص CSS يجب أن تعرفها</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 تطبيقات آي فون لتتبع استثماراتك</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 يجب نسخ من نظام التشغيل Mac OS X يوسمايت</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 عناصر HTML قد لا تعرف كيفية استخدامها</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>