Phần tử body trong HTML

Phần tử body trong HTML

Anh NguyễnBạn nghĩ gì về bài viết này?

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>

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.

Bình luận