Bộ 30+ Câu hỏi trắc nghiệm Nhúng mã và tạo băng chuyền hình ảnh trong Website (Có đáp án)
Bộ 30+ Câu hỏi trắc nghiệm Nhúng mã và tạo băng chuyền hình ảnh trong Website (Có đáp án). Cùng rèn luyện kiến thức thiết kế Website (Web) online ngay nhé.
1. Thuộc tính CSS nào được sử dụng để kiểm soát cách một hình ảnh phù hợp với vùng chứa của nó?
A. object-position
B. object-fit
C. image-size
D. image-position
2. Khi sử dụng hình ảnh trong băng chuyền, làm thế nào để đảm bảo rằng chúng không làm chậm tốc độ tải trang trên thiết bị di động?
A. Sử dụng hình ảnh có độ phân giải cao để đảm bảo chất lượng.
B. Sử dụng hình ảnh có kích thước tệp lớn để đảm bảo chi tiết.
C. Tối ưu hóa hình ảnh bằng cách giảm kích thước tệp, sử dụng định dạng phù hợp và kỹ thuật lazy loading.
D. Không sử dụng hình ảnh trên thiết bị di động.
3. Làm thế nào để tạo một băng chuyền hình ảnh tự động chuyển đổi slide sau một khoảng thời gian nhất định bằng JavaScript?
A. Sử dụng hàm alert() để chuyển đổi slide.
B. Sử dụng hàm confirm() để chuyển đổi slide.
C. Sử dụng hàm setInterval() hoặc setTimeout() để thay đổi slide sau một khoảng thời gian định trước.
D. Không thể tạo băng chuyền tự động bằng JavaScript.
4. Điều gì xảy ra nếu bạn không chỉ định chiều cao và chiều rộng cho một hình ảnh trong HTML?
A. Hình ảnh sẽ không hiển thị.
B. Hình ảnh sẽ hiển thị với kích thước mặc định của trình duyệt.
C. Trình duyệt sẽ tính toán kích thước hình ảnh sau khi tải, có thể gây ra hiện tượng giật cục khi tải trang.
D. Hình ảnh sẽ tự động điều chỉnh kích thước để phù hợp với vùng chứa của nó.
5. Kỹ thuật nào sau đây giúp tải hình ảnh có kích thước phù hợp với thiết bị của người dùng, cải thiện hiệu suất và trải nghiệm người dùng?
A. Sử dụng một kích thước hình ảnh duy nhất cho tất cả các thiết bị.
B. Sử dụng thuộc tính srcset và sizes trong thẻ img.
C. Sử dụng CSS để thay đổi kích thước hình ảnh.
D. Sử dụng JavaScript để tải hình ảnh.
6. Khi thiết kế băng chuyền hình ảnh, điều gì quan trọng cần xem xét để đảm bảo khả năng sử dụng trên các thiết bị cảm ứng (touch devices)?
A. Không cần quan tâm đến thiết bị cảm ứng.
B. Sử dụng các hiệu ứng hover để điều khiển băng chuyền.
C. Đảm bảo rằng băng chuyền có thể được điều khiển bằng cách vuốt (swipe) và có các nút điều khiển lớn, dễ nhấn.
D. Sử dụng các hiệu ứng chuyển động phức tạp để thu hút người dùng.
7. Để đảm bảo khả năng truy cập cho người dùng khiếm thị, thuộc tính nào nên được thêm vào thẻ img?
A. title
B. alt
C. src
D. longdesc
8. Điều gì cần cân nhắc khi sử dụng hình ảnh động (GIF) trong băng chuyền hình ảnh?
A. GIF luôn là lựa chọn tốt nhất vì kích thước tệp nhỏ.
B. GIF không nên được sử dụng vì chúng không được hỗ trợ bởi trình duyệt hiện đại.
C. GIF có thể làm tăng kích thước trang web và ảnh hưởng đến hiệu suất, nên sử dụng một cách tiết kiệm.
D. GIF chỉ nên được sử dụng cho mục đích trang trí và không chứa thông tin quan trọng.
9. Khi sử dụng nhiều hình ảnh trên trang web, kỹ thuật nào sau đây giúp giảm số lượng yêu cầu HTTP và tăng tốc độ tải trang?
A. Sử dụng hình ảnh có kích thước lớn hơn cần thiết.
B. Sử dụng nhiều hình ảnh nhỏ thay vì một hình ảnh lớn.
C. Sử dụng CSS Sprites để kết hợp nhiều hình ảnh nhỏ vào một hình ảnh duy nhất.
D. Không sử dụng hình ảnh.
10. Trong CSS, thuộc tính `background-image` được sử dụng để làm gì?
A. Để nhúng hình ảnh vào tài liệu HTML.
B. Để đặt hình ảnh làm nền cho một phần tử HTML.
C. Để tạo hiệu ứng chuyển động cho hình ảnh.
D. Để thay đổi kích thước hình ảnh.
11. Khi thiết kế băng chuyền hình ảnh cho thiết bị di động, điều gì quan trọng cần xem xét về kích thước và độ phân giải hình ảnh?
A. Sử dụng hình ảnh có độ phân giải cao nhất có thể để đảm bảo chất lượng hiển thị tốt nhất.
B. Sử dụng hình ảnh có kích thước và độ phân giải phù hợp với màn hình di động để giảm thời gian tải và tiết kiệm băng thông.
C. Không sử dụng hình ảnh trên thiết bị di động để cải thiện hiệu suất.
D. Sử dụng hình ảnh có kích thước nhỏ nhất có thể, bất kể chất lượng hiển thị.
12. Khi nhúng hình ảnh vào trang web, định dạng nào sau đây hỗ trợ độ trong suốt (transparency) tốt nhất?
A. JPEG
B. GIF
C. PNG
D. BMP
13. Làm thế nào để tạo hiệu ứng chuyển đổi mượt mà giữa các hình ảnh trong băng chuyền bằng CSS?
A. Sử dụng thuộc tính `display: none` và `display: block`.
B. Sử dụng thuộc tính `transition` kết hợp với thay đổi thuộc tính `opacity` hoặc `transform`.
C. Sử dụng thuộc tính `float: left` và `float: right`.
D. Không thể tạo hiệu ứng chuyển đổi mượt mà bằng CSS.
14. Thuộc tính nào của HTML được sử dụng để nhúng một hình ảnh?
A. src
B. link
C. href
D. source
15. Phương pháp nào sau đây giúp cải thiện hiệu suất tải trang web khi sử dụng nhiều hình ảnh?
A. Sử dụng hình ảnh có độ phân giải cao cho tất cả các thiết bị.
B. Sử dụng kỹ thuật lazy loading để chỉ tải hình ảnh khi chúng hiển thị trong khung nhìn.
C. Nhúng tất cả hình ảnh trực tiếp vào mã HTML.
D. Không sử dụng hình ảnh.
16. Làm thế nào để ngăn người dùng tải xuống hình ảnh từ trang web của bạn?
A. Không có cách nào để ngăn người dùng tải xuống hình ảnh từ trang web.
B. Sử dụng CSS để ẩn hình ảnh.
C. Sử dụng JavaScript để xóa hình ảnh khỏi DOM sau khi tải.
D. Sử dụng các kỹ thuật như watermark, ngăn chặn chuột phải hoặc sử dụng các dịch vụ bảo vệ hình ảnh.
17. Phương pháp nào sau đây giúp cải thiện SEO cho các trang web sử dụng hình ảnh?
A. Sử dụng tên tệp hình ảnh chung chung như 'image1.jpg'.
B. Không sử dụng thuộc tính alt cho hình ảnh.
C. Tối ưu hóa kích thước tệp hình ảnh, sử dụng thuộc tính alt mô tả và tên tệp có liên quan.
D. Nhúng hình ảnh trực tiếp vào mã HTML.
18. Thuộc tính HTML nào được sử dụng để cung cấp thêm thông tin về hình ảnh khi người dùng di chuột qua nó?
A. alt
B. src
C. title
D. longdesc
19. Khi tạo một băng chuyền hình ảnh, làm thế nào để đảm bảo rằng nó hoạt động tốt trên các trình duyệt cũ hơn?
A. Không cần quan tâm đến các trình duyệt cũ hơn.
B. Sử dụng các tính năng CSS và JavaScript mới nhất mà không cần polyfill.
C. Sử dụng các kỹ thuật progressive enhancement và cung cấp các giải pháp thay thế (fallback) cho các trình duyệt không hỗ trợ các tính năng hiện đại.
D. Yêu cầu người dùng nâng cấp trình duyệt của họ.
20. Thư viện JavaScript nào sau đây thường được sử dụng để tạo băng chuyền hình ảnh?
A. React
B. Angular
C. Slick Carousel
D. Vue
21. CSS property nào được sử dụng để tạo hiệu ứng chuyển động mượt mà giữa các slide trong một băng chuyền ảnh?
A. animation
B. transition
C. transform
D. translate
22. Làm thế nào để tạo hiệu ứng cuộn (parallax scrolling) cho hình ảnh nền trên trang web?
A. Sử dụng thuộc tính CSS `background-size: cover`.
B. Sử dụng thuộc tính CSS `background-attachment: fixed` kết hợp với điều chỉnh vị trí nền.
C. Sử dụng thuộc tính CSS `overflow: scroll`.
D. Không thể tạo hiệu ứng parallax scrolling bằng CSS.
23. Phương pháp nào sau đây là tốt nhất để tạo một băng chuyền hình ảnh có khả năng đáp ứng trên nhiều kích cỡ màn hình?
A. Sử dụng kích thước hình ảnh cố định và CSS overflow:hidden.
B. Sử dụng JavaScript để tính toán và điều chỉnh kích thước hình ảnh dựa trên kích thước màn hình.
C. Sử dụng CSS media queries kết hợp với các đơn vị tương đối như phần trăm hoặc vw/vh.
D. Sử dụng một thư viện JavaScript chỉ hỗ trợ một kích thước màn hình duy nhất.
24. Khi tạo một băng chuyền hình ảnh, điều gì quan trọng cần xem xét để đảm bảo trải nghiệm người dùng tốt?
A. Tự động phát băng chuyền với tốc độ rất nhanh.
B. Không cung cấp bất kỳ điều khiển nào cho người dùng để tạm dừng hoặc điều hướng băng chuyền.
C. Đảm bảo rằng băng chuyền dễ dàng điều hướng, có các chỉ báo rõ ràng và tốc độ phát hợp lý.
D. Sử dụng quá nhiều hiệu ứng động và chuyển tiếp phức tạp.
25. Khi nhúng hình ảnh vào trang web, điều gì quan trọng cần xem xét về bản quyền?
A. Không cần quan tâm đến bản quyền vì hình ảnh đã được tải lên Internet.
B. Chỉ cần ghi rõ nguồn gốc của hình ảnh là đủ.
C. Cần đảm bảo rằng bạn có quyền sử dụng hình ảnh, ví dụ như thông qua giấy phép hoặc sử dụng hình ảnh miễn phí bản quyền.
D. Bản quyền chỉ áp dụng cho hình ảnh có độ phân giải cao.
26. Làm thế nào để tạo một băng chuyền hình ảnh vô hạn (infinite carousel) bằng JavaScript?
A. Không thể tạo băng chuyền vô hạn bằng JavaScript.
B. Sử dụng CSS animation để lặp lại chuyển động của các slide.
C. Sử dụng JavaScript để sao chép các slide và thêm chúng vào đầu và cuối băng chuyền, tạo cảm giác vô hạn.
D. Sử dụng thuộc tính HTML `loop`.
27. Định dạng hình ảnh nào sau đây thường cho chất lượng tốt nhất với kích thước tệp nhỏ nhất cho ảnh chụp?
A. BMP
B. PNG
C. JPEG
D. GIF
28. Thuộc tính CSS `object-fit: cover` có tác dụng gì?
A. Điều chỉnh kích thước hình ảnh để vừa khít trong vùng chứa, có thể làm méo hình ảnh.
B. Điều chỉnh kích thước hình ảnh để lấp đầy vùng chứa, có thể cắt bớt hình ảnh.
C. Hiển thị hình ảnh với kích thước gốc của nó.
D. Ẩn hình ảnh nếu nó không vừa với vùng chứa.
29. Loại tập tin vector nào thường được dùng cho logo và các hình ảnh có thể co giãn mà không bị giảm chất lượng trên website?
A. JPEG
B. PNG
C. SVG
D. GIF
30. Trong CSS, thuộc tính `image-rendering` được sử dụng để làm gì?
A. Để xác định định dạng hình ảnh.
B. Để kiểm soát cách trình duyệt xử lý việc chia tỷ lệ hình ảnh.
C. Để tạo hiệu ứng chuyển động cho hình ảnh.
D. Để tải hình ảnh từ một máy chủ khác.
Võ Việt Hoàng SEO