Bộ câu hỏi phỏng vấn HTML phần 4

Một trang web có thể chứa nhiều thẻ header hay thẻ footer không?


Cả hai thẻ đều có thể. Các tài liệu W3 nói rằng các thẻ đại diện cho các vùng đầu trang (<header>) và chân trang (<footer>) của thẻ cha gần nhất của chúng.

Vì vậy, không chỉ thẻ <body> có thể chứa thẻ <header><footer> mà mọi thẻ <article><section> cũng có thể.

Các thuộc tính "data-" có lợi cho việc gì?


Trước khi các JavaScript Framework trở nên phổ biến, các FrontEnd Developer đã sử dụng thuộc tính data- để lưu trữ các dữ liệu phụ trong DOM, mà không có các thủ thuật khác như non-standard attributes, extra properties trên DOM. Nó nhằm mục đích lưu trữ custom-data riêng cho page hoặc application nơi mà không có attribute hoặc element nào thích hợp hơn.

Ngày nay, việc sử dụng thuộc tính data- không được khuyến khích. Một lý do là người dùng có thể dễ dàng sửa đổi thuộc tính data này bằng cách sử dụng inspect element (nhấn F12) trong browser. Mô hình dữ liệu này được lưu trữ tốt hơn trong chính JavaScript và luôn được cập nhật với DOM qua data-binding có thể thông qua 1 library hoặc 1 framework.

Giải thích mục đích của thẻ main trong HTML là gì?


Thẻ HTML <main> đại diện cho nội dung chính của <body> của 1 document, 1 phần của 1 document hoặc application. Khu vực nội dung chính bao gồm nội dung liên quan trực tiếp đến hoặc mở rộng chủ đề trọng tâm của document hoặc chức năng trung tâm của application.

Một khía cạnh quan trọng của <main> là nó chỉ có thể được sử dụng một lần trên mỗi page. <main> không đóng góp vào dàn bài của document; nghĩa là, không giống như các phần tử như <body>, các tiêu đề như <h2>, v.v., <main> không ảnh hưởng đến khái niệm của DOM về cấu trúc của page.

Các khối xây dựng (building blocks) của HTML5 là gì?


  • Semantics - Cho phép bạn mô tả chính xác hơn nội dung của bạn.
  • Connectivity - Cho phép bạn giao tiếp với server theo những cách mới và sáng tạo.
  • Offline and storage - Cho phép các trang web lưu trữ dữ liệu ở phía client và hoạt động khi offline (khi không có internet,…) hiệu quả hơn.
  • Multimedia - Làm cho video và âm thanh trở thành công dân hạng nhất (first-class citizen) trong Open Web.
  • 2D/3D graphics and effects - Cho phép nhiều tùy chọn trình chiếu đa dạng hơn.
  • Performance and integration - Cung cấp tối ưu hóa tốc độ cao hơn và sử dụng phần cứng máy tính tốt hơn.
  • Device access - Cho phép sử dụng các thiết bị đầu vào và đầu ra khác nhau.
  • Styling - Để các tác giả viết các chủ đề phức tạp hơn.

Tại sao sử dụng thẻ ngữ nghĩa (semantic) HTML5?


Như tên của chúng đã nói, chúng chỉ dành cho mục đích ngữ nghĩa. Nó giúp cải thiện quá trình xử lý document tự động. Quá trình xử lý tự động xảy ra thường xuyên hơn bạn nhận ra - mỗi thứ hạng trang web từ các công cụ tìm kiếm được bắt nguồn từ quá trình xử lý tự động của tất cả các trang web ngoài đó.

// machine: okay, this structure looks like it might be a navigation element?
<div class="some-meaningless-class"><ul><li><a href="internal_link">...</div>

// machine: ah, a navigation element!
<nav class="some-meaningless-class"><ul><li><a>...</nav>

HTML Preprocessor là gì và bạn có đang dùng chúng không?


HTML Preprocessor giúp chúng ta viết mã HTML nhanh với ít mã hơn. Một số Preprocessor như: Pug ,Haml.

Ví dụ: index.jade

html head title= HelloWorld body h1 Using Jade to create HelloWorld web page

Compiled file: index.html

<!DOCTYPE html>
<html>
  <head>
    <title>HelloWorld</title>
  </head>
  <body>
    <h1>Using Jade to create HelloWorld web page</h1>
  </body>
</html>

Bạn biết gì về thuộc tính "srcset" trong thẻ img?


Bạn sẽ sử dụng thuộc tính srcset khi muốn cung cấp các hình ảnh khác nhau cho người dùng tùy thuộc vào chiều rộng màn hình thiết bị của họ - cung cấp hình ảnh chất lượng cao hơn cho các thiết bị có màn hình retina giúp nâng cao trải nghiệm người dùng và cung cấp hình ảnh có độ phân giải thấp hơn cho các thiết bị cấp thấp giúp tăng hiệu suất và giảm lãng phí dữ liệu (vì việc cung cấp hình ảnh lớn hơn sẽ không có bất kỳ sự khác biệt nào mà người dùng có thể nhìn thấy được).

Ví dụ: <img srcset = "small.jpg 500w, medium.jpg 1000w, large.jpg 2000w" src = "..." alt = ""> cho trình duyệt hiển thị hình ảnh .jpg nhỏ, vừa hoặc lớn tùy theo resolution của máy khách hàng. Giá trị đầu tiên là tên hình ảnh và giá trị thứ hai là chiều rộng của hình ảnh tính bằng pixel. Đối với chiều rộng thiết bị là 320px, các phép tính sau được thực hiện:

  • 500/320 = 1,5625
  • 1000/320 = 3,125
  • 2000/320 = 6,25

Nếu độ phân giải của máy khách hàng là 1x, thì gần nhất là 1.5625 và 500w tương ứng với small.jpg sẽ được trình duyệt chọn. Nếu độ phân giải là retina (2x), trình duyệt sẽ sử dụng độ phân giải gần nhất trên mức tối thiểu.

Có nghĩa là nó sẽ không chọn 500w (1.5625) vì nó lớn hơn 1 và hình ảnh có thể trông xấu. Vì vậy, trình duyệt sẽ chọn hình ảnh có tỷ lệ kết quả gần hơn với 2 là 1000w (3.125).

Theo đó "srcset" giải quyết vấn đề bạn muốn cung cấp các tệp hình ảnh nhỏ hơn cho các thiết bị màn hình hẹp, vì chúng không cần hình ảnh lớn như màn hình máy tính để bàn - và cũng có thể tùy chọn khi bạn muốn cung cấp hình ảnh có độ phân giải khác nhau cho màn hình mật độ cao / mật độ thấp (high density/low-density screens).

Bạn phải lưu ý những điều gì khi phát triển các trang web đa ngôn ngữ?


  • Sử dụng thuộc tính lang trong HTML của bạn.
  • Hướng người dùng đến ngôn ngữ mẹ đẻ của họ - Cho phép người dùng thay đổi quốc gia / ngôn ngữ của mình một cách dễ dàng.
  • Độ dài từ / câu hạn chế - Một số nội dung có thể dài hơn khi được viết bằng ngôn ngữ khác. Khi đó có thể gây ra hiện tượng tràn bố cục khi đổi sang 1 ngôn ngữ có độ dài hơn.
  • Lưu ý đến cách cảm nhận màu sắc - Màu sắc được cảm nhận khác nhau giữa các ngôn ngữ và nền văn hóa. Thiết kế nên sử dụng màu sắc một cách hợp lý.
  • Định dạng ngày tháng và đơn vị tiền tệ - Ngày lịch đôi khi được trình bày theo những cách khác nhau.Ví dụ. "May 31, 2012" ở US so với "31 May 2012" ở các khu vực của Châu Âu.
  • Không nối các chuỗi đã dịch - Không làm bất cứ điều gì như “The date today is "+ date. Nó sẽ ngắt ở các ngôn ngữ có thứ tự từ khác nhau. Ví dụ: hãy xem hai câu sau bằng tiếng Anh và tiếng Việt tương ứng: “I’m living at {{districtName}} district” – “Tôi đang sống tại quận {{districtName}}”. - Lưu ý rằng vị trí của biến khác nhau do các quy tắc ngữ pháp của ngôn ngữ.
  • Hướng đọc ngôn ngữ - Trong tiếng Anh, chúng ta đọc từ trái sang phải, từ trên xuống dưới, Trong tiếng Nhật truyền thống, văn bản được đọc từ trên xuống, từ phải sang trái.

WebP là gì?


  • WebP là một định dạng hình ảnh như jpg, png có kích thước nhỏ hơn khoảng 10-20% so với các định dạng khác.
  • Được phát triển và giới thiệu bởi Google vào năm 2010.
  • Không phải tất cả các trình duyệt đều hỗ trợ WebP.
  • Các plugin có sẵn để chuyển đổi các định dạng khác sang WebP.

Bạn sẽ chọn sử dụng svg hay canvas cho trang web của mình?


SVG là một ngôn ngữ để mô tả đồ họa 2D trong XML. Canvas vẽ đồ họa 2D một cách nhanh chóng (với JavaScript).

Sự khác biệt giữa SVG và Canvas sẽ hữu ích trong việc chọn đúng.

**Canvas **

  • Phụ thuộc resolution
  • Không hỗ trợ các Event handler
  • Khả năng hiển thị văn bản kém
  • Bạn có thể lưu hình ảnh kết quả dưới dạng .png hoặc .jpg
  • Rất thích hợp cho các trò chơi đồ họa chuyên sâu

SVG

  • Resolution độc lập
  • Hỗ trợ các Event handler
  • Phù hợp nhất cho các ứng dụng có khu vực hiển thị lớn (Google Maps)
  • Render chậm nếu phức tạp (bất kỳ thứ gì sử dụng DOM nhiều sẽ chậm)
  • Không phù hợp với ứng dụng trò chơi

Kết luận: SVG tốt hơn cho các ứng dụng và ứng dụng có ít item. Canvas tốt hơn cho hàng nghìn đối tượng và thao tác cẩn thận, nhưng cần nhiều mã hơn (hoặc một thư viện) để hoàn thiện nó.

Làm thế nào để tạo khoá công khai (public key) trong HTML?


  • Thẻ <keygen> tạo cặp khóa public-private và gửi khóa pulic đến server cùng với việc gửi form. Phần tử này dự kiến sẽ không được dùng nữa và không có hỗ trợ trình duyệt rộng rãi.
  • Nếu hai bên muốn giao tiếp an toàn, mỗi bên cần có khả năng tạo một cặp khóa public-private và sau đó sử dụng khóa public với bên kia. <keygen> nhằm tạo điều kiện thuận lợi cho việc này trong ngữ cảnh của một biểu mẫu HTML.
  • Trong các trình duyệt triển khai nó (không phải tất cả đều như vậy), nếu phần tử được bao gồm trong một biểu mẫu, thì trình duyệt sẽ tạo một cặp khóa cục bộ và gửi khóa public đến form khi form được gửi.
  • Khóa private sau đó được lưu trữ cục bộ và không được chia sẻ.
  • Đã từng có thông báo rằng phần tử <keygen> sẽ không được dùng nữa và bị loại bỏ khỏi tiêu chuẩn HTML5.
  • Điều này có nghĩa là sẽ cần đến các phương pháp tạo khóa thay thế. Đương nhiên, điều này đơn giản có nghĩa là sử dụng JavaScript.

Làm thế nào để tạo khoá công khai (public key) trong HTML?


  • Thẻ <keygen> tạo cặp khóa public-private và gửi khóa pulic đến server cùng với việc gửi form. Phần tử này dự kiến sẽ không được dùng nữa và không có hỗ trợ trình duyệt rộng rãi.
  • Nếu hai bên muốn giao tiếp an toàn, mỗi bên cần có khả năng tạo một cặp khóa public-private và sau đó sử dụng khóa public với bên kia. <keygen> nhằm tạo điều kiện thuận lợi cho việc này trong ngữ cảnh của một biểu mẫu HTML.
  • Trong các trình duyệt triển khai nó (không phải tất cả đều như vậy), nếu phần tử được bao gồm trong một biểu mẫu, thì trình duyệt sẽ tạo một cặp khóa cục bộ và gửi khóa public đến form khi form được gửi.
  • Khóa private sau đó được lưu trữ cục bộ và không được chia sẻ.
  • Đã từng có thông báo rằng phần tử <keygen> sẽ không được dùng nữa và bị loại bỏ khỏi tiêu chuẩn HTML5.
  • Điều này có nghĩa là sẽ cần đến các phương pháp tạo khóa thay thế. Đương nhiên, điều này đơn giản có nghĩa là sử dụng JavaScript.

IndexedDB là gì?


  • IndexedDB là cơ sở dữ liệu hướng đối tượng dựa trên javascript.
  • IndexedDB hữu dụng khi chúng ta muốn lưu trữ lượng lớn dữ liệu trong các ứng dụng web.
  • IndexedDB lưu trữ dữ liệu dưới dạng cặp khóa key-value.
  • IndexedDB là một API bất đồng bộ.
  • IndexedDB được hỗ trợ trong hầu hết các trình duyệt.

Accessibility và ARIA role có ý nghĩa gì trong một ứng dụng web?


Accessibility có nghĩa là cho phép người dùng điều hướng và tương tác với một trang web bằng bất kỳ phương tiện nào, chẳng hạn như: bàn phím, con chuột, người khuyết tật và người tàn tật.

  • ARIA là viết tắt của Accessible Rich Internet Application.
  • ARIA là một thông số kỹ thuật từ W3C.
  • ARIA được tạo ra để cải thiện khả năng truy cập trong các ứng dụng web.
  • ARIA cung cấp thêm thông tin cho trình đọc màn hình thông qua các thuộc tính HTML.
  • ARIA không ảnh hưởng đến cách một phần tử được hiển thị trong trình duyệt.

Web Components là gì?


  • Web components là một tập hợp của nền tảng web API.
  • Web components cho phép chúng ta tạo ra các widget hoặc thành phần (component) có thể tùy chỉnh tái sử dụng trong nền tảng web.
  • Web components là một phần của trình duyệt và sẽ hoạt động trong tất cả các trình duyệt hiện đại.
  • Web components không yêu cầu bất kỳ thư viện bên ngoài nào để hoạt động.

Tính năng

  • Custom Elements- Hãy làm lại các phần tử DOM đầy đủ tính năng của riêng bạn.
  • Shadow DOM - cung cấp tính năng tốt nhất của iframe, style và markup cho trang web.
  • HTML Templates - cho phép lưu trữ một số markup trên trang web và sau đó chúng ta có thể sao chép và sử dụng lại chúng.
  • HTML Imports - cho phép nhập một tài liệu HTML bên ngoài.
Avatar Techmely Team
VIẾT BỞI

Techmely Team