HTML CSS JS之間的關係

2020-07-16 10:04:48
HTML、CSS、JS(JavaScript)共同構建了我們看到的所有網頁展示和互動。
  • HTML(HyperText Markup Language)是超文件標示語言。
  • CSS(Cascading Style Sheets)是級聯樣式表。
  • JavaScript 是一種指令碼語言,主要用於前端頁面的 DOM 處理。

文字的意思,大家應該都明白,隨手在桌面上建立一個 .txt 檔案,就是一個文字檔案。

那什麼是 HTML 超文件標示語言呢?超文字就是超越文字的意思,表示它不僅僅是簡單的文字,它比普通的 .txt 檔案還要高階。那到底高階在哪裡呢?第二個詞 Markup (標記),就是對一個普通的 .txt 檔案裡的文字進行標記,標記其中的一段為 title,標記另一段應該另起一行,標記任意一段為某個意思等。

最後,這些記號超越了普通文字的標記,它們對普通文字的修飾,構成了一套規則,這套規則就是 HTML。

以蓋房子類比,必須定義這個房子有多長、多寬,每一塊面積如何規劃,例如哪裡是衛生間、哪裡是飯廳、哪裡是臥室。將這些定義好,網頁也就有了最基本的樣子。總之,HTML 就是用來布局網頁中的每一個元素的。

CSS 中的“樣式”就是指外觀。還以蓋房為例,定義好了各個空間,房子也蓋起來了,但還要裝修,例如給客廳貼桌布、給臥室鋪地板。CSS 就是起裝修作用的,要和 HTML —起配合使用。

JavaScript 是一種指令碼語言,它在網頁中的作用是控制 HTML 中的每一個元素,有時要刪除元素,有時要新增新元素。

大家可能遇到過這樣的場景:單擊網頁上的一個按鈕,會有一個網頁上從沒有過的元素顯示出來,這就是利用 JavaScript 實現的。

房子已經裝修好,貼上了牆紙,鋪上了地板,桌子、板凳、沙發都已經擺好,一切都很完美。可是,一個有生活情趣的住戶時常要買些新家具,或者把茶几換個位置,這時,移動、新增、減少物件就只能靠 JavaScript 實現。

當前網際網路上的任何一個網頁都是由它們三個構建起來的,雖然簡單,但不可不知。