前端簡介

一 web1.0時代的網頁製做

網頁製做是web1.0時代的產物，那個時候的網頁主要是靜態網頁，所謂的靜態網頁就是沒有與用戶進行交互而僅僅供讀者瀏覽的網頁，咱們當時稱爲「牛皮癬」網頁。

例如一篇QQ日誌、一篇博文等展現性文章。在web1.0時代，用戶能作的惟一事情就是瀏覽這個網站的文字圖片內容，這時用戶也不能像如今在大多數網站均可以評論交流（缺少交互性）。

相信可能大多數人都聽過「網頁三劍客 Dreamweaver+Fireworks+Flash」吧，2010這個組合就是web1.0時代額產物，我在2010年之前仍是在使用三劍客作網頁設計的。

二 web2.0時代的前端開發

「前端開發」是從「網頁製做」演變而來的。

從2005年開始，互聯網進入web 2.0時代，由單一的文字和圖片組成的靜態網頁已經不能知足用戶的需求，用戶須要更好的體驗。

在web 2.0時代，網頁有靜態網頁和動態網頁。

所謂動態網頁，就是用戶不只僅能夠瀏覽網頁，還能夠與服務器進行交互。舉個例子，你登錄新浪微博，要輸入帳號密碼，這個時候就須要服務器對你的帳號和密碼進行驗證經過才行。

web2.0時代的網頁不只包含炫麗的動畫、音頻和視頻，還可讓用戶在網頁中進行評論交流、上傳和下載文件等（交互性）。這個時代的網頁，若是是用「網頁三劍客Dreamweaver+Fireworks+Flash」製做的，那是遠遠不能知足需求。

如今網站開發不管是開發難度，仍是開發方式上，都更接近傳統的網站後臺開發，因此如今再也不叫「網頁製做」，而是叫「web前端開發」。

因此，處於web2.0時代的你，若是要學習網站開發技術，就不要再相信所謂的「網頁三劍客Dreamweaver+Fireworks+Flash」，由於這個組合已是上個互聯網時代的產物。並且這個組合開發出來的網站問題也很是多，例如代碼冗餘、網站維護困難（學習到後期，你會知道爲何不用這個組合了。

三 Web前端能作什麼？

公司官網（在PC經過瀏覽器來訪問公司網站）移動端網頁（在手機上來瀏覽公司信息、小遊戲等）移動端APP（例如：淘寶、去哪兒旅遊、攜程等）微信小程序（微信最新推出的功能，隨用隨裝，不佔用手機空間）。前端開發所學技術由簡單到難，因此在不少網站上你會看到「七天入門前端」的視頻博客等等，也就是說一星期就學會了HTML+CSS。最基本的頁面你就能夠書寫了。

四 前端開發都有哪些內容

咱們知道，用所謂的網頁三劍客已經不能知足需求了，那前端開發究竟要學習什麼技術呢？網頁最主要由3部分組成：結構、表現和行爲。網頁如今新的標準是W3C，目前模式是HTML、CSS和JavaScript。

（1）HTML是什麼？

HTML，全稱「Hyper Text Markup Language（超文本標記語言）」，簡單來講，網頁就是用HTML語言製做的。HTML是一門描述性語言，是一門很是容易入門的語言。 

（2）CSS

CSS，全稱「（層疊樣式表）」。之後咱們在別的地方看到「層疊樣式表」、「CSS樣式」，指的就是CSS。

（3）JavaScript

JavaScript是一門腳本語言。

HTML、CSS和JavaScript的區別 咱們都知道前端技術最核心的是HTML、CSS和JavaScript這三種。可是這三者到底是幹嗎的呢？

「HTML是網頁的結構，CSS是網頁的外觀，而JavaScript是頁面的行爲

若是咱們把前端開發的過程比喻成「建房子」，作一個網頁就像蓋一棟房子

一、先把房子結構建好（HTML）

二、建好房子以後給房子裝修（CSS），例如往窗戶安上窗簾、往地板鋪上漂亮的瓷磚

三、最後呢，裝修完了以後，當夜幕降臨的時候，咱們要開燈（JavaScript），這樣才能看得見裏面。

五 Web前端開發環境

市面上有不少的HTML編輯器能夠選擇，常見的Hbuild、Sublime Text、Dreamweare均可以用來開發HTML。 固然PyCharm也支持HTML開發。

一、瀏覽器

瀏覽器在本地也能打開html文件，瀏覽器就跟解釋器同樣，從上倒下，從左到右

全球共有五大瀏覽器廠商，咱們主要以chrome爲主

ie
chrome
firfox
safri
presto
瀏覽器內核不一樣，瀏覽器渲染引擎不一樣（後期考慮兼容性問題），其餘瀏覽器都是使用這5款瀏覽器內核 

二、瀏覽器歷史：

世界最先瀏覽器，網景瀏覽器（Netscape ）
後來它想作操做系統，動了微軟的奶酪，微軟就想弄死他，
微軟作的也特別的絕情，微軟利用windows操做系統的市場佔有率，提供了免費瀏覽器ie,並且windows
操做系統裏還必須有

中國最先瀏覽器ie6，國企內就用ie6，

瀏覽器不一樣，解析的標籤標準不一樣，微軟太霸道，就不改標準，堅持不更新，後來谷歌和火狐搶佔了市場，IE就傻逼了，目前也只有傻逼才用IE。。。

市場愈加地混亂，因而w3c（萬維網聯盟（World Wide Web Consortium，W3C））成立，用來制定你們的統一標準

須知：學前端一半工做在考慮兼容性，目前html5在兼容性方面解決的比較好

三、文件後綴名規範

.htm和.html擴展名的區別

#一、DOS系統（win95或win98）下只能支持長度爲3的後綴名，因此老版本的系統一直在用.htm後綴

#二、但在windows後綴長度能夠大於3位，因此windows下無所謂htm與html，html是爲長文件的格式命名的

#三、若是文件後綴是.htm，毫無疑問，瀏覽器也能夠兼容，但推薦使用.html

六 HTML簡介

用戶使用瀏覽器打開網頁看到結果的過程就是：瀏覽器將服務端的文本文件(即網頁文件)內容下載到本地，而後打開顯示的過程。

而文本文件的文檔結構只有空格和換行兩種組織方式，如此，文本文件在打開顯示時，顯示的效果將會很是很是很是的單一，

爲了讓顯示的效果不那麼單調，咱們會偏向使用word一類的文本編輯工具來編排文本內容，編排的原理就是：在編輯文件時會選中各部份內容，而後爲內容打上不一樣的標記，好比什麼是標題，什麼是段落，而後存放硬盤裏，等下次打開時，word會識別以前的標記，而後按照預先編排好的結果顯示出來

站在顯示文本內容的角度去看，瀏覽器與word的原理同樣，咱們能夠將瀏覽器當成一個網頁版的只讀word，瀏覽器也必須有一套本身能識別的標記文本的規範，該規範被稱爲HTML,HTML全稱是超文本標記語言（HyperText Markup Language）
「超文本」指的是用超連接的方法，將各類不一樣空間的文字信息組織在一塊兒的網狀文本
「標記」指的是在編輯文本時用特殊的記號標記一下各部份內容的意義，該記號稱之爲標籤，好比用標籤h1標記標題，用標籤p標籤段落，如此咱們標記一首唐詩就成了以下格式：

<h1>臥石綠</h1>
<p>臥石一支綠</p>
<p>沃枝回芳脾</p>
<p>魚吻臥石水</p>
<p>臥石答春綠</p>

因此咱們學習HTML就是在學習一系列的標籤

HTML注意事項!!!

#一、記號/標籤是不會顯示出來的。

#二、雖然用<h1>標記的文本在顯示時會被加大加粗，但請務必記住，HTML的做用只有一個它是專門用來對文件作記號來標識其語義的（語義指的是該文本是作什麼用的），加大和加粗這種爲文本添加樣式的操做並非HTML擅長的，雖然早期的時候確實也用HTML來製做樣式，但之後咱們專門用CSS來作這件事，這也是一種解耦合的思想

#三、HTML是一個網頁的主體部分，也是一個網頁的基礎。由於一個網頁能夠沒有樣式，能夠沒有交互，可是必需要有網頁須要呈現的內容。因此HTML部分是整個前端的基礎。

七 HTML發展史

超文本標記語言（初版）：在1993年6月做爲互聯網工程工做小組（IETF）工做草案發布（並不是標準），後來陸續由w3c制定標準

IETF簡介

• IETF是英文Internet Engineering Task Force的縮寫, 翻譯過來就是"互聯網工程任務組"
• IETF負責定義並管理因特網技術的全部方面。包括用於數據傳輸的IP協議、讓域名與IP地址匹配的域名系統（DNS）、用於發送郵件的簡單郵件傳輸協議（SMTP）等

W3C簡介

• W3C是英文World Wide Web Consortium的縮寫， 翻譯過來就是W3C理事會或萬維網聯盟, W3C是全球互聯網最具權威的技術標準化組織.
• W3C於1994年10月在麻省理工學院計算機科學實驗室成立。建立者是萬維網的發明者Tim Berners-Lee
• W3C負責web方面標準的制定，像HTML、XHTML、CSS、XML的標準就是由W3C來定製的。

在HTML的早期發展中，大部分標準都是所謂的retro-spec，即先有實現後有標準。在這種狀況下，HTML標準不是很規範，瀏覽器也對HTML頁面中的錯誤至關寬容。這反過來又致使了HTML開發者寫出了大量含有錯誤的HTML頁面

html語言自己有一些缺陷（例如： 內容和形式不能分離；標籤單一；數據不能複用等等），隨着xml的興起人們但願xml來彌補html的不足，可是目前有成千上萬的網頁都是用html編寫的，因此徹底使用xml來替代html還爲時過早，因而W3C在2000年推出了xhtml1.0， 創建xhtml的目的就是實現從html向xml的過分

爲了規範HTML，W3C結合XML制定了XHTML 1.0標準，這個標準沒有增長任何新的標籤，只是按照XML的要求來規範HTML，並定義了一個新的MIME type application/xhtml+xml。W3C的初衷是要求瀏覽器對這個MIME type實行強錯誤檢查，若是頁面有HTML錯誤，就要顯示錯誤信息。可是因爲已有的web頁面中已經有了大量的錯誤，不少開發者拒絕使用新的MIME type。W3C不得已，在XHTML 1.0的標準以後增長了一個附錄C，容許開發者使用XHTML語法來寫頁面，同時使用舊的MIME type，application/html，來分發頁面

W3C隨後在XHTML 1.1中取消了附錄C，即便用XHTML 1.1標準的頁面必須用新的MIME type來分發。因而這個標準並無不少人採用

有了XHTML的教訓，W3C在制定下一代HTML標準時（HTML5），就將向後兼容做爲了一個很重要的原則。HTML5確實引入了許多新的特性，可是它最重要的一個特性是，不會break已有的網頁。你能夠將任何已有的網頁的第一行改爲<!DOCTYPE html>，它就成也一個HTML5頁面，而且能夠照樣在瀏覽器里正常的展現。

簡而言之
一、HTML語法很是寬鬆容錯性強;
二、XHTML更爲嚴格,它要求標籤必須小寫、必須嚴格閉合、標籤中的屬性必須使用引號引發等等;
三、HTML5是HTML的下一個版本因此除了很是寬鬆容錯性強之外,還增長許多新的特性