網頁的構成要素
網頁構成要素有三:
HTML、CSS、JavaScript。
這三個要素,分別扮演不同的角色。
HTML
HTML可以說是一個網頁的核心骨幹。這個核心骨幹是透過一個個標籤tag來組成完整網頁需要的架構,包含內容與。與語意。例如我們想要在網頁上標示一個標題的話,可以使用<h1>這個標籤來標示,標籤的結尾需要加上「/」斜線 </h1>:
<h1>這是一個主要的標題</h1>
CSS
CSS 可以針對HTML提供不同的style風格。透過撰寫CSS語法,可以對網頁進行排版,讓它分出各種區塊如「主視覺」、「內容」、「選單」等等,並且可以裝飾網頁,讓網頁產生繽紛的畫面,不再限於單調的文字與圖片的組合。
CSS語法基本上可以分為三項:
- 選擇器
- 屬性
- 值
以下面的一個CSS敘述來說,其h1為選擇器、color為屬性而red就是對應color屬性的值。
整個CSS敘述可以翻譯成:「讓網頁中的 h1 標籤變成紅色的」。
h1{color:red}
除了上面的使用方式外,隨著新版CSS的出現,目前的CSS以非當日的吳下阿蒙,目前大家看到網站上很多的動態效果(微動態)可能是透過CSS語法寫成的。另外,目前的多螢網站也是透過CSS撰寫Media Query來讓網頁可以適應不同的行動載具(手機、平板),一般使用者才可以透過各種不同載具進行正確的瀏覽。
JavaScript
如果網站上需要較複雜的動態效果,這時候光靠寫CSS語法是沒有辦法達成的。JavaScript可以提供複雜的網頁動態效果。例如使用者點選按鈕、拖拉選單等等行動,所應該產生的各種回饋行為,可以透過使用JavaScript語法的撰寫來實現。
以上,是網頁前端使用到的三個主要元素。我們可以說,有了這三個要素,就可以完成一個基本的靜態網頁。這樣子的網頁可以呈現任何想要呈現給使用的視覺畫面。如果需要將使用者輸入網頁的資料進行儲存與分析的話,就需要用到後端的程式語法與資料庫。以往常見的網站後端的程式語言有PHP、Ruby、ASP.Net、JSP等等;資料庫有MySQL、MS-SQL等等。近年來出現了Node.js,可以當作伺服器、可以使用JavaScript的語法來寫。如果有興趣成為全端工程師可以考慮學習Node.js。
延伸閱讀: