5 คุณสมบัติ HTML ที่คุณอาจไม่รู้

แท็ก และองค์ประกอบลูกทั้งหมดที่รับการป้อนข้อความจะสืบทอดคุณสมบัตินี้.

การตรวจสอบการสะกดคำทำงาน ข้อความทั้งหมด ประเภท: ข้อความ, ค้นหา, URL, และ อีเมล. มันยังใช้งานได้ </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 Developer Network พูดเกี่ยวกับปัญหา:</p> <blockquote><p><q>... การใช้ CDN ยังมีความเสี่ยงด้วยหากผู้โจมตีสามารถควบคุม CDN ได้ผู้โจมตีสามารถฉีดเนื้อหาที่เป็นอันตรายลงในไฟล์บน CDN (หรือแทนที่ไฟล์ทั้งหมด) และสามารถโจมตีเว็บไซต์ทั้งหมดที่ดึงไฟล์ได้ จาก CDN นั้น.</q></p></blockquote> <p>เพื่อป้องกันสิ่งนี้, <strong>Subresource Integrity (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>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>display: none</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>display: none;</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>display: none;</code> ที่จะไม่เกิดขึ้น ดังนั้นคิด <code>ซ่อนเร้น</code> เช่นเดียวกับ <strong>รุ่น ironclad ของ <code>display: none;</code></strong>.</p> <h4>5. เพิ่มแป้นพิมพ์ลัด</h4> <p> <strong><code>accesskey</code> คุณสมบัติระดับโลก</strong> ถูกกำหนดไว้แล้วใน HTML4 และมัน <strong>สร้างแป้นพิมพ์ลัด</strong> ซึ่งผู้ใช้สามารถใช้งานองค์ประกอบในหน้า.</p> <p>การรวมกันที่สำคัญสำหรับทางลัดจะ <strong>ขึ้นอยู่กับสองสิ่ง</strong>:</p> <ol><li> <strong><code>accesskey</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 Developer Network</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) คุณจะได้รับการแจ้งเตือน “ดูการคลิก”.</p> <p>เนื่องจากคีย์เบราว์เซอร์ที่กำหนดไว้ล่วงหน้าจะแตกต่างกันไปตามแต่ละเบราว์เซอร์และระบบปฏิบัติการจึงแนะนำให้คุณ <strong>แจ้งให้ผู้ใช้ทราบถึงชุดค่าผสมที่สำคัญ</strong> ใช้สำหรับทางลัด.</p> <div class="rek-block ads-block" data-ads-size="netboard"> </div> </div> </div> <div class="col-md-4"> <div class="bar"> <div class="rek-block ads-block" data-ads-size="square"> </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="rek-block ads-block" data-ads-size="vertical"> </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 เพื่อติดตามการลงทุนของคุณ</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 class="rek-block ads-block" data-ads-size="vertical"> </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 Yosemite</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.phhsnews.com"><i class="flag flag-FR"></i></a></li> <li class="site-lang"><a href="https://lt.phhsnews.com"><i class="flag flag-LT"></i></a></li> <li class="site-lang"><a href="https://it.phhsnews.com"><i class="flag flag-IT"></i></a></li> <li class="site-lang"><a href="https://cs.phhsnews.com"><i class="flag flag-CZ"></i></a></li> <li class="site-lang"><a href="https://es.phhsnews.com"><i class="flag flag-ES"></i></a></li> <li class="site-lang"><a href="https://no.phhsnews.com"><i class="flag flag-NO"></i></a></li> <li class="site-lang"><a href="https://pt.phhsnews.com"><i class="flag flag-PT"></i></a></li> <li class="site-lang"><a href="https://de.phhsnews.com"><i class="flag flag-DE"></i></a></li> <li class="site-lang"><a href="https://nl.phhsnews.com"><i class="flag flag-NL"></i></a></li> <li class="site-lang"><a href="https://da.phhsnews.com"><i class="flag flag-DK"></i></a></li> <li class="site-lang"><a href="https://sv.phhsnews.com"><i class="flag flag-SE"></i></a></li> <li class="site-lang"><a href="https://th.phhsnews.com/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://tr.phhsnews.com/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.phhsnews.com/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.phhsnews.com/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="/">PHHSNEWS</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> <script src="js/ads.js"></script> </body> </html>