【網頁前端、設計基礎】一文讓你了解網頁的基本解構(HTML,CSS,JAVASCRIPT)

Published by thewayeasy on

【網頁前端、設計基礎】一文讓你了解網頁的基本解構(HTML,CSS,JAVASCRIPT)

【網頁前端、設計基礎】

一文讓你了解網頁的基本解構

(HTML,CSS,JAVASCRIPT)

基本解構

要知道,網頁是由三大基本結構所造成,包括html,javascript , css,但他們究竟是什麼?又負責著什麼?

下面的圖,可以簡單地解釋他們三者所負責的工作

【網頁前端、設計基礎】網頁基本解構 (HTML,CSS,JAVASCRIPT)

HTML :主要負責網頁的基本,包括文字,圖片等

CSS :主要負責裝飾網頁

JavaScript :主要負責連接後台如訪客的瀏覽器資訊,cookies等,並增加網頁互動性

HTML

在Html裏,標記markup是一個最重要的核心,他就好像物件名稱一樣,準確地告訴電腦,該看到什麼,該展示什麼。而每次項目的結束,都會用</>符號來告訴電腦

以下為標記的一個例子 :

【網頁前端、設計基礎】網頁基本解構 HTML markup

想看更多markup?可以在這裡看到:

https://www.w3schools.com/html/default.asp

html的世界裡,另一個非常重要的,就是他命名機制,要知道在同一條街中也有很多大廈,若果這些大廈沒有名字,又怎樣找他出來呢?所以命名機制,就出現了。

Html常見的命名方式有兩種:1 . class  2 . ID 。簡單而言,class就是他的名,可以有相同的,而id就是它的身份證,必須獨一無二,不可以有重複

例子:

【網頁前端、設計基礎】網頁基本解構 HTML id and class

CSS

雖然已經有基本顯示方式了,但是著重美感的人,又怎會能夠接受這種單調又沉悶的模樣呢?於是css就誕生了

通常的運作方式為指示html裡一個項目,如上面的p,然後用{}包住你想要的裝飾方法

例子如下:

【網頁前端、設計基礎】網頁基本解構 CSS

上面加入了的ID 和 Class,也可以在這處使用ID前面加#,Class前面加.

例子如下:

【網頁前端、設計基礎】網頁基本解構 CSS with ID and Class

Javascript

基本的色彩,動畫已經有了,但希望能夠和觀眾做到進一步的活,該怎樣才好呢?於是,工程師們又創造出javascript

這裡有個簡單的例子喔

https://codepen.io/tak-shing/pen/LYGKzeV

當你更改名字後,player:後的字能夠作出即時改變

那麼究竟是Javascript怎樣做到互動的?其實這並沒有你想像中那麼複雜,主要是透過指定htm裏的項目,如上面的p,然後透過改變網頁的基本(html)和網頁美化部分(css)去達成

在這三種元素中,javascript會較為困難掌握,它和一般程式語言一樣,需要了解變數,迴圈等較複雜的問題

總結

到這裡,大概介紹完網頁的基本核心了。但隨著時間發展,為了節省開發時間,提升易讀性和性能,學習容易度亦有不少輔助的框架出現。

例如:scss, css的輔助框架,大幅度令css的易讀性、可維護性、性能大幅提升

【網頁前端、設計基礎】網頁基本解構| 輔助框架sass

又例如bootstrap,一個由 HTMLCSS JavaScript 寫成的前端框架,用家只需要會基本html,不用寫cssJavaScript ,就能夠對網站進行優化,增加互動性。

【網頁前端、設計基礎】網頁基本解構| 輔助框架bootstrap

 

最後,希望這篇文章能夠讓大家對這網頁三元素,htmlcssjavascript,建立一個基本概念吧!

你也許會喜歡:

0 Comments

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。