1.前言 現如今科技進步，足不出戶盡曉天下事，一轉身便仿若隔世茫然。科技綻放時代，網路技術對人們的觸變無疑是深遠而重大的，隱於繽紛絢麗的網頁背後，是前端的蛻變更新。 如今，隨意點開頁面，絢麗華彩的特效及流暢的用戶體驗，是以前始料未及的。從切圖到框架，從組件到模塊，從簡單到系統，前端漸成一方世界。 2 ...
1.前言
現如今科技進步，足不出戶盡曉天下事，一轉身便仿若隔世茫然。科技綻放時代，網路技術對人們的觸變無疑是深遠而重大的，隱於繽紛絢麗的網頁背後，是前端的蛻變更新。
如今，隨意點開頁面，絢麗華彩的特效及流暢的用戶體驗，是以前始料未及的。從切圖到框架，從組件到模塊，從簡單到系統，前端漸成一方世界。
2.歷史
1989年，出於地域交流不便，歐洲粒子物理實驗室研發出一套遠程資源共用系統，該系統基於瀏覽器實現文本信息的交換，萬維網(www，即world wide web)誕生。
1993年，伴隨萬維網的萌芽，超文本標記語言(html，即HyperText Markup Language)順勢誕生，語義化標簽讓頁面結構清晰簡潔。
1994年，關於html標準化的萬維網聯盟(w3c，即world wide web consortium)建立，從此拉開萬維網標準化規範化的革命歷程。
在html的歷史里，有兩大版本值得註意，html 4.01版本(1999年)，html 5版本(2008年)，儘管路不同起，但在各自的時代里舉足輕重。
儘管不在編程語言的範疇里，但它作為一門標記語言，負責頁面的結構及語義，用正確的標簽解釋正確的頁面結構。所及即所得，是html較為容易上手的的一點，從標簽入手很快便能寫出可讀可維護的頁面。
3.文檔
網頁丶頁面及文檔，通俗地說，可以理解為同一事物。文檔分類型，除html類型外，還有xml，xhtml等類型，相較來說 html 類型的文檔較為常見。
文檔聲明(DTD，即Document Type Denifition)，聲明頁面的文檔類型及版本，文檔聲明的意義是讓瀏覽器能正確識別文檔類型，並調用相應的處理引擎處理該文檔。
如今的html，逐漸撇棄html4.01全面擁抱html 5，但有時仍需做相容處理，在此介紹該兩個版本的兩種不同聲明方式:
//html 4.01文檔聲明：w3c標準，寫法繁瑣但相容性較好。
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
//html 5文檔聲明：去除部分非語義化標簽，新增部分語義化標簽，簡潔清晰。
<!doctype html>
4.結構
<html>為文檔根標簽，除文檔聲明外，文檔所有內容均包含在<html>標簽里，而html標簽及其內容組成的元素成為為根元素。
根元素下，包含<head>及<body>兩大標簽：
<head>即頭部標簽，主要包含文檔的元數據及各類聲明，如字元編碼，圖標，樣式表，腳本等，該元素內容通常不會在頁面中直接顯示，但對文檔的解析及處理非常關鍵；
<body>即主體標簽，負責頁面內容的展示，該元素內的內容便是我們在瀏覽器里所看到的內容
元素：語法概念，由標簽丶內容及屬性組成，以元素為語法單位可以有更直觀的感受。
標簽：主要語法結構，可分為單標簽及雙標簽，<hr>為單標簽，而<a></a>為雙標簽(其中<a>為開始標簽，</a>為結束標簽)。
內容：即雙標簽內的內容，單標簽沒有元素內容(或說沒有直接內容)。
屬性：存在於開始標簽內，以鍵值對的形式存在，布爾值類型的屬性可以省略值，如hidden。
以下，以某元素為例解釋下元素的組成內容：
<a href="http://www.html.com">Hello,World</a>為元素，<a></a> 為標簽; Hello,World 為元素內容，href="http://www.html.com"為元素屬性。
5.標簽
隨著html5的普及，語義化編寫顯得愈來愈重要，從前可以是span+div的格局，或table+font的佈局，如今卻是難以支撐。時代在進步，技術在迭代，身處變革環境里的我們同樣需要緊隨科技的步伐。
從作用來講，語義化有助於盲視者的聽力理解，也利於搜索引擎的爬取，同時也利於日後代碼的維護。踏過html4.01的時代，html 5包含更多語義化的標簽，未來也許還會增加。
