Hai thẻ <div> và <span> cho phép nhóm các thành phần(thẻ) lại với nhau bên trong HTML.
Trong HTML, các thẻ được phân ra làm hai dạng: Thẻ dạng khối(Block) và thẻ nội tuyến(Inline).
Thẻ dạng khối(Block)
Là các thẻ định nghĩa một khối riêng biệt, thường được bắt đầu bằng một dòng mới khi hiển thị trên trình duyệt mà không cần dùng đến các thẻ xuống dòng(<br />).
Có thể kể ra ở đây một số thẻ dạng khối như: các thẻ heading(<h1> đến <h6>), thẻ paragraph(<p></p>), thẻ bảng(<table></table>),…
Có thể kể ra ở đây một số thẻ dạng khối như: các thẻ heading(<h1> đến <h6>), thẻ paragraph(<p></p>), thẻ bảng(<table></table>),…
Ví dụ
B1 :Tạo một file html, nhập đoạn code sau
1
2
3
4
5
6
7
8
9
10
| <!DOCTYPE html ><html><head><title>Bài 9 - Block và Inline</title></head><body> <h1>Thẻ heading</h1> <p>Một đoạn văn bản nào đó!!</p> <ul><li>Ô tô</li><li>Xe máy</li></ul></body></html> |
B2 :Mở file html trên bằng trình duyệt
Có thể thấy rằng, dù trong code, chúng ta đều ghi các thẻ trên cùng một dòng nhưng khi hiển thị ra trình duyệt, các nội dung trong các thẻ dạng khối sẽ được trình bày ra từng dòng riêng biệt.
Thẻ nội tuyến(Inline)
Là các thẻ chỉ hiển thị mà không cần xuống xòng mới. Ví dụ như các thẻ <b></b>, <a></a>, <img />, <strong></strong>,…
Ví dụ
B3: Nhập đoạn code sau đè lên đoạn code khi nãy của file html đã tạo
1
2
3
4
5
6
7
8
9
10
| <!DOCTYPE html ><html><head><title>Bài 9 - Block và Inline</title></head><body> <b>Đoạn chũ này in đậm</b> <a href="#">Đây là đường dẫn</a> <em>đoạn chữ này in nghiêng</em></body></html> |
B4: Refresh lại trình duyệt
Thẻ <div> và thẻ <span>
Tương tự như vậy, thẻ <div> nằm trong nhóm các thẻ dạng khối và thẻ <span> thuộc nhóm các thẻ nội tuyến. Cả hai thẻ này đều có tác dụng nhóm các thẻ khác lại hoặc là nơi chứa các đoạn văn bản.
B5: Nhập đè đoạn code dưới đây vào file html đã tạo
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <!DOCTYPE html ><html><head><title>Bài 9 - Block và Inline</title></head><body> <div> <h1>Tiêu đề đoạn văn bản.</h1> <p> <span>Nội dung đoạn văn bản:</span> <br /> <span>Lorem <strong>ipsum</strong> dolor sit amet,</span> consectetur adipiscing elit. Donec consequat ultrices arcu. Aliquam eu urna eget ante blandit laoreet. Mauris nec aliquam erat. Integer vel ultrices erat. Donec ut turpis massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras pharetra dui non tellus posuere pellentesque. Vivamus nec arcu sit amet massa vestibulum luctus ac at arcu. </p> </div> </body></html> |
B6: Refresh lại trình duyệt
0 nhận xét:
Đăng nhận xét