Việc học một ngôn ngữ khá đơn giản và dễ dàng, HTML cung cấp số lượng lớn các tính năng hữu ích, nhiều trong số các tính năng đó có thể bạn còn chưa biết đến. Bài viết dưới đây chúng tôi sẽ cung cấp và giới thiệu 5 tính năng của HTML có thể bạn chưa biết đến.

5 tính năng của HTML có thể bạn chưa biết mà chúng tôi muốn giới thiệu cho bạn ở đây bao gồm từ tính năng từ kiểm tra chính tả đến tính năng thêm các phím tắt.

 

Kiểm tra chính tả khi bạn gõ

Tính năng của HTML có thể bạn chưa biết đầu tiên là tính năng kiểm tra chính tả. Thuộc tính spellcheck trên các trình duyệt để kiểm tra chính tả trong quá trình người dùng gõ một phần tử. Đây là thuộc tính toàn cầu, điều đó có nghĩa là bạn có thể thêm nó và bất kỳ thẻ HTML nào.

Tuy nhiên thuộc tính này chỉ hoạt động trên các phần tử có thể thêm text input. Thuộc tính “toàn cầu” này cực kỳ hữu ích vì nó có thể được thừa kế bởi các phần tử con. Chẳng hạn bạn thêm thuộc tính này vào thẻ

và tất cả các phần tử con thêm text input sẽ kế thừa thuộc tính này.

Thuộc tính kiểm tra chính tả hoạt động trên tất cả các dạng : text, search, url, và email. Ngoài ra thuộc tính này cũng hoạt động trên [/b] và các phần tử có thể chỉnh sửa (các phần tử có thuộc tính có thể chỉnh sửa).

Giá trị của nó có thể là một chuỗi rỗng (empty string), đúng (true) hoặc sai (false). Chuỗi rỗng và đúng sẽ kích hoạt kiểm tra chính tả.

1

2 placeholder='Type something here'>

3

4 Type something here

5

Trong đoạn mã trên, cả thẻ

và

sẽ kiểm tra chính tả khi người dùng gõ phần tử.

Nếu người dùng đã tắt chức năng kiểm tra chính tả trong cài đặt trình duyệt, chính tả sẽ không được kiểm tra, ngay cả khi đã thêm spellcheck.

An toàn từ các nguồn CDN bị thỏa hiệp

Việc lưu trữ các nguồn, chẳng hạn như script và các file stylesheet thông qua CDN khá là phổ biến. Tuy nhiên nếu CDN bị thỏa hiệp, những file được lưu trữ đó và bất kỳ nguồn nào khác trên trang web của bạn cũng sẽ bị xâm nhập.

Cùng xem mạng phát triển của Mozilla (Mozilla Developer Network) nói gì về vấn đề này:

“... bằng cách sử dụng CDN người dùng cũng phải đối mặt với những nguy cơ, nếu kẻ tấn công có quyền kiểm soát CDN, họ có thể “tiêm” các nội dung độc hại vào các file trên CDN (hoặc thay thế hoàn toàn các file) và do đó kẻ tấn công cũng có thể tấn công tất cả các trang web tải các file từ CDN đó”.

Để ngăn chặn điều này, W3C đã giới thiệu và trình làng Subresource Integrity (SRI) vào đầu năm 2014. Subresource Integrity (SRI) so sánh giá trị băm (hash value) (kết quả của việc áp dụng một hàm băm vào đầu vào) của tài nguyên để xác nhận nó.

Giả sử có 1 file jаvascript tại địa chỉ https://example.com/example.js. Đầu tiên, bạn áp dụng một hàm băm cho file đó, sau đó thêm giá trị băm (hash value) được tạo ra vào thuộc tính integrity của thẻ

Bây giờ, bất cứ khi nào một trang web của trang web của bạn với các mã trên có để tải example.js, trình duyệt đầu tiên áp dụng hàm băm, và tải và chạy example.js chỉ khi giá trị băm của nó khớp với giá trị integrity.

Nếu example.com bị thỏa hiệp và example.js bị can thiệp thì giá trị băm của example.js sẽ không khớp với giá trị integrity.

Các CDN phổ biến nhất cung cấp giá trị SRI integrity, nhưng bạn cũng có thể tạo ra một giá trị SRI integrity.

Ghi đè form target trong nút submit

Có thể bạn đã quen với thuộc tính target, thuộc tính quyết định vị trí mở một hyperlinked, chẳng hạn trên cùng một trang hoặc trong một tab mới. Ngoài ra có thể bạn đã biết cùng một thuộc tính target được sử dụng trong thẻ

quyết định vị trí hiển thị phản hồi từ việc gửi form.

 

Một trong những bản phác thảo HTML5 ban đầu, formtarget được định nghĩa cùng 4 thuộc tính khác: [b]formaction, formenctype, formmethod, và formnovalidate.

Các thuộc tính này có thể được sử dụng với các nút submit, và chúng ghi đè các thuộc tính tương ứng trong thẻ của các nút.

Vì vậy khi có một biểu mẫu được gửi bằng cách sử dụng nút submit có thuộc tính formtarget, phản hồi được hiển thị theo giá trị formtarget, thay vì giá trị target của .

 

Trong đoạn mã trên khi biểu mẫu được gửi bằng nút submit thứ 2 (nút in), phản hồi sẽ xuất hiện trong một ngữ cảnh trình duyệt web mới, chẳng hạn như trong một tab mới.

Ẩn các phần tử semantic

Khi nói đến hiding element, chúng ta đã trải qua các giai đoạn khác nhau của các hiding element: sử dụng opacity:0, visibility:hidden, height:0; width:0, display:none, text-indent:-999px file CSS.

Mỗi phương pháp sẽ có mục đích riêng của nó, chẳng có phương pháp nào là dư thừa cả, và đó không phải là thuộc tính HTML hidden. Nếu một phần tử hidden được chỉ định trên đó, phần tử đó sẽ bị ẩn.

Nó hoạt động giống như display:none; CSS rule, phần tử có thuộc tính hidden không được hiển thị trên trang.

Bất kỳ script nào trong phần tử sẽ được thực thi và nếu đó là một biểu mẫu, nó sẽ được submit cùng với các kiểm soát biểu mẫu khác trong quá trình gửi biểu mẫu.

Tuy nhiên điểm nổi bật của hidden đó là nó là semantic phù hợp. Semantic và hidden và một phần của HTML5.

Hơn nữa, khi một phần tử bị ẩn, nó sẽ bị ẩn trên tất cả các nền tảng, không chỉ riêng các trình duyệt web mà còn cả screenreader , TV, máy chiếu, … .

Nó không phụ thuộc vào style, ngay cả khi bạn tách CSS ra khỏi trang, phần tử vẫn bị ẩn. Trong trường hợp display:none; điều đó sẽ không xảy ra. Vì vậy, có thể nói hidden là “lớp bọc sắt” của display:none;.

Thêm phím tắt

Thuộc tính accesskey được định nghĩa trong HTML4, tạo ra phím tắt mà người dùng có thể sử dụng để thao tác một phần tử trên trang.

Sự kết hợp phím tắt phụ thuộc vào 2 điều:

1. Giá trị accesskey mà chúng ta cung cấp cho một phần tử

2. Các phím được gán trước bởi trình duyệt cho cùng một phần tử.

 

Trên trình duyệt Firefox, nếu nhấn tổ hợp phím Alt + Shift + V (trong Windows) hoặc Alt + Control + V (trong MacOS), bạn sẽ nhận được thông báo 'View Clicked'.

Vì các phím trình duyệt được cài đặt trước thay đổi theo từng trình duyệt và hệ điều hành, do đó bạn cho phép người dùng biết các phím kết hợp được sử dụng cho các phím tắt.

Như vậy là chúng tôi đã giới thiệu cho bạn 5 tính năng của HTML. Nếu có bất kỳ câu hỏi nào muốn chúng tôi giải đáp, bạn có thể để lại bình luận của mình ở phần dưới bài viết.

Nếu bạn dùng ThunderBird để gửi mail bạn tham khảo cách Tạo chữ ký HTML cho Email tại đây trên ThunderBird để làm cho email của mình trở nên chuyên nghiệp hơn nhé

Thường các web người dùng sẽ chèn link vào hình ảnh trong HTML để tối ưu trang web của mình, nếu bạn chưa biết cách chèn link vào hình ảnh trong HTML thì TCN sẽ hướng dẫn các bạn một cách chi tiết nhất.