# \<head>

## \<head>

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

<figure><img src="https://3237649688-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FExBz81i5H9F12Ze0JM6p%2Fuploads%2FfKSu8mUkCszFWpjnm0uR%2Fimage.png?alt=media&#x26;token=e1c23e06-1d27-47fa-b429-3d6dec5b75fb" alt="" width="336"><figcaption><p>圖1-2</p></figcaption></figure>

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

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

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

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

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

## \<title>

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

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

## \<meta>

此元素標籤用於<mark style="color:red;">定義網頁的原始信息</mark>，如字符編碼、關鍵字、描述等。

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

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

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

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

```html
// 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>標籤用於在網頁中嵌入 JavaScript 程式碼。JavaScript 是一種用於在網頁中添加動態效果的程式語言。

\<script> 標籤可以放在 HTML 文件的任何位置，但通常放在 `<head>` 區段中，以便在網頁加載時立即執行 JavaScript 程式碼。\<script> 標籤可以包含 JavaScript 程式碼，也可以引用外部 JavaScript 檔案。

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

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

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

</code></pre>

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

* [x] 點擊按鈕時顯示訊息
* [x] 頁面滾動時播放音樂
* [x] 顯示動畫
* [x] 從表單中提交資料
* [ ] ...等

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

##
