IMG-LOGO
×

Tài Liệu Môn Học

Khoá học lập trình HTML/CSS

Nhập Môn HTML

[Video] Giới thiệu về lập trình web - HTML/CSS [Video] Hướng dẫn tạo ra 1 trang web đơn giản nhất - HTML/CSS [Video] Hướng dẫn debug/test/develop trên trình duyệt web -HTML/CSS

Tìm Hiểu Thẻ HTML5

[Video] Formatting Text using Tags - html tags [Video] Creating Hyperlinks and Anchors (phần 1) - html tags [Video] Creating Hyperlinks and Anchors (phần 2) - html tags [Video] Cách dùng thẻ img và map để hiển thị hình ảnh html - HTML/CSS [Video] Tìm hiểu về đường dẫn file (path file) trong HTML/CSS

CSS

[Video] Tìm hiểu thuộc tính trong thẻ html [Video] Giới thiệu CSS & Sử dụng các thuộc tính cơ bản [Video] Hướng dẫn tách biệt CSS và HTML [Video] Xử lý Event trong CSS (:hover, :active, :link, ...) - Lập trinh HTML/CSS

Table & CSS

[Video] Tìm hiểu table trong HTML/CSS - HTML/CSS

Form & CSS

[Video] Thiết kế form trong HTML/CSS/JS [Video] Tìm hiểu tag videos, audio trong HTML/CSS/JS [Video] Bài tập - Thiết kế form gửi email - Lập trình HTML/CSS/JS

Thiết Kế Layout

[Video] Tìm hiểu Frame qua ví dụ quản lý khách sạn HTML/CSS [Video] Hướng dẫn tạo layout bằng thẻ Div căn bản [Video] Hướng dẫn thiết kế layout bằng thẻ div nâng cao (Thiết kế giao diện web gokisoft)




Trang Chủ Học HTML5 - CSS3 HTML - The Head Element | Thành phần Head trong HTML

HTML - The Head Element | Thành phần Head trong HTML

by GokiSoft.Com - 14:50 25/05/2020 2,184 Lượt Xem


Thành phần HTML <head> là hộp chứa cho tất cả cách thành phần thuộc head : <title><style><meta><link><script>, và <base>.




Thành phần <head> trong HTML


Thành phần <head> là một hộp chứa cho các siêu dữ liệu (dữ liệu trên dữ liệu) và được đặt giữa thẻ  <html> và thẻ  <body> .

Siêu dữ liệu(metadata ) HTML là về tài liệu HTML. Siêu dữ liệu không được hiển thị.

Thông thường siêu dữ liệu xác định tiêu đề tài liệu, bộ ký tự, script, và các siêu thông tin khác.




Thành phần <title> trong HTML


Thành phần <title> xác định tiêu đề cho tài liệu, và bắt buộc trong toàn bộ các tài liệu HTML.

Thành phần <title> :

  • xác định một tiêu đề trong tab trình duyệt
  • cung cấp tiêu đề cho trang khi nó được thêm vào mục yêu thích
  • hiển thị một tiêu đề cho trang trong các kết quả của công cụ tìm kiếm

Một tài liệu HTML đơn giản:

ví dụ

<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
</head>

<body>
The content of the document......
</body>

</html>
<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
</head>
<body>

<p>The content of the body element is displayed in the browser window.</p>
<p>The content of the title element is displayed in the browser tab, in favorites and in search engine results.</p>

</body>
</html>






Thành phần <style> trong HTML


Thành phần <style> được sử dụng để xác định phong cách của thông tin cho một trang HTML duy nhất:

ví dụ

<style>
  body {background-color: powderblue;}
  h1 {color: red;}
  p {color: blue;}
</style>
<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
  <style>
    body {background-color: powderblue;}
    h1 {color: red;}
    p {color: blue;}
  </style>
</head>  
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
  
</body>
</html>







Thành phần <link>trong HTML


Thành phần <link> được sử dụng để liên cách dải phong cách bên ngoài:

ví dụ

<link rel="stylesheet" href="mystyle.css">
<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
  <link rel="stylesheet" href="mystyle.css">
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
  
</body>
</html>

Tip: Để học thêm về CSS, ghé thăm hướng dẫn về CSS.





Thành phần <meta>trong HTML


Thành phần <meta> được sử dụng để xác định bộ ký tự nào được sử dụng, tiêu đề trang, từ khóa, tác giả, và các siêu dữ liệu khác.

Siêu dữ liệu được sử dụng bởi các trình duyệt (cách hiển thị nội dung), bằng các công cụ tìm kiếm (các từ khóa), và các dịch vụ web khác.

Định nghĩa bộ kí tự hãy dùng:

<meta charset="UTF-8">


Định nghĩa một tiêu đề cho trang web của bạn:

<meta name="description" content="Free Web tutorials">


Định nghĩa các từ khóa cho các công cụ tìm kiếm:

<meta name="keywords" content="HTML, CSS, XML, JavaScript">


Định nghĩa tác giả của một trang:

<meta name="author" content="John Doe">


Làm mới một trang mỗi 30 giây:

<meta http-equiv="refresh" content="30">


Ví dụ của các thẻ <meta> :

ví dụ

<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="John Doe">
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="description" content="Free Web tutorials">
  <meta name="keywords" content="HTML,CSS,XML,JavaScript">
  <meta name="author" content="John Doe">
</head>
<body>

<p>All meta information goes before the body.</p>

</body>
</html>





Cài đặt khung nhìn


Trong HTML, có một phương thức cho phép các người thiết kế kiểm soát khung nhìn, qua thẻ 
 <meta> .

Khung nhìn là khu vực hiển thị của người dùng trên một trang web. Nó khác nhau trên mỗi thiết bị, và sẽ nhỏ hơn trên điện thoại so với một màn hình máy tính.

Bạn nên bao gồm thành phần khung nhìn <meta> trong tất cả các trang web của bạn:

<meta name="viewport" content="width=device-width, initial-scale=1.0">


Một thành phần khung nhìn <meta> hướng dẫn trình duyệt về cách kiểm soát kích thước và tỉ lệ của trang.

Phần width=device-width đặt chiều rộng của trang theo chiều rộng của màn hình thiết bị (điều này sẽ khác nhau phụ thuộc vào thiết bị).

Phần initial-scale=1.0 đặt mức thu phòng ban đầu khi trang được tải lần đầu bởi trình duyệt.

Đây là một ví dụ của một trang web mà không có thẻ meta, và cùng một trang web với thẻ <meta> :








Thành phần <script>trong HTML


Thành phần <script> được sử dụng để định nghĩa JavaScript phía người dùng.

Đoạn JavaScript sau viết "Hello JavaScript!" vào một thành phần HTML với id="demo":

ví dụ

<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
  <script>
  function myFunction() {
    document.getElementById("demo").innerHTML = "Hello JavaScript!";
  }
  </script>
</head>
<body>

<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>

</body>
</html>

Tip: Để học toàn bộ về JavaScript, hãy xem hướng dẫn về JavaScript .





Thành phần <base>trong HTML


Thành phần <base> xác địch URL cơ sở và mục tiêu cơ sở cho tất cả các URL tương đối trong một trang:





Các thành phần head

ThẻMô tả
<head>Xác định thông tin về tài liệu
<title>Xác định tiêu đề của một tài liệu
<base>Xác định một địa chỉ mặc định hoặc một mục tiêu mặc định cho tất cả các đường dẫn trên một trang
<link>Xác định mối quan hệ giữa một tài liệu và một tài nguyên bên ngoài
<meta>Xác định siêu dữ liệu về một tài liệu HTML
<script>Xác định một script phía người dùng
<style>Xác định phong cách của thông tin cho một tài liệu





Bình luận



Chia sẻ từ lớp học

Phân Loại Bài Viết

Tài Liệu Tham Khảo

Đã sao chép!!!