<head>

在HTML中，<head>元素是放置關於網頁文件的元信息和其他非可視內容的區域。

<head>

head是html的第一主元素，通常還會包含<meta><style><script>元素。

我們亦可以引入外部樣式表（CSS）：在<head>元素中引入外部的CSS樣式表，這有助於控制網頁的外觀和風格。

// Some code
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>

或是引入JavaScript文件，用於實現互動和動態效果。例如：

// Some code
<head>
    <script src="script.js"></script>
</head>

<head>元素在HTML中扮演著存放非可視元素和網頁設定的重要角色。通過適當地使用<head>中的各種元素，您可以優化網頁的外觀、性能和搜索引擎優化等方面。

<title>

標籤用於定義網頁的標題，會顯示在瀏覽器的標籤欄或書籤上。

// Some code
<head>
    <title>網頁標題</title>
</head>

<meta>

此元素標籤用於定義網頁的原始信息，如字符編碼、關鍵字、描述等。

在<meta>元素中使用作者和內容描述資訊時，這些資訊通常不會直接顯示在網頁的實際內容區域，而是提供給搜尋引擎、瀏覽器和其他工具使用。以下是這些資訊在網頁中的作用：

作者資訊（）：這個資訊會被瀏覽器讀取，但通常不會在網頁內容中直接顯示。一些瀏覽器可能會在頁面的「元資訊」或「關於」部分顯示作者資訊，但這在不同瀏覽器和設備上的表現可能不同。

內容描述（）：這個資訊通常被搜尋引擎用於生成搜尋結果的描述部分，以及在社交媒體分享中作為預覽文本。這有助於使用者在搜尋引擎中看到有關頁面內容的概要，並且影響著使用者是否會點擊連結來查看頁面。這個描述通常不會在頁面內容區域直接顯示。

這些元素中的資訊對於網頁的搜尋引擎優化（SEO）和用戶體驗非常重要，但通常不會在網頁上直接可見。如果您希望在頁面上顯示作者名字和其他元資訊，您可能需要在頁面的實際內容區域使用標準的 HTML 元素，例如<h1>或<p>，將這些資訊包含在其中。

// Some code
<meta charset="UTF-8">  
/*可以指定頁面的字元編碼，確保瀏覽器正確地渲染頁面的文本內容。 常見的字元編碼是UTF-8 */

<meta name="description" content="的描述">

<meta name="keywords" content="關鍵字1, 關鍵字2, 關鍵字3">

<meta name="viewport" content="width=device-width, initial-scale=1.0">
/*視口設置（行動裝置優化）： 在行動裝置上，可以通過 <meta> 設置視口的寬度和縮放行為
，以確保頁面在行動裝置上正確顯示。*/

<meta http-equiv="refresh" content="5;url=https://www.example.com">
/*網頁重定向： 可以使用 <meta> 在頁面載入時進行重定向到其他網頁。*/

<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="expires" content="0">
/*禁止瀏覽器快取： 可以通過設置 <meta> 來告訴瀏覽器不要緩存頁面內容。*/

<script>

以下是 <script> 標籤的語法：

// Some code
<head>
</style>
          <script>
            // 用Javascript 使平滑滾動到指定位置
            function scrollToElement(elementId) {
              const element = document.getElementById(elementId);
              if (element) {
                element.scrollIntoView({
                  behavior: 'smooth' // 使用平滑滾動效果
                });
              }
            }
          </script>
</head>

<body>
<h3 id="{0}">{0}</h3>
<img class="bordered-image" src="data:image/jpeg;base64, {1}" alt="{0}">
<br>
<a href="javascript:void(0);" class="centered-link" onclick="scrollToElement(\'top\')">Back to Design Photo Link</a>
</body>

可以使用 <script> 標籤來在網頁中添加各種動態效果，例如：

您可以使用 <script> 標籤來創建更豐富和更具吸引力的網頁。

PreviousHTML語法 Next<body>

Last updated 1 year ago