iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 27
1
Modern Web

HTML 與 CSS 學習筆記系列 第 27

Day27 - HTML 與 CSS (9) - head

<head>

  • <head>:只有 1 個,主要說明一些資訊,如編碼、標題,使用的 tag 的內容通常不會顯示在網頁上
  • <title>:出現在瀏覽頁上方的標籤的標題
  • <meta>:將網頁資訊提供給瀏覽器、搜尋引擎、爬蟲或社群使用
    • charset="UTF-8":設定網頁的編碼
    • name="description":網頁的描述
    • property="og:__":用來載入 FB 相關的設定,讓網頁在FB 的呈現可以更好
    • http-equiv:設定網頁的一些資訊,如編碼、更新頻率,下面範例則是設定 IE 什麼版本的,就用什麼版本的標準模式
  • <link>:用來載入會用到的資源,如 CSS 樣式表
    • rel="shortcut icon":用來載入標題標籤前面的圖示
    • rel="apple-touch-icon":用來載入加入 APPLE 裝置的圖示
  • <script>:用來寫 JavaScript 的,或是使用 src="" 來載入 JS 檔案
<head>
    <meta charset="UTF-8">
    <title>HTML、CSS教學</title>
    <link rel="shortcut icon" href="favicon.ico">
    <meta name="description" content="網站描述文字" />
    <meta property="og:title" content="FB的標題" />
    <meta property="og:description" content="FB的描述" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="FB上的網址" />
    <meta property="og:image" content="FB的圖片" />
    <link href="圖片路徑" rel="apple-touch-icon" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <link rel="stylesheet" href="CSS檔案路徑">
    <script type="text/javascript" src="JS檔案路徑"></script>
</head>

參考資料

次回

進一步了解網頁架構等等


上一篇
Day26 - HTML 與 CSS (8) - 背景圖片
下一篇
Day28 - HTML 與 CSS (10) - 網頁設計
系列文
HTML 與 CSS 學習筆記31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言