【前端筆記】☞ HTML

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，超文本標記語言

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

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;

　　　　}