Xin chào các bạn hôm nay mình xin hướng dẫn các bạn sử dụng div để tạo cục bộ cho một trang web của các bạn
Bài viết này cũng tương đối đơn gian nên mình cũng không giải thích nhiều cho lắm nhé các bạn
Ở đây tôi đã chuẩn bị sẵn một layout cục bộ rồi giờ chỉ còn viết code cho layout đã được vẽ trên photoshop thôi
Dưới đây là toàn bộ mã. đầu tiên các bạn tạo cho tôi một tệp tên gì cũng được tùy các bạn nhé rồi sao chép mã nguồn bên dưới vào đúng vị trí là được
Mỗi thẻ [hoặc mỗi phần tử] trong HTML đều có chức năng và nhiệm vụ riêng. Trong đó, thẻ div là thẻ được thiết lập bởi các thành viên sử dụng tương đối thường xuyên. Vậy cụ thể thẻ div là gì và nó có nhiệm vụ thế nào trong HTML?
- Tìm hiểu thêm. Kiểu thẻ trong HTML là gì?
lục mục
- 1. Định nghĩa thẻ div là gì?
- 2. Tác dụng của thẻ div trong HTML
- 3. Phân biệt sự khác nhau giữa thẻ span và thẻ div
- 4. Những thẻ không được sử dụng bên trong thẻ div là gì
1. Định nghĩa thẻ div là gì?
div – viết tắt của division – là thẻ được dùng để nhóm nhiều phần tử HTML lại với nhau. Mỗi thẻ trong HTML đều có mục đích khác nhau. Ví dụ như thẻ
[viết tắt của paragraph] được dùng để chỉ định một đoạn văn bản nhất định, hay thẻ
dùng để ngắt đoạn văn bản trong HTML. Thẻ
- Đọc thêm. Các thẻ HTML cơ bản được sử dụng trong trang web thiết kế
2. Tác dụng của thẻ div trong HTML
Thẻ div được sử dụng để nhóm các phần tử lại với nhau trong các khu vực của trang web. Các vùng đó bao gồm. tiêu đề [nhóm nội dung ở đầu trang web], điều hướng chung [liên kết giữa các trang trong trang web], thân trang [nội dung của trang], nội dung [bao gồm văn bản và hình ảnh của bài viết], thanh bên [nội dung phụ chạy
Ngoài ra, một số cấu trúc hoặc các khu vực lớn bên trong chứa nhiều thẻ cũng được khuyên dùng thẻ div để phân nhóm. Việc nhóm các cấu trúc lại bằng thẻ
sẽ giúp cho quá trình định dạng, điều khiển,… nguyên cụm dễ dàng hơn rất nhiều. Người dùng chỉ cần thêm hoặc bớt đặc tính bằng một dòng có gắn thẻ div là khối nội dung đó sẽ thay đổi như yêu cầu.Các bạn hãy cùng xem ví dụ mẫu dưới đây để hiểu rõ hơn tác dụng của thẻ div là gì trong HTML
dinh nghia the div la gi
tac dung cua the div trong HTML
phan biet su khac nhau giua the span va the div
Kết quả của đoạn mã như sau
dinh nghia the div la gi
tac dung cua div trong HTML
phần biết sự khác nhau giữa nhịp và div
Trong ví dụ trên, cụm từ văn bản bao gồm 3 dòng được nhóm lại. Chúng có chung định dạng chữ size 20 và chữ màu đỏ. Nếu bạn muốn thay cả cụm 3 dòng này thành màu xanh dương, chỉ cần thay giá trị “đỏ” trong câu lệnh bằng “xanh dương” là được.
3. Phân biệt sự khác nhau giữa thẻ span và thẻ div
Tag span và thẻ div có chung tác dụng là nhóm các phần tử trong HTML, vì vậy chúng ta thường nhầm lẫn khi sử dụng. Vì vậy cụ thể có thể phân biệt giữa 2 thẻ span và div là gì?
Có thể, thẻ div gom các phần tử theo khối [khối], nhóm các phần tử thành một khối. Trong khi đó, thẻ span gom các phần tử một dòng [nội tuyến], nhóm các ảnh, văn bản thành một nhóm nhỏ. Một cách dễ hiểu, thẻ span dùng cho một nhóm nội dung đơn lẻ, còn thẻ div dùng cho các khối [gồm nhiều nhóm nội dung].
4. Những thẻ không được sử dụng bên trong thẻ div là gì
Những thể không được chứa bên trong thẻ div bao gồm: , , , , .
Ngoài ra, tuy có thể sử dụng nhưng khi mã HTML ra thì không nên sử dụng thẻ div cho nhóm nội tuyến.
Việc sử dụng thẻ div cho các nhóm nội dung nội tuyến sẽ gây khó khăn cho trình duyệt phân biệt được đâu là nội dung lớn còn đâu là nội dung nhỏ. Nôm na, nếu như bạn dùng thẻ div cho những đoạn nội tuyến thì cũng tương đương với việc “dùng dao giết trâu mổ gà”
Trên đây là định nghĩa về thẻ div và những lưu ý trong quá trình sử dụng thẻ div để phân nhóm nội dung. Trong quá trình mã HTML, bạn nên nắm bắt các thẻ không dùng chung với thẻ div là gì để tránh, giúp quá trình tải trang web được tối ưu hóa