Mình vừa mới học được ít thẻ HTML căn bản, chỉ muốn lưu lại kiến thức và biết đâu có thể tìm được người cần những kiến thức nhỏ bé này.
Để học các thẻ nhanh hơn, các Bạn xem tên thẻ và đọc phần mô tả tóm tắc của thẻ, sau đó nhấp vài liên kết trên tên thẻ để đến trang chi tiết trên w3schools. Tại đây có đầy đủ thông tin chi tiết, ví dụ, Bạn có thể thực hành ngay trên website để ghi nhớ cú pháp. Chúc Bạn thành công!
Nhóm các thẻ căn bản
| Thẻ | Mô tả |
|---|---|
| <a> | Thẻ để chèn liên kết (link) từ trang này sang trang khác, các thuộc tính thường SD: ahref, taget, rel |
| <img> | Thẻ chèn hình ảnh vào HTML, các thuộc tính thường SD: src, alt, width, height |
| <p> | Thẻ tạo một đoạn văn |
| <strong> | Thẻ để in đậm văn bản, đánh dấu nội dung quan trọng, tốt cho SEO |
| <em> | Thẻ để in nghiêng văn bản, đánh dấu nội dung được nhấn mạnh, tốt cho SEO |
| <br> | Dùng để xuống dòng |
| <mark> | Dùng để Highlight văn bản |
| <h…> | Thẻ tạo tiêu đề, từ h1 đến h6, h1 là lớn nhất, h6 là nhỏ nhất |
| <hr> | Tạo đường gạch ngang |
| <!–…–> | Dùng để tạo chú thích trong mã nguồn |
| <div> | Thẻ định nghĩa một phần, một bộ phần trong HTML |
| <ol> | Một danh sách có số thứ thự (ordered list) |
| <ul> | Một danh sách không có số thứ thự (unordered list) |
| <li> | Một mục trong danh sách |
| <span> | Thẻ đánh dấu một phần trong văn bản hoặc tài liệu |
| <style> | Sử dụng để chèn css trực tiếp vào HTML |
| <link> | Liên kết đến các nguồn bên ngoài |
| <script> | Nhúng một đoạn JavaScript vào HTML |
| <noscript> | Nội dung thay thế khi javaScript không hiển thị |
Nhóm thẻ Form và Input
| Thẻ | Mô tả |
|---|---|
| <form> | Tạo biểu mẫu, các thuộc tính thường SD: action, method, anctype |
| <input> | Nơi người dùng nhập liệu, SD thuộc tính type với các giá trị: text, password, email, radio, checkbox, number, range, date, button, submit, reset |
| <textarea> | Nhập văn bản nhiều dòng, thuốc tính thường SD: rows, cols, placeholder |
| <select> | Tạo danh sách thả xuống với các tùy chọn Option |
| <option> | Tạo một tùy chọn trong Select |
| <optgroup> | Nhóm các tùy chọn liên quan trong 1 Select |
| <button> | Tạo nút bấm, thuộc tính tường SD: type với các giá trị: submit, reset, button |
| <label> | Tạo nhãn cho các phần từ, giúp người dùng dễ dàng lựa chọn, thuộc tính thường SD: for với giá trị id của phần tử |
| <fieldset> | Nhóm các yếu tố liên quan trong 1 form |
| <legend> | Tạo 1 tiêu đề cho Fieldset |
| <output> | Nơi hiển thị kết quả cho người dùng |
Nhóm thẻ hình ảnh, video, audio
| Thẻ | Mô tả |
|---|---|
| <img> | Thẻ chèn hình ảnh vào HTML, các thuộc tính thường SD: src, alt, width, height |
| <video> | Thẻ chèn video vào HTML, thêm thẻ <source> để thêm nguồn video |
| <audio> | Thẻ chèn audio vào HTML, thêm thẻ <source> để thêm nguồn audio |
| <iframe> | Dùng để chèn các tài liệu, video,… vào HTML, cần có thuộc tính title để screen readers hiểu được nội dung của <iframe> |
| <picture> | Chèn hình ảnh với nhiều lựa chọn tùy theo kích thước màn hình, sử dụng thẻ source để thêm nguồn ảnh với thuộc tính media (định giá trị kích thước màn hình) và srcset (nguồn ảnh), thêm thẻ <img> hiển thị hình ảnh dự phòng nếu không có thẻ <source> nào phù hợp. |
| <source> | Xác định nguồn dữ liệu cho các thẻ <video>, <audio>, <picture> |
| <figure> | Xác định nội dung khép kín như hình ảnh, biểu đồ, danh sách mã |
| <figcaption> | Thêm một chú thích cho thẻ <figure> |
| <svg> | Dùng để vẽ 1 hình ảnh vector (Cái này khó quá bạn nào muốn tham khảo thì xem link chèn trên thẻ nha) |
Nhóm thẻ table
| Thẻ | Mô tả |
|---|---|
| <table> | Chèn bảng vào HTML |
| <thead> | Chỉ định phần nội dung đầu trang của bảng |
| <tbody> | Chỉ định phần nội dung chính của bảng |
| <tfoot> | Chỉ định nội dung chân trang của bảng, ít sử dụng |
| <tr> | Thẻ định nghĩa 1 hàng trong bảng |
| <th> | Thẻ định nghĩa 1 ô tiêu đề trong bảng |
| <td> | Thẻ định nghĩa 1 ô dữ liệu trong bảng, sử dụng thuộc tính colspan giá trị số để mở rộng ô theo số cột và rowspan để mở rộng ô theo số hàng tương ứng |
| <caption> | Thêm 1 chú thích cho bảng, ít sử dụng |
| <colgroup> | Xác định 1 nhóm cột để định dạng |
| <col> | Quy định cột cụ thể để định dạng trong <colgroup>, sử dụng thuộc tính span giá trị number để xác định các cột liền kề |
Nhóm thẻ layout
| Thẻ | Mô tả |
|---|---|
| <header> | Thẻ chứa phần mở đầu website như: logo, menu điều hướng,… |
| <nav> | Thẻ chứa các thanh điều hướng |
| <main> | Thẻ chứa phần nội dung chính của website |
| <aside> | Thẻ chứa nội dung khác thường là sidebar |
| <section> | Thẻ chứa 1 phần nội dung |
| <article> | Thẻ chứa 1 nội dung khép kín |
| <footer> | Phần chân website thường chứa thông tin liên hệ, điều hướng,… |
Lượt xem: 3
