Dưới đây là các câu hỏi phỏng vấn HTML & CSS thường gặp kèm theo câu trả lời chi tiết:

Dưới đây là các câu hỏi phỏng vấn HTML & CSS thường gặp kèm theo câu trả lời chi tiết:

I. Câu hỏi về HTML

1. HTML là gì? HTML5 có gì mới so với HTML4?

HTML (HyperText Markup Language) là ngôn ngữ đánh dấu dùng để xây dựng cấu trúc của trang web.

HTML5 mang lại nhiều cải tiến như:
✅ Thẻ mới: <header>, <footer>, <article>, <section>, <nav>, v.v.
✅ Hỗ trợ đa phương tiện tốt hơn: <audio>, <video>
✅ Hỗ trợ lưu trữ cục bộ: localStorage, sessionStorage
✅ WebSockets, Web Workers, Canvas API

2. Semantic HTML là gì? Vì sao nên sử dụng?

Semantic HTML là cách viết HTML có ý nghĩa, giúp trình duyệt và SEO hiểu rõ cấu trúc trang web hơn.
Ví dụ:
❌ <div id="menu"> ➝ Không rõ ràng
✅ <nav> ➝ Rõ ràng là thanh điều hướng

Lợi ích của Semantic HTML:
✔ Tăng khả năng truy cập (Accessibility)
✔ Cải thiện SEO
✔ Code dễ đọc, dễ bảo trì

3. Sự khác nhau giữa <div> và <span>?

Ví dụ:

<div style="background: lightblue;">Khối</div><span style="color: red;">Nội dung trong dòng</span>

4. Thẻ <meta> dùng để làm gì?

Thẻ <meta> chứa thông tin metadata của trang web, ví dụ:

• Khai báo charset UTF-8:

  <meta charset="UTF-8">

• Responsive cho mobile:

  <meta name="viewport" content="width=device-width, initial-scale=1">

• SEO (Mô tả trang):

  <meta name="description" content="Trang web bán hàng tốt nhất">

5. Sự khác biệt giữa id và class trong HTML?

Ví dụ:

<div id="header">Header duy nhất</div><div class="box">Hộp 1</div><div class="box">Hộp 2</div>

II. Câu hỏi về CSS

6. CSS có những cách nào để áp dụng vào HTML?

✔ Inline CSS

<p style="color: red;">Đoạn văn đỏ</p>

✔ Internal CSS

<style>p { color: blue; }
</style>

✔ External CSS (khuyến khích dùng)

<link rel="stylesheet" href="styles.css">

7. Sự khác nhau giữa relative, absolute, fixed, sticky trong CSS?

Ví dụ:

.relative { position: relative; top: 20px; }
.absolute { position: absolute; top: 10px; left: 50px; }
.fixed { position: fixed; top: 0; }
.sticky { position: sticky; top: 0; }

8. Sự khác nhau giữa em, rem, px, %, vw, vh?

Ví dụ:

html { font-size: 16px; }
.box { font-size: 1.5em; } /* 1.5em = 16px * 1.5 = 24px */

9. Flexbox là gì? Các thuộc tính quan trọng?

Flexbox giúp dễ dàng sắp xếp và căn chỉnh phần tử.

🔹 Các thuộc tính chính:

• display: flex; → Kích hoạt Flexbox

• justify-content: center; → Căn giữa theo trục ngang

• align-items: center; → Căn giữa theo trục dọc

• flex-direction: row / column; → Xếp ngang / dọc

• gap: 10px; → Khoảng cách giữa các phần tử

🔹 Ví dụ Flexbox:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

10. Grid vs Flexbox khác nhau thế nào?

11. Z-index là gì? Vì sao không hoạt động?

🔹 Z-index xác định thứ tự chồng lớp của phần tử.

• Giá trị lớn hơn sẽ hiển thị phía trên.

• Chỉ hoạt động với position: relative/absolute/fixed.

🔹 Lỗi thường gặp:

.box { position: static; z-index: 999; } /* Không hoạt động */

✅ Giải pháp:

.box { position: relative; z-index: 999; }

III. Câu hỏi nâng cao

12. CORS là gì? Tại sao trình duyệt chặn?

✔ CORS (Cross-Origin Resource Sharing) là cơ chế bảo mật ngăn chặn yêu cầu từ domain khác.
✔ Để cho phép CORS, server phải thêm header:

Access-Control-Allow-Origin: *

13. Pseudo-classes vs Pseudo-elements khác nhau thế nào?

✔ Pseudo-class (:hover, :focus) → Áp dụng cho phần tử trong trạng thái nhất định.
✔ Pseudo-element (::before, ::after) → Tạo phần tử ảo bên trong thẻ.

Ví dụ:

button:hover { background: red; }
p::before { content: "🔥 "; }

14. Làm thế nào để tối ưu hiệu suất CSS?

✔ Sử dụng CSS Minification (nén file .css).
✔ Dùng CSS variables thay vì lặp lại giá trị.
✔ Hạn chế sử dụng !important.
✔ Tránh CSS không cần thiết (unused CSS).

🚀 Bạn cần giải thích thêm về câu hỏi nào không? 😃