<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>標籤用於在網頁中嵌入 JavaScript 程式碼。JavaScript 是一種用於在網頁中添加動態效果的程式語言。
<script> 標籤可以放在 HTML 文件的任何位置，但通常放在 <head> 區段中，以便在網頁加載時立即執行 JavaScript 程式碼。<script> 標籤可以包含 JavaScript 程式碼，也可以引用外部 JavaScript 檔案。
以下是 <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> 標籤來創建更豐富和更具吸引力的網頁。
