## HTML5****基礎(chǔ)知識介紹
什么是HTML5
2014年完成的HTML5標(biāo)準(zhǔn)制定，歷時(shí)8年秘通，移動(dòng)先行為什么要用HTML5
跨平臺(tái)，只要有瀏覽器，就有運(yùn)行HTML5如何使用HTML5
自己編寫大量HTML5
成熟的第三方框架:
sencha-touch
phoneGap
jQuery Mobile手機(jī)APP開發(fā)模式
- 原生 純OC 純swift
- 純HTML5
- 原生+HTML5
- 開發(fā)工具
- WebStorm
##****常用****HTML****標(biāo)簽
一. 網(wǎng)頁的組成
- HTML 網(wǎng)頁的具體內(nèi)容結(jié)構(gòu)
- CSS 網(wǎng)頁的樣式
- JavaScript 網(wǎng)頁的交互效果夹厌，比如用戶鼠標(biāo)事件作出響應(yīng)
二. HTML
HTML 是超文本標(biāo)記語言
HTML組成：N個(gè)標(biāo)簽（節(jié)點(diǎn)，元素裆悄，標(biāo)記）組成
三. 常見的HTML標(biāo)簽
- 標(biāo)題標(biāo)簽： h1,h2,h3,h4,h5
- 段落標(biāo)簽： p
- 容器標(biāo)簽：div,span
- 表格標(biāo)簽：table,tr,td
- 列表標(biāo)簽：ul,ol,li
- 圖片標(biāo)簽: img
- 表單標(biāo)簽：input
- 鏈接標(biāo)簽：a
##HTML5****新增的標(biāo)簽
HTML5新增了27個(gè)標(biāo)簽元素,廢棄了16個(gè)標(biāo)簽元素,主要包括結(jié)構(gòu)性標(biāo)簽矛纹、級塊性標(biāo)簽、行內(nèi)語義性標(biāo)簽光稼、交互性標(biāo)簽
一. 結(jié)構(gòu)標(biāo)簽
負(fù)責(zé)Web上下文結(jié)構(gòu)的定義或南，確保HTML文檔孩等，包括
- article 文章主體內(nèi)容(一篇博客、一篇論壇帖子采够、一段用戶評論肄方、插件)
- header 標(biāo)記頭部區(qū)域內(nèi)容
- footer 標(biāo)記腳部區(qū)域內(nèi)容
- section 區(qū)域章節(jié)表述
- nav 菜單導(dǎo)航,鏈接導(dǎo)航
二. 塊塊標(biāo)簽
完成Web頁面區(qū)域的劃分，確保內(nèi)容的有效分隔吁恍，包括
- aside 注記,貼士,側(cè)欄,摘要,插入的引用作為補(bǔ)充主體的內(nèi)容
- figure 對多個(gè)元素組合并展示的元素,常與figcaption聯(lián)合使用
- code 表示一段代碼塊
- dialog 人與人之間對話,包含dt和dd兩個(gè)組合元素（dt用于表示說話者扒秸、dd用于表示說話者的內(nèi)容）
三 行內(nèi)語義標(biāo)簽
完成Web頁面具體內(nèi)容的引用和表述，豐富展示內(nèi)容冀瓦，包括：
- meter 特定范圍內(nèi)的數(shù)值伴奥，如工資、數(shù)量翼闽、百分比
- time 時(shí)間值
- progress 進(jìn)度條拾徙，可用max、min感局、step進(jìn)行控制尼啡，完成對進(jìn)度的表示和監(jiān)聽
- video 視頻元素，用于視頻播放询微，支持緩沖預(yù)載和多種視頻媒體格式
- audio 音頻元素崖瞭，用于音頻播放，支持緩沖預(yù)載和多種音頻媒體格式
四 交互標(biāo)簽
功能性內(nèi)容的表達(dá)撑毛，有一定的內(nèi)容和數(shù)據(jù)的關(guān)聯(lián)书聚，是各種事件的基礎(chǔ)，包括
- detail 表示一段具體的內(nèi)容藻雌，默認(rèn)不顯示雌续，通過某種方式（單擊）與legend交會(huì)示
- datagrid 控制客戶端數(shù)據(jù)與顯示，可用于動(dòng)態(tài)腳本及時(shí)更新
- munu 用于交互菜單
- command 用來處理命令按鈕
## CSS****樣式簡歷
CSS的兩大重點(diǎn)
屬性
通過屬性的復(fù)雜疊加才能做出漂亮的網(wǎng)頁
選擇器
通過選擇器找到對應(yīng)的標(biāo)簽設(shè)置樣式
一胯杭、行內(nèi)樣式
二驯杜、頁內(nèi)樣式
三、外部樣式
## CSS****選擇器
- 標(biāo)簽選擇器：根據(jù)標(biāo)簽名找到對應(yīng)的標(biāo)簽
- 類選擇器：根據(jù)類名找到對應(yīng)的標(biāo)簽
- id選擇器：根據(jù)id名找到對應(yīng)的標(biāo)簽
- 并列選擇器：用于多個(gè)標(biāo)簽之間有相同的樣式
- 復(fù)合選擇器：用于精準(zhǔn)的定位
- 后代選擇器：用于標(biāo)簽嵌套標(biāo)簽
- 直接后代選擇器：格式: div>a
- 相鄰兄弟選擇器：格式:div+p
- 屬性選擇器：格式:div[name]
- 偽類：格式:div:hover
- 偽元素：格式:div:after
##CSS****選擇器**** – ****選擇器優(yōu)先級
p.p1 {margin: 0.0px 0.0px 0.0px 60.0px; font: 18.0px 'Heiti SC Light'; color: #586e75}p.p2 {margin: 0.0px 0.0px 0.0px 60.0px; font: 18.0px Courier; color: #586e75}p.p3 {margin: 0.0px 0.0px 0.0px 60.0px; text-indent: -34.5px; font: 18.0px Courier; color: #6c71c4}p.p4 {margin: 0.0px 0.0px 0.0px 60.0px; font: 18.0px Courier; color: #586e75; min-height: 22.0px}p.p5 {margin: 0.0px 0.0px 0.0px 60.0px; text-indent: -45.2px; font: 18.0px 'Heiti SC Light'; color: #6c71c4}span.s1 {font: 18.0px 'Heiti SC Light'}span.s2 {font: 18.0px Courier}
優(yōu)先級排序
important > 內(nèi)聯(lián) > id > 類 > 標(biāo)簽 | 偽類 | 屬性選擇 > 偽元素 > 通配符 > 繼承
**##HTML****標(biāo)簽類型**** **
一做个、塊級標(biāo)簽
獨(dú)占一行的標(biāo)簽鸽心，能隨時(shí)設(shè)置寬度和高度
二、行內(nèi)標(biāo)簽
多個(gè)行內(nèi)標(biāo)簽?zāi)芡瑫r(shí)顯示在一行居暖，寬度和高度取決于內(nèi)容的尺寸
三顽频、行內(nèi)-塊級標(biāo)簽
多個(gè)行內(nèi)-塊級標(biāo)簽可以顯示在同一行，能隨時(shí)設(shè)置寬度和高度
修改標(biāo)簽的顯示類型
CSS中有個(gè)display屬性膝但，能修改標(biāo)簽的顯示類型
none：隱藏標(biāo)簽
block：讓標(biāo)簽變?yōu)閴K級標(biāo)簽
inline：讓標(biāo)簽變?yōu)樾袃?nèi)標(biāo)簽
inline-block：讓標(biāo)簽變?yōu)樾袃?nèi)-塊級標(biāo)簽（內(nèi)聯(lián)-塊級標(biāo)簽）
##CSS ****屬性
一冲九、可繼承屬性
父標(biāo)簽的屬性值會(huì)傳遞給子標(biāo)簽
一般是文字控制屬性
