HTML - <head> 標籤



HTML <head> 標籤用作元資料的容器,位於html 標籤之後。元資料基本上是關於head部分中資料的 資料。因此,head標籤中的資訊被瀏覽器和搜尋引擎使用,但在頁面本身不可見。

通常,head標籤包含文件標題、指令碼或樣式錶鏈接以及描述文件結構和內容的元標籤等元素。

語法

<head>
...
</head>

屬性

HTML head標籤支援HTML 的全域性屬性

HTML <head> 標籤還支援以下附加屬性:

屬性 描述
profile URL 它定義了元資料的URL。
media media_query 它指示媒體資源針對哪個媒體/裝置進行了最佳化。
type text/css 它定義了<style>標籤的媒體型別。

點選圖示run button執行按鈕以執行以下HTML程式碼檢視輸出。

HTML head標籤示例

在下面的示例中,我們將看到head標籤與其子標籤一起使用的用法。

HTML title標籤在head標籤中

讓我們來看下面的例子,我們將使用<title>標籤在<head>部分內。

<!DOCTYPE html>
<html>
<head>
   <title>Welcome to index page</title>
</head>
<body style="background-color:#D2B4DE">
   <h1>TutorialsPoint</h1>
   <p>The Best E-Way Learning.</p>
</body>
</html>

HTML style標籤在head標籤中

考慮另一種情況,我們將使用<style>標籤在<head>標籤內。

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         background: #D5F5E3;
      }

      h1 {
         color: #17202A;
      }

      p {
         color: #DE3163;
      }
   </style>
</head>
<body>
   <h1>MSD</h1>
   <p>Mahendra Singh Dhoni is an former Indian cricketer. He was captain of the Indian national team in limited-overs formats from 2007 to 2017 and in Test cricket from 2008 to 2014.</p>
</body>
</html>

HTML meta標籤在head標籤中

在下面的示例中,我們將新增一個帶有content值的URL,該值在超時時重定向到頁面。

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="refresh" content="4; url=https://tutorialspoint.tw/index.htm">
</head>
<body>
   <h2>Redirect to home page</h2>
   <p style="color: green;">After 4 seconds it will automatically redirect to URL specified in the tag</p>
</body>
</html>

HTML script標籤在head標籤中

下面是一個示例,我們將使用<script>標籤在<head>標籤內。

<!DOCTYPE html>
<html>
<head>
   <script>
      function tutorial() {
         document.getElementById("tp").style.color = "#2ECC71";
      }
   </script>
</head>
<body>
   <h1 id="tp">TUTORIALSPOINT</h1>
   <p>The Best E-Way Learning.!</p>
   <button type="button" onclick="tutorial()">CLICK</button>
</body>
</html>

可在head標籤中放置的元素列表

標籤 描述
<title> <title>標籤定義在<head>標籤內,它應該是純文字。
<style> HTML <style>標籤包含HTML文件或文件一部分的樣式屬性,作為內部CSS。
<meta> <meta>標籤用於提供此類附加資訊。
<link> HTML <link>標籤指定當前文件和外部資源之間的關係。
<script> HTML <script>標籤用於在HTML文件中包含內部JavaScript程式碼。
<base> 此標籤用於定義基本URL或目標相對URL。

支援的瀏覽器

標籤 Chrome Edge Firefox Safari Opera
head
html_tags_reference.htm
廣告