Day 11 - 切版基礎打底(一) : HTML標籤/CSS基礎

每日一談

嗨，大家好 ! 我是阿蘇

今天是Day 11，不知不覺終於突破 Day10 啦 ! 我們已經完成三分之一的旅程，先幫自己鼓鼓掌
接下來開始會進入開發切版技術的實作介紹，這階段需要自己去花大量時間去練習實作精通，分享一些在實作上常用必學的技巧，剩下就是靠自我努力去開發實作，打磨你的技術精進自己，一起前往加油吧!

HTML / CSS/ Javascript 前端三劍客

我們先來認識一下前端三劍客 HTML / CSS/ Javascript，對前端有個基礎的認識

HTML ― 網站內容
CSS ― 視覺、外觀、樣式
Javascript ― 動態

初次接觸的初學者，讓我們對前端有了基礎認識，知道他們負責的範圍，就可以往下開始學習 HTML/CSS基礎的運用，Javascript 在本篇不會說明，有機會的話再分享Javascript，本篇核心在分享專題切版實作。

HTML

HTML 是一種超文本標記語言，或是可以理解為標籤語言，它的核心組成就是用不同標籤去顯示對應內容

基礎 HTML 寫法

範例一
HTML 撰寫標籤

顯示對應內容

用　Codepen 試著寫看看吧！

HTML標籤

• h1~h6 標題標籤
  
  一個網頁只能有一個 H1 標籤 ，通常運用在最重要標題
  其次看重要程度照順序運用 H1 > H2 ...等

• p　文字標籤
  一般文字、內容

• br　換行標籤

• img 標籤
  插入圖片
  

• list 標籤
  
  對應顯示內容
  
  list有分ul、ol ，有序列表、無序列表，裡面對應內容是用li去顯示，也常用在導覽列表、相關資料

• a 標籤
  連結標籤，想從A頁面連到B頁面嗎那我們就需要a標籤
  
  也可以設定#ID，設定站內錨點，同頁快速前往連結

以上是常用必學的HTML標籤，初學可以運用Codepen 嘗試看看，其他還有一些深入的運用，像是table 表格標籤、input、form也是輸入資料常運用的，學會基礎也可以再深入了解

今天先分享基礎，有了基礎概念後剩下去多參考網頁 (案F12 查看原始碼)，了解實際運用方式，並找範本網站(新聞文章練習、小區塊練習)實作看看，進階深入學習可模仿網站試著切看看完整的頁面，融合實作學習成效更好!

*有了學習方向多利用 Google 搜尋關鍵字，搜尋知識學習並融合實作，學習成效更好 *

區塊、層級概念

區塊
網站其實是一層層區塊包起來製作而成，我們要先有區塊的概念，想像網站有很多方框框包起來，裡面有一層層對應的文字元素，然後才能去寫網站架構跟標籤

以下面圖範例，我們可以看到左邊是nav區塊，右邊內容區塊，裡面有tittle區塊、還有photo區塊
那tittle裡面又有包標題跟p文字標籤，下面photo區塊也是同概念

層級
以上面圖來拆解 html 來看，我們可以看到 html 標籤裡也有一層層架構，head 寫網站資訊，body內容就是網站顯示內容，然後用div 標籤去包區塊，會用空格去區分層級， body裡面包了tittle區塊、photo區塊， tittle裡面空格在有他對應內容

是不是開始對 html 區塊、層級 有點概念了呢，這塊在 html 其實是很重要的部分，我們要適當運用區塊特性，一一分解拆解出對應內容，再去寫網站架構

補充
div標籤是沒有任何特性的，常用在區塊規劃，也會搭配 class 去命名區塊

class / id

那我們寫好 HTML 內容後，CSS 要怎麼把樣式套用上去呢 ?
我們可以在標籤後面加 class 並命名，css在透過 class去指定樣式

• 每個標籤都可以加 class / id 指定名稱
• id 權重高，不易覆蓋，不隨意使用，常用在動畫套用
• class 可以有很多個，多利用這個特性，減少重複寫 css

例: class .fw-bold 設定字體粗體，我可以在很多地方同時套用這個 class ， 那他都會同樣有吃到粗體效果

命名方式
想 class 名稱相信是最困擾問題
命名原則: 好管理、好辨識、區塊明確

• 區塊命名 nav、tittle、banner、content、header、footer
• 結構式命名 nav-tittle、nav-list、nav-img
• 語意命名 art 、animanl、content us

當然還有很多更好的取名方式，主要以辨識度高方便管理為主

初學者推薦學習

推薦初學者書籍
HTML & CSS: 網站設計建置優化之道
淺顯易懂初學者入門可以看這門

六角學院切版直播班
Cp值高，從基礎到切出完整一個網站
助教優質有問必答，有效率的學習

彭彭老師的YT
從基礎到進階，推薦的學習頻道