Day5-HTML(三)：head標籤

2022 iThome 鐵人賽

DAY 5

自我挑戰組

網頁前端設計系列第 5 篇

14th鐵人賽

Alexia

2022-09-05 21:22:38

842 瀏覽

分享至

上次介紹了按下「!」快捷鍵出現的基礎元素代表的意義，今天會介紹被包含在<head>標籤裡的元素種類，還會直接舉例實作，分享我覺得剛開始會比較常用到的是哪些～

那我們就開始吧！(๑•̀ㅂ•́)و✧

`<head>`標籤

被包含在<head>裡的標籤有：

1. `<meta>` 網頁元資訊

可以用來設定的資訊有：

meta charset 網頁編碼
用來指定網頁內容是用什麼編碼，而現在大多數的網頁編碼都是UTF-8。
meta description 網頁說明
用來描述說明你的網頁內容，類似關鍵字的意思，通常是用來給搜尋引擎用的，會顯示在搜尋結果中。
meta author 網頁作者
說明網頁的作者資訊、或頁面擁有人資訊。
meta viewport 手機行動版網頁螢幕資訊
設定手機行動版網頁的viewport資訊，比如說縮放網頁畫面的寬高。
meta refresh 自動跳轉網頁
可以用來設定幾秒鐘後跳轉到另一個連結。
meta robots 搜尋引擎標記
標記針對特定網頁應如何將各個網頁納入索引並顯示在搜尋引擎的搜尋結果中。

2. `<title>` 網頁名稱

是網頁的標題(顯示在瀏覽器的標題欄、書籤、頁籤上、或搜尋引擎的網頁搜尋結果中)。

3. `<style>` CSS樣式排版

用來設定HTML文件的樣式。

4. `<link>` CSS樣式表

載入或定義網頁中會用到的外部資源，最常見的像是用來載入CSS外部樣式表。

5. `<script>` JavaScript程式碼

是用來寫JavaScript的，可以直接寫在裡面，或是用來載入外部JavaScript程式檔案。

6. `<noscript>` 網頁不支援JavaScript時的處理

7. `<base>` base URL

用來設定整個頁面中，所有連結類型的屬性的預設根網址和預設連結目標。

接下來是舉例呦～

<html lang="zh">
我先把語言設定成中文

<meta charset="UTF-8" />
編碼是UTF-8
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
width=device-width 指定瀏覽器頁面的寬度同裝置的寬度
initial-scale=1.0 指定畫面初始縮放比例為100%，不放大也不縮小
<meta name="author" content="Alexia" />
作者是Alexia
<meta name="description" content="這是Alexia的iThome鐵人賽,30天發文作品。" />
網頁說明：這是Alexia的iThome鐵人賽,30天發文作品。
<title>iThome鐵人賽</title>
網頁標題名稱是：iThome鐵人賽

目前簡單完成head的部分～