5 tính năng HTML bạn có thể không biết về

Cho một ngôn ngữ rất đơn giản và dễ học, HTML chắc chắn cung cấp một số lượng tính năng hữu ích bất ngờ, nhiều trong số đó hầu hết chúng ta thậm chí không biết về. Thật khó để theo kịp thời gian và bạn có thể nghĩ rằng tất cả “bạn có thể không biết” bài viết phải là về các thẻ gần đây nhất, HTML cũng có một số Các tính năng khá hữu ích đã có từ lâu.

Từ kiểm tra chính tả đến thêm phím tắt, trong bài viết này, tôi sẽ chỉ cho bạn năm tính năng HTML ít được biết đến.

1. Kiểm tra chính tả khi bạn nhập

Các kiểm tra chính tả thuộc tính nhắc các trình duyệt kiểm tra chính tả trong khi người dùng đang gõ một phần tử. Thuộc tính này là toàn cầu, có nghĩa là, bạn có thể thêm nó vào bất kỳ thẻ HTML nào.

Tuy nhiên, nó chỉ hoạt động trên các yếu tố có thể nhập văn bản. Có nó toàn cầu là hữu ích bởi vì nó có thể được thừa hưởng bởi các yếu tố con. Ví dụ, thêm nó vào một

nhãn và tất cả các phần tử con của nó nhận nhập văn bản sẽ kế thừa thuộc tính này.

Kiểm tra chính tả hoạt động trên tất cả văn bản các loại: bản văn, Tìm kiếm, url, và e-mail. Nó cũng hoạt động trên </code>, và các yếu tố có thể chỉnh sửa</strong> (yếu tố với <code>có thể nội dung</code> thuộc tính).</p> <p>Giá trị của nó có thể là một chuỗi rỗng, <code>thật</code>, hoặc là <code>sai</code>. Chuỗi rỗng và <code>thật</code> sẽ <strong>bật trình kiểm tra chính tả</strong>.</p> <pre name="code"> <input type="text" spellcheck="true" placeholder="Type something here"> <p contenteditable="true" spellcheck="true"> Nhập một cái gì đó ở đây </p> </pre> <p>Trong đoạn mã trên, <strong>cả hai <code><div></code> và <code><p></code> các thẻ sẽ kiểm tra chính tả</strong> khi người dùng gõ vào chúng.</p> <p>Nếu người dùng có <strong>kiểm tra chính tả bị vô hiệu hóa</strong> trong cài đặt trình duyệt, lỗi chính tả sẽ không được kiểm tra, <strong>thậm chí nếu <code>kiểm tra chính tả</code> đã được thêm vào</strong>.</p> <h4>2. An toàn trước các tài nguyên CDN bị xâm phạm</h4> <p>Nó là khá phổ biến để lưu trữ tài nguyên, chẳng hạn như tập lệnh và tập tin biểu định kiểu, thông qua <abbr>CDN</abbr>S. Nhưng, nếu <strong>CDN bị xâm phạm</strong>, các tệp được lưu trữ cũng vậy và nếu bất kỳ tài nguyên tìm nạp nào bị xâm phạm trên trang web của bạn, thì trang web của bạn cũng vậy!</p> <p>Xem những gì Nhà phát triển Mozilla nói về vấn đề:</p> <blockquote><p><q>Việc sử dụng CDN cũng gặp rủi ro, nếu kẻ tấn công giành quyền kiểm soát CDN, kẻ tấn công có thể tiêm nội dung độc hại tùy ý vào các tệp trên CDN (hoặc thay thế hoàn toàn các tệp) từ CDN đó.</q></p></blockquote> <p>Để ngăn chặn điều này, <strong>Tính toàn vẹn của nguồn cung cấp (SRI)</strong> được giới thiệu vào đầu năm 2014 bởi W3C. Đề án này <strong>so sánh giá trị băm</strong> (kết quả của việc áp dụng hàm băm cho đầu vào) <strong>của một tài nguyên</strong> để xác nhận nó.</p> <p>Giả sử, có một tệp JavaScript tại <code>https://example.com/example.js</code>. Bạn đầu tiên <strong>áp dụng hàm băm</strong> đến tập tin đó <strong>thêm giá trị băm được sản xuất</strong> để <strong><code>chính trực</code> thuộc tính</strong> của <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>Bây giờ, bất cứ khi nào một trang web của trang web của bạn với mã ở trên phải tải <code>example.js</code>, Trình duyệt <strong>đầu tiên áp dụng hàm băm</strong>, tải và chạy <code>example.js</code> chỉ khi nó <strong>giá trị băm phù hợp với <code>chính trực</code> giá trị</strong>.</p> <p>Nếu <strong><code>example.com</code> đã bị xâm phạm</strong> và <strong><code>example.js</code> đã bị can thiệp</strong> với giá trị băm của <code>example.js</code> sẽ không phù hợp với <strong><code>chính trực</code> giá trị</strong>. </p> <p>CDN phổ biến nhất đã cung cấp <strong>SRI <code>chính trực</code> giá trị</strong>, nhưng bạn cũng có thể tạo một cái ở đây.</p> <h4>3. Ghi đè mục tiêu biểu mẫu trong các nút gửi</h4> <p>Bạn rất có thể quen thuộc với <strong><code>Mục tiêu</code> thuộc tính</strong>, người quyết định <strong>nơi một tài nguyên siêu liên kết mở ra</strong>, ví dụ trên cùng một trang hoặc trong một tab mới. Bạn cũng có thể biết rằng như vậy <code>Mục tiêu</code> thuộc tính được sử dụng trong <code><form></code> thẻ quyết định <strong>nơi phản hồi từ việc gửi biểu mẫu được hiển thị</strong>.</p> <p>Trong một trong những dự thảo ban đầu của HTML5, <code>nhắm mục tiêu</code> đã được xác định cùng với bốn thuộc tính đệ trình biểu mẫu khác: <strong><code>hình thành</code>, <code>formenctype</code>, <code>hình thức</code></strong>, và <strong><code>formnovalidate</code></strong>. </p> <p>Những thuộc tính này có thể là <strong>được sử dụng với các nút gửi</strong>, và họ ghi đè các thuộc tính tương ứng của họ trong <code><form></code> thẻ mà các nút thuộc về.</p> <p>Vì vậy, khi một biểu mẫu được gửi bằng nút có <code>nhắm mục tiêu</code> thuộc tính, <strong>phản ứng được hiển thị theo <code>nhắm mục tiêu</code> giá trị</strong>, thay cho <code>Mục tiêu</code> giá trị của <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>Trong đoạn mã trên, khi biểu mẫu được gửi bằng nút gửi thứ hai (<code>in</code> ), câu trả lời sẽ <strong>xuất hiện trong một bối cảnh duyệt mới</strong>, như trong một tab mới.</p> <h4>4. Ẩn các yếu tố ngữ nghĩa</h4> <p>Khi nó đến <strong>yếu tố ẩn</strong>, tất cả chúng ta đã trải qua các giai đoạn khác nhau của các yếu tố ẩn: sử dụng <strong><code>độ mờ đục: 0</code>, <code>tầm nhìn: ẩn</code>, <code>chiều cao: 0; chiều rộng: 0</code>, <code>không trưng bày</code>, <code>văn bản thụt lề: -999px</code></strong> trong tệp CSS của chúng tôi.</p> <p>Mỗi phương thức đều có mục đích của nó, không có phương thức nào là dư thừa và vì vậy không phải là phương pháp này: <strong><code>ẩn</code> Thuộc tính HTML</strong>. Nếu một yếu tố có <code>ẩn</code> quy định trên đó, nó sẽ bị ẩn.</p> <pre name="code"> <div hidden>Giáo dục </div> </pre> <p>Nó hoạt động <strong>giống như cách <code>không trưng bày;</code> Quy tắc CSS;</strong> yếu tố với <code>ẩn</code> thuộc tính <strong>không được kết xuất</strong> trên trang. Bất kỳ tập lệnh nào bên trong phần tử sẽ được thực thi và nếu đó là một điều khiển biểu mẫu, nó sẽ được gửi cùng với <strong>điều khiển biểu mẫu khác trong khi gửi biểu mẫu</strong>.</p> <p>Tuy nhiên, lợi ích của <code>ẩn</code> có phải vậy không <strong>phù hợp về mặt ngữ nghĩa</strong>, xét cho cùng, HTML5 là tất cả về ngữ nghĩa và <code>ẩn</code> là một phần của đoàn tùy tùng HTML5!</p> <p>Hơn nữa, khi một yếu tố bị ẩn đi, nó sẽ là <strong>ẩn trong tất cả các nền tảng</strong>, không chỉ trong trình duyệt web mà còn trong trình đọc màn hình, TV, máy chiếu, v.v..</p> <p>Nó cũng là <strong>không phụ thuộc vào phong cách</strong>, ngay cả khi bạn loại bỏ CSS của tác giả khỏi một trang, phần tử sẽ vẫn bị ẩn. Trong khi đó trong trường hợp <code>không trưng bày;</code> Điều đó sẽ không xảy ra. Vì vậy, hãy nghĩ về <code>ẩn</code> như <strong>phiên bản sắt <code>không trưng bày;</code></strong>.</p> <h4>5. Thêm phím tắt</h4> <p>Các <strong><code>khóa truy cập</code> thuộc tính toàn cầu</strong> đã được định nghĩa trong HTML4 và nó <strong>tạo một phím tắt</strong> người dùng có thể vận hành một yếu tố trên trang.</p> <p>Tổ hợp phím cho phím tắt sẽ <strong>phụ thuộc vào hai điều</strong>:</p> <ol><li>các <strong><code>khóa truy cập</code> giá trị</strong> mà chúng tôi cung cấp cho một yếu tố</li> <li>các <strong>các khóa được gán trước được sử dụng bởi trình duyệt</strong> cho cùng một yếu tố</li> </ol><figure> <img src="//savtec.org/img/images_1/5-html-features-you-might-not-know-about.jpg"><figcaption>HÌNH ẢNH: Mạng lưới nhà phát triển Mozilla</figcaption></figure><p>Lấy ví dụ này:</p> <pre name="code"> <button accesskey="v" onclick="alert('View Click')"> Lượt xem </button> </pre> <p>Trong Firefox, nếu bạn <strong>nhấn tổ hợp phím Alt + Shift + V (hoặc Alt + Control + V</strong> trong macOS) bạn sẽ nhận được cảnh báo “Xem nhấp”.</p> <p>Vì các khóa trình duyệt được xác định trước thay đổi theo từng trình duyệt và HĐH, nên bạn nên <strong>cho người dùng biết các tổ hợp phím</strong> được sử dụng cho các phím tắt.</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> Thuộc tính CSS bạn nên biết</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 ứng dụng iPhone để theo dõi các khoản đầu tư của bạn</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 tiện ích định dạng và phân vùng ổ cứng</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">Bài viết tiếp theo</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 Ý tưởng Windows 10 nên sao chép từ Mac OS X Yosemite</a> </div> </div> </div> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">Bài báo trước</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 yếu tố HTML bạn có thể không biết cách sử dụng</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"> Thông tin hữu ích và lời khuyên phát triển web. Lập trình, thiết kế web, CSS, HTML, JAVASCRIPT. Cấu hình và cài đặt lại WINDOWS. Tạo các trang web và ứng dụng từ đầu. </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>