Trong bài viết này, ITviec tổng hợp 50+ câu hỏi phỏng vấn HTML CSS dành cho HTML/CSS  Developer từ cấp độ đầu vào (Junior) cho đến cấp cao (Senior). Hãy cùng cập nhật bộ câu hỏi và thử trả lời trước khi xem đáp án để nắm chắc về kiến thức cho buổi phỏng vấn thành công bạn nhé!

Đọc bài viết sau đây để hiểu rõ hơn về bộ câu hỏi phỏng vấn HTML CSS:

  • Định hướng phát triển nghề nghiệp của HTML và CSS
  • Câu hỏi phỏng vấn về HTML ở mọi cấp độ
  • Câu hỏi phỏng vấn HTML CSS từ trình độ cơ bản đến nâng cao

Những vị trí nào cần nắm vững kiến thức HTML và CSS?

HTML (HyperText Markup Language) và CSS (Cascading Style Sheets) là những ngôn ngữ được dùng để tạo một trang web. HTML sẽ đóng vai trò cung cấp cấu trúc trong khi CSS sẽ xác định kiểu dáng, màu sắc và bố cục cho trang web. Cả hai thường được sử dụng cùng với cả JavaScript để vận hành một trang web hoàn chỉnh và thân thiện với người dùng. 

Khi biết sử dụng thành thạo chuyên sâu về HTML và CSS, bạn có thể lựa chọn phát triển về Front-End Developer (lập trình viên Front-End), Full-stack Developer (lập trình viên Full-stack) hoặc Web Developer (lập trình Web). 

Công việc của lập trình viên về HTML và CSS thường là:

  • Triển khai và tùy chỉnh các template, bao gồm màu sắc và phông chữ cho thương hiệu. 
  • Xây dựng cấu trúc và điều hướng của trang web hoặc phát triển ứng dụng.
  • Thực hiện mã hóa cho trang web. 
  • Giải quyết các lỗi phát sinh hoặc vấn đề trong quá trình vận hành trang web.

Theo Báo cáo Lương và Thị trường Tuyển dụng IT tại Việt Nam 2024 – 2025 mới nhất do ITviec thực hiện, mức lương trung vị của các vị trí liên quan về HTML và CSS như sau:

Số năm kinh nghiệm Mức lương trung vị (đơn vị: VND/ tháng)
Front-End Developer Full-stack Developer
< 1 năm N/A 14.700.000
1-2 năm 16.100.000 16.650.000
3-4 năm 23.300.000 29.900.000
5-8 năm 34.950.000 39.700.000
>8 năm  50.950.000 50.000.000

Xem thêm: Front end Developer là gì: Làm gì, Lộ trình học tập và Công cụ làm việc

Câu hỏi phỏng vấn HTML CSS dành cho Fresher/Junior Developer 

Sự khác biệt giữa HTML và XHTML

# HTML XHTML
1 Hypertext Markup Language Extensible Hypertext Markup Language
2 Được phát triển vào năm 1991 bởi Tim Berners-Lee Được phát triển vào năm 2000 bởi W3C 
3 Được mở rộng từ SGML Được mở rộng từ XML và HTML
4 Định dạng tệp tài liệu Định dạng là ngôn ngữ đánh dấu
5 Tất cả các thẻ và thuộc tính không nhất thiết phải viết hoa hoặc viết thường. Mọi thẻ và thuộc tính phải viết thường
6 Doctype không nhất thiết phải viết ở đầu Doctype cần thiết cho vị trí đầu tiên trong file
7 Không nhất thiết phải đóng thẻ  Cần đóng các thẻ theo thứ tự mở
8 Khi sử dụng thuộc tính, không nhất thiết phải đề cập đến dấu ngoặc kép. Khi sử dụng thuộc tính, bắt buộc phải có dấu ngoặc kép.
9 Phần mở rộng của file được sử dụng là .html, .htm Phần mở rộng là .xhtml, .xht hoặc .xml

Sự khác biệt giữa HTML và HTML5 là gì?

HTML HTML5
Không hỗ trợ âm thanh và video nếu không sử dụng Flash Player. Hỗ trợ điều khiển âm thanh và video bằng cách sử dụng thẻ <audio> và <video>.
Sử dụng cookie để lưu trữ dữ liệu tạm thời Sử dụng cơ sở dữ liệu SQL và bộ đệm ứng dụng để lưu trữ dữ liệu ngoại tuyến.
Cho phép JavaScript chạy trong trình duyệt. Cho phép JavaScript chạy ở chế độ nền, điều này có thể thực hiện nhờ JS Web worker API trong HTML5.
Đồ họa vector có thể có trong HTML với sự hỗ trợ của nhiều công nghệ khác như VML, Silverlight, Flash,… Đồ họa vector là một phần không thể thiếu như SVG và Canvas.
Không cho phép các hiệu ứng kéo và thả. Cho phép các hiệu ứng kéo thả và hỗ trợ thuộc tính blank.
Không vẽ các hình dạng như hình tròn, chữ nhật, tam giác. Vẽ được các hình dạng.
Tương thích với các trình duyệt cũ. Được hỗ trợ và tương thích với tất cả trình duyệt như Firefox, Mozilla, Chrome, Safari,…
Phiên bản HTML ít thân thiện với thiết bị di động Tối ưu hóa phù hợp với thiết bị di động.
Khai báo Doctype quá dài và phức tạp Khai báo Doctype đơn giản và dễ dàng hơn
Không có phần tử nav hay header Hỗ trợ phần tử mới cho cấu trúc web như nav, header, footer,..
Mã hóa ký tự dài và phức tạp Mã hóa ký tự đơn giản và dễ dàng.
Gần như không có được GeoLocation thực sự của người dùng bằng sự trợ giúp của trình duyệt Dễ dàng theo dõi GeoLocation của người dùng bằng cách sử dụng JS GeoLocation API.
Có khả năng xử lý cú pháp Giống như HTML. HTML5 có quy định rõ ràng hơn về cách xử lý cú pháp
Các thuộc tính như charset, async và ping không có Thuộc tính charset, async và ping là một phần của HTML5.

Thẻ <b> và <strong> có giống nhau không? Giải thích

<strong> là một trong những phần tử HTML được sử dụng để định dạng văn bản. Thẻ được sử dụng để thể hiện tầm quan trọng của văn bản bằng cách in đậm hoặc làm nổi bật văn bản.

<strong> Nội dung... </strong>

<bold> hoặc <b> cũng là một trong những phần tử định dạng của HTML. Văn bản được viết dưới thẻ <bold> sẽ được in đậm để thu hút sự chú ý.

<b> Nội dung... </b>

Sự khác biệt chính giữa <b> và <strong> là thẻ <strong> nhấn mạnh những từ hoặc đoạn nội dung quan trọng. Trong khi <b> chỉ bù đắp văn bản theo kiểu in đậm thông thường.

Những định dạng màu sắc nào trong HTML?

Màu sắc của một phần tử trong HTML có thể được xác định dưới dạng các hệ màu như dưới đây. Bạn có thể ứng dụng hệ màu để định dạng màu chữ, màu viền khung, đổi màu liên kết (links) hoặc màu nền cho chữ,…

Hệ màu HTML
  • Xác định màu sắc bằng cách sử dụng trực tiếp chính tên của màu đó. 

Ví dụ: background-color:Orange, background-color:MediumSeaGreen, background-color:LightGray

HEX
  • Hệ màu thập lục nhị phân ba byte (6 chữ số), với mỗi byte hiển thị cho màu sắc tương ứng là đỏ, xanh dương và xanh lá. 
  • Mỗi byte gồm 2 chữ số có giá trị cường độ nằm trong khoảng từ 00 (thấp nhất) đến FF (cao nhất).

Ví dụ: #FF0000, #00FF00, #0000FF

RGB/RGBA
  • Cơ chế màu cơ bản là red (đỏ), green (xanh lá) và blue (xanh dương).
  • Hệ mở rộng RGBA với A là độ trong suốt của màu sắc (Opacity).
  • Với cường độ ba màu được xác định giá trị từ 0 đến 255, trong đó  0 là không có ánh sáng và 255 là độ sáng cao nhất.

Ví dụ: rgb(255, 0, 0), rgba(255, 0, 0, 0.5)

HSL/HSLA
  • Được xác định bằng cách sử dụng màu sắc (Hue), độ bão hòa (Saturation) và độ sáng (Lightness).
  • Hue: Mức độ màu sắc, giá trị nằm trong khoảng từ 0 đến 360 với 0 là màu đỏ, 120 màu xanh lá cây và 240 là màu xanh lam.
  • Saturation (độ bão hòa): Lấy giá trị phần trăm, trong đó 100% là độ bão hòa hoàn toàn, 0% là không có độ bão hòa.
  • Lightness (độ sáng): Lấy giá trị phần trăm với 100% là mức độ sáng nhất và 0% là sắc độ tối nhất. 
  • Hệ màu mở rộng HSLA với A là độ trong suốt (Opacity)

Ví dụ: hsl(0, 100%, 50%), hsla(0, 100%, 50%, 0.5)

Xem thêm: Tổng hợp chi tiết và đầy đủ nhất về Bảng màu HTML

Các loại danh sách trong HTML?

Danh sách là bản ghi các đoạn thông tin liên quan được sử dụng để hiển thị dữ liệu hoặc thông tin bất kỳ theo dạng có thứ tự hoặc không có thứ tự. HTML cung cấp 3 cách để chỉ định danh sách thông tin, tất cả danh sách phải chứa 1 hoặc nhiều phần tử.

Các loại danh sách được sử dụng trong HTML là:

  • Danh sách không có thứ tự (unordered list): Liệt kê các mục bằng cách sử dụng các dấu đầu dòng đơn giản.
  • Danh sách có thứ tự (ordered list):  Sử dụng các lược đồ số khác nhau để liệt kê các mục. 

Phần tử (element) và thẻ (tags) trong HTML là gì? Điểm khác biệt giữa 2 giá trị này

Thẻ HTML (tags) là phần bắt đầu và kết thúc của một phần tử HTML. Chúng thường bắt đầu bằng ký hiệu < và kết thúc bằng >. Bất cứ nội dung được viết bên trong cặp dấu ngoặc nhọn <> được gọi là thẻ.

<b> </b>

Phần tử HTML (element) bao gồm nội dung giữa các thẻ. Chúng bao gồm một số loại cấu trúc hoặc biểu thức, thường bao gồm một thẻ bắt đầu, nội dung và một thẻ kết thúc.

<b>ITviec Blog</b>

Bảng tóm tắt so sánh Thẻ và Phần tử HTML:

Thẻ HTML Phần tử HTML
Sử dụng cặp thẻ đóng mở để đánh dấu điểm bắt đầu hoặc kết thúc của một phần tử. Bao gồm thẻ bắt đầu, thẻ kết thúc và các thuộc tính của nó.
Được sử dụng để chứa phần tử Chứa nội dung
Bắt đầu bằng < và kết thúc bằng > Bất cứ nội dung được viết trong cặp thẻ <> đều là phần tử HTML.

Làm thế nào để chuyển hướng đến một phần cụ thể trong một trang bằng HTML?

Bạn có thể sử dụng anchor tag để chuyển hướng đến một phần cụ thể trên cùng một trang. Bạn sẽ cần thêm “id attribute” vào phần mà bạn muốn hiển thị và sử dụng cùng một id trong thuộc tính href với # trong anchor tag. Khi nhấn vào một liên kết cụ thể, bạn sẽ được chuyển hướng đến phần có cùng id được đính kèm trong anchor tag.

<a href="#home_section">home</a>

<section id="home_section">
    Information About Page
</section>

Thuộc tính (attribute) là gì?

Thuộc tính được sử dụng để cung cấp thêm thông tin về một phần tử. 

  • Tất cả các phần tử HTML đều có thuộc tính.
  • Có 2 tham số, tên và giá trị. Chúng xác định các thuộc tính của phần tử và được đặt bên trong thẻ mở đầu của phần tử. Tham số lấy tên của thuộc tính muốn gán cho phần tử và giá trị lấy giá trị cho thuộc tính hoặc phạm vi có thể được căn chỉnh trên phần tử.
  • Mỗi tên có một số giá trị phải được viết trong dấu ngoặc kép.

Những thẻ HTML nào được sử dụng để trình bày table trong HTML?

  • <table>: Được sử dụng để định nghĩa bảng. 
  • <tr>: Định nghĩa một hàng trong bảng.
  • <th>: Định nghĩa một ô tiêu đề trong bảng.
  • <td>: Định nghĩa một ô trong bảng.
  • <caption>: Định nghĩa chú thích của bảng.
  • <colgroup>: Định nghĩa một nhóm gồm một hoặc nhiều cột trong bảng để định dạng.
  • <col>: Được sử dụng với phần tử <colgroup> để chỉ định các thuộc tính cột cho từng cột.
  • <tbody>: Định nghĩa một nhóm nội dung chính trong bảng.
  • <thead>: Được sử dụng một nhóm nội dung tiêu đề trong bảng.
  • <tfooter>: Được sử dụng một nhóm nội dung ở phần chân trang. 

Xem thêm: Table HTML: Hướng dẫn cách tạo bảng trong HTML chi tiết từ A – Z

Sự khác nhau giữa block và inline là gì?

Mỗi phần tử trong HTML đều có giá trị hiển thị mặc định tùy thuộc vào loại phần tử. Block và inline là giá trị hiển thị mặc định cho hầu hết các phần tử. Phần tử cấp khối (block-level elements) luôn bắt đầu trên một dòng mới và có thể kéo sang trái hoặc phải xa nhất có thể.

div được sử dụng làm vùng chứa cho các phần tử HTML khác. div không có thuộc tính bắt buộc, style, class và id là các thuộc tính thường được sử dụng.

Bên cạnh đó, phần tử nội tuyến (inline element) không bắt đầu trên một dòng mới và chỉ chiếm một chiều rộng cần thiết.

span là phần tử được sử dụng làm vùng chứa cho văn bản và không có thuộc tính bắt buộc. Style, class và id cũng là các thuộc tính thường được sử dụng cùng với span. Span thường được dùng để áp dụng các kiểu hoặc tập lệnh cho một phần nhỏ văn bản trong một khối nội dung lớn. 

Sự khác nhau giữa inline, inline-block và block là gì?

Inline, block và inline-block là giá trị của thuộc tính display trong CSS cho phép quyết định bố cục của thành phần trong mô hình kết xuất. Dễ hiểu hơn là thiết lập cách thành phần chiếm không gian và tương tác với môi trường xung quanh trên trang web. 

  • Block: Phần tử cấp khối chiếm toàn bộ chiều rộng của container lớn, đẩy nội dung lên dòng tiếp theo. Block thích hợp để tạo các phần, bộ chia hoặc vùng chứa xếp chồng theo chiều dọc. Chẳng hạn khi bạn muốn thiết lập các thành phần chính của trang web như tiêu đề, chân trang, vùng nội dung chính, khối,… 
  • Inline: Phần tử nội tuyến chỉ chiếm một lượng chiều rộng cần thiết và không đẩy nội dung tiếp theo sang một dòng mới. Inline phù hợp để tạo kiểu trong văn bản (như làm cho một từ in đậm hoặc in nghiêng), hoặc có nhiều phần tử cạnh nhau. 
  • Inline-block: Kết hợp đặc điểm của hai giá trị trên, phần tử có thể nằm cạnh nhau (như phần tử inline) nhưng cũng có thể có chiều rộng và chiều cao cụ thể được thiết lập (như phần tử block). Điều này đặc biệt hữu ích cho các phần tử cần nằm thành một hàng như có kích thước cụ thể, chẳng hạn như nút hoặc mục trong menu ngang. 

Bộ chọn CSS (CSS Selector) là gì? Liệt kê các bộ chọn 

Bộ chọn (CSS selector) là các mẫu được sử dụng để lựa chọn phần tử hoặc các phần tử mà bạn muốn định kiểu. Chúng được sử dụng để tìm các phần tử dựa trên tên, ID, lớp, thuộc tính cùng nhiều yếu tố khác. Dưới đây là một vài ví dụ:

  • p là bộ chọn kiểu (type selector) cho tất cả các phần tử <p>.
  • .navigation là bộ chọn lớp (class selectors) chọn tất cả phần tử có lớp là navigation.
  • #header là bộ chọn ID (ID selector) chọn phần tử có ID là header. 

CSS Preprocessor là gì? Sass, Less, Stylus là gì và tại sao lại sử dụng chúng? 

CSS Preprocessor là một chương trình cho phép bạn tạo CSS từ cú pháp riêng của bộ tiền xử lý (preprocessor). Có nhiều CSS preprocessor để lựa chọn, tuy nhiên hầu hết các bộ tiền xử lý sẽ bổ sung một số tính năng không có trong CSS thuần túy, như bộ chọn lồng nhau, bộ chọn kế thừa,… Các tính năng này sẽ làm cho cấu trúc CSS dễ đọc và bảo trì hơn.

Thông thường, sử dụng Sass, Less và Stylus để mở rộng chức năng cơ bản của CSS thuần túy. 

  • Sass (Syntactically Awesome Style Sheets): Sử dụng phần mở rộng .sass. được sử dụng để thụt lề, không sử dụng dấu chấm phẩy hoặc dấu ngoặc nhọn. 
  • Less (Leener Stylesheets): Sử dụng phần mở rộng .less. Việc thêm vào bất kỳ dự án JavaScript nào cũng dễ dàng bằng cách sử dụng tệp NPM hoặc less.js. Ở đây, @ được sử dụng để định nghĩa các biến. 
  • Stylus: Cung cấp tính linh hoạt tuyệt vời trong việc viết cú pháp. Có thể sử dụng CSS gốc và loại trừ dấu ngoặc, dấu hai chấm hoặc dấu chấm phẩy. Không cần sử dụng @ hoặc $ để định nghĩa các biến. 

Kể tên một số CSS framework mà bạn biết?

CSS Framework là các thư viện giúp định dạng hoặc tạo kiểu cho trang web dễ dàng hơn. Một số framework CSS phổ biến có thể kể đến như:

  • Bootstrap: Cung cấp các thành phần CSS và JavaScript như hệ thống lưới (grid system) cùng thành phần UI (menu điều hướng, biểu mẫu,…) giúp tối ưu hóa quá trình xây dựng bố cục trang web. 
  • Material UI: Dựa trên thành phần để xây dựng giao diện người dùng trong ứng dụng React. Material UI cung cấp một hệ thống thiết kế hiện đại các template cũng như thành phần được dựng sẵn. 
  • Foundation: Giải pháp thay thế gần nhất cho Bootstrap nhưng tập trung nhiều vào tiện ích. Với bộ công cụ toàn diện để tạo kiểu cho ứng dụng web, thiết kế mẫu email cùng tích hợp Motion UI để tạo các hoạt ảnh CSS nâng cao. 

Thành phần của CSS Box Model là gì?

Mô hình hộp CSS (box model) là một container chứa nhiều thuộc tính bao gồm đường viền, lề, đệm và nội dung. Được sử dụng để xác định bố cục và thiết kế của các phần tử CSS.

Theo CSS Box Model, trình duyệt web sẽ cung cấp mỗi phần tử như một lăng trụ vuông. Các phần tử là nội dung (văn bản, hình ảnh), phần đệm (khu vực xung quanh nội dung), đường viền (xung quanh phần đệm) và lề (xung quanh đường viền). 

Làm thế nào để tích hợp CSS vào HTML?

CSS được sử dụng để định dạng kiểu dáng cho các trang web chứa các phần tử HTML. Nếu như HTML được dùng để tạo phần “khung xương” cho trang web thì CSS sẽ giúp định dạng cho trang web trở nên ấn tượng và thân thiện với người dùng hơn.

Có 3 cách để tích hợp CSS vào file HTML là sử dụng thẻ <style> trong phần đầu (head section), định dạng nội tuyến (inline styling) hoặc viết CSS ra một file riêng và tích hợp vào HTML bằng thẻ <link>. 

Xem thêm: HTML CSS là gì? 3 cách link CSS vào HTML khi lập trình website

Overflow CSS là gì?

Overflow CSS cho phép bạn xử lý và kiểm soát những gì xảy ra khi tràn nội dung trong hộp phần tử. Overflow xảy ra khi nội dung trong phần tử vượt quá một hoặc nhiều cạnh của hộp. Tràn có thể cuộn (scrollable overflow) là nội dung xuất hiện bên ngoài phần tử mà bạn muốn thêm cơ chế cuộn (scroll). 

Một số thuộc tính của CSS Overflow có thể kể đến như:

  • overflow-block và overflow-inline: Thiết lập những gì hiển thị khi nội dung tràn ra khỏi các cạnh bắt đầu và kết thúc của khối hộp phần tử. 
  • overflow-x và overflow-y: Chỉ định thay đổi overflow của các phần tử với x giúp xử lý cạnh ngang và y xử lý cạnh dọc. 
  • scroll: Nội dung dư bị cắt nhưng một thanh cuộn được thêm vào để người dùng có thể xem được phần còn lại của nội dung. Thanh cuộn có thể là ngang hoặc dọc. 
  • visible: Nội dung không bị cắt và có thể hiển thị bên ngoài hộp phần tử.
  • hidden: Nội dung bị cắt và phần còn lại của nội dung bị tràn sẽ không hiển thị. 
  • auto: Thanh cuộn được tự động thêm vào khi nội dung bị tràn. 

Xem thêm: Top 30+ câu hỏi phỏng vấn CSS từ cơ bản đến nâng cao

Câu hỏi phỏng vấn HTML CSS dành cho Middle Developer

Làm thế nào để tạo trang web lồng vào nhau trong HTML?

Khi nội dung của một trang web được nhúng vào một trang web khác thì được gọi là trang web lồng nhau. Trang web lồng nhau có thể được tạo ra bằng 2 phương pháp:

  • <iframe>: Viết tắt của cụm Inline Frame, định nghĩa một vùng hình chữ nhật trong tài liệu mà trình duyệt có thể hiển thị một tài liệu riêng biệt, bao gồm thanh cuộn và đường viền.
  • <embed>: Được sử dụng để nhúng các ứng dụng bên ngoài, thường là nội dung đa phương tiện như âm thanh hoặc video trong file HTML. 

Semantic tag trong HTML là gì?

Phần tử ngữ nghĩa (semantic tag) cho biết ý nghĩa của loại nội dung, chẳng hạn như header, footer, table,… giúp lập trình viên dễ viết, mã dễ hiểu cũng như hướng dẫn trình duyệt cách xử lý chúng.

  • article: Chứa nội dung độc lập không yêu cầu bất kỳ ngữ cảnh khác.
  • aside: Được sử dụng để đặt nội dung trong thanh bên, tức ngoài nội dung hiện có.
  • details: Định nghĩa chi tiết bổ sung mà người dùng có thể ẩn hoặc xem.
  • figure & figcaption: Được sử dụng để thêm hình ảnh vào trang web với mô tả nhỏ.
  • footer: Nằm ở cuối bất kỳ bài viết hoặc tài liệu nào, có thể chứa thông tin liên hệ hoặc thông tin bản quyền,…
  • header: Được sử dụng làm tiêu để của phần giới thiệu của trang.
  • main: Định nghĩa nội dung chính của tài liệu.
  • mark: Được sử dụng để làm nổi bật văn bản.
  • nav: Được sử dụng để định nghĩa một tập hợp các liên kết điều hướng dưới dạng thanh điều hướng hoặc menu điều hướng.
  • section: Một trang có thể được chia thành nhiều phần như giới thiệu, thông tin liên hệ hoặc nội dung,… Mỗi phần có thể nằm trong mỗi thẻ <section> khác nhau.

Phân biệt giữa phương thức POST và GET

HTTP (The Hypertext Transfer Protocol) được thiết kế để cho phép giao tiếp giữa máy khách (client-side) và máy chủ (server-side). HTTP hoạt động như một giao thức yêu cầu-phản hồi giữa máy khách và máy chủ. Có 2 phương thức yêu cầu HTTP là GET và POST.

  • Các phần in đậm trong URL là tham số GET và phần in nghiêng là giá trị của tham số đó.
  • Có thể nhúng nhiều hơn một tham số = giá trị vào URL bằng cách nối với dấu thăng (&).
  • Chỉ có thể gửi dữ liệu văn bản đơn giản qua phương thức GET.

Ngoài ra, cả hai phương thức có những điểm khác biệt như:

GET POST
Yêu cầu dữ liệu từ một tài nguyên được chỉ định Được sử dụng để gửi dữ liệu cần xử lý đến một tài nguyên được chỉ định.
Có giới hạn về độ dài URL (khoảng 2048 ký tự) Không giới hạn độ dài dữ liệu
Dữ liệu hiển thị trên URL (không bảo mật). Dữ liệu được gửi trong body request (có tính bảo mật hơn)
Có thể cache Không cache được
Không thay đổi dữ liệu server (idempotent) Có thể thay đổi dữ liệu server

SVG trong HTML là gì?

SVG (Scalable Vector Graphics – Đồ họa vector có thể mở rộng) định nghĩa đồ họa dựa trên vector theo định dạng XML. Đồ họa SVG không mất chất lượng nếu chúng được phóng to hoặc thay đổi kích thước. Mọi thành phần và thuộc tính trong SVG đều có được hoạt hình hóa.

Ưu điểm của SVG so với các định dạng hình ảnh khác như JPEG và GIF có thể kể đến như:

  • Hình ảnh SVG có thể được tạo và chỉnh sửa bằng bất kỳ trình soạn thảo văn bản nào.
  • Có thể được tìm kiếm, lập chỉ mục, viết kịch bản và nén.
  • Có thể mở rộng.
  • Có thể được in với chất lượng cao ở bất kỳ độ phân giải nào.

HTML Web Storage API là gì?

SessionStorage và LocalStorage được biết đến là API lưu trữ web. Dữ liệu có thể được lưu trữ ở phía máy khách bằng cách sử dụng API này.

SessionStorage LocalStorage
  • Được sử dụng để lưu trữ dữ liệu ở phía máy khách.
  • Giới hạn lưu trữ dữ liệu tối đa tùy theo trình duyệt.
  • Dữ liệu sẽ tồn tại cho đến khi tab hiện tại mở, nếu đóng tab hiện tại thì dữ liệu cũng sẽ tự động xóa khỏi SessionStorage.
  • Được sử dụng để lưu trữ dữ liệu ở phía máy khách.
  • Dung lượng lưu trữ tùy trình duyệt. 
  • Không có thời gian hết hạn, dữ liệu trong LocalStorage vẫn tồn tại cho đến khi người dùng xóa thủ công.

Form là gì và cách tạo form trong HTML?

Biểu mẫu HTML là một tài liệu lưu trữ thông tin của người dùng trên máy chủ web bằng các điều khiển tương tác. Biểu mẫu HTML chứa nhiều loại thông tin khác như như tên người dùng, mật khẩu, số diện thoại, ID hoặc email.

Các thành phần được sử dụng trong biểu mẫu HTML thường là hộp kiểm, hộp nhập, nút radio, nút gửi,… Khi sử dụng các thành phần này, thông tin của người dùng sẽ được gửi lên máy chủ web. 

<!DOCTYPE html>
<html>

<body>
    <form> 
        Username:
        <br>
        <input type="text" 
               name="username">
        <br> 
        Email id:
        <input type="text" 
               name="email_id">
        <br>
        <input type="submit" 
               value="Submit">
    </form>
</body>
</html>

Phân biệt giữa div và span

Cả hai thẻ <div> và <span> đều được sử dụng để biểu diễn một phần của trang web. Thẻ <div> được sử dụng như một thành phần khối (block component) và <span> được sử dụng làm thành phần nội tuyến (inline).

  • <div>: Thẻ cấp khối (block) được sử dụng trong HTML để phân chia nội dung trên trang web (văn bản, hình ảnh, tiêu đề, chân trang hay thanh điều hướng,….
  • <span>: Một vùng chứa nội tuyến chung cho các phần tử và nội dung nội tuyến. Được sử dụng để nhóm các phần tử cho mục đích tạo kiểu (bằng cách sử dụng thuộc tính id hoặc class).
<div>
        ITviec Blog - Ý tưởng phát triển sự nghiệp IT của bạn
    <span>
        ITviec Blog
    <span>
</div>

Điểm khác biệt giữa <div> và <span> cụ thể như sau:

div span
Phần tử cấp khối (block-level element) Phần tử nội tuyến (inline element)
Đính kèm vào một phần của trang web Đính kèm CSS vào một phần nhỏ của một dòng trên trang web.
Chấp nhận thuộc tính align (HTML5 không khuyến khích, có thể dùng kết hợp với CSS Grid và Flexbox) Không chấp nhận thuộc tính align
Được sử dụng để bao bọc một phần và làm nổi bật phần đó Được sử dụng để bao bọc bất kỳ từ cụ thể nào mà bạn muốn làm nổi bật trên trang web của mình.

Bạn hiểu gì về HTML Canvas?

HTML Canvas được sử dụng để vẽ đồ họa thông qua JavaScript. Phần tử “canvas” chỉ là một vùng chứa đồ họa và phải sử dụng JavaScript để vẽ đồ họa hoàn chỉnh. Canvas có một số phương pháp để vẽ đường dẫn, hộp, hình tròn, văn bản và thêm hình ảnh.

Ví dụ: Canvas sẽ là một vùng hình chữ nhật trên trang HTML. Theo mặc định, canvas không có đường viền và nội dung. Do đó, thuộc tính id đã được chỉ định để tham chiếu đến nó trong một tập lệnh, thuộc tính width và height để xác định kích thước của canvas. Thuộc tính style được sử dụng để thêm đường viền.

<!DOCTYPE html>
<html>

<body>
    <canvas id="myCanvas" 
            width="400" 
            height="200"
            style="border:2px solid #000000;">
    </canvas>
</body>
</html>

câu hỏi phỏng vấn html css- itviec blog

Kết quả hiển thị của đoạn mã trên.

Bạn hiểu như thế nào về z-index?

Đây là một trong những câu hỏi phỏng vấn CSS thường gặp. Z-index được sử dụng để chỉ định thứ tự xếp chồng của các phần tử chồng lên nhau.

Giá trị mặc định của nó là số không và có thể nhận cả giá trị âm cùng giá trị dương. Giá trị z-index cao hơn được xếp chồng lên phần tử có chỉ mục thấp hơn. Nó nhận các giá trị như auto, number, initial và heir.

Lợi ích của CSS Sprites là gì?

CSS Sprites là một tập hợp các hình ảnh được kết hợp thành một file duy nhất mà file HTML có thể truy cập. Những hình ảnh này sau đó được gọi vào sử dụng trong mã HTML để hiển thị trên trang web. 

Với CSS Sprites, việc tải nhiều hình ảnh lên mà không sẽ dễ dàng hơn. 

  • Không thấy nhấp nháy.
  • Không tải xuống tài sản nâng cao cho đến khi cần thiết. 

CSS chấp nhận các định dạng media nào?

Một số loại phương tiện chỉ định các thiết bị mà CSS có thể chấp nhận bao gồm:

Định dạng Chi tiết
print Dùng cho máy in
screen Tương thích với màn hình máy tính, máy tính bảng hoặc điện thoại thông minh
speech Được thiết kế cho trình đọc màn hình nội dung
audio, visual Cho phép chèn âm thanh cùng hình ảnh vào trình duyệt web.
grip media  Kiểm tra xem thiết bị sẽ hiển thị dưới dạng lưới hay bitmap.
interactive media Thiết bị cho phép người dùng tương tác với trang web.
all Áp dụng tất cả các thiết bị

Làm thế nào để kiểm soát sự lặp lại của hình ảnh trong CSS?

Để kiểm soát sự lặp lại của hình ảnh trong CSS, bạn có thể sử dụng thuộc tính background-repeat. Đây là thuộc tính được sử dụng để lặp lại hình nền theo cả chiều ngang và chiều dọc. Đồng thời thuộc tính này cũng quyết định hình nền có được lặp lại hay không.

Cú pháp của thuộc tính background-repeat như sau:

background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit;

Chẳng hạn như ví dụ sau, sử dụng repeat-x để lặp lại hình ảnh theo chiều ngang:

<!DOCTYPE html>
<html>

<head>
<title>background-repeat property</title>
<style>
body {
margin-top: 40px;
background-image: url(
"https://itviec.com/blog/wp-content/uploads/2020/12/blog_logo_retina.png");
background-repeat: repeat-x;
background-size: 150px 100px;
            background-color:black;
}
</style>
</head>
</html>

câu hỏi phỏng vấn html css- itviec blog

Kết quả hiển thị cho đoạn mã trên.

Bạn hiểu gì về thiết kế giao diện đáp ứng (Responsive Web Design)?

Thiết kế giao diện web đáp ứng là phương pháp tạo trang web sử dụng hình ảnh, bố cục và truy vấn phương tiện CSS linh hoạt.

Phương pháp thiết kế này nhằm mục đích xây dựng các trang web có thể phát hiện hướng của khách truy cập và kích thước màn hình để có thể thay đổi bố cục cho phù hợp. 

VH/VW (viewport height/ viewport width) trong CSS là gì?

VH và VW là các đơn vị CSS được sử dụng để đo chiều cao cùng chiều rộng của viewport theo dạng phần trăm (%) trong các kỹ thuật thiết kế đáp ứng (responsive design).

1vh = 1% chiều cao viewport (height)

1vw = 1% chiều rộng viewport (width)

Ví dụ: Nếu viewport cao 1000px, nghĩa là 1vh = 10px và 100vh = 1000px

Pseudo class là gì?

Pseudo class là một từ khóa được thêm vào selector để xác định trạng thái đặc biệt của element. Nó cho phép chọn các element thông thường trong một số điều kiện nhất định, đặc biệt là khi cố gắng di chuột qua các liên kết như thẻ neo là :link, :vistied; :hover, :active hay :focus.

selector:pseudo-class {

    /* styles */

}

Sự khác nhau giữa Grid và flexbox là gì?

Sự khác biệt cơ bản giữa CSS grid layout và CSS flexbox layout là flexbox được thiết kế để bố trí theo một chiều, một hàng hoặc một cột. Trong khi đó, grid được thiết kế cho các bố cục hai chiều, hàng hoặc cột cùng một lúc. 

Ngoài ra, sự khác biệt giữa grid và flexbox còn thể hiện qua các yếu tố như sau:

Yếu tố Grid Flexbox
Kích thước Hai chiều Một chiều
Tính năng Có thể kết hợp linh hoạt các mục thông qua tính năng space-occupying. Có thể đẩy phần tử nội dung đến mức căn chỉnh cực độ.
Hỗ trợ Bố cục trước Nội dung trước
Hiệu suất Ổn định Nhanh hơn do bố cục đơn giản
Mục đích sử dụng Sử dụng cho các layout kích thước lớn, tạo bố cục phức tạp với các hàng và cột. Sử dụng cho các thành phần của ứng dụng. Căn chỉnh các mục trong một hàng hoặc cột.

Sự khác nhau giữa thiết kế thích ứng (adaptive design) và thiết kế đáp ứng (responsive design) là gì?

Đối với thiết kế thích ứng (adaptive design):

  • Mục tiêu chính là phát triển trang web với kích thước và bố cục cố định. 
  • Đem lại khả năng kiểm soát tốt đối với giao diện để phát triển sự thay đổi trên màn hình. 
  • Xây dựng thiết kế thích ứng mất nhiều thời gian và đòi hỏi sự nỗ lực, bởi vì cần phải cân nhắc nhiều tùy chọn liên quan đến thực tế của người dùng.
  • Có 6 kích thước màn hình tiêu chuẩn là 320px, 480px, 760px, 960px, 1200px và 1600px.

Còn đối với thiết kế đáp ứng (responsive design):

  • Mục tiêu chính là hiển thị nội dung liên quan đến không gian trình duyệt.
  • Ít quyền kiểm soát về thiết kế hơn. 
  • Tiết kiệm thời gian lập trình và thiết kế web hơn, đồng thời không có vấn đề về kích thước màn hình hay nội dung. 
  • Sử dụng truy vấn phương tiện (CSS Media Queries) để thiết kế bố cục màn hình cho thiết bị cụ thể và thay đổi thuộc tính.

Câu hỏi phỏng vấn HTML CSS dành cho Senior Developer

Làm thế nào để thêm JavaScript vào HTML?

Các tệp lệnh có thể được đặt bên trong nội dung (body), phần đầu trang HTML, bên trong header và body, hoặc thậm chí có thể được thêm bên ngoài.

  • JavaScript trong header: Một hàm JavaScript được đặt bên trong header trang HTML và hàm này được gọi khi nhấp vào một nút.
  • JavaScript trong body: Một hàm JavaScript được đặt bên trong phần thân của trang HTML và hàm này được gọi khi nhấp vào một nút.
  • JavaScript đặt bên ngoài: JavaScript cũng có thể được sử dụng làm tệp bên ngoài. File JavaScript có phần mở rộng tệp là .js. Để sử dụng tập lệnh bên ngoài, hãy đặt tên tệp tập lệnh vào thuộc tính src của thẻ tập lệnh. Tập lệnh bên ngoài không thể chứa thẻ tập lệnh.

Làm thế nào để tạo văn bản hoặc hình ảnh có thể cuộn trên trang web?

Để tạo một văn bản hoặc hình ảnh có thể cuộn trên trang web, bạn có thể sử dụng thẻ <marquee>. Đây là thẻ có thể thực hiện cuộn theo chiều ngang từ trái sang phải hoặc từ phải sang trái. Đồng thời, có thể cuộn theo chiều dọc từ trên xuống dưới hoặc từ dưới lên trên.

<marquee>

   <--- contents --->

</marquee>

Thẻ Container khác với thẻ Empty ở điểm nào?

Các thẻ Container thường được chia thành ba phần, tức là thẻ mở, nội dung (sẽ hiển thị trên trình duyệt) và thẻ đóng. Trong phần nội dung cũng có thể chứa một số thẻ khác. Các thẻ mở và đóng này được sử dụng theo cặp. Ví dụ: <html>….</html>, <head>…</head>, <title>…</title>, <body>….</body>,..

<tag_name> …</tag_name>

Cặp thẻ không chứa bất kỳ thẻ đóng nào được gọi là empty tag. Empty tag chỉ chứa thẻ mở nhưng không bắt buộc sử dụng thêm thẻ đóng, chúng thường thực hiện một số hành động trong trang web. Ví dụ: <br>, <link>, <img>, <hr>, <meta>, <source>,…

MathML trong HTML5 là gì?

MathML là viết tắt của Mathematics Markup Language. Ngôn ngữ này được sử dụng để biểu diễn phương trình hoặc biểu thức toán học trong trình duyệt web giống như các thành phần HTML khác.

Về cơ bản, MathML là một công thức toán học phức tạp hoặc biểu diễn trực quan phương trình được thực hiện dễ dàng. MathML được hỗ trợ trong HTML5, tất cả các thẻ MathML phải được sử dụng bên trong các thẻ <math> và </math>. 

MathML được sử dụng để biểu diễn toán học như một cơ sở cho giao tiếp giữa máy với máy, được dự định xử lý bằng các công cụ biên soạn chuyên dụng như trình soạn thảo phương trình và cũng có ý nghĩa đối với các ứng dụng khác

Sự khác biệt giữa dislay: none và visibility: hidden

Khi sử dụng thuộc tính “visibility: hidden” cho một phần tử HTML thì phần tử đó sẽ bị ẩn khỏi trang web nhưng vẫn chiếm một không gian nhất định. Trong khi đó, nếu sử dụng thuộc tính “display: none” cho một phần tử HTML thì phần tử đó sẽ bị ẩn và cũng không chiếm bất kỳ không gian nào trên trang web.

Image Map là gì?

Image Map cho phép lập trình viên lập bản đồ hoặc liên kết các phần khác nhau của hình ảnh với các trang web khác nhau. Có thể thực hiện bằng thẻ <map> trong HTML5, sử dụng thẻ này có thể liên kết hình ảnh với các vùng có thể nhấp.

<img  src=”image_url” ,  usemap=”#workspace” />

<map  name=”workspace”>

     <area shape=”rect”  coords=”34, 44, 270, 350” ,  href=”xyz.html” />

     <area shape=”rect”  coords=”10, 120, 250, 360” ,  href=”xyz.html” />

</map>

Sự khác biệt giữa phần tử SVG và Canvas trong HTML5?

SVG Canvas
Một dạng vector bao gồm các hình dạng. Dựa trên Raster bao gồm các pixels
Hoạt động tốt hơn với bề mặt lớn Hoạt động tốt hơn với bề mặt nhỏ hơn.
Có thể được sửa đổi bằng CSS và tập lệnh. Chỉ có thể được sửa đổi bằng tập lệnh
Có khả năng mở rộng cao, vì vậy có thể in ở chất lượng với độ phân giải cao. Ít có khả năng mở rộng hơn.

Khi nào bạn nên sử dụng translate() thay vì định vị tuyệt đối (absolute positioning)?

translate() là giá trị chuyển đổi trong CSS. Khi thay đổi độ mờ hoặc chuyển đổi, trình duyệt sẽ không kích hoạt reflow hoặc repaint. Transform sẽ yêu cầu trình duyệt tạo một lớp GPU cho các phần tử nhưng khi sử dụng CPU sẽ thay đổi các thuộc tính định vị tuyệt đối.

Sử dụng translate() hiệu quả hơn và cho kết quả là thời gian ngắn hơn. Khi sử dụng translate(), phần tử sẽ chiếm không gian ban đầu, không giống như khi thay đổi vị trí tuyệt đối. 

Mixin là gì?

Mixin tương tự như khối hàm của mã trả về một giá trị duy nhất, mixin đầu ra các dòng mã Sass biên dịch trực tiếp thành các kiểu CSS. Đồng thời, hàm sẽ trả về một giá trị cho một thuộc tính CSS hoặc thứ gì đó có thể được truyền cho một mixin khác.

Một ví dụ cơ bản về cách hoạt động của Mixin như sau:

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

// Sử dụng
.container {
  @include flex-center;
}

Làm thế nào để tối ưu hóa trang web cho mục đích in?

Đó là xác định và kiểm soát phần nội dung của trang web. Một trang web thường có phần chân trang, phần đầu trang, thanh bên, thanh điều hướng và khu vực nội dung chính. Hầu hết các công việc đều được thực hiện bằng cách kiểm soát được phần nội dung của trang web.

Do đó, để không làm thay đổi tính trọn vẹn của trang web khi in thì bạn có thể sử dụng ngắt trang, tạo bảng định kiểu hoặc định cỡ trang để in và tránh các bảng HTML không cần thiết. 

Ngoài ra, bạn có thể tối ưu thêm một số phần như:

  • Sử dụng media query @media print
  • Ẩn các elements không cần thiết khi in (nav, buttons, etc)
  • Điều chỉnh màu sắc cho phù hợp với in ấn
  • Xử lý background images
  • Định dạng các liên kết (links) để hiển thị URLs

CSS hoạt động ngầm (working under the hood) nghĩa là gì? 

Khi trình duyệt hiển thị một tài liệu, nó sẽ kết hợp thông tin và nội dung của tài liệu. Tài liệu sẽ được xử lý theo hai giai đoạn là:

  • Chuyển đổi HTML và CSS thành Document Object Model.
  • DOM hiển thị nội dung của trình duyệt.

CSS float property nghĩa là gì?

Thuộc tính float của CSS định vị hình ảnh sang trái hoặc phải khi cần, bao gồm cả văn bản bao quanh hình ảnh. Tất cả các thuộc tính của phần tử được sử dụng trước đó vẫn không thay đổi. 

Sự khác nhau giữa overflow-x và overflow-y trong CSS?

Điểm khác biệt giữa thuộc tính overflow-x và overflow-y được thể hiện qua:

  • overflow-x kiểm soát tình trạng tràn nội dung trên trục ngang.
  • overflow-y kiểm soát tình trạng tràn nội dung trên trục dọc. 

Hai thuộc tính này cho phép kiểm soát cụ thể hơn về cách nội dung tràn theo các hướng khác nhau. 

Công dụng của quy tắc @import là gì?

Một file CSS có thể được đưa vào file khác bằng quy tắc @import. Các stylesheet có thể được nhập vào stylesheet chính và truy vấn phương tiện có thể được dùng để tải kiểu theo kích thước màn hình, hoặc thuộc tính thiết bị cụ thể. 

Bất kỳ khai báo @charset nào cũng phải được theo sau ngay bởi quy tắc @import luôn xuất hiện trước các quy tắc khác ở đầu file CSS. 

Cú pháp của @import:

@import url("stylesheet.css");

Hoặc có thể sử dụng nó với các truy vấn phương tiện:

@import url("stylesheet.css") screen and (max-width: 600px);

Tại sao Tailwind CSS lại phổ biến trong thiết kế web hiện đại?

Các dự án thiết kế web hiện đại đều đòi hỏi tốc độ, tính linh hoạt cùng đoạn mã hợp lý. Tailwind CSS phổ biến trong thiết kế và tạo kiểu cho trang web hiệu quả và đáp ứng. Ưu điểm của Tailwind CSS bao gồm phát triển nhanh, nhiều tùy chọn tùy chỉnh, giảm kích thước file CSS và cộng đồng hỗ trợ được ghi chép đầy đủ.

Xem thêm: Tailwind CSS: Hướng dẫn 3 cách thiết lập Tailwind chi tiết

Tổng kết về câu hỏi phỏng vấn HTML CSS

Qua bộ câu hỏi phỏng vấn HTML CSS đã được ITviec tổng hợp, bạn đã trả lời đúng bao nhiêu câu? Hy vọng với bộ câu hỏi phỏng vấn này sẽ giúp bạn có góc nhìn tổng quan và chi tiết hơn về HTML cũng như CSS.

Ngoài các câu hỏi phỏng vấn về HTML và CSS, bạn cũng nên tìm hiểu thêm về các khía cạnh hoặc kỹ năng liên quan về Front-End, từ đó chuẩn bị cho mình một portfolio chỉn chu để ghi điểm với nhà tuyển dụng bạn nhé!

Xem thêm: Top 30+ câu hỏi phỏng vấn Front End Developer phổ biến