Cấu trúc HTML cơ bản

HTML Structure

HTML Definition: HyperText Markup Language, used for creating web pages.
Basic Structure:
- <!DOCTYPE html>: Declares the document type.
- <html>: Root element of an HTML page.
- <head>: Contains metadata and links to resources (e.g., <title>, <link>, <meta>).
- <body>: Contains the content of the web page (e.g., text, images, links).
Common HTML Elements:
- Headings: <h1> to <h6> for titles and subtitles.
- Paragraphs: <p> for text blocks.
- Links: <a href="URL"> for hyperlinks.
- Lists:
  - Ordered: <ol> for numbered lists.
  - Unordered: <ul> for bullet lists.
- Images: <img src="URL" alt="description"> for displaying images.
- Divisions: <div> for grouping content.
- Forms: <form> for user input; includes <input>, <textarea>, <button>, etc.
Semantic HTML: Use of HTML5 elements that provide meaning to the content.
- Examples: <header>, <footer>, <article>, <section>, <nav>.

CSS Styling Techniques

CSS Definition: Cascading Style Sheets, used for styling HTML elements.
CSS Syntax:
- Selector: Targets HTML elements (e.g., tags, classes, IDs).
- Declaration Block: Contains property-value pairs (e.g., color: red;).
Ways to Include CSS:
- Inline: <element style="property: value;"> for individual elements.
- Internal: <style> tag within the <head> for styling a single document.
- External: Linking to a separate .css file using <link rel="stylesheet" href="styles.css">.
Selectors:
- Type Selector: Targets all instances of a tag (e.g., p {}).
- Class Selector: Targets elements with a specific class (.classname {}).
- ID Selector: Targets a specific element with an ID (#idname {}).
- Attribute Selector: Targets elements with a specific attribute (e.g., [type="text"]).
Common CSS Properties:
- Colors: color, background-color.
- Box Model: margin, padding, border, width, height.
- Fonts: font-family, font-size, font-weight.
- Layout: display, position, flex, grid.
Responsive Design:
- Media Queries: Using @media to apply styles based on device characteristics (e.g., screen size).
- Flexible Units: %, em, rem for scalable layouts.

Cấu trúc HTML

Định nghĩa HTML: Ngôn ngữ đánh dấu siêu văn bản (HyperText Markup Language), dùng để tạo trang web.
Cấu trúc cơ bản:
- <!DOCTYPE html>: Khai báo loại tài liệu.
- <html>: Phần tử gốc của một trang HTML.
- <head>: Chứa thông tin siêu dữ liệu và liên kết đến các tài nguyên khác (như <title>, <link>, <meta>).
- <body>: Chứa nội dung chính của trang web (ví dụ: văn bản, hình ảnh, liên kết).
Các phần tử HTML phổ biến:
- Tiêu đề: Các thẻ từ <h1> đến <h6> dùng cho tiêu đề và tiêu đề phụ.
- Đoạn văn: Thẻ <p> dùng để tạo các khối văn bản.
- Liên kết: Thẻ <a> dùng để tạo liên kết siêu văn bản.
- Danh sách:
  - Danh sách có thứ tự: Thẻ <ol> dùng cho danh sách có số thứ tự.
  - Danh sách không có thứ tự: Thẻ <ul> dùng cho danh sách không có số thứ tự.
- Hình ảnh: Thẻ <img> dùng để hiển thị hình ảnh.
- Khối nội dung: Thẻ <div> dùng để nhóm nội dung.
- Biểu mẫu: Thẻ <form> dùng để nhập liệu từ người dùng; bao gồm <input>, <button>, <select>, v.v.
HTML ngữ nghĩa: Sử dụng các phần tử HTML5 để cung cấp ý nghĩa cho nội dung.
Ví dụ ngữ nghĩa: Các phần tử như <article>, <section>, <header>, <footer>, <nav>.

Kỹ thuật định dạng CSS

Định nghĩa CSS: Tài liệu kiểu xếp chồng (Cascading Style Sheets), dùng để định dạng các phần tử HTML.
Cú pháp CSS:
- Bộ chọn (Selector): Nhắm đến các phần tử HTML (ví dụ: thẻ, lớp, ID).
- Khối khai báo (Declaration Block): Chứa các cặp giá trị thuộc tính (ví dụ: color: red;).
Cách đưa CSS vào trang:
- Nội tuyến: Sử dụng thuộc tính style trên các phần tử riêng lẻ.
- Nội bộ: Sử dụng thẻ <style> bên trong thẻ <head> cho một tài liệu cụ thể.
- Ngoại vi: Liên kết đến một tệp .css riêng bằng thẻ <link>.
Các bộ chọn:
- Bộ chọn loại: Nhắm đến tất cả các trường hợp của một thẻ (ví dụ: p {}).
- Bộ chọn lớp: Nhắm đến các phần tử có một lớp cụ thể (.classname {}).
- Bộ chọn ID: Nhắm đến một phần tử cụ thể với ID (#idname {}).
- Bộ chọn thuộc tính: Nhắm đến các phần tử có thuộc tính cụ thể (ví dụ: [type="text"]).
Các thuộc tính CSS phổ biến:
- Màu sắc: color, background-color.
- Mô hình hộp: margin, padding, border, width, height.
- Phông chữ: font-family, font-size, font-weight.
- Bố cục: display, position, flex, grid.
Thiết kế đáp ứng:
- Truy vấn phương tiện: Sử dụng @media để áp dụng kiểu tùy thuộc vào đặc điểm thiết bị (ví dụ: kích thước màn hình).
- Đơn vị linh hoạt: Sử dụng %, em, rem cho các bố cục có thể mở rộng.