EN |
VN
Lập trình viên HTML CSS luôn có nhu cầu rất cao trên thị trường việc làm. Khi chuẩn bị cho một cuộc phỏng vấn HTML CSS, điều cần thiết là trang bị cho mình những kiến thức và kỹ năng cần thiết. Thông qua bài viết dưới đây, Masterskills sẽ gửi đến bạn top 20+ câu hỏi phỏng vấn HTML CSS hay gặp nhất cùng với một số gợi ý trả lời giúp bạn có được sự chuẩn bị tốt nhất cho buổi phỏng vấn sắp tới!
Cần chuẩn bị những gì cho phỏng vấn HTML CSS?
Trước khi tìm hiểu về các câu hỏi phỏng vấn HTML CSS phổ biến, hãy cùng Masterskills sơ lược về những điều quan trọng cần chuẩn bị:
Tìm hiểu về vị trí công việc và yêu cầu kỹ năng
Trước khi tham dự cuộc phỏng vấn, bạn nên làm quen với vị trí công việc và các kỹ năng cần thiết. Điều này sẽ giúp bạn hiểu rõ vai trò đòi hỏi những gì và giúp bạn điều chỉnh kiến thức và chuyên môn của mình cho phù hợp.
Nắm vững kiến thức về HTML và CSS
HTML và CSS là các block xây dựng cơ bản của phát triển web. Điều bắt buộc là phải thông thạo các ngôn ngữ này trước khi bước vào một cuộc phỏng vấn. Để nâng cao tỉ lệ thành công, hãy đảm bảo rằng bạn đã thông thạo các thẻ HTML, component, bộ chọn và thuộc tính CSS.
Chuẩn bị trước danh sách câu hỏi phỏng vấn
Để đảm bảo một cuộc phỏng vấn thành công, điều cần thiết là chuẩn bị một danh sách đầy đủ các câu hỏi phỏng vấn HTML CSS thường gặp. Điều này sẽ giúp bạn sắp xếp suy nghĩ của mình và sẵn sàng đưa ra câu trả lời ngắn gọn và chính xác khi cần thiết.
Câu hỏi phỏng vấn HTML CSS thường gặp
Câu hỏi phỏng vấn HTML CSS dành cho fresher
1. HTML là gì?
HTML là viết tắt của Ngôn ngữ đánh dấu siêu văn bản. Nó là ngôn ngữ đánh dấu tiêu chuẩn được sử dụng để tạo cấu trúc và nội dung của các trang web. HTML sử dụng các thẻ để đánh dấu các thành phần trong tài liệu và chỉ định cách chúng sẽ được hiển thị trong trình duyệt web.
2. HTML tags là gì?
HTML tags là các block xây dựng của một tài liệu HTML. Chúng xác định cấu trúc và định dạng của nội dung trong một trang web. Các thẻ được đặt trong dấu ngoặc nhọn (<>) và thường đi theo cặp, với thẻ mở và thẻ đóng.
3. Xác định các loại danh sách trong HTML.
HTML hỗ trợ ba loại danh sách: danh sách có thứ tự, danh sách không có thứ tự và danh sách định nghĩa. Cụ thể:
- Danh sách có thứ tự được tạo bằng thẻ <ol> và hiển thị danh sách được đánh số.
- Danh sách không có thứ tự được tạo bằng thẻ <ul> và hiển thị danh sách có dấu đầu dòng.
- Danh sách định nghĩa được tạo bằng cách sử dụng thẻ <dl> và bao gồm một loạt các thuật ngữ và định nghĩa tương ứng của chúng, được đánh dấu bằng các thẻ <dt> và <dd> tương ứng.
4. Element trong HTML là gì?
Trong HTML, Element hay một phần tử đại diện cho một phần riêng biệt của tài liệu và được xác định bởi một cặp thẻ. Các phần tử có thể chứa văn bản, các phần tử khác hoặc cả hai. Mỗi yếu tố có một mục đích cụ thể và cung cấp cấu trúc cũng như ý nghĩa cho nội dung trong một trang web.
5. Sự khác nhau giữa HTML và CSS là gì?
HTML và CSS đều cần thiết cho phát triển web nhưng phục vụ các mục đích khác nhau. HTML được sử dụng để cấu trúc nội dung và xác định ngữ nghĩa của nó, trong khi CSS (Cascading Style Sheets) được sử dụng để tạo kiểu và tăng cường trực quan các thành phần HTML. HTML tập trung vào cấu trúc, trong khi CSS tập trung vào cách trình bày và bố cục.
6. Lợi ích và hạn chế khi sử dụng CSS là gì?
Lợi ích của việc sử dụng CSS bao gồm:
- Kiểu dáng nhất quán trên nhiều trang web
- Tách nội dung và trình bày, nâng cao khả năng bảo trì mã
- Tải trang hiệu quả do các tệp CSS bên ngoài có thể được lưu vào bộ nhớ đệm
Hạn chế của việc sử dụng CSS bao gồm:
- Các vấn đề về tính tương thích của trình duyệt, vì các trình duyệt khác nhau có thể diễn giải các quy tắc CSS khác nhau
- Đường cong học tập cho các thiết kế bố cục phức tạp và các tính năng CSS nâng cao
- CSS có thể không cung cấp khả năng kiểm soát hoàn toàn đối với một số khía cạnh hình ảnh nhất định, yêu cầu các kỹ thuật hoặc công nghệ bổ sung.
7. Các loại Selectors khác nhau trong CSS là gì?
Selectors hay bộ chọn CSS xác định những thành phần nào trên trang web sẽ được áp dụng các quy tắc CSS. Một số bộ chọn CSS phổ biến bao gồm:
- Bộ chọn lớp (ví dụ: .class-name) nhắm mục tiêu các phần tử có thuộc tính lớp cụ thể.
- Bộ chọn ID (ví dụ: #id-name) nhắm mục tiêu một phần tử duy nhất có thuộc tính ID cụ thể.
- Bộ chọn phần tử (ví dụ: p) nhắm mục tiêu tất cả các phần tử của một loại cụ thể, chẳng hạn như đoạn văn.
- Bộ chọn thuộc tính (ví dụ: [thuộc tính=giá trị]) nhắm mục tiêu các phần tử dựa trên các giá trị thuộc tính cụ thể.
8. Làm thế nào để đưa CSS vào trong một trang web
CSS có thể được đưa vào tài liệu HTML theo ba cách:
- CSS nội tuyến: Các quy tắc CSS được áp dụng trực tiếp cho các phần tử HTML riêng lẻ bằng cách sử dụng thuộc tính style.
- CSS nội bộ: Các quy tắc CSS được đặt trong các thẻ <style> trong phần <head> của tài liệu HTML.
- CSS ngoài: Các quy tắc CSS được viết trong một tệp CSS riêng biệt và được liên kết với tài liệu HTML bằng cách sử dụng thẻ <link> trong phần <head>.
9. Sự khác nhau giữa inline, inline-block và block là gì?
- Inline hay các phần tử nội tuyến không bắt đầu trên một dòng mới và chỉ chiếm nhiều chiều rộng khi cần thiết. Ví dụ bao gồm <span> và <a>.
- Inline-block hay các phần tử khối nội tuyến tương tự như các phần tử nội tuyến nhưng cho phép đặt chiều rộng, chiều cao, lề và phần đệm. Ví dụ bao gồm <img> và <button>.
- Block hay các phần tử khối bắt đầu trên một dòng mới và chiếm toàn bộ chiều rộng có sẵn. Ví dụ bao gồm <div> và <p>.
10. CSS Preprocessor là gì? Sass, Less, Stylus là gì và tại sao lại sử dụng chúng?
CSS Preprocessor hay bộ tiền xử lý CSS là ngôn ngữ kịch bản mở rộng khả năng của CSS. Chúng cho phép sử dụng các biến, mixin, quy tắc lồng nhau và các tính năng nâng cao khác, giúp mã CSS dễ bảo trì và hiệu quả hơn. Sass, Less và Stylus là các bộ tiền xử lý CSS phổ biến biên dịch thành cú pháp CSS tiêu chuẩn.
Câu hỏi phỏng vấn HTML CSS dành cho người có kinh nghiệm
11. Khi nào thì DOW reflow xảy ra?
DOW (Mô hình đối tượng tài liệu) reflow, còn được gọi là bố cục hoặc chỉnh lại dòng, xảy ra khi các thay đổi đối với DOM (thêm, xóa hoặc sửa đổi các thành phần) hoặc thuộc tính CSS ảnh hưởng đến bố cục của trang web. Nó xảy ra khi trình duyệt tính toán lại vị trí và kích thước của các phần tử dựa trên thông tin được cập nhật. DOW reflow có thể được kích hoạt bằng các hành động như thay đổi kích thước cửa sổ trình duyệt, thay đổi kích thước phông chữ hoặc sửa đổi kiểu bằng JavaScript.
12. Nêu các thuộc tính Box sizing khác nhau trong CSS
CSS cung cấp hai thuộc tính Box sizing khác nhau:
- content-box: Giá trị mặc định trong đó chiều rộng và chiều cao của phần tử chỉ đại diện cho vùng nội dung, không bao gồm phần đệm và đường viền.
- border-box: Chiều rộng và chiều cao của phần tử bao gồm cả vùng nội dung cũng như phần đệm và đường viền. Thuộc tính này đơn giản hóa việc tính toán bố cục bằng cách tính toàn bộ kích thước của phần tử.
13. Nêu các cách khác nhau để dấu element trong CSS
Có một số cách để ẩn các phần tử (element) trong CSS:
- display: none: Loại bỏ hoàn toàn phần tử khỏi luồng tài liệu, làm cho phần tử ẩn và không chiếm bất kỳ dung lượng nào.
- visibility: hidden: Ẩn phần tử nhưng vẫn dành không gian mà nó chiếm giữ, duy trì vị trí của nó trong bố cục.
- opacity: 0: Làm cho phần tử trong suốt, ẩn nó một cách hiệu quả trong khi vẫn chiếm không gian và giữ nguyên bố cục của nó.
14. Sự khác nhau giữa CSS grid và flexbox là gì?
CSS grid và flexbox là các hệ thống bố cục trong CSS, nhưng chúng có các mục đích khác nhau:
- CSS grid: Cho phép bố cục dựa trên lưới hai chiều, chia không gian có sẵn thành các hàng và cột. Đó là lý tưởng cho các bố cục phức tạp và sắp xếp các mục theo cả hai hướng.
- Flexbox: Cung cấp mô hình bố cục một chiều, theo hàng hoặc theo cột. Nó tập trung vào việc phân phối và sắp xếp các yếu tố theo một hướng duy nhất. Flexbox phù hợp nhất cho bố cục một chiều, đơn giản hơn.
15. !important có ý nghĩa gì trong CSS?
!important là một khai báo CSS ưu tiên cho một quy tắc kiểu cụ thể, ghi đè các kiểu xung đột khác. Khi !important được thêm vào một thuộc tính, nó đảm bảo rằng quy tắc này được ưu tiên hơn các quy tắc khác, ngay cả khi chúng có tính đặc hiệu cao hơn. Nói chung, bạn nên sử dụng !important một cách tiết kiệm và chỉ khi cần thiết, vì nó có thể khiến mã CSS khó quản lý và bảo trì hơn.
16. HTML tags và elements có giống nhau không?
Trong HTML, các tags và elements có liên quan chặt chẽ với nhau nhưng không hoàn toàn giống nhau:
- HTML tags: Thể hiện cấu trúc đánh dấu và được biểu thị bằng dấu ngoặc nhọn (< và >). Chúng xác định phần đầu và phần cuối của các phần tử HTML.
- HTML elements: Bao gồm thẻ mở, nội dung và thẻ đóng. Chúng bao gồm các thẻ và nội dung chúng bao quanh, tạo thành các khối xây dựng của tài liệu HTML.
17. Làm thế nào để hiển thị một bảng trong HTML?
Để hiển thị một bảng trong HTML, bạn có thể sử dụng phần tử <table> cùng với các thẻ liên quan của nó:
- <table>: Định nghĩa chính bảng đó.
- <tr>: Đại diện cho một hàng của bảng.
- <th>: Định nghĩa một ô tiêu đề của bảng.
- <td>: Đại diện cho một ô dữ liệu bảng (thông thường).
- <caption>: Cung cấp chú thích cho bảng.
18. Khoảng trắng (white sMasterskills) trong HTML là gì?
Trong HTML, khoảng trắng đề cập đến khoảng trắng, tab, ngắt dòng và các ký tự khác được sử dụng để thụt lề và định dạng trong mã HTML. Tuy nhiên, khi hiển thị nội dung HTML, trình duyệt sẽ thu gọn nhiều khoảng trắng thành một khoảng trắng và bỏ qua các khoảng trắng thừa hoặc ngắt dòng trừ khi được chỉ định bằng CSS.
19. Phân biệt HTML và XHTML
HTML (Ngôn ngữ đánh dấu siêu văn bản) và XHTML (Ngôn ngữ đánh dấu siêu văn bản eXtensible) đều là ngôn ngữ đánh dấu được sử dụng để tạo các trang web. Sự khác biệt chính nằm ở cú pháp và quy tắc của chúng:
- HTML: Có nhiều quy tắc cú pháp dễ thay đổi hơn, cho phép linh hoạt hơn. Nó không yêu cầu đóng thẻ cho tất cả các phần tử.
- XHTML: Tuân thủ các quy tắc cú pháp dựa trên XML chặt chẽ hơn. Tất cả các phần tử phải được lồng và đóng đúng cách, đồng thời các giá trị thuộc tính phải được đặt trong dấu ngoặc kép. XHTML yêu cầu cú pháp XML được định dạng tốt.
20. Sự khác nhau giữa một URL tuyệt đối (absolute URL) và một URl tương đối (relative URL) trong HTML là gì?
- URL tuyệt đối: Chỉ định địa chỉ đầy đủ của trang web hoặc tài nguyên, bao gồm giao thức (ví dụ: http:// hoặc https://), tên miền và đường dẫn tệp. Nó cung cấp một tham chiếu trực tiếp và đầy đủ đến tài nguyên, không phụ thuộc vào vị trí của trang hiện tại.
- URL tương đối: Chỉ định đường dẫn đến trang web hoặc tài nguyên liên quan đến vị trí của trang hiện tại. Nó không bao gồm giao thức hoặc tên miền, giả sử rằng tài nguyên nằm trong cùng một trang web hoặc máy chủ.
21. Sự khác biệt giữa link tag <link> và anchor tag <a> là gì?
- Thẻ <link>: Được sử dụng trong phần <head> của tài liệu HTML để liên kết các tài nguyên bên ngoài, chẳng hạn như biểu định kiểu CSS và biểu tượng yêu thích. Nó không tạo ra một liên kết có thể nhấp được.
- Thẻ <a>: Dùng để tạo siêu liên kết trong tài liệu HTML. Nó xác định một liên kết có thể nhấp có thể điều hướng đến một trang khác hoặc một phần cụ thể trong cùng một trang khi được nhấp.
Kết luận
Vậy là Masterskills đã cùng bạn tìm hiểu bộ câu hỏi phỏng vấn HTML CSS phổ biến nhất. Những gợi ý trên sẽ giúp bạn hiểu rõ về cách trả lời các câu hỏi phỏng vấn còn lại. Ngoài ra, bạn cũng nên sửa đổi và mở rộng các câu trả lời này dựa trên kiến thức và kinh nghiệm của bản thân.
Nếu bạn cảm thấy hứng thú với các chủ đề tương tự, hãy ghé qua Blog của Masterskills để cập nhật thêm nhiều nội dung thú vị khác nhé!
