Tổng hợp các câu hỏi phỏng vấn HTML, CSS thường gặp hiện nay

Câu hỏi phỏng vấn HTML, CSS cấp độ cơ bản

Mỗi nhóm câu hỏi sẽ tương ứng với các trình độ: mới tiếp cận, fresher, junior, senior, master,... Nhóm câu hỏi phỏng vấn HTML, CSS cấp độ cơ bản dưới đây phù hợp với các bạn sinh viên mới ra trường hoặc những ứng viên mới bắt đầu công việc liên quan đến HTML, CSS.

1.  Trong HTML, thẻ Meta được dùng để làm gì?

Thẻ Meta trong HTML được các developer sử dụng để thông báo các thông tin về mô tả trang web, tác giả, ngôn ngữ, các từ khóa, định hướng trang web,... cho trình duyệt web.

Thẻ meta thường được đặt trong thẻ head ở phần đầu của trang web. Meta tag là một yếu tố rất quan trọng trong SEO.

2. Bạn có thể kể tên các thẻ HTML phổ biến?

• Thẻ tiêu đề: H1 đến H6
• Thẻ đoạn văn bản: p (paragraph)
• Thẻ phân chia vùng (block), chia layout website: div (division)
• Thẻ link: a
• Thẻ hình ảnh: img
• Thẻ trình phát nhạc: audio
• Thẻ danh sách: ul, li - ol, li (phân biệt ul và ol)
• Thẻ vùng nhập liệu của người dùng: input
• Thẻ nút: button
• Thẻ bảng: table, tr, td

3. Thẻ div có tác dụng gì?

Thẻ div HTML có tác dụng gom nhóm các phần tử thành các khối hoặc vùng. Ví dụ như phân chia website thành các block header, content, footer,... Thẻ div rất đa năng, nó còn có thể dùng để cấu trúc và thiết kế trang web, ví dụ như tạo các ô lưới, cột chứa hình ảnh, văn bản hoặc một số thành phần HTML khác.

Ví dụ về thẻ div:

Kiểu dấu gạch đầu đoạn:

4. CSS là gì?

CSS (Cascading Style Sheets) là ngôn ngữ thiết kế được dùng để tìm và định dạng các phần tử do HTML tạo ra như định dạng màu sắc, nền, kích thước, khoảng cách, bảng, tiêu đề,… của trang web.

5. CSS selector là gì? 

CSS selector là thành phần của CSS, dùng để nhắm mục tiêu tới các phần tử HTML dựa trên ID, class, loại,... và áp dụng định dạng, thuộc tính CSS cho chúng. 

Ví dụ:

p{

    color: red;

}

h1{

    font-size: 50px;

}

.header{

    background-color: green;

}

#register_btn{

    background-color: red;

}

6. Phân biệt ID và Class?

• ID là duy nhất trong một trang HTML và chỉ dùng cho một phần tử. Ví dụ
  Tiêu đề ở đây
• Class thì không là duy nhất, có thể dùng chung cho nhiều phần tử hoặc trùng lặp. Ví dụ:

• Câu hỏi phỏng vấn HTML CSS 1
• câu hỏi phỏng vấn 2
• Câu hỏi phỏng vấn 3

7. Tags HTML là gì?

Thẻ HTML là phần tử cơ bản có tác dụng đánh dấu và cấu trúc nội dung trang web. Thẻ được đặt trong dấu < và  > và gồm 2 loại là thẻ mở và thẻ đóng. Ví dụ:

mẫu thẻ bôi đậm từ khoá

8. Có phải các thẻ HTML thường đi theo một cặp không?

Không, có những thẻ HTML đơn lẻ không cần theo cặp thẻ mở - thẻ đóng. Ví dụ như thẻ và thẻ
.

9. Liệu các ký tự có thể hiển thị chính xác ở tất cả các hệ thống không?

Không, Nếu trình duyệt đang chạy không hỗ trợ loại ký tự thì không thể hiển thị chính xác được. Nếu vẫn sử dụng loại ký tự ấy thì nó sẽ được hiển thị dưới dạng hộp.

10. Làm cách nào để chèn biểu tượng copyright vào trang browser?

Để chèn biểu tượng copyright, bạn cần gõ © ( ©) hoặc & #169; trong file HTML.

Các câu hỏi phỏng vấn HTML, CSS nâng cao

Nhóm câu hỏi này phù hợp với level junior hoặc những ứng viên có từ 1 - 3 năm kinh nghiệm. Để trả lời được các câu hỏi phỏng vấn HTML CSS này, bạn hãy tham khảo một số cách trả lời dưới đây. 

1. Để tạo liên kết đến các phần trong cùng một trang, bạn sẽ làm thế nào?

Chúng ta tạo liên kết đến từng phần bằng cách tạo thẻ link () và tham chiếu thông qua việc sử dụng ký hiệu số (#). 

Ví dụ: ta có một dòng dưới dạng Quay về đầu trang, điều này dẫn đến dòng chữ “Quay về đầu trang”sẽ có trên trang web và liên kết đến dấu trang có tên topmost. Sau đó, chúng ta tạo một lệnh thẻ riêng như ở một vị trí bất kỳ trên đầu trang web, thì người dùng sẽ được chuyển ngay đến vị trí đó khi nhấp vào “Quay về đầu trang”.

2. Các tệp HTML cũ có hoạt động trên các trình duyệt mới không?

Có, các tệp HTML cũ hay mới thì đều tuân thủ tiêu chuẩn HTML. Hầu hết các tệp cũ hơn đều có thể hoạt động trên các trình duyệt mới, chỉ có hạn chế đó là một số tính năng mới có thể không hoạt động.

3. Iframe là gì?

Iframe là một văn bản HTML được nhúng vào một trang HTML khác.

Ví dụ:

4. Bạn hãy phân biệt thẻ “div” và thẻ “span”?

Có thể nói ngắn gọn sự khác nhau của 2 loại thẻ này đó là:

• Thẻ “span” có thuộc tính “display: inline” khi muốn các element nằm trên cùng 1 line. Thẻ span không thể chứa thẻ p (paragraph) hay thẻ div.
• Thẻ “div” có thuộc tính “display:block”, chúng ta không thể đặt thẻ block trong thẻ inline nhưng ngược lại, có thể đặt thẻ inline trong thẻ block được. Thẻ div có thể chứa thẻ p (thú vị hơn, trong thẻ p có thể chứa thẻ span)

Ví dụ:

5. Bạn hãy phân biệt “width: auto” và “width: 100%” trong CSS?

• width: auto dùng cho một phần tử thì nó sẽ tự động thích nghi với độ rộng của nội dung bên trong (sẽ trừ đi độ rộng của border, margin, padding,…)
• width: 100% dùng cho một phần tử thì nó được thiết lập để chiếm toàn bộ chiều rộng của phần tử cha. TRong trường hợp phần tử cha không có chiều rộng cụ thể thì nó sẽ chiếm full chiều rộng màn hình.

6. Hai loại Webstorage trong HTML5 là gì?

Đó là:

• SessionStorage: Nó chỉ lưu trữ dữ liệu của phiên hiện tại và dữ liệu được lưu trữ trong bộ nhớ phiên này sẽ tự động xóa khi đóng trình duyệt.
• LocalStorage: Dữ liệu không tự động bị xóa khi đóng cửa sổ trình duyệt.

7. Các phần tử FORM mới có sẵn trong HTML5 là gì?

HTML5 bổ sung thêm một số phần tử cho form đó là:

• – Dùng để chỉ định danh sách các tùy chọn cho input controls.
• – Đại diện cho trường tạo cặp khóa.
• – Thể hiện kết quả của bất kỳ phép tính tập lệnh nào.

8. Làm cách nào để thêm nhận xét vào CSS?

Có thể thêm các nhận xét trong CSS bằng /* và */.

9. Tại sao @import chỉ được ở trên cùng?

@import được ưu tiên ở trên cùng để tránh mọi quy tắc ghi đè. Thứ tự xếp hạng này được tuân theo trong hầu hết các ngôn ngữ lập trình như Java, Modula,... Trong C, # là ví dụ nổi bật về việc @import nằm ở trên cùng.

Câu hỏi phỏng vấn HTML, CSS trình độ senior

Nhóm câu hỏi phỏng vấn HTML CSS level senior dưới đây bao gồm các câu hỏi về kiến thức cập nhật mới nhất về HTML5 và CSS.

1. Bạn có biết hai semantic tags nào được đưa vào phiên bản HTML5 không?

Thẻ

và là hai thẻ mới được đưa vào HTML5. Bài viết có thể bao gồm nhiều phần, các phần có thể chứa nhiều bài viết nhỏ. Thẻ article đại diện cho một khối nội dung đầy đủ, là một phần của tổng thể lớn hơn.

2. Trình duyệt nào hỗ trợ HTML5?

Các phiên bản mới nhất của Google Chrome, Apple Safari, Mozilla Firefox và Opera đều hỗ trợ hầu hết các tính năng của HTML5.

3. Bạn hãy cho biết cách biến một hình ảnh thành hình nền của trang web?

Ta thực hiện theo các bước sau:

• Đặt mã thẻ sau thẻ như sau:

• Thay image.gif bằng tên tệp hình ảnh mong muốn. Thao tác này sẽ thực hiện chọn ảnh và thay làm hình nền của trang web của bạn.

4. Điều gì xảy ra nếu bạn mở tệp external CSS trong browser?

Khi bạn cố mở tệp external CSS, trình duyệt không thể mở tệp vì tệp có chứa một số phần mở rộng khác. Cách duy nhất để dùng được tệp external CSS là tham chiếu tệp đó bằng thẻ

trong tài liệu HTML khác.

5. Hệ thống phân cấp đang được tuân theo khi nói đến style sheets là gì?

Nếu là single selector gồm 3 kiểu style definitions thì sẽ ưu tiên definition gần nhất với thẻ actual. Thứ tự ưu tiên có thể là: kiểu Inline - embedded style sheets - external. 

6. Có thể khôi phục giá trị thuộc tính mặc định trong CSS không?

Trong CSS, không thể quay lại giá trị cũ khi thiết giá trị mặc định. Để khôi phục giá trị mặc định, bạn có thể khai báo lại thuộc tính.

7. Bạn làm thế nào để loại bỏ gạch chân trong các Hyperlink?

Để ghi đè lên các Hyperlink, dùng Control statements and external style sheets. Ví dụ như:

B {

text-decoration: none;

}

link văn bản câu hỏi phỏng vấn HTML CSS mới nhất

8. Thẻ
có phải là thẻ duy nhất để chia các vùng văn bản không?

Không. Thẻ
chỉ là một cách để phân chia dòng văn bản. Một số thẻ khác như 

và

có thể phân chia các phần văn bản.

 

Các câu hỏi phỏng vấn HTML, CSS cấp master

Với nhóm câu hỏi này, các nhà tuyển dụng muốn đánh giá nhiều hơn về kỹ năng xử lý các tình huống thực tế và khả năng quản lý các dự án quy mô lớn nhỏ, thay vì chỉ dựa vào các câu hỏi phỏng vấn HTML CSS lý thuyết. Vì vậy, ngoài việc đưa ra được câu trả lời chuẩn, bạn cũng nên cho thêm ví dụ thực tế mà bạn đã từng gặp phải.

1. IndexedDB là gì?

IndexedDB là API cơ sở dữ liệu trình duyệt được tích hợp trong HTML5, dùng để lưu trữ, quản lý dữ liệu có cấu trúc hoặc không có cấu trúc (dạng JSON, chuỗi, số,...) trong web browser.

2. Làm thế nào để tạo khóa công khai (public key) trong HTML?

Để tạo khoá công khai trong HTML, ta có thể dùng thẻ .

3. Web Components là gì?

Web Components là tập hợp các công nghệ web, được sử dụng để thiết kế các thành phần của web mà có thể sử dụng lại, đóng gói, tương tác, chức năng, thành phần độc lập giúp tăng tính linh hoạt, hiệu suất của ứng dụng web.

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

Ý nghĩa của Accessibility và ARIA role là:

• Tăng khả năng truy cập
• Web thân thiện hơn với nhiều đối tượng
• Tăng phạm vi tiếp cận
• ARIA giúp tăng khả năng tương tác, cung cấp thông tin cho đối tượng người khuyết tật.

5. WebP là gì?

WebP là định dạng hình ảnh mới do Google phát triển, cung cấp khả năng nén hình ảnh cao hơn so với JPEG hay PNG. Định dạng ảnh Webp giúp tiết kiệm dung lượng hệ thống, từ đó giảm thời gian load ảnh, tăng trải nghiệm người dùng hơn.

Một vài câu hỏi phỏng vấn khác

Ngoài các câu hỏi lý phỏng vấn HTML CSS chuyên môn phía trên, ITNavi cũng tổng hợp một số câu hỏi tình huống khác và chia sẻ kinh nghiệm chuẩn bị cho một buổi phỏng vấn lập trình HTML, CSS thuận lợi.

1. Vai trò của một nhà phát triển HTML hiện nay là gì?

Từ kinh nghiệm phỏng vấn thực chiến, với câu hỏi dạng này, bạn hãy trả lời trọng tâm vào các trách nhiệm, công việc mà một nhân sự lập trình HTML đảm nhiệm. Bên cạnh đó cũng thêm vào một vài ví dụ thực tế mà bạn đã có cơ hội thực hiện trong vai trò này.

Bạn có thể tham khảo câu trả lời theo hướng dưới đây:

Vai trò của một HTML developer đó là xây dựng, duy trì, cải thiện các trang web, ứng dụng web bằng việc sử dụng HTML để tạo cấu trúc, nội dung, tương tác trên web. 

2. Các loại input types cho form cung cấp bởi HTML5 là gì?

Có 5 loại dữ liệu mới được cung cấp bởi HTML5 đó là:

• Date: Cho phép người dùng chọn ngày.
• Datetime-local:  Cho phép người dùng chọn ngày, giờ không cần múi giờ.
• Datetime: Cho phép chọn ngày và giờ theo múi giờ.
• Month: Cho phép chọn 1 tháng và năm.
• Email: Chứa địa chỉ email mà người dùng nhập.

3. Hai thẻ mới có trong HTML5 là gì?

và

là các thẻ mới được đưa vào phiên bản HTML5. Hai loại tag này được dùng để thay thế cho Flash, Silverlight và các công nghệ tương tự để phát các mục đa phương tiện.

 

Cần chuẩn bị những gì cho buổi phỏng vấn HTML, CSS

Đây là phần chia sẻ kinh nghiệm chuẩn bị và vượt qua buổi phỏng vấn HTML CSS dành cho các bạn. Bất cứ quá trình ứng tuyển công việc nào, nếu được chuẩn bị kỹ lưỡng, bạn hoàn toàn có thể ăn điểm với nhà tuyển dụng từ những việc nhỏ nhất. 

Chuẩn bị kỹ khi ứng tuyển:

• Làm đẹp CV, chú ý các thông tin về kinh nghiệm, kỹ năng cần gãy gọn, trọng tâm.
• Viết mail ứng tuyển có đầy đủ tiêu đề, cover letter và đừng quên đính kèm file CV hoặc Portfolio của bạn.

Sẵn sàng cho buổi phỏng vấn:

• Lựa chọn trang phục phù hợp, thoải mái và lịch sự.
• Luôn thể hiện thái độ chuyên nghiệp, tự tin, cầu thị, cầu tiến.
• Với các câu hỏi bạn khó có thể trả lời hoặc chưa từng làm qua, đừng nói không, hãy nói chưa và khẳng định sẽ tìm hiểu theo key mà nhà tuyển dụng đã gợi ý.
• Trả lời một cách trung thực. Bạn biết đó, nhà tuyển dụng, đặc biệt là người phỏng vấn chuyên môn, hoàn toàn có thể đánh giá được khả năng của bạn đến đâu. Vậy nên đừng nói quá về khả năng, trình độ của bản thân.
• Các câu trả lời đi vào trọng tâm câu hỏi, tránh làm mất thời gian của hai bên.
• …

Chuyên nghiệp sau buổi phỏng vấn:

• Hãy viết mail cảm ơn về buổi phỏng vấn vừa qua.
• Chú ý hộp thư đến của email và phản hồi kịp thời.

 

ITNavi sẽ liên tục cập nhật tổng hợp các câu hỏi phỏng vấn HTML, CSS của các level junior, senior, master,... và cả kinh nghiệm trả lời câu hỏi chi tiết để bạn có thể tham khảo nhiều hơn và tự tin hơn với hành trang hữu ích. Chúc bạn có buổi phỏng vấn lập trình HTML, CSS suôn sẻ!