一 HTML5前言
爲什麼要用HTML5
- 1> 跨平臺
- 利用HTML5編寫的UI界面能運行在所有擁有瀏覽器的平臺
- 2> HTML5的運行平臺：瀏覽器
- 3> 但是HTML5不能完成一些特定的功能，比如：拍照(ImagePickerController)、訪問相冊….
- 1> 跨平臺
如何使用HTML5
- 1> 自己編寫大量的HTML5代碼
- 2> 使用現成的HTML5框架
- sencha-touch
- phoneGap
- jQuery mobile
- bootStrap
手機APP的開發模式
- 1> 原生（純OC）
- 2> 純HTML5
- 3> 原生+HTML5
二 HTML
【網頁的組成】一個有具體功能的完整的網頁，一般由3部分組成
- HTML
- 網頁的具體內容和結構
- CSS
- 網頁的樣式（美化網頁最重要的一塊）
- JavaScript(掌握)
- 網頁的交互效果，比如對用戶鼠標事件做出響應
- HTML
什麼是HTML
- HTML的全稱是HyperText Markup Language，超文本標記語言
- 其實它就是文本，由瀏覽器負責將它解析成具體的網頁內容
HTML的組成
- 跟XML類似，HTML由N個標籤（節點、元素、標記）組成
常見的HTML標籤
- 標題：h1、h2、h3、h4、h5….
- 段落：p
- 換行：br
- 容器：div、span（用來容納其他標籤）
- 表格：table、tr、td
- 列表：ul、ol、li
- 圖片：img
- 表單：input
- 鏈接：a
HTML5新增標籤
- HTML5新增了27個標籤元素,廢棄了16個標籤元素,主要包括結構性標籤、級塊性標籤、行內語義性標籤、交互性標籤
1.結構性標籤
- 負責Web上下文結構的定義，確保HTML文檔，包括：
- article 文章主體內容(一篇博客、一篇論壇帖子、一段用戶評論、插件)
- header 標記頭部區域內容
- footer 標記腳部區域內容
- section 區域章節表述
- nav 菜單導航,鏈接導航
- 負責Web上下文結構的定義，確保HTML文檔，包括：
2.塊級性標籤
- 完成Web頁面區域的劃分，確保內容的有效分隔，包括：
- aside 註記,貼士,側欄,摘要,插入的引用作爲補充主體的內容
- figure 對多個元素組合並展示的元素,常與figcaption聯合使用
- code 表示一段代碼塊
- dialog 人與人之間對話,包含dt和dd兩個組合元素（dt用於表示說話者、dd用於表示說話者的內容）
- 完成Web頁面區域的劃分，確保內容的有效分隔，包括：
3.行內語義性標籤
- 完成Web頁面具體內容的引用和表述，豐富展示內容，包括：
- meter 特定範圍內的數值，如工資、數量、百分比
- time 時間值
- progress 進度條，可用max、min、step進行控制，完成對進度的表示和監聽
- video 視頻元素，用於視頻播放，支持緩衝預載和多種視頻媒體格式
- audio 音頻元素，用於音頻播放，支持緩衝預載和多種音頻媒體格式
- 完成Web頁面具體內容的引用和表述，豐富展示內容，包括：
4.交互性標籤
- 功能性內容的表達，有一定的內容和數據的關聯，是各種事件的基礎，包括：
- details 表示一段具體的內容，默認不顯示，通過某種方式（單擊）與legend交互纔會顯示
- datagrid 控制客戶端數據與顯示，可用於動態腳本及時更新
- menu 用於交互菜單
- command 用來處理命令按鈕
- 功能性內容的表達，有一定的內容和數據的關聯，是各種事件的基礎，包括：
三 CSS
- 什麼是CSS
- CSS的全稱是Cascading Style Sheets，層疊樣式表
- 它用來控制HTML標籤的樣式，在美化網頁中起到非常重要的作用
- CSS的編寫格式是鍵值對形式的，比如
color: red;
background-color: blue;
font-size: 20px;
// 冒號:左邊的是屬性名，冒號:右邊的屬性值- CSS有3種書寫形式
// 行內樣式：（內聯樣式）直接在標籤的style屬性中書寫
<body style="color: red;">
// 頁內樣式：在本網頁的style標籤中書寫
<style>
body {
color: red;
}
</style>
// 外部樣式：在單獨的CSS文件中書寫，然後在網頁中用link標籤引用
<link rel="stylesheet" href="index.css">
- css 遵循的規律：
- 1>就近原則
- 2>疊加原則
四 CSS選擇器
- CSS的兩大重點
- 屬性
- 通過屬性的複雜疊加才能做出漂亮的網頁
- 選擇器
- 通過選擇器找到對應的標籤設置樣式
- 屬性
CSS選擇器 – 標籤選擇器
- 選擇器的作用
- 選擇對應的標籤，爲之添加樣式
標籤選擇器
- 根據標籤名找到標籤
CSS選擇器 – 類選擇器
類選擇器的格式
- .類名
CSS選擇器 – id選擇器
id選擇器的格式
- #id
CSS選擇器 – 並列選擇器
見圖
CSS選擇器 – 複合選擇器
見圖
CSS選擇器 – 後代選擇器
- 見圖
CSS選擇器 – 直接後代選擇器
- 見圖
CSS選擇器 – 相鄰兄弟選擇器
- 找到 div，與 div 相鄰
CSS選擇器 – 屬性選擇器
見圖
其他寫法
- div[name][age]
- div[name=”jack”]
CSS選擇器 – 僞類
僞類可以給對應標籤後面添加如下屬性
CSS選擇器 – 僞元素
：first-letter用的比較多
CSS選擇器 – 選擇器優先級
- 選擇器的針對性越強，它的優先級就越高
- 選擇器的權值
- 通配選擇符（*）：0
- 標籤： 1
- 類： 10
- 屬性： 10
- 僞類： 10
- 僞元素： 1
- id： 100
- important： 1000
- 原則：選擇器的權值加到一起，大的優先；如果權值相同，後定義的優先
優先級排序：important > 內聯 > id > 類 > 標籤 | 僞類 | 屬性選擇 > 僞元素 > 通配符 > 繼承
五 HTML標籤類型
HTML有N多標籤，根據顯示的類型，主要可以分爲3大類
塊級標籤
- 獨佔一行的標籤
- 能隨時設置寬度和高度（比如div、p、h1、h2、ul、li）
行內標籤（內聯標籤）
- 多個行內標籤能同時顯示在一行
- 寬度和高度取決於內容的尺寸（比如span、a、label）
行內-塊級標籤（內聯-塊級標籤）
- 多個行內-塊級標籤可以顯示在同一行
- 能隨時設置寬度和高度（比如input、button）
CSS中有個display屬性，能修改標籤的顯示類型
- none：隱藏標籤（類似於 remove）
- block：讓標籤變爲塊級標籤
- inline：讓標籤變爲行內標籤
- inline-block：讓標籤變爲行內-塊級標籤（內聯-塊級標籤）
六 CSS屬性
CSS有N多屬性，根據繼承性，主要可以分爲2大類
- 可繼承屬性
- 父標籤的屬性值會傳遞給子標籤
- 一般是文字控制屬性
- 不可繼承屬性
- 父標籤的屬性值不能傳遞給子標籤
- 一般是區塊控制屬性
- 可繼承屬性
CSS屬性 – 可繼承屬性（紅色表示常用）
CSS屬性 – 不可繼承屬性（紅色表示常用）
七 盒子模型
- 網頁上的每一個標籤都是一個盒子
每個盒子都有四個屬性
- 內容（content）
- 盒子裏裝的東西
- 網頁中通常是指文字和圖片
- 填充（padding，內邊距）
- 怕盒子裏裝的（貴重的）東西損壞，而添加的泡沫或者其它抗震的輔料
- 邊框（border）：盒子本身
- 邊界（margin，外邊距）
- 盒子擺放的時候的不能全部堆在一起，盒子之間要留一定空隙保持通風，同時也爲了方便取出
- 內容（content）
標準盒子模型
IE盒子模型
內容（content） – 屬性
填充（padding，內邊距） – 屬性
上右下左邊距設置
邊框（border） – 屬性
- border 簡寫屬性在一個聲明設置所有的邊框屬性
可以按順序設置如下屬性：
- border-width
- border-style
- border-color
設置邊框圓角
- border-radius
// 設置4個邊框的樣式：
p {
border：5px solid red；
} 邊界（margin，外邊距） – 屬性
- CSS3新增特性
- RGBA透明度
- RGB(紅色R+綠色G+藍色B),RGBA則在其基礎上增加了Alpha通道，可用於設置透明值
- 塊陰影與圓角陰影
- box-shadow text-shadow
- 圓角
- border-radius
- 邊框圖片
- border-image
- 形變
transform: none | <transform-function>[<transform-fuction>]
- RGBA透明度
八 標籤水平居中和垂直居中
標籤的水平居中:
- 塊級標籤: margin: 0 auto;
- 行內標籤/行內-塊級標籤: text-align: center;
垂直居中:
- 塊級標籤 :佈局 position結合 top left 平移`1
- 行內標籤/行內-塊級標籤 line-height 高度 == height
注意：
vertical-align: middle;用於圖片
九 CSS 佈局
默認情況下，所有的網頁標籤都在標準流佈局中
- 從上到下，從左到右
脫離標準流的方法有
- float屬性
- position屬性 和 left、right、top、bottom屬性
float屬性的常用取值有
- left：脫離標準流，浮動在父標籤的最左邊
- right：脫離標準流，浮動在父標籤的最右邊
CSS佈局 – position屬性
