Hướng dẫn HTML

TRANG CHỦ HTML Giới thiệu HTML Trình chỉnh sửa HTML HTML cơ bản Phần tử HTML Thuộc tính HTML Tiêu đề HTML Đoạn văn HTML Kiểu HTML Định dạng HTML Trích dẫn HTML Nhận xét HTML Màu HTML HTML CSS Liên kết HTML Hình ảnh HTML HTML Favicon Bảng HTML Danh sách HTML Khối HTML & Nội tuyến Các lớp HTML Id HTML Khung nội tuyến HTML HTML JavaScript Đường dẫn tệp HTML Đầu HTML Bố cục HTML HTML đáp ứng Mã máy tính HTML Ngữ nghĩa HTML Hướng dẫn kiểu HTML Thực thể HTML Biểu tượng HTML Biểu tượng cảm xúc HTML Bộ mã HTML Mã hóa URL HTML HTML so với XHTML

Biểu mẫu HTML

Biểu mẫu HTML Thuộc tính biểu mẫu HTML Phần tử biểu mẫu HTML Các loại đầu vào HTML Thuộc tính đầu vào HTML Thuộc tính biểu mẫu nhập HTML

Đồ họa HTML

HTML Canvas HTML SVG

HTML Media

HTML Media Video HTML Âm thanh HTML Trình cắm HTML HTML YouTube

API HTML

Vị trí địa lý HTML Kéo / thả HTML Lưu trữ web HTML Nhân viên web HTML HTML SSE

Ví dụ HTML

Ví dụ HTML HTML Quiz Bài tập HTML Chứng chỉ HTML Tóm tắt HTML Khả năng truy cập HTML

Tham chiếu HTML

Danh sách thẻ HTML Thuộc tính HTML Thuộc tính toàn cầu HTML Hỗ trợ trình duyệt HTML Sự kiện HTML Màu HTML HTML Canvas HTML Audio / Video HTML Doctypes Bộ ký tự HTML Mã hóa URL HTML Mã HTML Lang Tin nhắn HTTP Phương thức HTTP Công cụ chuyển đổi PX sang EM Các phím tắt bàn phím

HTML - Phần tử Head


Phần tử HTML <head>là vùng chứa cho các phần tử sau : <title>,,, .<style><meta><link><script><base>


Phần tử HTML <head>

Phần <head>tử là vùng chứa siêu dữ liệu (dữ liệu về dữ liệu) và được đặt giữa <html>thẻ và <body>thẻ.

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

Siêu dữ liệu thường xác định tiêu đề tài liệu, bộ ký tự, kiểu, tập lệnh và các thông tin meta khác.


Phần tử HTML <title>

Phần <title>tử xác định tiêu đề của tài liệu. Tiêu đề phải ở dạng chỉ văn bản và nó được hiển thị trên thanh tiêu đề của trình duyệt hoặc trong tab của trang.

Phần <title>tử này là bắt buộc trong các tài liệu HTML!

Nội dung của tiêu đề trang rất quan trọng đối với việc tối ưu hóa công cụ tìm kiếm (SEO)! Tiêu đề trang được sử dụng bởi các thuật toán của công cụ tìm kiếm để quyết định thứ tự khi liệt kê các trang trong kết quả tìm kiếm.

Phần <title>tử:

  • xác định tiêu đề trong thanh công cụ của 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ị tiêu đề cho trang trong kết quả của công cụ tìm kiếm

Vì vậy, hãy cố gắng đặt tiêu đề chính xác và ý nghĩa nhất có thể!

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

Thí dụ

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

The content of the document......

</body>
</html>

Phần tử HTML <style>

Phần <style>tử được sử dụng để xác định thông tin kiểu cho một trang HTML:

Thí dụ

<style>
  body {background-color: powderblue;}
  h1 {color: red;}
  p {color: blue;}
</style>


Phần tử <link> HTML

Phần <link>tử xác định mối quan hệ giữa tài liệu hiện tại và tài nguyên bên ngoài.

Thẻ <link> thường được sử dụng nhất để liên kết đến các trang định kiểu bên ngoài:

Thí dụ

<link rel="stylesheet" href="mystyle.css">

Mẹo: Để tìm hiểu tất cả về CSS, hãy truy cập Hướng dẫn CSS của chúng tôi .


Phần tử <meta> HTML

Phần <meta>tử này thường được sử dụng để chỉ định bộ ký tự, mô tả trang, từ khóa, tác giả của tài liệu và cài đặt chế độ xem.

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

Các ví dụ

Xác định bộ ký tự được sử dụng:

<meta charset="UTF-8">

Xác định từ khóa cho công cụ tìm kiếm:

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

Xác định mô tả về trang web của bạn:

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

Xác định tác giả của một trang:

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

Làm mới tài liệu sau mỗi 30 giây:

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

Đặt chế độ xem để làm cho trang web của bạn trông đẹp trên tất cả các thiết bị:

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

Ví dụ về <meta>các thẻ:

Thí dụ

<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">

Đặt chế độ xem

Chế độ xem là vùng hiển thị của người dùng trên một trang web. Nó thay đổi theo thiết bị - nó sẽ nhỏ hơn trên điện thoại di động hơn là trên màn hình máy tính.

Bạn nên đưa <meta>phần tử sau vào tất cả các trang web của mình:

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

Điều này cung cấp cho trình duyệt hướng dẫn 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 tuân theo chiều rộng màn hình của thiết bị (sẽ thay đổi tùy theo 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 tiên bởi trình duyệt.

Đây là ví dụ về một trang web không có thẻ meta chế độ xem và cùng một trang web thẻ meta chế độ xem:

Mẹo: Nếu bạn đang duyệt trang này bằng điện thoại hoặc máy tính bảng, bạn có thể nhấp vào hai liên kết bên dưới để xem sự khác biệt.



Phần tử HTML <script>

Phần <script>tử được sử dụng để xác định JavaScripts phía máy khách.

JavaScript sau viết "Xin chào JavaScript!" vào một phần tử HTML với id = "demo":

Thí dụ

<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>

Mẹo: Để tìm hiểu tất cả về JavaScript, hãy truy cập Hướng dẫn JavaScript của chúng tôi .


Phần tử HTML <base>

Phần <base>tử chỉ định URL cơ sở và / hoặc mục tiêu cho tất cả các URL tương đối trong một trang.

Thẻ <base>phải có một href hoặc một thuộc tính đích hoặc cả hai.

Chỉ có thể có một <base> phần tử duy nhất trong một tài liệu!

Thí dụ

Chỉ định một URL mặc định và một mục tiêu mặc định cho tất cả các liên kết trên một trang:

<head>
<base href="https://www.w3schools.com/" target="_blank">
</head>

<body>
<img src="images/stickman.gif" width="24" height="39" alt="Stickman">
<a href="tags/tag_base.asp">HTML base Tag</a>
</body>

Tóm tắt chương

  • Phần <head>tử là vùng chứa siêu dữ liệu (dữ liệu về dữ liệu)
  • Phần <head>tử được đặt giữa <html>thẻ và <body>thẻ
  • Phần <title>tử là bắt buộc và nó xác định tiêu đề của tài liệu
  • Phần <style>tử được sử dụng để xác định thông tin kiểu cho một tài liệu
  • Thẻ <link> thường được sử dụng nhất để liên kết với các trang định kiểu bên ngoài
  • Phần <meta>tử này thường được sử dụng để chỉ định bộ ký tự, mô tả trang, từ khóa, tác giả của tài liệu và cài đặt chế độ xem
  • Phần <script>tử được sử dụng để xác định JavaScripts phía máy khách
  • Phần <base>tử chỉ định URL cơ sở và / hoặc mục tiêu cho tất cả các URL tương đối trong một trang

Phần tử đầu HTML

Tag Description
<head> Defines information about the document
<title> Defines the title of a document
<base> Defines a default address or a default target for all links on a page
<link> Defines the relationship between a document and an external resource
<meta> Defines metadata about an HTML document
<script> Defines a client-side script
<style> Defines style information for a document

Để có danh sách đầy đủ tất cả các thẻ HTML có sẵn, hãy truy cập Tham khảo thẻ HTML của chúng tôi .