一章 Web前端技術簡介

本章學習目標

• 了解Web前端技術和相關行業信息
• 了解Web前端開發工具
• 理解HTML基本原理

互聯網中的網頁大多數都是使用HTML格式展示到瀏覽者面前，因此，HTML是目前最流行的網頁制作語言。為了使網頁具有更好的擴展性和用戶體驗，CSS樣式表在網頁設計中有著重要的地位。在學習HTML和CSS之前，需要了解一些基本的互聯網相關知識，本章將從Web前端概述、Web前端開發工具和HTML入門基本知識開始，帶領讀者進行Web開發之旅。

1.1 Web前端概述

Web前端即指大家平常上網瀏覽的網頁，如上網瀏覽新聞、查詢快遞信息、淘寶購物等都是在瀏覽網頁。但網頁制作還需要了解與網頁相關的基本概念，下面將對Web前端的相關概念進行詳細講解。

1.1.1 初識Web前端

1991年8月6日，來自歐洲核子研究中心的科學家Tim Berners-Lee，啟動了世界上第一個可以正式訪問的網站（http: //info. cern. ch/），從此人類宣布了互聯網時代的到來。隨著互聯網的飛速發展，網站開發人員也變得熾手可熱，供不應求。據不完全統計截止2016年底，網站開發人員超過2000萬+。

Web前端開發是從網頁演變而來，名稱上有明顯的時代特征。隨著人們對用戶體驗的要求越來越高，前端開發的技術難度越來越大，Web前端開發這個職業也從設計和制作不分的局面中獨立出來。

早期的前端其實就是Table布局，后來發展到DIV+CSS網站重構，再到JS逐漸成為web前端開發的語言及web2.0的出現，涌現出相應的產品，如SNS、博客、微博等。人們對網頁的需求不斷增大，Web前端技術也正加速發展。

Web開發職位可分為網頁設計師（UI設計師）、Web前端開發工程師、Web后端工程師、數據庫工程師。下面來了解一下這四大職位的分工：

• 首先由UI設計師根據產品的需求做出網站效果圖，然后交付給Web前端工程師進行圖片切割和網頁制作。
• 數據庫工程師負責把網站數據進行存儲和優化處理。
• Web后端工程師負責把網站數據進行增刪改查等邏輯處理，并將操作的數據返給Web前端工程師進行數據的交互與顯示。

Web前端工程師能充分理解項目需求和設計需求，并與UI設計師、Web后端工程師緊密合作，產出高質量的網站展示層，為用戶呈現最好的界面交互體驗。

有一句話非常形象的形容了Web前端工程師的特點，“它是游走在二次元與二進制之間的魔法師!”。

1.1.1 Web前端三大核心技術

首先來了解下W3C組織，即萬維網聯盟，創建于1994年，是Web技術領域最具權威和影響力的國際中立性技術標準機構。W3C專門負責制定網頁相關的標準，所以Web前端相關技術都是基于W3C標準實現的。

下面來介紹下Web前端開發所包括的三大核心技術，即HTML語言、CSS語言、JavaScript語言。

1.HTML語言

HTML全稱“Hyper Text Markup Language”，中文解釋為“超文本標記語言”，它是制作網頁的標準語言?！俺谋尽本褪侵疙撁鎯瓤梢园瑘D片、鏈接，甚至音樂、程序等非文字元素。超文本標記語言的結構包括“頭”部分（Head）、和“主體”部分（Body），其中“頭”部提供關于網頁的信息，“主體”部分提供網頁的具體內容。

2. CSS語言

CSS全稱“Cascading Style Sheet”，中文解釋為“層疊樣式表”，它是一種用來表現HTML或XML等文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。CSS 能夠對網頁中元素位置的排版進行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網頁對象和模型樣式編輯的能力。

3. JavaScript語言

JavaScript是一種屬于網絡的腳本語言，已經被廣泛用于Web應用開發，常用來為網頁添加各式各樣的動態功能，為用戶提供更流暢美觀的瀏覽效果。它的解釋器被稱為JavaScript引擎，屬于瀏覽器的一部分，因此JavaScript代碼由瀏覽器邊解釋邊執行。 通常JavaScript腳本通過嵌入在HTML中來實現自身的功能。

Web前端三大核心技術就像板凳的三條腿，缺一不可。用圖片來表示三者之間的聯系，如圖1.2所示。

W3C組織規定，web標準需要將網頁的結構、樣式和行為三者進行分離。HTML +CSS+Javascript本質上構成一個MVC框架，即HTML用來描述網頁的結構（Model）、CSS用來描述網頁的結構（View）、Javascript用來描述網頁的行為即調度數據和實現某種展現邏輯（Controller）。本書主要講解HTML+CSS。

用一個蓋房子的例子來描述下三者之間的關系，首先需要把房子的地基和骨架搭建好，有一個良好的結構（HTML）。然后給房子刷上油漆和添加窗戶，對房子樣式進行美化（CSS）。最后給房子添加電梯和地暖，與住戶進行一些行為上的交互（JavaScript），這樣房子才算搭建完畢。下面來看一下在web前端中，三者的體現效果如圖1.3、1.4和1.5所示。

1.2 Web前端開發工具

俗話說得好，工欲善其事必先利其器。所以在HTML+CSS開發過程中，需要先來選擇適合的相關開發工具。HTML+CSS開發過程中主要涉及到三大類工具：瀏覽器、網頁編輯器、切圖軟件，本節就來介紹這三大類工具。

1.2.1 瀏覽器

瀏覽器是網頁的運行平臺，即可以把HTML文件展示在網頁中，供用戶可上網進行瀏覽的一種軟件。目前主流的瀏覽器有IE、Chrome、Firefox、Safari、Opera等，如圖1.6所示，由于某些因素，這些瀏覽器不能完全采用統一的Web標準，或者說不同的瀏覽器對同一個CSS樣式有不用的解析。這就導致了同樣的頁面在不同的瀏覽器下顯示效果可能不同。

不同用戶使用的瀏覽器可能不同，因此制作網頁時，需要保證該網頁兼容所有的主流瀏覽器。關于網頁制作中的兼容性問題及解決方案，會在后面的章節進行講解。下面介紹幾種主流的瀏覽器。

1. IE瀏覽器

IE是Internet Explorer簡稱，它是微軟公司推出的一款網頁瀏覽器，采用Trident內核實現，有6.0、7.0、8.0、9.0、10.0、11.0等版本。在IE7以前，中文直譯為“網探路者，但在IE7以后官方便直接俗稱"IE瀏覽器"。由于一些用戶仍然在使用低版本的瀏覽器，所以在制作網頁時，一般也需要兼容低版本的瀏覽器。一些其他的瀏覽器都是基于IE內核的，如360安全瀏覽器、搜狗瀏覽器等，只要兼容IE瀏覽器，這些基于IE內核的瀏覽器也都兼容。

2. Chrome瀏覽器

Chrome瀏覽器一般指Google Chrome，Google Chrome是一款由Google公司開發的一款設計簡單、高效的Web瀏覽器，采用V8引擎，可快速運行復雜的大型網站，從而降低瀏覽者訪問的等待時長。該瀏覽器基于其他開源軟件撰寫，采用Webkit、Blink內核實現，目標是提升穩定性、速度和安全性，并創造出簡單且有效率的使用者界面。本書運行環境采用Chrome瀏覽器，版本為 54.0.2840.5，如圖1.7所示。

3. Firefox瀏覽器

Firefox瀏覽器一般指Mozilla Firefox，中文俗稱“火狐”，是Mozilla公司出品的一款自由及開放源代碼Web瀏覽器，采用Gecko內核實現，支持多種操作系統，如Windows、Mac OS X及GNU/Linux等。

4. Safari瀏覽器

Safari是蘋果公司出品用于蘋果計算機的操作系統Mac OS X中的瀏覽器，采用Webkit內核實現，使用了KDE的KHTML作為瀏覽器的運算核心。無論在 Mac、PC 或 iPod touch 上運行，Safari 都可提供極致愉悅的網絡體驗方式，更不斷地改寫瀏覽器的定義。

5. Opera瀏覽器

Opera瀏覽器，是一款挪威Opera Software ASA公司制作的支持多頁面標簽式瀏覽的Web瀏覽器，采用Presto內核實現，它是跨平臺瀏覽器可以在Windows、Mac和Linux三個操作系統平臺上運行。

注：瀏覽器內核負責對網頁語法進行解釋（如標準通用標記語言下的一個應用HTML、JavaScript）并渲染（顯示）網頁。 所以，通常所謂的瀏覽器內核也就是瀏覽器所采用的渲染引擎，渲染引擎決定了瀏覽器如何顯示網頁的內容以及頁面的格式信息。

1.2.2 網頁編輯器

網頁編輯器是書寫HTML、CSS等代碼的工具軟件。一般常用的網頁編輯器有Dreamweaver、Sublime Text、WebStorm、Hbulider等，如圖1.8所示為常用的網頁編輯器的圖標。本教材采用Dreamweaver網頁編輯器 版本為CS6。Dreamweaver簡稱“DW”，具備完美的代碼提示功能和強大的輔助操作，因此它非常容易上手，是一款適合初學者學習和使用的網頁編輯器。

接下來講解如何使用Dreamweaver網頁編輯器進行網頁編程，軟件的安裝不再介紹，直接講解軟件安裝后如何使用。

運行DW軟件，進入軟件界面， 選擇菜單欄中【文件】→【新建】，打開新建文檔窗口，在【文檔類型】下拉列表中選擇HTML5，單擊【創建】按鈕，如圖1.9所示，即可創建一個空白的HTML文檔，如圖1.10所示。

為了讓初學者更好的使用DW工具，需要對DW進行一些初始化的設置，具體如下：

a) 工作區布局設置

運行DW軟件，進入軟件界面，將布局設置成統一的模式，選擇菜單欄中選擇【窗口】→【工作區布局(w)】→【經典】，如圖1.11。

2. 必備面板

設置經典模式后，需要調出三個常用的面板，分別選擇菜單欄【窗口】菜單下的【插入】、【屬性】、【文件】3個命令，如圖1.12所示。

3. 新建默認文檔設置

選擇菜單欄中【編輯】→【首選參數】（Ctrl+U），選中左側【分類】中的【新建文檔】，右邊就會出現相應的設置，選擇最常用的HTML文檔類型和編碼類型，本書設置為HTML5，如圖1.13所示。

新建文檔的首選參數設置后，新建HTML文檔時，DW就會按照默認文檔設置直接生成所需的代碼。

4. 瀏覽器設置

初學者計算機必備IE瀏覽器和Chrome瀏覽器，建議講DW的默認預覽瀏覽器設置為“Chrome瀏覽器”，快捷鍵F12是使用主瀏覽器預覽網頁，一般把IE瀏覽器設為次瀏覽器，快捷鍵Ctrl+F12，如圖1.14所示。

5. 代碼提示

為了加快寫代碼的速度，會用到代碼提示，DW中就有強大的代碼提示的功能，只需在【首選參數】對話框中設置代碼提示，選擇【代碼提示】選項，然后選中【結束標簽】選項中的第二項，單擊【確定】按鈕即可，如圖1.15所示。

1.2.3 切圖軟件

切圖軟件是對UI設計師設計出的效果圖進行切圖操作，也可以對網頁中涉及到的圖片進行修改等處理。常用的切圖軟件有Photoshop和Fireworks兩種。如圖1.16為常用切圖軟件的圖標，本教材采用Photoshop進行切圖，版本為CS5。Photoshop簡稱“PS”，它是一款專業性很強的圖片處理軟件，在第九章中將詳細的來學習如何利用Photoshop進行網頁的切圖操作。

1.3 HTML入門

1.3.1 什么是HTML

HTML的英語意思是：Hypertext Markup Language，即超文本標記語言,是一種用來制作超文本文檔的簡單標記語言。接下來將帶領讀者從語言、超文本、標記三部分進行理解HTML。

1．語言

HTML一種編程語言，有指定的語法規則。超文本傳輸協議規定了瀏覽器在運行 HTML 文檔時所遵循的規則和進行的操作。協議的制定使瀏覽器在運行超文本時有了統一的規則和標準。用HTML編寫的超文本文檔稱為HTML文檔，它能獨立于各種操作系統平臺，自1990年以來HTML就一直被用作WWW（是World Wide Web的縮寫，也可簡寫WEB、中文叫做萬維網) 的信息表示語言，使用HTML語言描述的文件，需要通過WEB瀏覽器HTTP顯示出效果。

2. 超文本

所謂超文本，是因為它可以加入圖片、聲音、動畫、影視等內容，事實上每一個HTML文檔都是一種靜態的網頁文件，這個文件里面包含了HTML指令代碼，這些指令代碼并不是一種程序語言，它只是一種排版網頁中資料顯示位置的標記結構語言，易學易懂，非常簡單。

HTML的普遍應用就是通過單擊鼠標從一個主題跳轉到另一個主題，從一個頁面跳轉到另一個頁面與世界各地主機的文件鏈接。直接獲取相關的主題。如下所示：

通過HTML可以通過圖片格式和文字格式的設計實現出豐富多彩的風格：

<IMG SRC="文件名"> 
<FONT SIZE="+5 " COLOR="#00FFFF">文字</FONT> 

通過HTML可以實現頁面之間的跳轉：

〈A HREF="文件路徑/文件名"></A> 

通過HTML可以展現多媒體的效果：

<EMBED SRC="音樂地址" AUTOSTART=true> 
<EMBED SRC="視頻地址" AUTOSTART=true> 

從上面我們可以看到HTML超文本文件時需要用到的一些標簽。

3. 標記

對于剛剛接觸超文本的讀者，可能不能理解一些用“<”和 “>”括起來的句子，它們稱為標記，也稱標簽，是用來劃分網頁的元素，以形成文本的布局、文字的格式及五彩繽紛的畫面。標簽通過指定某塊信息為段落或標題等來標識文檔某個部件。

在HTML中每個用來作標簽的符號都是一條命令、它告訴瀏覽器如何顯示文本。這些標簽均由"<"和">"符號以及一個字符串組成。如<head>、 <body>等。而瀏覽器的功能是對這些標記進行解釋，顯示出文字、圖像、動畫、播放聲音。這些標簽符號用“<標簽名字 屬性>”來表示。標簽分為單標簽和雙標簽兩大類，具體介紹如下：

• 單標簽指的是只存在一個標簽的寫法，如<meta>、<input>等。
• 雙標簽指的是存在一對標簽的寫法，如<head></head>、<body></body>等。注意在雙標簽中第一個標簽叫做起始標簽，第二個標簽叫做結束標簽，結束標簽需要在左尖括號后添加一個關閉符“/”。

HTML只是一個純文本文件。創建一個HTML文檔，需要HTML編輯器和WEB瀏覽器兩個工具。HTML編輯器是用于生成和保存HTML文檔的應用程序。WEB瀏覽器是用來打開WEB網頁文件，提供給我們查看WEB資源的客戶端程序。

1.3.2 HTML基本結構

HTML文檔是由一系列的元素和標簽組成。元素名不區分大小寫，HTML用標簽來規定元素的屬性和它在文件中的位置，HTML文檔分為頭部和主體兩部分，在文檔頭部對文檔進行一些必要的定義，主體部分是文檔要顯示的信息。其基本結構如例1-1所示。

1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 	 <meta charset="utf-8">
5 	 <title>標題</title>
6 </head>
7 <body>
8 	 內容
9 </body>
10 </html>

運行結果如圖1.17所示。

一個HTML文檔基本結構主要由文檔聲明（<!DOCTYPE HTML>）、HTML文檔（<html>）、文檔頭部（<head>）和文檔主體（<body>）四部分組成。接下來具體介紹這四個部分的內容。

1. 文檔聲明

<!DOCTYPE>聲明必須是 HTML 文檔的第一行，位于 <html> 標簽之前。<!DOCTYPE> 聲明不是 HTML 標簽，它用于向瀏覽器說明當前文檔屬于哪種HTML或XHTML標準規范。必須在開頭處使用<!DOCTYPE>為所有的XHTML文檔指定XHTML版本和類型，這樣瀏覽器才能將網頁作為有效的XHTML文檔，并按照指定文檔類型進行解析。

<!DOCTYPE>聲明與瀏覽器的兼容性相關，如果沒有<!DOCTYPE>，就由瀏覽器決定如何展示HTML頁面，這時，不同的瀏覽器可能有多種顯示效果，這樣是不允許的。

2. HTML文檔

<html>標簽位于<!DOCTYPE>聲明之后，作用相當于在告知瀏覽器這是一個HTML文檔，<html></html>標簽限定了文檔的開始點和結束點，其中<html>表示網頁的開始，</html>表示網頁結束，網頁需要展示的所有內容都應該寫到<html></html>標簽的內部，<html>標簽也被稱為根標簽，指最外層的意思。

3. 文檔的頭部

<head></head>用于定義HTML文檔頭部信息，如圖1.17中的標題，也稱頭部標簽，在<html>標簽之后，用來封裝其他位于文檔頭部的標簽，如表1.1中的標簽。一個HTML文檔只能有一對<head></head>標簽，絕大多數文檔頭部包含的數據都不會真正作為內容顯示在頁面中。

上例中<meta charset="utf-8">指定網頁的編碼方式為utf-8。utf-8是一種網頁編碼規范，可以統一頁面顯示中文簡體繁體及其他語言（如英文，日文，韓文），這樣網頁就不會出現亂碼的情況。它屬于國際通用編碼方式。

4. 文檔的主體

<body></body>包含文檔要展示的所有內容，也稱主體標簽，網頁中顯示的文本、超鏈接、圖像、表格和列表等信息都必須在<body>內，如圖1.17中的內容，就是<body>內的信息，<body>中的內容是最終展示給用戶的。

HTML語言是不區分大小寫的，但建議文檔聲明采用大寫方式，其他部分都采用小寫方式。

1.3.3 運行第一個HTML程序

（1）新建一個空白HTML文檔，點擊“代碼”按鈕，默認為HTML基本結構。如圖1.18所示。

（2）修改<title>和<body>中的內容，按下Ctrl + S快捷鍵，進行文件的保存，文件后綴名為.html格式。如圖1.19所示。

（3）點擊“在瀏覽器中預覽/調試”按鈕，選擇chrome.exe瀏覽器進行預覽。或者通過雙擊.html文件進行預覽。如圖1.20所示。

到此本教材的第一個網頁就運行成功了，可以試著改變<title>和<body>中的內容。然后重新保存頁面并刷新瀏覽器進行預覽。

1.3.4 HTML注釋

在編寫HTML代碼時，經常要在一些關鍵代碼旁做一下注釋，這樣做的好處很多，如：方便理解代碼、方便查找相關代碼或是方便項目組里的其他程序員來了解你所寫的代碼，還可以方便自己以后對代碼的理解和修改。語法格式如下：

	<!--注釋的內容-->

“<!--”表示注釋的開始，“-->”表示注釋的結束。DW中自帶添加注釋功能，如圖1.21所示，也可手動添加注釋。

1.3.5 HTML屬性

使用HTML制作網頁時，如果想讓網頁的內容更豐富，如設置顯示文字的顏色為彩色，大小為30。此時如果僅僅使用HTML標簽默認顯示樣式已經不能滿足需求，就需要對HTML標簽的屬性加以設置，大多數標簽都有自己的一些屬性, 屬性要寫在始標簽內，屬性用于進一步改變顯示的效果, 各屬性之間無先后次序，可以省略而采用默認值;其語法格式如下：

<標簽名字 屬性1 屬性2 屬性3 … >內容</標簽名字> 

在語法格式中，標簽可以有多個屬性，必須寫在開始標簽中，位于標簽名之后。屬性與標簽之前需要一個空格隔開，多個屬性之間也用空格隔開。

作為一般的原則，大多數屬性值不用加雙引號。但是包括空格、“％”，“＃”等特殊字符的屬性值必須加入雙引號。為了好的習慣，提倡全部對屬性值加雙引號。如：

	<font color="#ff00ff" face="宋體" size="30">字體設置</font> 

注意：一定不要在“<”與標簽名之間輸入多余的空格，也不能在中文狀態下輸入這些標簽及屬性，否則瀏覽器不能正確的識別括號中的標志命令，從而無法正確的顯示信息。后面還會學習到更多其他的HTML屬性，這里讀者只要記住HTML屬性的基本格式就好。

1.4 本章小結

通過本章的學習，初步了解了Web前端技術和相關行業信息。學習到Web前端開發工具的使用，而且還運行了第一個HTML語言的網頁程序。本章中需要理解什么是HTML語言，HTML語言的基本格式，HTML語言的屬性設置等相關知識點。在下一章節中，將進一步來學習HTML這門語言。

1.5 習題

a) 填空題

(1) Web前端開發所包括的三大核心技術包含 、 、JavaScript語言。

(2) 超文本標記語言指的是 。

(3) HTML文檔包括 和 兩部分。

(4) HTML多個屬性之間分隔用 。

(5) 用于向瀏覽器說明當前文檔屬于哪種HTML或XHTML標準規范。

b) 選擇題

(1) 下列選項中，不屬于網站開發四大職位的是（ ）。

A．web前端開發工程師 B．數據庫開發工程師

C．測試開發工程師D．web后端開發工程師

(2) 下面哪個不屬于HTML基本結構（ ）。

A．<meta>B．<head>

C．<body>D．<html>

(3) 下面哪個不屬于五大瀏覽器（ ）。

A．Firefox瀏覽器B．Chrome瀏覽器

C．Safari瀏覽器D．360瀏覽器

(4) 下面哪個標簽限定了文檔的開始點和結束點（ ）。

A．<! DOCTYPE >B．<html>

C．<head>D．<body>

(5) 下面用來定義文檔標題的標簽是（ ）。

A．<style>B．<link>

C．<script>D．<title>

c) 思考題

(1) 請簡述什么是超文本標記語言？

(2) 請簡述HTML、CSS、JS三者的關系及職能劃分？

觀看視頻+：782542147

內容來源書籍：《HTML5從入門到精通》，一本Web前端實用性綜合技術圖書。

簡介：《HTML5從入門到精通》倡導“快樂學習，實戰就業”的理念，作為初學者高品質的入門教材之一，免費提供一站式教學服務包，附贈配套PPT、教學視頻、教學大綱、考試系統、測試題等資源。且書本內容覆蓋全面、講解詳細，其中包括標簽語義化、標簽使用規范、選擇器類型、盒模型、標簽分類、樣式重置、CSS優化、Photoshop切圖處理、整頁制作、CSS3新樣式、HTML5新功能等。與此同時，本教材通過總結、歸納HTML、CSS、CSS3動畫與3D及移動端布局與響應式開發等核心知識點，并從項目開發的實際需求入手，將理論知識與實際應用相結合，以此幫助初學者全面、系統、深入、透徹地理解HTML5的基礎知識和技術，使他們快速地成長為初級程序員，并擁有一定的項目開發經驗，從而在職場中擁有一個較高的起點。

TML 實例：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>數據微學院</title>

</head>

<body>

<h1>我的第一個標題</h1>

<p>我的第一個段落。</p>

</body>

</html>

實例解析：

DOCTYPE------聲明了文檔的類型

<html>------ 標簽是HTML頁面的根元素，該標簽的結束標簽為 </html>

<head>------標簽包含了文檔的元（meta）數據，如<meta charset="utf-8">定義網頁編碼格式為utf-8。

<title>------標簽定義文檔的標題

<body>------ 標簽定義文檔的主體，即網頁可見的頁面內容，該標簽的結束標簽為 </body>

<h1>------ 標簽作為一個標題使用，該標簽的結束標簽為 </h1>

<p>------ 標簽作為一個段落顯示，該標簽的結束標簽為 </p>

<!DOCTYPE html>------ 在 HTML5 中也是描述了文檔類型。

什么是HTML?

HTML 是用來描述網頁的一種語言。

HTML 指的是超文本標記語言: HyperText Markup Language

HTML 不是一種編程語言，而是一種標記語言

標記語言是一套標記標簽 (markup tag)

HTML 使用標記標簽來描述網頁

HTML 文檔包含了HTML 標簽及文本內容

HTML文檔也叫做 web 頁面

HTML 標簽

HTML 標記標簽通常被稱為 HTML 標簽 (HTML tag)。

HTML 標簽是由尖括號包圍的關鍵詞，比如 <html>

HTML 標簽通常是成對出現的，比如 <b> 和 </b>

標簽對中的第一個標簽是開始標簽，第二個標簽是結束標簽

開始和結束標簽也被稱為開放標簽和閉合標簽

HTML 文檔 = 網頁

HTML 文檔描述網頁

HTML 文檔包含 HTML 標簽和純文本

HTML 文檔也被稱為網頁

Web 瀏覽器的作用是讀取 HTML 文檔，并以網頁的形式顯示出它們。瀏覽器不會顯示 HTML 標簽，而是使用標簽來解釋頁面的內容：

<html>

<body>

<h1>我的第一個標題</h1>

<p>我的第一個段落。</p>

</body>

</html>

例子解釋：

<html> 與 </html> 之間的文本描述網頁

<body> 與 </body> 之間的文本是可見的頁面內容

<h1> 與 </h1> 之間的文本被顯示為標題

<p> 與 </p> 之間的文本被顯示為段落

【小提示】tips:本文由數據微學院作者原創，轉載請注明來源或聯系作者。更多優秀參考好文請關注【數據微學院】個人圖書館。

eb前端工程師

Web前端開發工程師，主要職責是利用(X)HTML/CSS/JavaScript/Flash等各種Web技術進行客戶端產品的開發。完成客戶端程序(也就是瀏覽器端)的開發，開發JavaScript以及Flash模塊，同時結合后臺開發技術模擬整體效果，進行豐富互聯網的Web開發，致力于通過技術改善用戶體驗。

Web前端開發工程師，除了主要職責外，還要為網站上提供的產品和服務實現一流的Web界面，優化

代碼并保持良好兼容性

Web前端表現層及與前后端交互的架構設計和開發

配合后臺開發人員實現產品界面和功能

利用各種Web技術模擬開發產品原型

Web新技術調研和資訊整理

精通HTML/XHTML、CSS，熟悉頁面架構和布局，對Web標準和標簽語義化有深入理解

熟悉Ajax、JavaScript(或者ActionScript)、DOM等前端技術，掌握面向對象編程思想

對常用的一些JS框架了解，如jQuery、YUI等。

掌握最基本的JavaScript計算方法編寫。

對目前互聯網流行的網頁制作方法(Web2.0)HTML+CSS，以及各大瀏覽器兼容性有很大的了解。

對前沿技術(HTML5+CSS3)的基本掌握。

還要對IT其他編程語言有所了解如:PHP，Java，.net!有一些公司還要求懂一點SEO優化!

發展趨勢

隨著“互聯網+”概念的普及，和移動互聯網技術的成熟，越來越多的公司，需要更加智能、高效、合理、人性化的交互，對web前端的需求也會越來越大，同時由于web前端的技術框架種類繁多，更新也非?？?，這樣也需要大量的前端人員進行自己的技能提升。

值得注意的是，在招聘網站上發現，大部分公司所招的web前端開發的人才中，超過50%的崗位需要1-3年的工作經驗。

許多企業的HR都認為“公司畢竟不是IBM，培養技術人才還是交給其他公司吧，我們就算建立移動中心，也會招有幾年工作經驗的?！?/p>

他們還強調，“我們寧可高薪招人，也不會想自己培養相關的技術人才?！?/p>

HTML5

萬維網的核心語言、標準通用標記語言下的一個應用超文本標記語言(HTML)的第五次重大修改(這是一項推薦標準、外語原文:W3C Recommendation、見本處參考資料原文內容:)。

2014年10月29日，萬維網聯盟宣布，經過接近8年的艱苦努力，該標準規范終于制定完成。

簡介：

HTML標準自1999年12月發布的HTML4.01后，后繼的HTML5和其它標準被束之高閣，為了推動Web標準化運動的發展，一些公司聯合起來，成立了一個叫做 Web Hypertext Application Technology Working Group （Web超文本應用技術工作組 -WHATWG） 的組織。WHATWG 致力于 Web 表單和應用程序，而W3C（World Wide Web Consortium，萬維網聯盟） 專注于XHTML2.0。在 2006 年，雙方決定進行合作，來創建一個新版本的 HTML。

HTML5草案的前身名為 Web Applications 1.0，于2004年被WHATWG提出，于2007年被W3C接納，并成立了新的 HTML 工作團隊。

HTML 5 的第一份正式草案已于2008年1月22日公布。HTML5 仍處于完善之中。然而，大部分現代瀏覽器已經具備了某些 HTML5 支持。

2012年12月17日，萬維網聯盟（W3C）正式宣布凝結了大量網絡工作者心血的HTML5規范已經正式定稿。根據W3C的發言稿稱：“HTML5是開放的Web網絡平臺的奠基石?！?/p>

2013年5月6日， HTML 5.1 正式草案公布。該規范定義了第五次重大版本，第一次要修訂萬維網的核心語言：超文本標記語言（HTML）。在這個版本中，新功能不斷推出，以幫助Web應用程序的作者，努力提高新元素互操作性。

本次草案的發布，從2012年12月27日至今，進行了多達近百項的修改，包括HTML和XHTML的標簽，相關的API、Canvas等，同時HTML5的圖像img標簽及svg也進行了改進，性能得到進一步提升。

支持Html5的瀏覽器包括Firefox（火狐瀏覽器），IE9及其更高版本，Chrome（谷歌瀏覽器），Safari，Opera等；國內的傲游瀏覽器（Maxthon），以及基于IE或Chromium（Chrome的工程版或稱實驗版）所推出的360瀏覽器、搜狗瀏覽器、QQ瀏覽器、獵豹瀏覽器等國產瀏覽器同樣具備支持HTML5的能力。

特性：

語義特性（Class：Semantic）

HTML5賦予網頁更好的意義和結構。更加豐富的標簽將隨著對RDFa的，微數據與微格式等方面的支持，構建對程序、對用戶都更有價值的數據驅動的Web。

本地存儲特性（Class: OFFLINE STORAGE）

基于HTML5開發的網頁APP擁有更短的啟動時間，更快的聯網速度，這些全得益于HTML5 APP Cache，以及本地存儲功能。Indexed DB（html5本地存儲最重要的技術之一）和API說明文檔。

設備兼容特性 (Class: DEVICE ACCESS)

從Geolocation功能的API文檔公開以來，HTML5為網頁應用開發者們提供了更多功能上的優化選擇，帶來了更多體驗功能的優勢。HTML5提供了前所未有的數據與應用接入開放接口。使外部應用可以直接與瀏覽器內部的數據直接相連，例如視頻影音可直接與microphones及攝像頭相聯。

連接特性（Class: CONNECTIVITY）

更有效的連接工作效率，使得基于頁面的實時聊天，更快速的網頁游戲體驗，更優化的在線交流得到了實現。HTML5擁有更有效的服務器推送技術，Server-Sent Event和WebSockets就是其中的兩個特性，這兩個特性能夠幫助我們實現服務器將數據“推送”到客戶端的功能。

網頁多媒體特性(Class: MULTIMEDIA)

支持網頁端的Audio、Video等多媒體功能， 與網站自帶的APPS，攝像頭，影音功能相得益彰。

三維、圖形及特效特性（Class: 3D, Graphics Effects）

基于SVG、Canvas、WebGL及CSS3的3D功能，用戶會驚嘆于在瀏覽器中，所呈現的驚人視覺效果。

性能與集成特性（Class: Performance Integration）

沒有用戶會永遠等待你的Loading——HTML5會通過XMLHttpRequest2等技術，幫助您的Web應用和網站在多樣化的環境中更快速的工作。

CSS3特性(Class: CSS3)

在不犧牲性能和語義結構的前提下，CSS3中提供了更多的風格和更強的效果。此外，較之以前的Web排版，Web的開放字體格式（WOFF）也提供了更高的靈活性和控制性。

發展趨勢

HTML5規范開發完成時，將成為主流。

據統計2013年全球將有10億手機瀏覽器支持HTML5，同時HTML Web開發者數量將達到200萬。毫無疑問，HTML5將成為未來5-10年內，移動互聯網領域的主宰者。

據IDC的調查報告統計，截至2012年5月，有79%的移動開發商已經決定要在其應有程序中整 合HTML5技術。

12月，萬維網聯盟宣布已經完成對HTML5標準以及Canvas 2D性能草案的制定，這就意味著開發人員將會有一個穩定的“計劃和實施”目標。有很多的文章都在號召使用 HTML5，并大力宣傳它的的好處。此前，站長之家曾經做過一期調查，調查顯示只有36.16%的站長正在學習中，另外的63.76%表示正在觀望中。作為站長，你是否準備開始學習HTML5？

從性能角度來說，HTML5首先是縮減了HTML文檔，使這件事情變得更簡單。第一，從用戶可讀性上說，原先一大堆東西，像初學者第一次看到這些東 西是看不懂的，而HTML5的聲明方式對用戶來說顯然更友好一些。

未來趨勢

1、移動優先

從如今層出不窮的移動應用就知道，在這個智能手機和將平板電腦大爆炸的時代，移動優先已成趨勢，不管是開發什么，都以移動為主。

2、游戲開發者領銜“主演”

許多游戲開發商都被Facebook或者Zynga推動著發展，而未來的Facebook應用生態系統是基于HTML5的，盡管在HTML 5平臺開發出游戲非常困難，但游戲開發商卻都愿意那么做。通過PhoneGap及appmobi的XDK將Web應用游戲打包整合到原生應用中也是一種方式，Facebook差不多就這么干的——基于Web應用及瀏覽器，但卻將之打包整合進原生應用。

原文來自微信公眾號【小白漲知識】，希望大家多多支持。