Font size
WorksheetsBài kiểm tra: HTML5, Table & Form, CSS Selectors
Total questions: 85
Worksheet time: 43mins
Extension nào giúp bạn đổi tên thẻ
Auto Close Tag
Auto Rename Tag
Prettier
Bracket Pair Colorizer
Trong HTML5, tại sao thẻ
Nó làm trang web tải nhanh hơn.
Nó giúp các công cụ tìm kiếm và thiết bị hỗ trợ người khiếm thị hiểu rõ cấu trúc trang.
Nó tự động định dạng màu sắc cho tiêu đề.
Thẻ
Khai báo có mục đích chính là gì?
Là một thẻ HTML dùng để hiển thị nội dung.
Thông báo cho trình duyệt biết trang web đang sử dụng chuẩn HTML5 để hiển thị chính xác.
Kết nối file HTML với file CSS.
Khai báo ngôn ngữ của trang web là tiếng Anh.
Để tạo một đường kẻ ngang làm ranh giới giữa hai bài viết, thẻ nào là chuẩn ngữ nghĩa nhất?
Khi muốn hiển thị công thức hóa học H2SO4 , bạn cần dùng thẻ nào cho các số 2 và 4?
Thẻ có vai trò gì?
Giúp trang web hiển thị ảnh sắc nét hơn.
Đảm bảo trang web hiển thị đúng tỉ lệ và không bị thu nhỏ quá mức trên điện thoại.
Tự động dịch ngôn ngữ trang web.
Tăng tốc độ truy cập web.
Trong một trang báo, thẻ nào phù hợp nhất để chứa một bài viết có thể đứng độc lập và mang đi chia sẻ ở trang khác?
Nếu bạn đặt một thẻ
bên trong một thẻ , điều gì sẽ xảy ra?
Chữ sẽ nhỏ lại như thẻ span.
Sai quy tắc cấu trúc vì thẻ Inline (span) không được chứa thẻ Block (h1).
Trình duyệt sẽ báo lỗi và không hiển thị gì.
Thẻ h1 sẽ biến thành thẻ span.
Để tạo liên kết mở ra một tab mới khi click vào, bạn dùng thuộc tính nào?
target="_self"
target="_blank"
rel="noopener"
href="newtab"
Thẻ
Trong thẻ
Trong thẻ
Sau thẻ
Trong thẻ
Thuộc tính nào dùng để gộp 3 hàng thành 1 ô duy nhất?
colspan="3"
rowspan="3"
merge="3"
grid-row="3"
Khi thiết kế một bảng dài nhiều trang, thẻ nào giúp tiêu đề bảng tự động lặp lại ở đầu mỗi trang khi in?
Phương thức POST trong Form khác GET ở điểm nào quan trọng nhất về bảo mật? POST nhanh hơn GET. POST gửi dữ liệu ẩn trong thân yêu cầu, còn GET hiển thị dữ liệu ngay trên thanh địa chỉ URL. POST chỉ gửi được văn bản, còn GET gửi được ảnh. POST không cần thuộc tính action. Bạn muốn người dùng chọn "Giới tính" (Nam hoặc Nữ). Tại sao các thẻ phải có cùng thuộc tính name? Để trình duyệt biết chúng thuộc cùng một nhóm và chỉ cho phép chọn một. Để định dạng CSS cho dễ. Để máy chủ nhận được tất cả các giá trị người dùng chọn. Để tiết kiệm mã nguồn. Thuộc tính nào khiến một ô nhập liệu không cho sửa nhưng vẫn gửi giá trị về máy chủ khi nhấn Submit? disabled readonly required placeholder Để tạo một danh sách chọn tỉnh thành với hơn 60 lựa chọn, thẻ nào là tối ưu nhất về diện tích giao diện? Nhiều thẻ Thẻ Thẻ Nhiều thẻ Thuộc tính placeholder sẽ biến mất khi nào? Khi người dùng click chuột vào ô. Khi người dùng bắt đầu nhập ký tự vào ô. Khi trang web vừa tải xong. Nó không bao giờ biến mất. Khi sử dụng , thuộc tính nào giúp giới hạn người dùng không được nhập số nhỏ hơn 1 và lớn hơn 10? start="1" end="10" min="1" max="10" limit="1-10" value="1-10" Thẻ Thẻ input có name="user" Thẻ input có id="user" Thẻ input đầu tiên trong form. Thẻ input có class="user" Thẻ Để tạo nhiều lựa chọn cùng lúc. Để gom nhóm các lựa chọn liên quan (ví dụ: Miền Bắc, Miền Nam) giúp người dùng dễ nhìn. Để thay đổi màu sắc của danh sách. Để bắt buộc người dùng phải chọn. Đoạn mã CSS nào chọn tất cả các thẻ là con trực tiếp của div p div > p div + p div ~ p Một thẻ nhận 3 quy tắc CSS: #id (màu đỏ), .class (màu xanh), p (màu vàng). Màu thực tế sẽ là gì? Đỏ Xanh Vàng Đen Tính điểm Specificity cho Selector sau: nav ul li.active a 4 điểm 13 điểm 14 điểm 24 điểm Trạng thái nào của thẻ dùng để định kiểu khi người dùng đang nhấn giữ chuột trên liên kết? :hover :active :visited :focus Để chọn phần tử li:first-child li:last-child li:nth-child(2) li:second Sự khác biệt giữa ::before và :hover là gì? Cả hai đều là Pseudo-class. ::before là Pseudo-element (tạo thêm nội dung giả), còn :hover là Pseudo-class (trạng thái). :hover dùng dấu :: mới đúng chuẩn. Không có sự khác biệt. Nếu file CSS có dòng * { box-sizing: border-box; }, điều này có ý nghĩa gì? Tất cả các thẻ sẽ có đường viền màu đen. Tất cả các thẻ sẽ tính chiều rộng bao gồm cả Padding và Border, giúp kiểm soát bố cục dễ hơn. Xóa bỏ hoàn toàn Margin của các thẻ. Làm cho tất cả các thẻ biến thành hình vuông. Thuộc tính opacity: 0.5 khác gì với background: rgba(0,0,0,0.5)? Không khác gì nhau. opacity làm mờ toàn bộ phần tử và các con của nó, còn rgba chỉ làm mờ màu nền. rgba chỉ dùng được cho màu đen. opacity giúp trang web chạy nhanh hơn. Đơn vị em được tính toán dựa trên cái gì? Kích thước màn hình. Kích thước font chữ của chính phần tử đó hoặc phần tử cha. Kích thước font chữ mặc định của trình duyệt (thường là 16px). Chiều rộng của thẻ Quy tắc CSS nào sẽ ghi đè lên mọi quy tắc khác bất kể điểm ưu tiên? Thêm ID cho thẻ. Viết CSS Inline trực tiếp vào thẻ. Sử dụng từ khóa !important. Viết CSS ở cuối file. Một khối có width: 300px, padding: 10px, border: 2px. Nếu dùng box-sizing: content-box, tổng chiều rộng nó chiếm là: 300px 312px 324px 320px Thuộc tính nào dùng để căn giữa một khối div có chiều rộng cố định theo chiều ngang? text-align: center margin: 0 auto padding: auto align-items: center display: inline-block có đặc điểm gì nổi bật? Nằm trên cùng một hàng nhưng không chỉnh được width/height. Nằm trên cùng một hàng và có thể chỉnh được width/height, padding, margin. Luôn tự nhảy xuống dòng mới. Biến phần tử thành một bảng. Thuộc tính overflow: hidden có tác dụng gì? Ẩn toàn bộ phần tử. Cắt bỏ bất kỳ nội dung nào vượt ra khỏi kích thước của phần tử cha. Làm cho phần tử trong suốt. Tự động tạo thanh cuộn. Để cố định một thanh Menu luôn nằm ở đỉnh màn hình ngay cả khi cuộn trang, ta dùng: position: relative position: absolute position: fixed position: static Trong position: absolute, phần tử sẽ được căn chỉnh vị trí dựa trên: Cửa sổ trình duyệt. Phần tử cha gần nhất có position khác static. Thẻ Phần tử đứng ngay trước nó. Thuộc tính z-index chỉ hoạt động khi phần tử có thuộc tính nào? display: flex position khác static (như relative, absolute, fixed) float: left width: 100% Sự khác biệt giữa margin và padding là: margin là bên trong đường viền, padding là bên ngoài. margin là khoảng cách giữa các khối, padding là khoảng cách giữa nội dung và đường viền của khối đó. margin chỉ dùng cho màu sắc. Không có sự khác biệt. Khi đặt float: left cho các phần tử, ta thường phải dùng kỹ thuật nào cho thẻ cha để không bị mất chiều cao? display: block clear: both hoặc clearfix overflow: visible position: relative Thuộc tính box-shadow: 5px 10px 8px #888888;. Giá trị 10px đại diện cho điều gì? Độ mờ của bóng. Độ lệch bóng theo chiều dọc (Y-offset). Độ lệch bóng theo chiều ngang (X-offset). Độ lan tỏa của bóng. Thuộc tính flex-direction: row-reverse sẽ sắp xếp các con như thế nào? Theo cột từ trên xuống. Theo hàng ngang từ phải sang trái. Theo hàng ngang từ trái sang phải. Theo cột từ dưới lên. Để các phần tử con trong Flexbox cách đều nhau và cách cả hai biên, ta dùng: justify-content: space-between justify-content: space-around justify-content: space-evenly justify-content: center Thuộc tính align-items: center có tác dụng gì? Căn giữa các phần tử theo trục chính. Căn giữa các phần tử theo trục phụ (vuông góc với trục chính). Làm cho các phần tử rộng bằng nhau. Đẩy các phần tử xuống dòng. Khi một Flex Container không đủ chỗ chứa, làm sao để các phần tử tự động nhảy xuống dòng mới? flex-wrap: wrap flex-flow: nowrap display: grid overflow: scroll Giá trị mặc định của flex-grow là bao nhiêu? 1 0 (không tự giãn nở) 100% auto Thuộc tính align-self dùng để làm gì? Căn chỉnh tất cả các con. Cho phép một phần tử con cụ thể có cách căn chỉnh khác với các anh em của nó. Căn giữa toàn bộ container. Thay đổi thứ tự hiển thị. Trong Flexbox, nếu muốn một phần tử luôn nằm cuối hàng dù có bao nhiêu phần tử khác, ta dùng: order: -1 order: 999 (hoặc một số dương lớn) align-items: flex-end justify-content: end Lợi ích lớn nhất của Flexbox so với Float là gì? Hỗ trợ trình duyệt cũ tốt hơn. Tự động tính toán kích thước và khoảng cách một cách linh hoạt, dễ làm Responsive. Không cần viết CSS. Chỉ dùng được cho hình ảnh. Trục chính (Main Axis) sẽ trở thành chiều dọc khi nào? Khi dùng flex-direction: column Khi dùng justify-content: center Mặc định nó luôn là chiều dọc. Khi màn hình nhỏ hơn 600px. flex-basis khác gì với width? Không khác gì. flex-basis xác định kích thước khởi điểm của phần tử trước khi các không gian dư thừa được phân bố. flex-basis chỉ dùng cho chiều cao. width luôn được ưu tiên hơn flex-basis. Hệ thống Grid của Bootstrap chia một hàng (row) thành tối đa bao nhiêu cột? 10 12 16 24 Để tạo một cột chiếm 1/2 chiều rộng trên màn hình máy tính (Large) và chiếm toàn bộ chiều rộng trên Mobile, ta dùng class nào? .col-6 .col-lg-6 .col-12 .col-md-6 .col-sm-6 .col-lg-12 Class nào trong Bootstrap giúp ẩn một phần tử trên Mobile nhưng hiện trên Desktop? .hidden-xs .d-none .d-md-block .invisible .display-none Để tạo một nút bấm có màu xanh lá (thành công) trong Bootstrap, ta dùng: .btn-blue .btn-success .btn-primary .btn-link Trong Bootstrap 5, class .g-3 dùng để làm gì? Tạo màu nền. Tạo khoảng cách (gutter) giữa các cột trong hàng. Căn giữa văn bản. Định kích thước font chữ. Container nào trong Bootstrap luôn chiếm 100% chiều rộng ở mọi kích thước màn hình? .container .container-fixed .container-fluid .wrapper Tại sao nên sử dụng lớp .img-fluid cho hình ảnh? Để ảnh có hiệu ứng đổ bóng. Để ảnh tự động co giãn theo chiều rộng của phần tử cha (Responsive). Để ảnh biến thành hình tròn. Để ảnh tải nhanh hơn. Để căn giữa văn bản theo chiều ngang bằng class Bootstrap, ta dùng: .text-center .align-center .justify-content-center .m-auto Thẻ Thanh menu luôn hiển ra các link. Thanh menu sẽ thu gọn thành biểu tượng "Hamburger" trên màn hình nhỏ và mở rộng trên màn hình lớn (Large). Thay đổi màu sắc của menu. Tạo menu dọc. Class .mt-5 trong Bootstrap có nghĩa là: Margin-top: 5px Margin-top với mức độ 5 (theo thang đo của Bootstrap) Max-top: 5 Một class tự chế không có sẵn. Để phóng to một hình ảnh lên 1.2 lần khi di chuột vào, ta dùng thuộc tính CSS nào? transform: scale(1.2) width: 120% zoom: 1.2 transition: big Thuộc tính transition: all 0.5s ease-in-out; dùng để làm gì? Làm trang web chuyển động liên tục. Tạo hiệu ứng thay đổi mượt mà cho mọi thuộc tính trong vòng 0.5 giây. Thay đổi kích thước file CSS. Chuyển hướng trang web sau 0.5 giây. Để xoay một icon 180 độ, lệnh nào đúng? transform: rotate(180deg) transform: flip(180) rotate: 180 direction: reverse Figma là công cụ hỗ trợ tốt nhất cho công việc nào? Viết mã JavaScript. Thiết kế giao diện (UI) và trải nghiệm người dùng (UX). Quản lý Database. Chỉnh sửa video. Khi Developer nhận file Figma, họ thường làm gì để lấy thông số CSS chính xác? Tự đoán màu sắc. Sử dụng tab "Inspect" (hoặc Dev Mode) để xem thông số font, màu, khoảng cách. Chụp ảnh màn hình rồi dán vào code. Vẽ lại bằng Paint. Trong CSS, transform: translate(50px, 100px) sẽ làm gì? Thay đổi kích thước phần tử. Di chuyển phần tử sang phải 50px và xuống dưới 100px so với vị trí ban đầu. Cắt bỏ phần tử. Xoay phần tử theo 2 trục. Thuộc tính nào dùng để tạo hiệu ứng nghiêng một khối? rotate skew scale translate Tại sao khi làm việc nhóm, Figma lại ưu việt hơn Photoshop? Vì nó nhẹ hơn. Vì nó cho phép nhiều người cùng vào chỉnh sửa và xem file cùng lúc trên trình duyệt. Vì nó có nhiều hiệu ứng 3D hơn. Vì nó miễn phí hoàn toàn cho mọi tính năng. Một tệp ảnh có đuôi .svg thường được ưu tiên dùng cho Logo vì: Nó có dung lượng lớn. Nó là ảnh dạng vector, không bị vỡ nét khi phóng to hay thu nhỏ. Nó có nhiều màu sắc hơn ảnh .jpg. Nó chỉ hiển thị được trên Google Chrome. Để tạo một hiệu ứng chuyển động lặp đi lặp lại mãi mãi (ví dụ trái tim đập), ta dùng: transition @keyframes kết hợp với animation transform hover Khi thiết kế Form, nếu muốn nhấn vào dòng chữ "Tôi đồng ý với điều khoản" mà dấu tích Checkbox vẫn được chọn, bạn phải làm gì? Dùng JavaScript để bắt sự kiện click. Bao thẻ và văn bản bên trong thẻ Đặt cả hai vào cùng một thẻ Không thể làm được trong HTML thuần. Bạn copy mã Bootstrap từ trang chủ nhưng giao diện vẫn hiện như HTML thuần, không có màu sắc hay bố cục. Nguyên nhân phổ biến nhất là: Bạn quên chưa nhúng (link) file CSS của Bootstrap vào thẻ Bạn viết sai tên thẻ HTML. Trình duyệt của bạn quá cũ. Máy tính không có internet. Trong CSS Grid hoặc Flexbox, thuộc tính gap: 20px có ưu điểm gì so với dùng margin cho các con? Nó không tạo ra khoảng trống dư thừa ở phía ngoài cùng của các phần tử biên. Nó làm chữ to hơn. Nó thay thế hoàn toàn cho padding. Nó chỉ dùng được cho hình ảnh. Một hình ảnh bị méo do bạn set width và height không đúng tỉ lệ. Thuộc tính nào giúp ảnh tự cắt (crop) để lấp đầy khung mà không bị méo? image-rendering: pixelated object-fit: cover display: block overflow: hidden Khi xem file Figma, bạn thấy thông số "Line height: 24px" và "Font size: 16px". Bạn sẽ viết CSS như thế nào? font-size: 16px; line-height: 24px; font: 24px/16px; text-height: 24px; Chỉ cần viết font-size: 16px;, line-height tự động tính. Thẻ có tác dụng gì quan trọng nhất? Tự động gửi email khi nhấn nút. Trình duyệt sẽ tự kiểm tra xem dữ liệu nhập vào có dấu @ và đúng định dạng email không trước khi gửi form. Bảo mật mật khẩu người dùng. Chỉ cho phép nhập chữ cái. Thuộc tính cursor: pointer nên được dùng cho những phần tử nào? Tất cả các thẻ văn bản. Các phần tử có thể click được (như nút, liên kết) để người dùng biết có thể tương tác. Hình ảnh nền. Chỉ dùng cho thẻ . Tại sao nên ưu tiên dùng các class như .mt-3, .-pb-2 của Bootstrap thay vì viết CSS riêng? Để giữ cho khoảng cách (spacing) trên toàn trang web được thống nhất theo một quy chuẩn. Vì viết CSS riêng sẽ bị lỗi. Vì Bootstrap không cho phép viết CSS để lên. Để trang web có màu sắc đẹp hơn. Chuyện gì xảy ra nếu bạn đặt z-index: 10 cho phần tử A và z-index: 100 cho phần tử B, nhưng A vẫn nằm đè lên B? Do B bị lỗi code Do A và B nằm trong các "Context" (ngữ cảnh xếp chồng) khác nhau, và cha của A có z-index cao hơn cha của B Trình duyệt ưu tiên phần tử viết trước Do kích thước của A lớn hơn B Để vô hiệu hóa việc người dùng bôi đen (copy) văn bản trên trang web, ta dùng thuộc tính nào? user-select: none pointer-events: none display: none copy: disable Sự khác biệt giữa min-width và width là gì? width là cố định, min-width cho phép phần tử rộng hơn giá trị đó nhưng không được nhỏ hơn Không có sự khác biệt min-width làm phần tử nhỏ lại width chỉ dùng cho mobile Khi thiết kế giao diện cho màn hình Retina (độ phân giải cao), tại sao ảnh thường bị mờ? Do trình duyệt lỗi Do mật độ điểm ảnh cao, cần dùng ảnh kích thước gấp đôi (x2) hoặc ảnh SVG Do dùng CSS quá nhiều Do để opacity thấp Thuộc tính border: none và outline: none thường được dùng để xóa viền mặc định của đối tượng nào? Thẻ Thẻ Thẻ và Thẻ Để căn giữa một phần tử cả ngang và dọc bằng Flexbox, cặp thuộc tính nào nên dùng? justify-content: center; align-items: center; text-align: center; vertical-align: middle; margin: auto; padding: auto; display: block; float: center; Để trở thành một lập trình viên Front-end giỏi dựa trên tài liệu Bài 13, kỹ năng quan trọng nhất là gì? Thuộc lòng tất cả các thẻ HTML Kỹ năng chuyển đổi chính xác từ bản thiết kế (Figma) sang mã nguồn (HTML/CSS) đảm bảo tính thẩm mỹ và responsive Biết sử dụng Photoshop Chỉ cần giỏi toán 90 questions Quiz về An toàn thông tin Worksheet • University 83 questions Chương 5+6 Worksheet • University 89 questions Câu hỏi về phát triển Android với Kotlin Worksheet • University 88 questions TRẮC NGHIỆM HỆ THỐNG THÔNG TIN Worksheet • University 81 questions Câu hỏi trắc nghiệm về phát triển phần mềm Worksheet • University 85 questions Trắc nghiệm ôn tập THDC A (Python cơ bản) Phần 2 Worksheet • University 81 questions an toàn thông tin Worksheet • University 90 questions CNPM_Cua_Huy Worksheet • University, ta dùng selector nào?
Similar Resources on Wayground
