NỘI DUNG BÀI VIẾT
Giới thiệu
Thẻ <body> có chức năng xác định phần thân hay phần nội dung của tài liệu.
Phần tử body trong HTML sẽ bao bọc tất cả các thành phần nội dung của tài liệu HTML gồm có hình ảnh, văn bản, các liên kết, v.v
Lưu ý: Chỉ có thể có một phần tử <body> trong tài liệu HTML.
Ví dụ
<html> <head> <title>Title of the document</title> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
Thuộc tính của thẻ <body>
- Thẻ <body> được hỗ trợ các thuộc tính Global Attributes in HTML.
- Thẻ <body> được hỗ trợ các thuộc tính Event Attributes in HTML.
Trình duyệt hỗ trợ
- Chrome
- Firefox
- IE
- Safari
- Opera
Ví dụ
Ví dụ 1: Thêm hình nền vào tài liệu (với CSS):
<html>
<head>
<style>
body {
background-image: url(hocjavascript.png);
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p><a href="https://hocjavascript.net">Visit HocJavaScript.net!</a></p>
</body>
Ví dụ 2: Đặt màu nền của tài liệu (với CSS):
<html>
<head>
<style>
body {
background-color: #E6E6FA;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p><a href="https://hocjavascript.net">Visit HocJavaScript.net!</a></p>
</body>
Ví dụ 3: Đặt màu của văn bản trong tài liệu (với CSS):
<html>
<head>
<style>
body {
color: green;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p>This is some text.</p>
<p><a href="https://hocjavascript.net">Visit HocJavaScript.net!</a></p>
</body>
</html>
Ví dụ 4: Đặt màu các liên kết chưa truy cập trong một tài liệu (với CSS):
<html>
<head>
<style>
a:link {
color:#0000FF;
}
</style>
</head>
<body>
<p><a href="https://hocjavascript.net">Visit HocJavaScript.net!</a></p>
<p><a href="https://www.hocjavascript.net/html/">HTML Tutorial</a></p>
</body>
</html>
Ví dụ 5: Đặt màu các liên kết đang hoạt động trong tài liệu (với CSS):
<html>
<head>
<style>
a:active {
color:#00FF00;
}
</style>
</head>
<body>
<p><a href="https://hocjavascript.net">Visit HocJavaScript.net!</a></p>
<p><a href="https://www.hocjavascript.net/html/">HTML Tutorial</a></p>
</body>
</html>
Ví dụ 6: Đặt màu các liên kết đã truy cập trong tài liệu (với CSS):
<html>
<head>
<style>
a:visited {
color:#FF0000;
}
</style>
</head>
<body>
<p><a href="https://hocjavascript.net">Visit HocJavaScript.net!</a></p>
<p><a href="https://www.hocjavascript.net/html/">HTML Tutorial</a></p>
</body>
</html>
Ví dụ 7: Cài đặt CSS mặc định
Hầu hết các trình duyệt sẽ hiển thị phần tử body với các giá trị mặc định sau:
body {
display: block;
margin: 8px;
}
body:focus {
outline: none;
}
Kết luận
Qua đây là một số chia sẻ về phần tử body trong HTML, mời bạn tiếp tục theo dõi các bài viết sau để hiểu rõ hơn về HTML.
Các bạn có thể tham khảo các bài viết hay về HTML tại đây.
Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.
