整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
TML5從入門到精通，兄弟連京修隨堂筆記（一）HTML的框架結構，每日都有新內容，訂閱走一波
一個瀏覽器窗體可以通過幾個頁面的組合來顯示。我們可以使用框架來完成(frames)這項工作。(框架可以把HTML文檔分為多個頁面)。也就是將一個瀏覽器文檔窗口分隔成多個窗口，每個窗口都可以顯示一個獨立的網頁文件。
框架頁使用了表格的方式組合，可以分為數行與數列。
框架的優點
重載頁面時不需要重載整個頁面，只需要重載頁面中的一個框架頁(減少了數據的傳輸，增加了網頁下載速度)。
方便制作導航欄。
框架的缺點
會產生很多頁面，不容易管理。
不容易打印。
瀏覽器的后退按鈕無效。
代碼復雜,無法被一些搜索引擎索引到。
多數小型的移動設備（PDA 手機）無法完全顯示框架。
多框架的頁面會增加服務器的http請求。
由于上面諸多缺點，因此不符合標準網頁設計的理念.已被標準網頁設計拋棄
HTML框架標簽
<frameset>標簽 -- 代替body標簽定義了框架頁,并且定義了框架將分為多少行與多少列。常用屬性如下:
cols -- 定義了框架含有多少列與列的大小(每個值使用逗號分隔),取值為象素px或者百分比%
rows -- 定義了框架含有多少行與行的大小(每個值使用逗號分隔),取值為象素px或者百分比%
border -- 定義frame定義的框架頁的邊框(單位像素),使用css實現
frameborder -- 定義框架頁是否邊框(此屬性應寫在frame標簽內部,不應在此出現)
framespacing -- 定義框架頁之間間隔的距離,使用css實現
<noframes>標簽
可為那些不支持框架的瀏覽器顯示文本，和<body>組合使用
<iframe>標簽
創建一個包含另外一個文檔的內聯框架，iframe標簽內的內容可以做為瀏覽器不支持iframe標簽時顯示 。
frame標簽 -- 定義frameset標簽中每個框架頁的內容
frame標簽是單獨出現的，<frame />
常用屬性:
frameborder -- 定義了內容頁的邊框,取值為(1|0),缺省值為1
1 -- 在每個頁面之間都顯示邊框
0 -- 不顯示邊框
name -- 在一個框架頁鏈接到另一框架頁時使用(另一個框架頁可以使用target定義鏈接頁)
noresize -- 定義了瀏覽者是否可以通過拖拽改變框架頁尺寸,取值為(noresize)
scrolling -- 定義是否有滾動條,取值為(yes|no|auto),缺省值為auto
yes -- 顯示滾動條
no -- 不顯示滾動條
auto -- 當需要時再顯示滾動條
src -- 定義了內容頁URL
border – 設置邊框粗細
HTML框架示例
<html> <!-- 網頁開始標記 -->
<head>
<title>使用框架定義后臺管理平臺模型</title>
</head> <!-- 設置網頁標題 -->
<frameset rows="80,*" frameborder="1" border="5"> <!-- 劃分兩行 -->
<frame src="top.html" name="top" scrolling="no" noresize/> <!-- 頂部大類窗體 -->
<frameset cols="200, *"> <!-- 劃分左右兩列 -->
<frame src="menu.html" name="menu" scrolling="no" noresize/>
<!-- 左邊菜單窗體 -->
<frame src="main.html" name="main" noresize />
<!-- 右邊內容窗體 -->
</frameset> <!-- 內層框架結束 -->
<noframes>
<body><p>您的瀏覽器不支持框架，請升級瀏覽器</p></body>
</noframes>
</frameset> <!-- 外層框架結束 -->
</html>
一章 Web前端技術簡介
本章學習目標
互聯網中的網頁大多數都是使用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后端工程師、數據庫工程師。下面來了解一下這四大職位的分工：
Web前端工程師能充分理解項目需求和設計需求，并與UI設計師、Web后端工程師緊密合作，產出高質量的網站展示層，為用戶呈現最好的界面交互體驗。
圖1.1網站開發模式
有一句話非常形象的形容了Web前端工程師的特點，“它是游走在二次元與二進制之間的魔法師!”。
1.1.1 Web前端三大核心技術
首先來了解下W3C組織，即萬維網聯盟，創建于1994年，是Web技術領域最具權威和影響力的國際中立性技術標準機構。W3C專門負責制定網頁相關的標準，所以Web前端相關技術都是基于W3C標準實現的。
下面來介紹下Web前端開發所包括的三大核心技術，即HTML語言、CSS語言、JavaScript語言。
1.HTML語言
HTML全稱“Hyper Text Markup Language”，中文解釋為“超文本標記語言”，它是制作網頁的標準語言。“超文本”就是指頁面內可以包含圖片、鏈接，甚至音樂、程序等非文字元素。超文本標記語言的結構包括“頭”部分（Head）、和“主體”部分（Body），其中“頭”部提供關于網頁的信息，“主體”部分提供網頁的具體內容。
2. CSS語言
CSS全稱“Cascading Style Sheet”，中文解釋為“層疊樣式表”，它是一種用來表現HTML或XML等文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。CSS 能夠對網頁中元素位置的排版進行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網頁對象和模型樣式編輯的能力。
3. JavaScript語言
JavaScript是一種屬于網絡的腳本語言，已經被廣泛用于Web應用開發，常用來為網頁添加各式各樣的動態功能，為用戶提供更流暢美觀的瀏覽效果。它的解釋器被稱為JavaScript引擎，屬于瀏覽器的一部分，因此JavaScript代碼由瀏覽器邊解釋邊執行。 通常JavaScript腳本通過嵌入在HTML中來實現自身的功能。
Web前端三大核心技術就像板凳的三條腿，缺一不可。用圖片來表示三者之間的聯系，如圖1.2所示。
圖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.3 僅僅使用HTML的文字
圖1.4 在HTML基礎上加入CSS樣式
圖1.5 加入JavaScript鼠標劃入效果
1.2 Web前端開發工具
俗話說得好，工欲善其事必先利其器。所以在HTML+CSS開發過程中，需要先來選擇適合的相關開發工具。HTML+CSS開發過程中主要涉及到三大類工具：瀏覽器、網頁編輯器、切圖軟件，本節就來介紹這三大類工具。
1.2.1 瀏覽器
瀏覽器是網頁的運行平臺，即可以把HTML文件展示在網頁中，供用戶可上網進行瀏覽的一種軟件。目前主流的瀏覽器有IE、Chrome、Firefox、Safari、Opera等，如圖1.6所示，由于某些因素，這些瀏覽器不能完全采用統一的Web標準，或者說不同的瀏覽器對同一個CSS樣式有不用的解析。這就導致了同樣的頁面在不同的瀏覽器下顯示效果可能不同。
圖1.6 主流瀏覽器
不同用戶使用的瀏覽器可能不同，因此制作網頁時，需要保證該網頁兼容所有的主流瀏覽器。關于網頁制作中的兼容性問題及解決方案，會在后面的章節進行講解。下面介紹幾種主流的瀏覽器。
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所示。
圖1.7 Chrome瀏覽器首頁
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”，具備完美的代碼提示功能和強大的輔助操作，因此它非常容易上手，是一款適合初學者學習和使用的網頁編輯器。
圖1.8 常用網頁編輯器
接下來講解如何使用Dreamweaver網頁編輯器進行網頁編程，軟件的安裝不再介紹，直接講解軟件安裝后如何使用。
運行DW軟件，進入軟件界面， 選擇菜單欄中【文件】→【新建】，打開新建文檔窗口，在【文檔類型】下拉列表中選擇HTML5，單擊【創建】按鈕，如圖1.9所示，即可創建一個空白的HTML文檔，如圖1.10所示。
圖1.9 新建文檔窗口
圖1.10 空白HTML文檔
為了讓初學者更好的使用DW工具，需要對DW進行一些初始化的設置，具體如下：
a) 工作區布局設置
運行DW軟件，進入軟件界面，將布局設置成統一的模式，選擇菜單欄中選擇【窗口】→【工作區布局(w)】→【經典】，如圖1.11。
圖1.11 初始化工作區布局
2. 必備面板
設置經典模式后，需要調出三個常用的面板，分別選擇菜單欄【窗口】菜單下的【插入】、【屬性】、【文件】3個命令，如圖1.12所示。
圖1.12 初始化必備面板
3. 新建默認文檔設置
選擇菜單欄中【編輯】→【首選參數】（Ctrl+U），選中左側【分類】中的【新建文檔】，右邊就會出現相應的設置，選擇最常用的HTML文檔類型和編碼類型，本書設置為HTML5，如圖1.13所示。
圖1.13 默認文檔設置
新建文檔的首選參數設置后，新建HTML文檔時，DW就會按照默認文檔設置直接生成所需的代碼。
4. 瀏覽器設置
初學者計算機必備IE瀏覽器和Chrome瀏覽器，建議講DW的默認預覽瀏覽器設置為“Chrome瀏覽器”，快捷鍵F12是使用主瀏覽器預覽網頁，一般把IE瀏覽器設為次瀏覽器，快捷鍵Ctrl+F12，如圖1.14所示。
圖1.14 默認瀏覽器設置
5. 代碼提示
為了加快寫代碼的速度，會用到代碼提示，DW中就有強大的代碼提示的功能，只需在【首選參數】對話框中設置代碼提示，選擇【代碼提示】選項，然后選中【結束標簽】選項中的第二項，單擊【確定】按鈕即可，如圖1.15所示。
圖1.15 代碼提示設置
1.2.3 切圖軟件
切圖軟件是對UI設計師設計出的效果圖進行切圖操作，也可以對網頁中涉及到的圖片進行修改等處理。常用的切圖軟件有Photoshop和Fireworks兩種。如圖1.16為常用切圖軟件的圖標，本教材采用Photoshop進行切圖，版本為CS5。Photoshop簡稱“PS”，它是一款專業性很強的圖片處理軟件，在第九章中將詳細的來學習如何利用Photoshop進行網頁的切圖操作。
圖1.16 常用切圖軟件
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>等。而瀏覽器的功能是對這些標記進行解釋，顯示出文字、圖像、動畫、播放聲音。這些標簽符號用“<標簽名字 屬性>”來表示。標簽分為單標簽和雙標簽兩大類，具體介紹如下：
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所示。
圖1.17 HTML基本結構
一個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>標簽，絕大多數文檔頭部包含的數據都不會真正作為內容顯示在頁面中。
表1.1 文檔頭部內的標簽
上例中<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所示。
圖1.18 代碼試圖
（2）修改<title>和<body>中的內容，按下Ctrl + S快捷鍵，進行文件的保存，文件后綴名為.html格式。如圖1.19所示。
圖1.19 保存成.html文件
（3）點擊“在瀏覽器中預覽/調試”按鈕，選擇chrome.exe瀏覽器進行預覽?；蛘咄ㄟ^雙擊.html文件進行預覽。如圖1.20所示。
圖1.20 在Chrome瀏覽器中預覽效果
到此本教材的第一個網頁就運行成功了，可以試著改變<title>和<body>中的內容。然后重新保存頁面并刷新瀏覽器進行預覽。
1.3.4 HTML注釋
在編寫HTML代碼時，經常要在一些關鍵代碼旁做一下注釋，這樣做的好處很多，如：方便理解代碼、方便查找相關代碼或是方便項目組里的其他程序員來了解你所寫的代碼，還可以方便自己以后對代碼的理解和修改。語法格式如下：
<!--注釋的內容-->
“<!--”表示注釋的開始，“-->”表示注釋的結束。DW中自帶添加注釋功能，如圖1.21所示，也可手動添加注釋。
圖1.21 HTML注釋
1.3.5 HTML屬性
使用HTML制作網頁時，如果想讓網頁的內容更豐富，如設置顯示文字的顏色為彩色，大小為30。此時如果僅僅使用HTML標簽默認顯示樣式已經不能滿足需求，就需要對HTML標簽的屬性加以設置，大多數標簽都有自己的一些屬性, 屬性要寫在始標簽內，屬性用于進一步改變顯示的效果, 各屬性之間無先后次序，可以省略而采用默認值;其語法格式如下：
<標簽名字 屬性1 屬性2 屬性3 … >內容</標簽名字>
在語法格式中，標簽可以有多個屬性，必須寫在開始標簽中，位于標簽名之后。屬性與標簽之前需要一個空格隔開，多個屬性之間也用空格隔開。
作為一般的原則，大多數屬性值不用加雙引號。但是包括空格、“％”，“?！钡忍厥庾址膶傩灾当仨毤尤腚p引號。為了好的習慣，提倡全部對屬性值加雙引號。如：
<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的基礎知識和技術，使他們快速地成長為初級程序員，并擁有一定的項目開發經驗，從而在職場中擁有一個較高的起點。
聯網發展到今天，學習前端的小伙伴也越來越多，不僅薪資可以達到一個很高的標準，工作也是很好找的，對于html5小白來說怎么從入門開始學習就是一個問題，小猿圈web前端講師就針對HTML5學習從入門到精通需要多久進行了詳細的講解。
其實具體的時間小編真的不好說什么確切的答案，因為每個人對于這行的基礎不同，理解能力、學習能力不同，所以所用時間是不同的。
5個月左右的學習時間，只要你認真的跟著老師學，不落課及時完成老師下發的任務，有什么問題當時提出現場解決，用幾個月的時間學好HTML5不是幻想。
首先是要給自己訂一個目標，既然想要學好HTML5開發那就不能白白浪費這幾個月的時間。
在了解HTML前沿和大致結構以后就要開始HTML5的課程學習。HTML5的多媒體播放、Canvas、地理定位、本地存儲等以及javascript知識都是我們需要學習的。
第一個階段，學習的是DIV+CSS，如果了解過那么就會覺得比較輕松。緊接著就是第二個階段，可能這個階段需要很理性的邏輯思維能力。但是不管怎么說，只要自己用心就一定會學有所成的。
其實認真學習的日子過得非常快，只要你認真刻苦一轉眼的時間幾個月的時間就過去了，只要你肯學，都會學有所成的。
小猿圈web前端講師總結一句話，想學習一門新的技術首先就是要明確自己的目標，然后規定自己的學習計劃，每天的去完成，堅持不懈的去努力，總有一天你會發現自己已經完全掌握了，如果遇到不會的問題可以到小猿圈去尋找答案。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
