前端開發-深入淺出HTML&CSS 里程碑

抬頭仰望星空，保持一顆好奇心

為了在前端領域追求精湛並且找到一份前端工程師工作，我報名今年四月的中壢資策會前端開發班，離上課還有一個月時間，於是先看書自學和線上教學課程，這次來分享剛看完的 深入淺出HTMLCSS，重要的收穫。

書名：深入淺出HTML and CSS 第二版（版次2017年4月）

深入淺出官方教才素材

程式碼編輯器：Sublime Text 3

1.別人如何看到自己的網站

這是一本學習體驗，而不是參考書，裡面了解HTML跟CSS運作結合，前面就讓人了解當網站刻畫出來後要放到全球資訊網上要找網站代管公司，上網搜尋後找了智邦作為我的第一個網站虛擬主機架設，他們有提供7天免費試用非常好的福利，FTP方面還滿好操作，但是介面就是舊了一點，不過還是很順利的看到在書上學會的第一個網站放在全球資訊網上。

網站咖啡豆-首頁

網站咖啡豆-部落格

使用<video>元件新增影片

額外補充嵌入影片

影片下方點擊 分享>嵌入>複製腳本碼>貼在HTML

嵌入youtube影片

2.開始認識CSS

有了CSS，將能全盤控制網頁的外觀呈現，通常還不需更動到HTML原始碼。下面是我在書上單元做的飲料網站，有加上CSS的網頁以及沒有加上CSS的網頁差別。

尚未加入任何CSS樣式表的網站

HTML (左) & CSS (右)

加上CSS後的飲料網站

3.互動表單

只要在網頁上啟動表單(但這裡也需要網站司服器的一點協助，簡稱後端)網頁將可以收集客戶的回饋意見、接受線上訂單、取得線上遊戲的動作指令、密碼隱藏、日期、或是做『hot or not』的投票。

互動式表單

後端司服端腳本碼回應

接下來來講一些表單的相關元件：

<select>

<select>元件

<select>元件在網頁中建立一個選單控制項。並且搭配<option>元件使用

radio input

<input>元件

每個項目都做一個單選<input>元件，radio按下某個按鈕，其他的按鈕會談起來

number input

<input>元件

這種<input>元件只限於數字(number)的輸入，使用min與max屬性以限制可用數字

date input

<input>元件

這種<input>元件，可透過日期選取的控制輸入日期(date)

checkbox input

複選方塊的<input>元件

可有勾選與未勾選兩種狀態，同一時間可以使用多個複選

text input

<input>元件

用於輸入一行文字，設定最大輸入字元，以及設定控制項的長度

textarea

<textarea>元件

建立一個多行的文字區域，rows屬性可定義高度， cols屬性可定義寬度

submit input

<input>元件

建立一個按鈕，可送出表單

額外補充 密碼

密碼<input>元件

輸入的文字會被遮起來

後記：

這本書很扎實的讓新手了解HTML以及CSS，網站技術更新速度之快，雖然比不上現在的高級商務網站，但是這段時間邊看線上教學影片跟書籍進步速度滿快的，從懞懂到熟悉基礎，再來想加強 CSS的樣式編排能力以及之後開始學習 Jquery發展，下回到一定的進度後再來分享！！