【網頁入門】02 .認識HTML、導入CSS
●建立第一份網頁文件
在前篇 【網頁入門】01 .基礎概念與安裝 ，完成編輯器及套件的安裝後，即可開始第一份網頁文件編輯。
在New File上按右鍵新增檔案（或使用快捷鍵Ctrl+N），新增的檔案是沒有任何格式的，必須輸入附檔名(.html、.css或.js)以指定格式，指定好檔案格式後才能夠開始寫網頁，檔名通常會取對應的名字，譬如 home.html 對應 home.css，最後尋找相對應的樣式會比較便利。
●認識HTML架構
在寫HTML的內容之前，要先了解HTML的架構。
在Sublime打開附檔名設定為.html的檔案，輸入!後按TAB鍵，會出現HTML的基本架構：
HTML和CSS的讀取順序為由上往下、由左至右讀取，由外層(父層)包覆內層(子層)的巢狀結構，除了某些特別功能的標籤，大部分基礎標籤都成對，以<>包覆，格式以<標籤>開頭、</標籤>結尾(結尾標籤多一槓斜線)，並在前後標籤之間輸入內容。
第一行 ! DOCTYPE
宣告文件內容為HTML，並以</html>標籤作為結束，html文件的固定架構包含head與body兩個部分，製作網頁時大多會在這兩個標籤內部做編輯與新增。
所謂的head，可以將他理解為頭腦，我們頭腦的思緒是看不見的，負責連結身體的功能和資訊，在<head></head>之間，通常會放網頁載入時的資訊，包含網站名稱、SEO內容和導入CSS連結及相關資源，而body則代表可見的身體，網站呈現的內容都寫在<body></body>之間。
●連結CSS文件
若前面有建立存檔CSS的空白文件，可以先連結CSS文件樣式。
在<head></head>標籤之間輸入link後TAB，會出現<link
rel="stylesheet" href="">，
在href=""中輸入連結的檔案路徑，若已安裝AutoFileName套件，點擊該引號之間會出現同層可選擇的檔案。
（*若要連結的CSS檔案在上一層資料夾，輸入 ../ 指令進入上一層路徑）
也可以寫完html後再建立CSS檔案，記得回到html文件連結CSS文件。
●HTML標籤
現在，在<body></body>之間試著放入內容，使用標籤告訴文件放入的內容類型。
試試以下的標籤：
其中，最常使用的div標籤，表示的是一個區塊，切版時使用div包住區塊內的標籤方便排版，並使用class和id為區塊命名，記住class名稱可以不同區塊共用，而id只能有一個(通常使用class，id在JS及後端使用)。
記得善用Emmet的快速輸入功能，輸入div後TAB，會自動出現<div></div>的完整標籤，連續加入標籤的時候，可以使用 > 符號加入下一層的標籤。
【練習範例】
輸入div>h1>p>img>p.text_01，按TAB鍵：
輸入div>h1>p>img>p.text_01，按TAB鍵：
接著加入內容方便預覽，img標籤可使用fakeimg或連結上已準備好的圖檔、P段落使用Lorem+字數(此處使用Lorem50)並按TAB填入假字：
除了>縮寫表示下一層標籤，亦可使用
*重複數量、[屬性]、{文字}、$表示序列
來快速輸入。
另外，標籤中 # 代表標籤id，. 代表標籤的class名稱，id 和 class
在之後增加css樣式和JS抓取時很重要，盡量不要取沒有意義(比如AAA)或容易混淆的名稱。
【練習範例】
輸入 div#demo_1.demo01>ul>li*3>a[href="#"].link_${要顯示的連結名稱0$}
輸入 div#demo_1.demo01>ul>li*3>a[href="#"].link_${要顯示的連結名稱0$}
在輸入的同時，Emmet的預覽功能可以幫助確認內容是否有誤，確認無誤後，按TAB鍵。
輸入完成，按ctrl+alt+C （需安裝View in
Browser）預覽，可以看見剛剛放入的內容：
將網頁所需內容都放入html後，即可打開CSS檔案進行樣式和排版的編輯。
留言
張貼留言