[筆記]網站建築師 - HTML

Published on:
  • 什麼是HTML?
    超文件標示語言(英語:HyperText Markup Language,簡稱:HTML)
    是一種用於建立網頁的標準標示語言。
    網頁瀏覽器可以讀取HTML檔案,並轉換成視覺化網頁。
    HTML描述了一個網站的結構語意隨著線索的呈現,實際上html只是一種標記式語言而已。

    因為瀏覽器沒眼睛,是認文字去轉成網頁基本結構視覺化,所以網頁用文字去記述

  • 網頁的架構

<!doctype html>
<html>
    <head>
         <meta charset="UTF-8">
       <title>這是我的網頁 </title>
    </head>
    <body>
        網頁內容
    </body>
</html>  

  • DOCTYPE : 宣告此文件的html版本,需放在整體文件的最開頭。 會牽扯到HTML跟CSS的解讀方式。
  • body: 主內容,給人看的。
  • head:放該頁面的相關資訊,主要是給搜尋引擎看的,不是給人看的。
    • title: 跟SEO有關係 /如何讓網頁排在前面 /搜尋引擎會看/
    • Meta:瀏覽器由此判定此文件是用何種編碼方式。
    • 會放關鍵字 或 網站描述

  • 標籤
    1. h1~h5 標題標籤
      • h1是最重要的標題,其次則是h2,以此類推。
      • 不要被視覺(眼睛)矇騙,網頁看標籤而不是看顯示出來的字體大小來辨別重要性。
        • Ex:h1標籤是大的重要的 雖然文字看起來是最大的,但其實可以用別的方式讓字變小,但對瀏覽器來說h1標籤仍是最優先的。
    2. 清單標籤(有順序的差別)
      • 有序清單(ordered-list) ex:有SOP的料理步驟 (會影響網頁搜尋)
      • 無序清單(unordered-list) ex:購物車內的東西
      • 有序清單(ol) 會顯示12345 / 無序清單(ul)
    3. 強調標籤
      • strog標籤 ->強調這一塊 ->會顯示粗體
      • b標籤 ->沒有強調的功能,只有視覺的顯示粗體
      • em標籤-> 強調 ->顯示斜字
        • i標籤 ->沒有強調的功能,只有視覺的顯示斜體
      • storng的強調 > em的強調
    4. 超連結
      • a標籤 ->顯示是超連結用
        • href(參照) 是屬性 ,瀏覽器帶你到目的地
        • 開新視窗 用target 的屬性
        • 屬性跟屬性之間用空白間隔,屬性跟值之間不能用空白間隔
        • <a href="http://tw.yahoo.com" target="_blank">yahoo</a>
    5. 圖片標籤(img)
      • 網頁是純文字欓,無法直接丟給他圖片 -> 告訴網頁這是圖片 ->去哪裡抓這張圖
        <img src="https://lh6.googleusercontent.com/-8hF1HXdXYJU/AAAAAAAAAAI/AAAAAAAAjuU/-h954DPX_v8/s0-c-k-no-ns/photo.jpg" width="300" alt="樂高標誌">
      • src :圖片來源
        • 如果圖片來源在網路上,直接複製網址(絕對路徑)/ 從網頁位置找圖片在哪 (相對路徑)
      • width :設定圖片的寬
      • alt(altennate) : 圖片替代文字 1.如果圖片無法顯示的時候顯示的文字 2.搜尋引擎可以透過替代文字知道是什麼圖片 3.跟無障礙網頁有關 ex 視障朋友上網是用閱讀機等輔助設備,「唸」出來,讓視障朋友們了解網頁。而念圖片時會念這裡的文字
      • img標籤特別的地方 ,只有頭沒有尾(獨立標籤/自閉標籤)
    6. 獨立標籤(自閉標籤)
      • br 打斷 強迫換行標籤
    7. 表格
      • 表格結構
        • table 外框/ tr 列 / td列裡面的格子
        • 表頭 thead / 表身tbody -
        • 表格標題
        • caption 大表格標題 - th 表格內的標題 - scope col 欄標題 / Scope row 列標題

Comments

comments powered by Disqus