每個人接觸前端的角度可能都不一樣
有些人是以前從事web相關行業的，比如後端，比如設計。從事這些行業的人因為工作需要，多多少少都會對前端有一定的瞭解，不一定是這個詞，但一定是這個職位
小白的話，可能更多的聽到的是h5，css3之類的名詞，其實無論從哪個角度接觸到前端，不可避免的要了解前端的三大語言 HTML CSS Javascript

今天咱們要說的就是這三大語言之一的HTML，翻譯成中文，叫做超文字標記語言，全稱是HyperText Markup Language

這一長串的英文單詞我們可能記不住，其實也不需要花過多的精力在這種聽起來很高大上的名詞上，第一是小白階段沒必要，第二是到了更高層次，接觸的時間長了，自然而然就記住了

直接來看這個中文名，叫超文字標記語言。把這個名詞拆分一下，分別是“超文字”，“標記”，“語言”，那麼html是一門語言這個毋庸置疑，也沒什麼可說的

再往前看，“標記”，其實這是html語言的一個特點，語言裡面所有的東西都叫做標記，用一個標記來包含一塊內容表示其作用，比如用<h1>標籤來表示頁面上的一個標題，用<p>標籤來表示一個文章段落等等

這裡說的標籤，就是標記，它的名字有很多，但是表示的都是同一個東西，從html語言角度，它叫做標記，我們平常也會稱之為標籤；從盒模型的角度，可以稱之為盒子；從標籤與標籤之間的關係來看，又可以稱之為元素；從渲染引擎的角度，還可以稱之為文件物件模型(Document Object Model —— DOM)等等…所以初學者可能會被各種各樣的名詞所幹擾，但是不用擔心，那只是可愛的程式設計師前輩跟你裝裝逼而已

再接著往前，“超文字”其實這裡從字面上就已經能夠理解了，說的是這個語言已經遠遠超出了文字的範疇，文字，但從字面上來理解，就是文字、符號。這稱之為文字。但是如今的網頁上，感覺更多的是圖片。那麼圖片就是一個超文字。再比如音樂，電影，或者一些其他的媒體。這都遠遠超出了文字的範疇，所以說是超文字

HTML建立之初是用來描述文件結構的，這裡是一個標題，這裡是文章段落，這裡需要加粗強調一下，或者用於描述一個表格，再或者用來承載一些功能，比如說a連結，比如說表單提交資料。到了今天，我們可以把HTML看做是一個房子的骨架，結構

在1994年全球資訊網聯盟（W3C）成立之初，因為沒有相關標準，外加上網站的風靡，HTML被迫出現了一下諸如<font>

也正是因為逐漸增多的網站提出的需求也越來越多，人們開始注重網站的外觀，這時候CSS也就應運而生了。說白了，CSS就是控制為HTML元素新增樣式從而使頁面更加漂亮的。CSS的全程 Cascading Style Sheets,中文名：層疊樣式表。我認為這個中文名翻譯得非常貼切，從字面上就能看出來CSS的特點，那就是層疊，或者叫堆疊。利用CSS的選擇器就可以為在元素身上堆疊很多很多的樣式，甚至可以重複新增，只不過是後者會覆蓋前者罷了。（以後再解釋什麼是後者什麼是前者）

與HTML相比，CSS支援更豐富的文件外觀，其表現程度也遠非HTML力所能及。CSS可以為任何元素的文字和背景設定顏色；允許在任何元素外圍建立邊框，同時能增大或減少元素外的空間；允許改變文字的大小寫、裝飾方式、間隔，甚至可以確定是否顯示文字，還允許完成許多其他的效果。如果說HTML是房子的骨架，那麼CSS就是房子的外觀——外牆是什麼顏色？家裡是什麼顏色？地板是什麼材質的？房子外圍有多大的草坪？這些都由CSS來決定！

那麼到此為止我們擁有了房子的骨架，有了房子的外觀，那麼按理來說一個房子就可以完工了，不需要別的東西了。但是別忘了，今天我們對房子的需求，如果裡面要住人的話，那麼空調得有吧，洗衣機要不要？水電煤少不了吧？那麼這些功能性質的工作就得交給Javascript了！

於是乎JS（Javascript）的作用也就呼之欲出了，就是用來做一些功能性的東西的。在08年以前，前端這個概念還不是特別清楚的時候，JS的作用幾乎也就用來寫點效果了，圖片輪播啦，點選一個按鈕，彈出來相應的內容啦之類的一些簡單的互動，隨著08年V8引擎的出現，以及09年第五版JS的出現，JS的能力得到了一個質的飛躍。此時JS開始處理頁面上的複雜互動了，隨之而來的大資料時代也讓JS發光發熱。再到現在，寫特效寫互動反而成了JS的副業，JS做得更多的是處理頁面的邏輯，前後端的資料互動，頁面效能等以前後端語言都不敢想象的事情。同時NodeJs的出現讓JS走出了瀏覽器的限制，甚至可以在服務端執行！以後前端會發展成什麼樣誰都無法預測，而我們能做的，只有加油學習了。

此文主要讓大家理解HTML，CSS和JS三者之間的關係

• HTML可以看做是一個房子的骨架，結構
• 如果說HTML是房子的骨架，那麼CSS就是房子的外觀
• 那麼一些功能性質的工作就得交給Javascript了！