HTML - 首頁

HTML 頭部是 HTML 文件的一部分，用於包含有關文件的元資訊，例如標題、字元編碼、樣式和指令碼連結以及其他元資料。<head> 標籤用於定義文件的頭部。

HTML <head> 標籤用作元資料的容器，並放置在 html 標籤之後。元資料基本上是頭部部分中存在的資料的相關資料。

頭部元素中提供的資訊對於瀏覽器正確呈現頁面以及搜尋引擎和其他服務理解頁面內容至關重要。不建議在 head 標籤內包含文件其他部分的詳細資訊。

HTML 頭部元素

以下是文件頭部中常用的標籤。

元素	描述
<title>	標題標籤用於表示網頁標題。
<meta>	指定元資料以及有關文件的其他重要資訊。
<base>	對於 HTML 文件中的每個相對 URL，Base 標籤定義一個絕對 (base) URL。
<style>	Style 標籤包含 HTML 文件的樣式資訊。
<link>	指定當前文件和外部資源之間的關係。
<script>	Script 標籤用於嵌入客戶端指令碼。

HTML 頭部元素示例

以下是一些示例，展示了在 HTML 中使用不同頭部元素的方法。

指定 HTML 文件的標題

HTML <title> 標籤用於指定 HTML 文件的標題。標題必須描述網頁的內容，其格式應僅為文字。它顯示在瀏覽器標籤的標題欄中。

以下示例展示瞭如何使用 <title> 標籤為 HTML 文件指定標題。將此程式碼另存為檔案後執行，即可在瀏覽器標籤頂部看到標題。

<!DOCTYPE html>
<html>

<head>
   <title>HTML Title Tag Example</title>
</head>

<body>
   <p>
      Save this code (.html) and run in your 
      browser to see title of the document
   </p>
</body>

</html>

新增文件元資料

HTML <meta> 標籤用於提供有關 HTML 文件的元資料。元資料只不過是有關網頁的其他資訊，包括頁面過期時間、頁面作者、關鍵字列表、頁面描述等等。此資訊進一步用於搜尋引擎最佳化。請記住，<meta> 標籤指定的元資料不會顯示在網頁上，但它是機器可讀的。

以下示例描述了在 HTML 文件中使用 <meta> 標籤的一些重要用法。

<!DOCTYPE html>
<html>

<head>
   <!-- Provide list of keywords -->
   <meta name="keywords" 
         content="C, PHP, Perl, Python">

   <!-- Provide description of the page -->
   <meta name="description" 
         content="HTML by TutorialsPoint">

   <!-- Author information -->
   <meta name="author" 
         content="Tutorials Point">

   <!-- Page content type -->
   <meta http-equiv="content-type" 
         content="text/html; charset=UTF-8">

   <!-- Page refreshing delay -->
   <meta http-equiv="refresh" 
         content="30">

   <!-- Setting expiry time for page-->
   <meta http-equiv="expires" 
         content="Wed, 21 June 2006 14:25:27 GMT">

   <!-- Prevent bots from indexing page -->
   <meta name="robots" 
         content="noindex, nofollow">
</head>

<body>
   <p>  
      Describing the use of HTML meta tag
   </p>

</body>

</html>

設定 URL 的基本地址

HTML <base> 標籤用於指定頁面中所有相對 URL 的基本 URL，這意味著在查詢給定專案時，所有其他 URL 將與基本 URL 連線。我們只允許在 HTML 文件中使用一個 base 元素。<base> 標籤最常用的屬性是 href 和 target。

在此示例中，所有給定的頁面和影像都將在使用基本 URL 'https://tutorialspoint.tw/' 目錄作為字首後進行搜尋。

<!DOCTYPE html>
<html>

<head>
   <title>HTML Base Tag Example</title>
   <base href = "https://tutorialspoint.tw" />
</head>

<body>
   <img src="/images/logo.png" 
        alt="Logo Image"/>
   <br> <br>

   <a href="/html/index.htm" 
      title="HTML Tutorial"/>
         HTML Tutorial
   </a>
   <br> <br>

   <a href="/css/index.htm" 
      title="CSS Tutorial"/>
         CSS Tutorial
   </a>

   <p>
      Instead of using full url, we reduced it 
      to "html/index.htm" because we mentioned 
      base url as "www.tutorialspoint.com"
   </p>
</body>

</html>

將外部資源連結到 HTML 文件

在 HTML 中，<link> 標籤用於指定當前網頁和另一個外部資源之間的關係。外部資源的來源放置在 href 屬性中。<link> 標籤的其他屬性是 rel、type 和 media。它最常見的用途是將樣式表嵌入到 HTML 文件中。

以下是一個示例，用於連結位於 Web 根目錄中 CSS 子目錄中的外部樣式表文件。

<!DOCTYPE html>
<html>

<head>
   <title>HTML link Tag Example</title>
   <link rel="stylesheet" 
         type="text/css" 
         href="/css/style.css">
</head>

<body>
  <p>
      This is an example of linking stylesheet 
      to the current HTML document.
   </p>
</body>

</html>

向 HTML 文件新增樣式

HTML <style> 標籤用於為整個 HTML 文件或特定元素指定樣式。其最常見的屬性是 title 和 media。

在下面的示例中，我們將看到為 <p> 和 <div> 標籤使用不同的樣式方法。

<!DOCTYPE html>
<html>

<head>
   <style>
      /*Styles to every tags*/
      *{
         margin: 0px;
         padding: 10px;
      }  
      
      /*Style only applied to Body tag*/
      body{
         background-color: lightblue;
      }

      /*Styles applied to all div tags*/
      div{
         background-color: coral;
         border:5px solid;
      }

      /*Styles applied to 'myclass' class*/
      .myclass{
         border:5px solid;
      }
      
      /*Styles only applied to 'myid' id*/
      #myid{
         height:40px;
      }
   </style>
</head>

<body>
   <div></div>
   
   <br>
   <p class="myclass">
      Hello, World!
   </p>

   <br>
   <p class="myclass">
      Hello, World!
   </p>

   <br>
   <div id="myid">
      Height = 40 px
   </div>
   
</body>

</html>

注意：要了解級聯樣式表的工作原理，請檢視我們免費的 CSS 教程。

HTML 中的客戶端指令碼

HTML <script> 標籤用於包含外部指令碼檔案或為 HTML 文件定義內部指令碼。指令碼是可以執行程式碼，執行某些操作。

以下是一個示例，我們使用 script 標籤定義一個簡單的 JavaScript 函式。當用戶單擊按鈕時，將彈出一個帶有 Hello, World 訊息的警告框。

<!DOCTYPE html>
<html>

<head>
   <script type="text/JavaScript">
      function Hello(){
         alert("Hello, World");
      }
   </script>
</head>

<body>
   <br>
   <input type="button" 
          onclick="Hello();" 
          value="Click Me"  />

</body>

</html>

注意：要了解 JavaScript 的工作原理，請檢視我們免費的 JavaScript 教程。

列印頁面