5 tính năng ẩn mình của HTML bạn có thể chưa khám phá

Buzz

Đọc tóm tắt

- HTML là ngôn ngữ đơn giản nhưng ẩn chứa nhiều tính năng độc đáo.
- Mytour giới thiệu 5 tính năng thú vị ít người biết.
- Tính năng kiểm tra chính tả tự động khi nhập liệu HTML.
- Sử dụng Subresource Integrity (SRI) để bảo vệ trang web khỏi xâm nhập.
- Ghi đè form target trong nút submit để hiển thị phản hồi ở nơi mong muốn.
- Ẩn các phần tử có ý nghĩa để tối ưu hóa trang web.
- Thêm phím tắt với thuộc tính accesskey để tương tác nhanh với phần tử trên trang.

HTML là ngôn ngữ đơn giản nhưng ẩn chứa nhiều tính năng độc đáo. Mytour xin giới thiệu 5 tính năng thú vị mà ít người biết đến.

5 điều thú vị về HTML bạn chưa biết, hãy khám phá ngay với Mytour. Bài viết sẽ giới thiệu từ kiểm tra chính tả đến tính năng thêm phím tắt.

Tự động kiểm tra chính tả khi nhập liệu

HTML có khả năng tự động kiểm tra chính tả, một tính năng thông minh của ngôn ngữ này. Thuộc tính spellcheck được tích hợp trên các trình duyệt để giúp kiểm tra lỗi chính tả trong quá trình nhập liệu. Đây là một tính năng toàn cầu, bạn có thể thêm nó vào bất kỳ thẻ HTML nào.

Tuy chỉ hoạt động trên các phần tử có thể thêm text input, thuộc tính này lại có tính kế thừa mạnh mẽ. Ví dụ, khi bạn thêm spellcheck vào thẻ p, tất cả các phần tử con thêm text input sẽ tự động kế thừa tính năng kiểm tra chính tả.

Kiểm tra chính tả hoạt động trên nhiều loại input như text, search, url, và email. Đặc biệt, nó còn hoạt động trên textarea và các phần tử có thể chỉnh sửa. Giá trị của thuộc tính có thể là chuỗi rỗng, đúng hoặc sai. Chuỗi rỗng và giá trị đúng sẽ kích hoạt tính năng kiểm tra chính tả.

Một tính năng hữu ích, giúp nâng cao chất lượng văn bản. Hãy tận dụng giá trị đúng hoặc chuỗi rỗng để kích hoạt kiểm tra chính tả trong ứng dụng của bạn.

1.input type='text' spellcheck='true'

2.placeholder='Nhập nội dung ở đây'>

3.p contenteditable='true' spellcheck='true'>

4.Nhập nội dung ở đây

5./p>

Trong đoạn mã trên, cả thẻ 'p>' và '/p>' sẽ kiểm tra chính tả khi người dùng gõ nội dung.

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 tính năng spellcheck.

Đảm bảo tính an toàn từ các nguồn CDN đang bị thỏa hiệp

Việc lưu trữ các nguồn, như script và các file stylesheet thông qua CDN, là một thực tế phổ biến. Tuy nhiên, nếu CDN bị thỏa hiệp, các 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 có thể bị xâm nhập.

Hãy cùng xem xét quan điểm từ Mozilla Developer Network về vấn đề này:

“... khi sử dụng CDN, người dùng phải đối mặt với rủi ro. Nếu kẻ tấn công kiểm soát CDN, họ có thể 'tiêm' nội dung độc hại vào các file trên CDN hoặc thay thế toàn bộ các file, từ đó tiếp cận và tấn công tất cả các trang web tải file từ CDN đó.”

Để ngăn chặn điều này, W3C đã giới thiệu và công bố Subresource Integrity (SRI) vào đầu năm 2014. 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 minh tính toàn vẹn của chúng.

Cho rằng có một tập tin JavaScript tại https://example.com/example.js. Đầu tiên, áp dụng một thuật toán băm cho tập tin đó, sau đó thêm giá trị băm (hash value) được tạo ra vào thuộc tính integrity của thẻ script và nhúng example.js vào trang web của bạn.

script src='https://example.com/example.js'

integrity='sha384-Li9vy3DqF8tnTXuiaAJuML3ky+er10rcgNR/VqsVpcw+ThHmYcwiB1pbOxEbzJr7'

crossorigin='anonymous'>/script>

Khi một trang web của bạn có mã nguồn chứa đường dẫn đến example.js, trình duyệt đầu tiên thực hiện hàm băm. Example.js chỉ được tải và thực thi 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, giá trị băm của example.js sẽ không khớp với giá trị integrity.

Các dịch vụ CDN phổ biến thường cung cấp giá trị SRI integrity, tuy nhiên bạn cũng có thể tạo ra giá trị SRI integrity của riêng mình.

Ghi đè form target trong nút submit

Có lẽ bạn đã quen với thuộc tính target, nó quyết định nơi mở một liên kết, có thể là trên cùng trang hoặc trong một tab mới. Hãy tưởng tượng, cùng một thuộc tính target được sử dụng trong thẻ form>, quyết định nơi hiển thị phản hồi từ việc gửi form.

Trong các bản phác thảo đầu tiên của HTML5, formtarget đi kèm với 4 thuộc tính khác: formaction, formenctype, formmethod, và formnovalidate.

Những thuộc tính này có thể áp dụng cho các nút submit, ghi đè lên các thuộc tính tương ứng trong thẻ của chúng.

Khi bạn gửi một biểu mẫu bằng nút submit có thuộc tính formtarget, phản hồi sẽ hiển thị theo giá trị của formtarget, thay vì giá trị target của form.

1.form action='/luu-tru' target='_self' >

2.input type='submit' name='luu' />

3.input type='submit' name='in' formaction='/in'

4.formtarget='_blank' />

5./form>

Khi bạn gửi biểu mẫu bằng nút thứ hai (nút in) trong đoạn mã trên, phản hồi sẽ xuất hiện trong một bối cảnh trình duyệt web mới, ví dụ như một tab mới.

Ẩn các phần tử có ý nghĩa

Khi nói về việc ẩn các phần tử, chúng ta đã trải qua các giai đoạn khác nhau của việc ẩn: sử dụng opacity:0, visibility:hidden, height:0; width:0, display:none, text-indent:-999px trong tệp CSS.

Mỗi phương pháp đều phục vụ một mục đích cụ thể, không có phương pháp nào là thừa thải, và quan trọng là không phải là thuộc tính HTML hidden. Nếu một phần tử được đánh dấu với thuộc tính hidden, thì phần tử đó sẽ được che giấu.

div hidden>.../div>

Nó hoạt động tương tự như quy tắc CSS display:none;, khiến cho phần tử với thuộc tính hidden trở nên không hiển thị trên trang.

Mọi đoạn script nằm trong phần tử sẽ được thực thi, và nếu đó là một biểu mẫu, biểu mẫu sẽ được gửi đi kèm với các điều khiển biểu mẫu khác trong quá trình submit.

Tuy nhiên, đặc điểm nổi bật của thuộc tính hidden là sự semantic phù hợp của nó. Hidden cùng với semantic là một phần quan trọng của HTML5.

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

Không như display:none;, hidden không phụ thuộc vào kiểu dáng (style), ngay cả khi bạn loại bỏ CSS từ trang, phần tử vẫn sẽ được ẩn. Điều này làm cho hidden trở thành “lớp bọc sắt” của display:none;.

Thêm phím tắt

Thuộc tính accesskey xuất hiện từ HTML4, tạo ra phím tắt mà người dùng có thể sử dụng để tương tác với một phần tử trên trang.

Sự kết hợp của 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ử.

Ví dụ như:

1. button accesskey='v' onclick='alert('Nhấn để Xem')'>

2.Xem

3./button>

Trong 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ẽ thấy thông báo 'View Clicked'.

Bởi vì các phím tắt trình duyệt được cài đặt trước đó thay đổi tùy thuộc vào từng trình duyệt và hệ điều hành, vì vậy, hãy cho phép người dùng biết về các phím tắt được sử dụng.

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

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

Thường khi tạo web, người ta thường đặt liên kết trực tiếp vào hình ảnh trong HTML để tối ưu hóa trang web. Nếu bạn chưa rõ cách thực hiện điều này, Mytour sẽ hướng dẫn bạn một cách chi tiết và dễ hiểu nhất.

Các câu hỏi thường gặp

Những tính năng thú vị nào của HTML mà ít người biết đến?

HTML có nhiều tính năng thú vị như tự động kiểm tra chính tả, tính năng kiểm soát từ nguồn CDN, và cách ẩn phần tử một cách hợp lý. Bài viết sẽ cung cấp chi tiết về những tính năng này.

Làm thế nào để kích hoạt tính năng kiểm tra chính tả trong HTML?

Để kích hoạt tính năng kiểm tra chính tả, bạn cần thêm thuộc tính spellcheck vào các thẻ HTML như input hoặc textarea. Giá trị có thể là đúng hoặc chuỗi rỗng để kích hoạt kiểm tra.

Tại sao việc sử dụng CDN có thể gặp rủi ro gì cho trang web?

Việc sử dụng CDN có thể gặp rủi ro nếu CDN bị thỏa hiệp, điều này có thể dẫn đến việc kẻ tấn công tiêm nội dung độc hại vào các file được lưu trữ, gây nguy hiểm cho trang web.

Cách nào để bảo vệ nguồn từ CDN không bị xâm nhập?

Để bảo vệ nguồn từ CDN, bạn có thể sử dụng Subresource Integrity (SRI) để xác minh tính toàn vẹn của tài nguyên trước khi tải xuống. SRI so sánh giá trị băm của file với giá trị được định nghĩa trong thuộc tính integrity.

Cách sử dụng thuộc tính accesskey để tạo phím tắt trong HTML?

Bạn có thể sử dụng thuộc tính accesskey trên các thẻ HTML để tạo phím tắt cho người dùng. Ví dụ, sử dụng accesskey='v' trên nút, người dùng có thể nhấn Alt + Shift + V để kích hoạt nút đó.

Nội dung từ Mytour nhằm chăm sóc khách hàng và khuyến khích du lịch, chúng tôi không chịu trách nhiệm và không áp dụng cho mục đích khác.

Nếu bài viết sai sót hoặc không phù hợp, vui lòng liên hệ qua email: [email protected]