5 תכונות HTML שאתה אולי לא יודע על

תג ואת כל האלמנטים של הילד שלה לקחת קלט טקסט יירש תכונה זו.

בדיקת האיות פועלת כל הטקסט סוגיםYou טקסט, לחפש, כתובת אתר, ו דוא"ל. זה גם עובד </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>s. אבל, אם <strong>CDN מקבל בסכנה</strong>, אז לעשות אותם קבצים מתארח, ואם כל המשאבים שנלקחו נפגעת באתר האינטרנט שלך, כך גם האתר שלך!</p> <p>ראה מה רשת המפתחים של Mozilla אומרת על הבעיה:</p> <blockquote><p><q>... באמצעות CDNs גם מגיע עם סיכון, כי אם התוקף מרוויח שליטה של ​​CDN, התוקף יכול להזריק תוכן זדוני שרירותי לתוך קבצים על CDN (או להחליף את הקבצים לחלוטין), ולכן יכול גם לתקוף את כל האתרים לאחזר קבצים מ CDN זה.</q></p></blockquote> <p>כדי למנוע זאת, <strong>Subresource Integrity (SRI)</strong> הוצגה בתחילת 2014 על ידי W3C. תכנית זו <strong>משווה את הערך hash</strong> (תוצאה של החלת פונקציה hash על קלט) <strong>של משאב</strong> כדי לאמת את זה.</p> <p>תגיד, יש קובץ JavaScript ב <code>https://example.com/example.js</code>. קודם אתה <strong>להחיל פונקציה hash</strong> אל הקובץ ההוא <strong>מוסיפים את הערך hash המיוצר</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>הראשון חל את הפונקציה hash</strong>, ועומס ורץ <code>example.js</code> רק כאשר שלה <strong>ערך hash תואם <code>יושרה</code> ערך</strong>.</p> <p>אם <strong><code>example.com</code> היה בסכנה</strong> ו <strong><code>example.js</code> הופרעה</strong> עם אז את הערך hash של <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>פורמט</code> הוגדר יחד עם ארבעה תכונות אחרות הגשת טופס: <strong><code>צורה</code>, <code>פורמט</code>, <code>שיטת</code></strong>, ו <strong><code>טופס</code></strong>. </p> <p>תכונות אלה יכולות להיות <strong>משמש עם לחצני שלח</strong>, והם לעקוף את התכונות שלהם בהתאמה <code><form></code> תג שאליו הלחצנים שייכים.</p> <p>לכן, כאשר הטופס נשלח באמצעות כפתור שיש לו <code>פורמט</code> תכונה, <strong>התגובה מוצגת על פי <code>פורמט</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; width: 0</code>, <code>אל תציג דבר</code>, <code>text-indent: -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>You</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>IMAGE: רשת המפתחים של Mozilla</figcaption></figure><p>קח לדוגמה זו:</p> <pre name="code"> <button accesskey="v" onclick="alert('View Click')"> נוף </button> </pre> <p>ב- Firefox, אם אתה <strong>לחץ על צירוף המקשים Alt + Shift + V (או Alt + Control + V</strong> ב macOS) תקבל את ההתראה “View לחץ”.</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 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 רעיונות Windows 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>