【網頁前端、設計基礎】一文讓你了解網頁的基本解構(HTML,CSS,JAVASCRIPT)
【網頁前端、設計基礎】
一文讓你了解網頁的基本解構
(HTML,CSS,JAVASCRIPT)
基本解構
要知道，網頁是由三大基本結構所造成，包括html，javascript ， css，但他們究竟是什麼？又負責著什麼？
下面的圖，可以簡單地解釋他們三者所負責的工作
HTML :主要負責網頁的基本，包括文字，圖片等
CSS :主要負責裝飾網頁
JavaScript :主要負責連接後台如訪客的瀏覽器資訊，cookies等，並增加網頁互動性
HTML
在Html裏，標記markup是一個最重要的核心，他就好像物件名稱一樣，準確地告訴電腦，該看到什麼，該展示什麼。而每次項目的結束，都會用</>符號來告訴電腦
以下為標記的一個例子 ：
想看更多markup？可以在這裡看到:
在html的世界裡，另一個非常重要的，就是他命名機制，要知道在同一條街中也有很多大廈，若果這些大廈沒有名字，又怎樣找他出來呢？所以命名機制，就出現了。
Html常見的命名方式有兩種：1 . class 2 . ID 。簡單而言，class就是他的名，可以有相同的，而id就是它的身份證，必須獨一無二，不可以有重複
例子：
CSS
雖然已經有基本顯示方式了，但是著重美感的人，又怎會能夠接受這種單調又沉悶的模樣呢？於是css就誕生了
通常的運作方式為指示html裡一個項目，如上面的p，然後用｛｝包住你想要的裝飾方法
例子如下：
上面加入了的ID 和 Class，也可以在這處使用ID前面加＃，Class前面加.
例子如下：
Javascript
基本的色彩，動畫已經有了，但希望能夠和觀眾做到進一步的活，該怎樣才好呢？於是，工程師們又創造出javascript
那麼究竟是Javascript
在這三種元素中，javascript會較為困難掌握，它和一般程式語言一樣，需要了解變數，迴圈等較複雜的問題
總結
到這裡，大概介紹完網頁的基本核心了。但隨著時間發展，為了節省開發時間，提升易讀性和性能，學習容易度亦有不少輔助的框架出現。
例如：scss， css的輔助框架，可大幅度令css的易讀性、可維護性、性能大幅提升
又例如bootstrap，一個由 HTML、CSS 和 JavaScript 寫成的前端框架，用家只需要會基本html，不用寫css，JavaScript ，就能夠對網站進行優化，增加互動性。
最後，希望這篇文章能夠讓大家對這網頁三元素，html、css、javascript，建立一個基本概念吧！
你也許會喜歡:
0 Comments