Bảng Tra cứu Nhanh HTML5 & CSS3: Thẻ, Thuộc tính và Cách Xem trước Trang HTML bằng Trình xem HTML Trực tuyến
Khó nhớ một thẻ HTML hoặc thuộc tính CSS cụ thể? Hướng dẫn này là dành cho bạn. Bảng tra cứu nhanh HTML toàn diện này bao gồm các thẻ HTML5 và thuộc tính CSS3 thiết yếu nhất, kèm theo các đoạn mã thực tế. Tự hỏi cách xem trước một trang HTML mà không cần máy chủ cục bộ? Khám phá cách kiểm tra và trực quan hóa ngay lập tức mọi ví dụ bằng cách sử dụng trình xem HTML trực tuyến tích hợp của chúng tôi để có quy trình làm việc nhanh hơn, hiệu quả hơn.
Danh sách Thẻ HTML5 Toàn diện: Cấu trúc Nội dung Web của Bạn
HTML (HyperText Markup Language) là xương sống của mọi trang web. HTML5 đã giới thiệu các phần tử ngữ nghĩa mang lại ý nghĩa rõ ràng hơn cho nội dung của bạn, cải thiện cả khả năng truy cập và SEO. Dưới đây là tổng hợp các thẻ bạn sẽ sử dụng thường xuyên nhất.
Cấu trúc Tài liệu Cơ bản & Siêu dữ liệu
Các thẻ này tạo thành bộ khung của bất kỳ tài liệu HTML nào, cung cấp thông tin thiết yếu cho trình duyệt và các công cụ tìm kiếm.
| Thẻ | Mô tả |
|---|---|
<!DOCTYPE html> | Khai báo loại tài liệu là HTML5. |
<html> | Phần tử gốc của một trang HTML. |
<head> | Chứa thông tin meta về tài liệu. |
<title> | Chỉ định tiêu đề cho tab trình duyệt và kết quả tìm kiếm. |
<meta> | Cung cấp siêu dữ liệu như bộ ký tự, cài đặt khung nhìn và mô tả. |
<link> | Liên kết đến các tài nguyên bên ngoài, phổ biến nhất là bảng định kiểu CSS. |
<script> | Nhúng hoặc liên kết đến mã JavaScript có thể thực thi. |
<body> | Chứa nội dung hiển thị của trang. |
Phần tử Phân vùng & Nhóm Ngữ nghĩa
Sử dụng các thẻ này để cấu trúc nội dung của bạn một cách logic, mang lại ý nghĩa cho các phần khác nhau của bố cục trang.
| Thẻ | Mô tả |
|---|---|
<header> | Đại diện cho nội dung giới thiệu cho một phần hoặc toàn bộ trang. |
<nav> | Chứa các liên kết điều hướng. |
<main> | Xác định nội dung chính, nổi bật của tài liệu. |
<article> | Định nghĩa một tác phẩm tự chứa (ví dụ: một bài đăng blog, bài đăng diễn đàn). |
<section> | Đại diện cho một phần độc lập của tài liệu. |
<aside> | Định nghĩa nội dung bên cạnh nội dung chính (ví dụ: thanh bên). |
<footer> | Đại diện cho chân trang của một phần hoặc toàn bộ trang. |
<div> | Một bộ chứa chung cho nội dung luồng (flow content) mà không có ý nghĩa ngữ nghĩa. |
Ngữ nghĩa cấp Văn bản & Siêu liên kết
Các thẻ này được sử dụng để định dạng và cung cấp ý nghĩa cho văn bản, từ tiêu đề đến đoạn văn và liên kết.
| Thẻ | Mô tả |
|---|---|
<h1> đến <h6> | Các cấp độ tiêu đề, với <h1> là quan trọng nhất. |
<p> | Xác định một đoạn văn. |
<a> | Tạo một siêu liên kết. Thuộc tính href chỉ định URL. |
<strong> | Chỉ ra văn bản có tầm quan trọng cao (thường là in đậm). |
<em> | Chỉ ra văn bản được nhấn mạnh (thường là in nghiêng). |
<span> | Một bộ chứa nội tuyến chung cho nội dung diễn đạt. |
<br> | Chèn một ngắt dòng đơn. |
blockquote | Định nghĩa một phần được trích dẫn từ nguồn khác. |
Biểu mẫu, Đầu vào & Phần tử Tương tác
Các biểu mẫu rất quan trọng đối với tương tác người dùng. Các thẻ này cho phép bạn thu thập đầu vào của người dùng.
| Thẻ | Mô tả |
|---|---|
<form> | Một bộ chứa để tạo biểu mẫu HTML cho đầu vào của người dùng. |
<input> | Phần tử biểu mẫu đa năng nhất; loại được xác định bởi thuộc tính type (ví dụ: text, password, checkbox, submit). |
<textarea> | Định nghĩa một điều khiển nhập văn bản nhiều dòng. |
<label> | Định nghĩa một nhãn cho phần tử <input>. |
<button> | Định nghĩa một nút có thể nhấp. |
<select> | Tạo một danh sách thả xuống. |
<option> | Định nghĩa một tùy chọn trong danh sách <select>. |
Phương tiện, Nội dung nhúng & Nội dung Bên ngoài
Làm cho trang của bạn sống động với hình ảnh, video và các nội dung nhúng khác.
| Thẻ | Mô tả |
|---|---|
<img> | Nhúng một hình ảnh. Yêu cầu các thuộc tính src (nguồn) và alt (văn bản thay thế). |
<video> | Nhúng trình phát video. |
<audio> | Nhúng trình phát nội dung âm thanh. |
<iframe> | Chỉ định một khung nội tuyến để nhúng một tài liệu khác vào trong tài liệu HTML hiện tại. |
Danh sách & Bảng: Tổ chức Dữ liệu Hiệu quả
Cấu trúc các mục liên quan hoặc dữ liệu dạng bảng một cách rõ ràng bằng danh sách và bảng.
| Thẻ | Mô tả |
|---|---|
<ul> | Định nghĩa một danh sách không có thứ tự (gạch đầu dòng). |
<ol> | Định nghĩa một danh sách có thứ tự (đánh số). |
<li> | Định nghĩa một mục danh sách trong <ul> hoặc <ol>. |
<table> | Định nghĩa một bảng. |
<tr> | Định nghĩa một hàng trong bảng. |
<th> | Định nghĩa một ô tiêu đề trong bảng. |
<td> | Định nghĩa một ô dữ liệu tiêu chuẩn trong bảng. |
<caption> | Định nghĩa một chú thích bảng. |
Danh sách Thuộc tính CSS3 Thiết yếu: Tạo kiểu Trang Web của Bạn Như một Chuyên gia
CSS (Cascading Style Sheets - Bảng định kiểu xếp tầng) làm cho HTML của bạn trở nên sống động, kiểm soát bố cục, màu sắc, phông chữ và diện mạo trực quan tổng thể. Bảng tra cứu nhanh CSS này bao gồm các thuộc tính bạn cần để làm chủ mọi thiết kế.
Bộ chọn & Độ đặc hiệu CSS
Các bộ chọn nhắm mục tiêu các phần tử HTML bạn muốn tạo kiểu. Hiểu chúng là bước đầu tiên để sử dụng CSS hiệu quả.
| Bộ chọn | Ví dụ | Mô tả |
|---|---|---|
| Loại | p | Chọn tất cả các phần tử <p>. |
| Lớp | .my-class | Chọn tất cả các phần tử có class="my-class". |
| ID | #my-id | Chọn phần tử duy nhất có id="my-id". |
| Thuộc tính | [href] | Chọn tất cả các phần tử có thuộc tính href. |
| Con cháu | article p | Chọn tất cả các phần tử <p> bên trong một <article>. |
| Lớp giả | a:hover | Chọn một liên kết khi người dùng di chuột qua. |
Mô hình Hộp & Thuộc tính Kích thước
Mọi phần tử trên trang đều là một hộp chữ nhật. Mô hình hộp xác định cách kích thước, phần đệm, đường viền và lề của nó hoạt động cùng nhau.
| Thuộc tính | Giá trị ví dụ | Mô tả |
|---|---|---|
width | 100px, 50%, auto | Đặt chiều rộng của phần tử. |
height | 100px, 50vh (50% chiều cao khung nhìn), auto | Đặt chiều cao của phần tử. |
padding | 10px, 5px 10px | Đặt khoảng cách giữa nội dung và đường viền. |
border | 1px solid black | Cách viết tắt để đặt độ dày, kiểu và màu đường viền. |
margin | 10px, 5px 10px | Đặt khoảng cách bên ngoài đường viền, giữa các phần tử. |
box-sizing | border-box | Thay đổi cách tính toán width và height, bao gồm cả phần đệm và đường viền. |
Typography & Tạo kiểu Văn bản
Kiểm soát cách văn bản hiển thị để tạo ra nội dung dễ đọc và có tính thẩm mỹ.
| Thuộc tính | Giá trị ví dụ | Mô tả |
|---|---|---|
font-family | "Arial", sans-serif | Chỉ định phông chữ cho một phần tử. |
font-size | 16px, 1.2em, 1rem | Đặt kích thước của văn bản. |
font-weight | normal, bold, 700 | Đặt độ dày của phông chữ. |
color | black, #333, rgb(0,0,0) | Đặt màu của văn bản. |
text-align | left, center, right | Căn chỉnh văn bản trong một phần tử. |
line-height | 1.5 | Đặt khoảng cách giữa các dòng văn bản. |
Bố cục Linh hoạt với Flexbox
Flexbox là một mô hình bố cục một chiều để sắp xếp các mục theo hàng hoặc cột. Nó giúp việc tạo bố cục đáp ứng trở nên trực quan.
| Thuộc tính (Container) | Giá trị ví dụ | Mô tả |
|---|---|---|
display | flex | Kích hoạt mô hình bố cục Flexbox. |
flex-direction | row, column | Xác định hướng của trục chính. |
justify-content | center, space-between | Căn chỉnh các mục dọc theo trục chính. |
align-items | center, stretch | Căn chỉnh các mục dọc theo trục chéo. |
flex-wrap | nowrap, wrap | Cho phép các mục xuống dòng sang các dòng khác. |
Bố cục dựa trên Lưới với CSS Grid
CSS Grid là một hệ thống bố cục hai chiều mạnh mẽ, cho phép bạn kiểm soát cả cột và hàng cùng lúc.
| Thuộc tính (Container) | Giá trị ví dụ | Mô tả |
|---|---|---|
display | grid | Kích hoạt mô hình bố cục Grid. |
grid-template-columns | 1fr 1fr 100px, repeat(3, 1fr) | Xác định các cột của lưới. |
grid-template-rows | auto 100px | Xác định các hàng của lưới. |
gap | 10px | Đặt kích thước của khoảng trống giữa các ô lưới. |
Nền, Đường viền & Bóng
Thêm chiều sâu và phong cách cho các phần tử của bạn với các thuộc tính trang trí này.
| Thuộc tính | Giá trị ví dụ | Mô tả |
|---|---|---|
background-color | lightblue, #f0f0f0 | Đặt màu nền của phần tử. |
background-image | url('image.jpg') | Đặt hình ảnh nền. |
border-radius | 5px, 50% | Làm tròn các góc của đường viền phần tử. |
box-shadow | 10px 5px 5px black | Thêm hiệu ứng bóng xung quanh khung của phần tử. |
Chuyển đổi, Biến đổi & Hoạt ảnh
Tạo giao diện người dùng động và tương tác với các hiệu ứng hình ảnh mượt mà.
| Thuộc tính | Giá trị ví dụ | Mô tả |
|---|---|---|
transition | all 0.3s ease-in-out | Kích hoạt thay đổi thuộc tính mượt mà trong một khoảng thời gian nhất định. |
transform | rotate(45deg), scale(1.2) | Áp dụng phép biến đổi 2D hoặc 3D cho phần tử. |
animation | slide-in 1s forwards | Cách viết tắt để áp dụng hoạt ảnh có tên. |
Tại sao Html Viewer là Trình chỉnh sửa HTML trực tuyến ưu tiên của bạn
Có một bảng tra cứu nhanh tuyệt vời là một chuyện, nhưng khả năng áp dụng và xem kết quả ngay lập tức mới là yếu tố thực sự tăng tốc việc học và phát triển. Đó là lúc một trình chỉnh sửa HTML trực tuyến như Html Viewer trở thành đồng minh mạnh mẽ nhất của bạn.
Xem trước Trực tiếp Ngay lập tức để Thử nghiệm Nhanh chóng
Sao chép bất kỳ đoạn mã nào từ hướng dẫn này, dán vào trình chỉnh sửa của chúng tôi và xem nó hiển thị theo thời gian thực. Bạn không cần phải lưu tệp, chuyển đổi giữa các cửa sổ hoặc làm mới trình duyệt. Vòng lặp phản hồi tức thì này hoàn hảo để tinh chỉnh các thuộc tính CSS cho đến khi hoàn hảo hoặc hiểu cách một thẻ HTML mới cấu trúc nội dung của bạn. Bạn có thể thử nghiệm các đoạn mã này ngay bây giờ và tự mình xem điều kỳ diệu.
Chỉnh sửa, Làm đẹp và Tối giản Mã một cách Dễ dàng
Công cụ của chúng tôi không chỉ là một trình xem. Nó là một giải pháp quy trình làm việc hoàn chỉnh. Nếu bạn đã thu thập mã từ nhiều nguồn khác nhau, chỉ cần một cú nhấp chuột vào nút "Làm đẹp" của chúng tôi sẽ định dạng nó thành một cấu trúc sạch sẽ, dễ đọc. Khi bạn sẵn sàng triển khai, chức năng "Tối giản" sẽ nén mã của bạn, tối ưu hóa nó để tải trang nhanh hơn. Chức năng tất cả trong một này hợp lý hóa toàn bộ quy trình mã hóa của bạn.
Truy cập Mọi lúc, Mọi nơi: Không cần Cài đặt
Quên việc cài đặt các IDE nặng nề hoặc cấu hình môi trường cục bộ phức tạp. Trình chỉnh sửa HTML trực tuyến này chạy hoàn toàn trên trình duyệt của bạn. Cho dù bạn đang sử dụng máy tính xách tay tại quán cà phê hay máy tính dùng chung trong phòng thí nghiệm, sandbox mạnh mẽ cho HTML và CSS của bạn luôn chỉ cách một URL, sẵn sàng bất cứ khi nào cảm hứng đến.
Nắm vững Phát triển Web Nhanh hơn: Bảng Tra cứu Nhanh HTML & CSS Thiết yếu của Bạn
Hãy đánh dấu trang này làm hướng dẫn cuối cùng của bạn về các nguyên tắc cơ bản của HTML5 và CSS3. Sử dụng nó để nhanh chóng tìm thẻ hoặc thuộc tính phù hợp, hiểu cú pháp của nó và xây dựng các dự án của bạn với sự tự tin. Quan trọng hơn, hãy kết hợp kiến thức này với sức mạnh thực tế của công cụ của chúng tôi. Mọi đoạn mã ở đây đều là cơ hội để bạn thử nghiệm và học hỏi. Hãy truy cập trình chỉnh sửa HtmlViewer.cc để mang bảng tra cứu nhanh này vào cuộc sống và chuyển đổi quy trình mã hóa của bạn ngay hôm nay.
Câu hỏi Thường gặp về Bảng Tra cứu Nhanh HTML & CSS
Làm thế nào để xem nhanh mã HTML từ một trang web hoặc tệp cục bộ?
Cách dễ nhất là sử dụng trình xem HTML trực tuyến. Với công cụ của chúng tôi, bạn có thể dán mã trực tiếp, tải lên tệp HTML hoặc thậm chí nhập URL để lấy và xem mã nguồn HTML từ một trang web trực tiếp. Sau khi tải, bạn có thể xem mã và bản xem trước trực quan của nó song song, giúp việc học và gỡ lỗi trở nên hoàn hảo.
Bảng tra cứu nhanh HTML & CSS là gì và tại sao nó hữu ích?
Bảng tra cứu nhanh HTML & CSS là một hướng dẫn tham khảo ngắn gọn liệt kê các thẻ, thuộc tính, cú pháp và khái niệm được sử dụng phổ biến. Nó cực kỳ hữu ích cho các nhà phát triển ở mọi cấp độ vì nó tiết kiệm thời gian, loại bỏ nhu cầu ghi nhớ mọi chi tiết và hoạt động như một nguồn tài nguyên nhanh chóng, đáng tin cậy để khắc phục sự cố và xây dựng trang web hiệu quả.
Tôi có thể kiểm tra các đoạn mã HTML5 & CSS3 này trực tuyến ngay lập tức không?
Tuyệt đối! Đó chính xác là những gì nền tảng của chúng tôi được thiết kế để làm. Bạn có thể sao chép bất kỳ ví dụ nào từ hướng dẫn này, dán nó vào trình chỉnh sửa trên trang chủ của chúng tôi, và ngay lập tức xem kết quả trong bảng xem trước trực tiếp. Hãy thử nghiệm thoải mái và thực sự nắm bắt cách các kết hợp mã khác nhau trở nên sống động.
Làm thế nào để đảm bảo HTML và CSS của tôi có khả năng truy cập và được cấu trúc tốt?
Bắt đầu bằng cách sử dụng đúng các thẻ HTML5 ngữ nghĩa (<main>, <nav>, <article>), vì chúng cung cấp ý nghĩa vốn có. Đối với CSS, hãy đảm bảo độ tương phản màu sắc đầy đủ và sử dụng các đơn vị co giãn như rem cho kích thước phông chữ. Một thực hành tuyệt vời là dán mã của bạn vào trình chỉnh sửa của chúng tôi và sử dụng tính năng "Làm đẹp". Điều này định dạng mã của bạn với thụt lề thích hợp, giúp việc xem lại cấu trúc và phát hiện các vấn đề tiềm ẩn dễ dàng hơn nhiều.