HTML
- HTML (是簡稱所以大寫)
- HTML 是標記語言不是程式語言（標記 Markup、沒有程式邏輯)
- 超文本標記語言：重點是「標記」－把文件用標記標起來
- 描述一個網站的結構語意
簡史
- 演進：html4.0 → html4.01 → XHTML1.0 → HTML5.0
- HTML5 只是HTML最新的修訂版本(2014/06)
- 廣義論及的 HTML5 =
HTML + CSS + JavaScript（三大中心技術組合）
目的：減少瀏覽器對外掛程式的需求
- HTML中新增項（語法特徵）：
- Video、Audio、Canvas、整合SVG
- 加強網頁的文件結構性（語意）
資料結構
-
做網頁：使用HTML將「文件」轉換成「網頁」
HTML只是把文件標記成網頁
例如手抄資料編輯成Word（設定標題/內文...等）
-
拿到文件時
- 判斷標題/內文...等(結構)
- 思考如何定義清楚
- 將文件做成標記(HTMLL)
主標題 -> h1
副標題 -> h2
內文 -> p
以正確的標籤賦予它正確的意義
-
標籤使用會影響搜尋引擎解讀＆盲人檢索
如選單用<nav>包爬蟲才明確知道為主選單
- 網站資訊量很大很多、如何知道網頁的重點是什麼？
搜尋引擎在爬的時候要分析重點是什麼？
-
有些是寫給瀏覽器/爬蟲看的
（<head>裡的 <title>→人、 <meta>→程式）
有些是寫給人看的<body>
標籤
-
不同的標籤有不同的屬性
-
<標籤>資料</標籤>
<p> text </p>
-
<標籤 屬性="值">資料</標籤>
<a href=""> LINK </a>
<信 收件地址 = "">名字<>
-
<標籤 屬性1="值1" 屬性2="值2">資料</標籤>
<a href="http://google.com" target="_blank"> Google</a>
-
自閉標籤 <標籤 屬性="值">
補充觀念 ID & Class
ID & Class
- 首字不得為數字、可中線/底線
- 大小寫不同
- 其實可以用中文跟Emoji、但實務上不會這麼用
- 依據ID的唯一性，理論上瀏覽器搜尋到第一個符合的ID就不會繼續搜尋，所以指定ID性能較Class佳，但瀏覽器對＂CSS＂的處理流程找到第一個ID後仍繼續尋找，故以CSS而言選取ID效能沒有較佳
ID
- ID 名稱不可重複
- 一個物件不可有兩個 ID 名
- 瀏覽器處理CSS樣式時其實多重ID仍會正常顯示
但程式運作（如 JS ）則會有問題
Class
Name
區塊命名
定義區塊常用命名
- 頂部
header
- 內容
content / container
- 尾部
footer
- 選單
nav / navigation
- 側欄
sidebar
- 欄目
column
- 控制整體佈局寬度
wrap / wrapper
- 主要區域(通常為頁面主要內容部份)
primary
- 次要區域 (通常為次選單)
secondary
參考資料：
個人 Blog: https://eudora.cc/
iT 邦幫忙鐵人賽