【前端筆記】? HTML

標籤：log   jquer   表示   標記   頁面   web   oid   滑鼠   str   

1. 什麼是HTML5

 　　網頁的5.0版本。2014年才定製完HTML5的標準，曆時8年

2. 為什麼要用HTML5

　　1> 跨平台：利用HTML5編寫的UI介面能運行在所有擁有瀏覽器的平台

　　2> HTML5的運行平台：瀏覽器

　　3> 但是HTML5不能完成一些特定的功能，比如：拍照(ImagePickerController)、訪問相簿....

3. 如何使用HTML5

　　1> 自己編寫大量的HTML5代碼

　　2> 使用現成的HTML5架構

　　　　sencha-touch

　　　　phoneGap

　　　　jQuery mobile

　　　　bootstrap

4. 手機APP的開發模式

　　1> 原生（純OC）

　　2> 純HTML5

　　3> 原生+HTML5

5. 為什麼要學習HTML5

　　1> 未來的一種趨勢

　　2> 增加面試、開發競爭力

　　　　Android程式員  Java、伺服器、HTML5

6. 公司職位的劃分

　　1> 平面設計師  作圖、切圖、HTML、CSS

　　2> 前端工程師  HTML、CSS、Javascript、模板技術

　　3> 後台工程師  伺服器（Java、.Net、PHP）、資料庫

　　4> 移動工程師（iOS/android）手機UI介面（OC、HTML5）、跟伺服器互動

7. Web開發新時代

　　Web1.0

　　　　主流技術：HTML+CSS

　　Web2.0

　　　　主流技術：Ajax(JavaScript/DOM/非同步資料請求)

　　Web3.0

　　　　主流技術：HTML5+CSS3

　　HTML5亮點：Canvas、HTML5音視頻、Web儲存、Geolocation、Workers多執行緒

　　CSS3亮點：設計動畫、2D變形、N多新特性

8. 網頁的組成

　　一個有具體功能的完整的網頁，一般由3部分組成

　　1》HTML：網頁的具體內容和結構

　　2》CSS：網頁的樣式（美化網頁最重要的一塊）

　　3》JavaScript(掌握)：網頁的互動效果，比如對使用者滑鼠事件做出響應

　　　　HTML \ CSS \ JavaScript 學習資料：http://www.w3school.com.cn/

9. HTML

　　什麼是HTML：HTML的全稱是HyperText Markup Language，超文字標記語言 (HTML)

　　其實它就是文本，由瀏覽器負責將它解析成具體的網頁內容。

10. HTML的組成

　　跟XML類似，HTML由N個標籤（節點、元素、標記）組成

　　HTML文法非常鬆散，目前的最新版是5.0，也就是HTML 5

11. 常見的HTML標籤

• 標題：h1、h2、h3、h4、h5....
• 段落：p
• 換行：br
• 容器：div、span（用來容納其他標籤）
• 表格：table、tr、td
• 列表：ul、ol、li
• 圖片：img
• 表單：input
• 連結：a

12. HTML5新增標籤

　　HTML5新增了27個標籤元素，廢棄了16個標籤元素，主要包括：結構性標籤、級塊性標籤、行內語義性標籤、互動性標籤

　　1》結構性標籤

　　　　負責Web上下文結構的定義，確保HTML文檔，包括：

　　　　article  文章主體內容(一篇部落格、一篇論壇文章、一段使用者評論、外掛程式)

　　　　header   標記頭部地區內容（文章的頭部）

　　　　footer   標記腳部地區內容（文章的底部）

　　　　section  地區章節表述 （文章的地區章節）

　　　　nav      菜單導航，連結導航

　　2》塊級性標籤（分塊用的）

　　　　完成Web頁面地區的劃分，確保內容的有效分隔，包括：

　　　　aside   註記,貼士,側欄,摘要,插入的引用作為補充主體的內容

　　　　figure  對多個元素組合并展示的元素,常與figcaption聯合使用

　　　　code    表示一段代碼塊

　　　　dialog  人與人之間對話,包含dt和dd兩個組合元素（dt用於表示說話者、dd用於表示說話者的內容）

　　3》行內語義性標籤

　　　　完成Web頁面具體內容的引用和表述，豐富展示內容，包括：

　　　　meter     特定範圍內的數值，如工資、數量、百分比

　　　　time      時間值

　　　　progress  進度條，可用max、min、step進行控制，完成對進度的表示和監聽  

　　　　video     視頻元素，用於視頻播放，支援緩衝預載和多種視頻媒體格式

　　　　　　<!--視頻播放-->

　　　　　　//  告訴瀏覽器，我要使用你的播放器 controls

　　　　　　<video src="source/BigBuck.m4v" controls="controls"></video>

　　　　audio     音頻元素，用於音頻播放，支援緩衝預載和多種音頻媒體格式

　　　　　　<!--音頻播放-->

 　　　　　　//  告訴瀏覽器，我要使用你的播放器 controls

　　　　　　<audio src="source/music.m4a" controls="controls"></audio>

　　4》互動性標籤

　　　　功能性內容的表達，有一定的內容和資料的關聯，是各種事件的基礎，包括：

　　　　details   表示一段具體的內容，預設不顯示，通過某種方式（單擊）與legend互動才會顯示

　　　　datagrid  控制用戶端資料與顯示，可用於動態指令碼及時更新

　　　　menu      用於互動菜單

　　　　command   用來處理命令按鈕

13. HTML標籤類型

• HTML有N多標籤，根據顯示的類型，主要可以分為3大類

　　1》塊級標籤

　　　　獨佔一行的標籤

　　　　能隨時設定寬度和高度（比如：div、p、h1、h2、ul、li）

　　2》行內標籤（內聯標籤）

　　　　多個行內標籤能同時顯示在一行

　　　　寬度和高度取決於內容的尺寸（比如：span、a、label）

　　3》行內-塊級標籤（內聯-塊級標籤）

　　　　多個行內-塊級標籤可以顯示在同一行

　　　　能隨時設定寬度和高度（比如：input、button）

 

　　div與span標籤的區別：

　　　　div標籤是塊級標籤，獨佔一行，可以設定寬度和高度。

　　　　span標籤是行內標籤：多個行內標籤可以同時顯示在一行，寬度和高度取決於內容的大小。

14. 修改標籤的顯示類型

　　CSS中有個display屬性，能修改標籤的顯示類型

　　1》none：隱藏標籤

　　　　div {

    　　　　　color: red;

    　　　　　<!--隱藏標籤（包括標籤的結構和內容）-->

    　　　　　display: none;

　　　　}

　　2》block：讓標籤變為塊級標籤

　　　　span {

    　　　　　background-color: yellow;

    　　　　　/* 把當前標籤變為塊級標籤（就可以獨佔一行和設定標籤的寬高）*/

    　　　　　display: block;

　　　　}

　　3》inline：讓標籤變為行內標籤

　　　　div {

    　　　　　background-color: red;

    　　　　　/* 把當前標籤變為行內標籤 */

    　　　　　display: inline;

　　　　}

　　4》inline-block：讓標籤變為行內-塊級標籤（內聯-塊級標籤）

　　　　div {

    　　　　　background-color: red;

    　　　　　/*把當前標籤變為行內塊級標籤*/

    　　　　　display: inline-block;

　　　　}

【前端筆記】? HTML