Hi anh em, chúc anh em một ngày làm việc hiệu quả và tràn đầy năng lượng.
Hôm nay mình sẽ chia sẻ về một số câu hỏi cơ bản về HTML & CSS. Bài viết mang tính chất giúp anh em hệ thống lại kiến thức, ôn tập lại nội dung cơ bản.
Không để mọi người chờ lâu, cùng bắt đầu nào!
1. HTML là gì? HTML viết tắt của HyperText Markup Language là ngôn ngữ đánh dấu văn bản dùng các thẻ để xây dựng cấu trúc website. Lưu ý: HTML không phải là ngôn ngữ lập trình.
2. Kể tên các thẻ HTML phổ biến?
- Thẻ tiêu đề: h1 đến h6
- Thẻ tạo đoạn văn bản: p (paragraph)
- Thẻ chia phân vùng (block) website: div (division) dùng để chia layout
- Thẻ tạo link: a
- Thẻ hình ảnh: img
- Thẻ tạo trình phát nhạc: audio
- Thẻ tạo danh sách: ul, li - ol, li (phân biệt ul và ol)
- Thẻ tạo vùng nhập liệu của người dùng: input (tham khảo: https://www.w3schools.com/tags/tag_input.asp)
- Thẻ tạo nút: button
- Thẻ tạo bảng: table, tr, td
3. Thẻ div có tác dụng gì? Thẻ div có tác dụng gom nhóm các phần tử thành các phân vùng, khối (block). Ví dụ như chia website thành các block header, content, footer,... Ngoài ra có thể chia nhỏ các phần tử trong khối lớn thành khối nhỏ.
4. Css là gì? Css viết tắt của Cascading Style Sheets là ngôn ngữ để tìm và định dạng các phần tử của trang web. (định dạng màu sắc, phông nền, kích thước, khoảng cách...)
5. Có 3 cách sử dụng CSS hãy kể tên và độ ưu tiên của mỗi cách?
- Inline ưu tiên cao nhất.
- Internal ưu tiên thứ hai.
- External ưu tiên cuối cùng.
6. CSS selector là gì? Phân biệt ID và Class?
- CSS selector là cách lấy ra các phần tử và định dạng css cho chúng.
Ví dụ:
p{ color: red;
} h1{ font-size: 50px;
} .header{ background-color: green;
} #register_btn{ background-color: red;
}
- Phân biệt ID và Class? ID là duy nhất và chỉ dùng cho một phần tử. Class có thể dùng chung cho nhiều phần tử.
7. Phân biệt các đơn vị tương đối (relative units) %, em, rem?
- Đơn vị tương đối % – đơn vị phần trăm sẽ tỉ lệ theo phần tử cha trực tiếp của nó.
- Đơn vị tương đối em - là đơn vị mà giá trị của nó được tính dựa trên tỉ lệ so với phần tử cha của nó hoặc chính nó thông qua giá trị của thuộc tính font-size.
- Đơn vị tương đối rem (root em) tương tự như em, nhưng đơn giản là nó sẽ tỉ lệ theo thuộc tính font-size của phần tử root <html>.
8. CSS model box là gì? là hộp bao quanh phần tử html gồm các thành phần bên dưới. Tham khảo: https://www.w3schools.com/css/css_boxmodel.asp
9. Phân biệt padding, marging?
- Padding là vùng khoảng trống giữa content và border.
- Marging là vùng khoảng trống bao bọc bên ngoài border. Thường dùng để thiết lập khoảng cách giữa cách phần tử với nhau.
10. CSS Position dùng để làm gì? Phân biệt fixed, relative, absolute?
- Position trong css dùng để thiết lập vị trí mới của thành phần HTML so với vị trí trình duyệt hoặc vị trí ban đầu hoặc vị trí phần tử cha.
- fixed Với giá trị position là fixed thì sẽ lấy mốc là góc màn hình trình duyệt hiển thị, do đó khi bạn cuộn trang website xuống (dùng chuột scroll xuống) thì nó vẫn luôn nằm trên vị trí màn hình mà bạn quan sát.
- relative Với giá trị position là relative thì chúng ta có thể di chuyển vị trí của nó xung quanh vị trí ban đầu, lấy vị trí ban đầu làm mốc.
- absolute Với thuộc tính postion absolute thì sẽ lấy góc của phần tử cha có chứa thuộc tính position gần nhất là mốc.
11. Reset CSS là gì? Giải thích Reset Css để bỏ đi những thuộc tính mặc định không mong muốn của các thẻ html. Ví dụ như bỏ đi margin mặc định của thẻ h1, h2...
12. Tổng kết
- Vậy là chúng ta đã đi đã đi qua phần 1 câu hỏi cơ bản về HTML & CSS. Vì nội dung khá nhiều nên mình sẽ chia thành 3 phần. Mục đích của bài viết là giúp các bạn ôn tập, hệ thống lại kiến thức.
- Cảm ơn mọi người đã xem bài viết. Chúc mọi người một cuối tuần vui vẻ.
- Nếu có thắc mắc về các phần trong bài này mọi người có thể inbox qua facebook:https://www.facebook.com/FriendsCode-108096425243996 Mình sẽ giải đáp thắc mắc trong tầm hiểu biết. Cảm ơn mọi người
Tham khảo: https://www.cdnpkg.com/normalize/file/normalize.css/?id=57635