HTML5 肯定不是多了一些標(biāo)簽就完事了
HTML5 根酷炫沒什么關(guān)系掏婶，更多的職責(zé)是功能，而不是外觀
概要
WEB技術(shù)階段
- Web 1.0 內(nèi)容為主，主要流行HTML和CSS
- Web 2.0 動態(tài)網(wǎng)頁，流行AJAX/JavaScript/DOM
- HTML5 時代，WEB開發(fā)回歸富客戶端
什么是HTML5
- 是HTML的超集凸克，不僅僅是HTML，更多的是JavaScript API和CSS的提升闷沥，
- 構(gòu)建 Web 應(yīng)用程序整體解決方案
API的概念就是我們編程時所依賴的東西的總稱
什么是Web Application
- HTML5 前身萎战，由WHATWG組織提出
- 推出的目的主要是提高Web應(yīng)用程序的功能
- 2007年提交到W3C組織，成了現(xiàn)在我們看到的HTML5
HTML5應(yīng)用場景
- 極具表現(xiàn)力的網(wǎng)頁
- 案例非常多
- 網(wǎng)頁應(yīng)用程序
- PC端：iCloud舆逃、百度腦圖蚂维、Office 365···
- APP端：淘寶戳粒、京東、美團(tuán)···
- WeChat端：淘寶虫啥、京東蔚约、美團(tuán)···
- 混合式本地應(yīng)用
- PC端：網(wǎng)易云音樂、有道詞典···
- APP端：淘寶涂籽、京東苹祟、美團(tuán)···
- 簡單的游戲
H5新特性概要
HTML
- 標(biāo)簽
- 更語義化標(biāo)簽
- 智能表單
- 新的表單類型，如：email,url,number
- 新增表單功能屬性评雌，如：autocomplete树枫，autofocus
- 虛擬鍵盤適配，通過表單的類型決定移動端彈出的鍵盤類型
- 網(wǎng)頁多媒體景东，我們可以在網(wǎng)頁中直接通過原生方式播放視頻音頻
- 音頻
- 視頻
- 字幕
- 屬性团赏，語義化屬性
- 鏈接關(guān)系描述
- 結(jié)構(gòu)數(shù)據(jù)標(biāo)記
- ARIA
- 自定義屬性
- Canvas，提供網(wǎng)頁繪圖的可能耐薯，后面在Canvas課程會專門去學(xué)習(xí)
- 2D 繪圖
- 3D (WebGL)
- SVG
JavaScript API
- 核心平臺提升，JS在DOM和BOM兩個方向上都新增了很多api丝里，便于開發(fā)應(yīng)用程序
- 新的選擇器
- Element.classList
- 訪問歷史API
- 全屏API
- 網(wǎng)頁存儲曲初，提供網(wǎng)頁中操作客戶端本地存儲的API
- Application Cache
- localStorage
- sessionStorage
- WebSQL
- IndexedDB
- 設(shè)備信息訪問，JS可以訪問硬件的一些信息杯聚，我們在移動手機(jī)APP的課程中再看
- 網(wǎng)絡(luò)狀態(tài)
- 硬件訪問
- 設(shè)備方向
- 地理圍欄
- 拖放操作
- 網(wǎng)頁內(nèi)拖放
- 桌面拖入
- 文件
- 文件系統(tǒng)API
- FileReader
- 網(wǎng)絡(luò)訪問
- XMLHttpRequest
- fetch
- WebSocket
- 多線程
- 桌面通知臼婆，
CSS
- 后面詳細(xì)討論
HTML5 骨架
<!-- HTML5的DOCTYPE聲明做了最大簡化 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 在標(biāo)準(zhǔn)的HTML5骨架中charset是直接在meta中設(shè)置charset -->
<!-- 字符編碼的設(shè)置一定是在head中的第一行 -->
<title>頁面標(biāo)題</title>
</head>
<body>
</body>
</html>
- HTML5的DOCTYPE聲明做了最大簡化
- 在標(biāo)準(zhǔn)的HTML5骨架中charset是直接在meta中設(shè)置charset
- 字符編碼的設(shè)置一定是在head中的第一行，再晚就來不及了
語義化標(biāo)簽
什么是語義化標(biāo)簽
-
HTML5中制定了一系列語義化標(biāo)簽：
- section：獨(dú)立的內(nèi)容節(jié)塊幌绍，一般包含標(biāo)題和內(nèi)容
- article：一種特殊的section颁褂，定義文檔中的具體的文章內(nèi)容
- nav：頁面導(dǎo)航的鏈接組
- aside：標(biāo)簽用來裝載非正文的內(nèi)容，此標(biāo)簽中的文字權(quán)重低
- header：定義文檔的頁眉傀广，不僅僅是文檔的頁頭可以使用header颁独，一個獨(dú)立塊的頭部也應(yīng)該使用header
- footer：定義section或document的頁腳
我們應(yīng)該根據(jù)內(nèi)容的性質(zhì)決定使用特定的標(biāo)簽
h1一定只能出現(xiàn)一個，不是HTML的約定伪冰，頁面中最重要的內(nèi)容
-
time標(biāo)簽專門用于時間誓酒，
- datetime應(yīng)該是一個標(biāo)準(zhǔn)時間格式，
- pubdate指的是當(dāng)前時間為article的發(fā)布時間
在H5中贮聂，主體結(jié)構(gòu)標(biāo)簽?zāi)J(rèn)和DIV都是相同的塊級效果靠柑，
但是DIV沒有語義，而以上標(biāo)簽有特定語義
為什么要有語義化標(biāo)簽
- 能夠便于開發(fā)者閱讀和寫出更優(yōu)雅的代碼吓懈，代碼如詩
- 同時讓瀏覽器或是網(wǎng)絡(luò)爬蟲可以很好地解析歼冰，從而更好分析其中的內(nèi)容
- 使用語義化標(biāo)簽會具有更好地搜索引擎優(yōu)化
切記
- HTML的職責(zé)是描述一塊內(nèi)容是什么（或其意義）
- 而不是它長的什么樣子，它的外觀應(yīng)該由CSS來決定耻警。
智能表單
新的表單類型
- email - 限定輸入內(nèi)容為郵箱地址隔嫡，表單提交時會校驗格式
- url - 限定輸入內(nèi)容為URL甸怕，表單提交時會校驗格式
- number - 限定輸入內(nèi)容為數(shù)字，表單提交時會校驗格式
- range - 數(shù)值范圍選擇器
- Date Pickers - 日期時間選擇器
- 樣式不能修改畔勤，移動端用的比較多蕾各，因為移動端顯示的是系統(tǒng)的時間或日期選擇器
- date - 選取日、月庆揪、年
- month - 選取月式曲、年
- week - 選取周和年
- time - 選取時間（小時和分鐘）
- datetime - 選取時間、日缸榛、月吝羞、年，瀏覽器兼容性不好内颗，效果等同于datetime-local
- datetime-local - 選取本地時間钧排、日、月均澳、年
- search - 搜索域恨溜，語義化，表示定義搜索框
新的表單屬性
-
form
- autocomplete 設(shè)置整個表單是否開啟自動完成 on|off
- novalidate 設(shè)置H5的表單校驗是否工作 true 不工作 不加該屬性代表校驗
-
input:
- autocomplete 單獨(dú)設(shè)置每個文本框的自動完成
- autofocus 設(shè)置當(dāng)前文本域頁面加載完了過后自動得到焦點(diǎn)
- form 屬性是讓表單外的表單元素也可以跟隨表單一起提交
- form overrides
- formaction 在submit上重寫表單的特定屬性找前，當(dāng)點(diǎn)擊當(dāng)前submit時會以當(dāng)前值使用
- formenctype,
- formmethod,
- formnovalidate,
- formtarget
- list 作用就是指定當(dāng)前文本框的自動完成列表的數(shù)據(jù) datalist 在界面上是看不見的糟袁，只是用于定義數(shù)據(jù)列表的
- min / max / step
- min max 限制值的范圍，但是不會再輸入時限制躺盛，提交時校驗项戴，
- step設(shè)置的是每次加減的增量
- 主要使用在number range datepicker上
- multiple
- 文本域的多選
- pattern
- 設(shè)置文本框的匹配格式（正則）
- placeholder
- 文本框占位符
- required
- 限制當(dāng)前input為必須的
虛擬鍵盤適配
- 在移動端中，我們可以通過不同的表單類型控制彈出的鍵盤類型
關(guān)于什么時候使用H5的新特性槽惫，能不能使用新特性的問題
- 無傷大雅的地方直接用
- 比如一個文本框周叮，加上placeholder就具備占位文本提示功能，瀏覽器不支持也不會報錯界斜，那就可以直接使用
- 再比如
<input type="email">仿耽，如果瀏覽器不支持，默認(rèn)會顯示文本框各薇，那也可以直接用氓仲。
