html5

更多文章：www.f-z.cn

一.HTML5的新增語義標簽

1. 全新語義化標簽
<section>:用來定義文檔或應用程序中的區域或章節. <nav>:用來定義文檔的主導航區域,其中的鏈接指向其他頁面或當前頁面的某些區域. <article>用來包裹獨立的內容片段,通常用來包裹文檔中文章. <aside>:用來表示與頁面主內容松散相關的內容,常被用來用作側邊欄的部分. <hgroup>:如果頁面中有一組使用<h1>,<h2>,<h3>等標簽的標題,標語和副標題, 則可以使用該標簽進行包裹.HTML5的大綱結構算法會自動組織好大綱. <header>:被用作網頁的頁眉部分 <footer>:被用作網頁的頁腳部分
2.語義化標簽的兼容性問題
在IE低版本瀏覽器中,無法識別HTML5的新增標簽,所以使用HTML5進行的頁面布局會全部無效.這裏推薦使用Modernizr來解決兼容性問題
Modernizr是一個用於檢測瀏覽器功能的開源JavaScript庫.包括Twitter,微軟和谷歌都在使用Modernizr作為兼容性的解決方案.
2.1 下載Modernizr：http://www.modernizr.com
2.2 引用Modernizr
Modernizr作為一個JavaScript的庫,引用方式和jQuery一樣,都是在<script>標簽中進行引用,代碼如下:

	
		<script src="js/modernizr.js"> </script>
	

2.3針對IE低版本瀏覽器增加墊片腳本
因為我們在高版本瀏覽器中並不需要使用Modernizr進行兼容性方案的解決,所以,我們只需要針對IE8以下瀏覽器引用上述的js文件,代碼如下:

	
		<!--[if lts IE 8]>
	

	
		<script src="js/modernizr.js"></script>
	

	
		<![endif]-->
	

二.HTML5中的多媒體
1. 多媒體標簽
1.1 <video>
HTML <video>標簽用於在HTML文檔中嵌入視頻文件.
1.2 <audio>
HTML <audio>標簽用於在HTML文檔中嵌入音頻文件.
1.3 文件格式的兼容性問題
由於專利的問題，不同的瀏覽器對HTML5的video和audio有不同的規範和實現；所以,多媒體的文件格式的不同會在不同瀏覽器中出現兼容性問題.通常使用<source>元素來解決. 1.3.1 <video>的兼容性解決方案

	
		<video controls>
	

	
		<source src = "yourvideo.webm" type="video/webm">
	

	
		<source src = "yourvideo.mp4" type="video/mp4">
	

	
		</video>
	

1.3.2 <audio>的兼容性解決方案

	
		<audio controls>
	

	
		<source src = "youraudio.ogg" type="audio/ogg">
	

	
		<source src = "youraudio.mp3" type="audio/mp3">
	

	
		</audio>
	

2. 多媒體常用屬性
1.autoplay 布爾屬性;指定後，視頻會馬上自動開始播放，不會停下來等著數據載入結束.
2.control 加上這個屬性，Gecko 會提供用戶控制，允許用戶控制視頻的播放，包括音量，跨幀，暫停/恢復播放.
3.loop 布爾屬性；指定後，會在視頻結尾的地方，自動返回視頻開始的地方.
4.muted 布爾屬性，指明了視頻裏的音頻的默認設置。設置後，音頻會初始化為靜音。默認值是false,意味著視頻播放的時候音頻也會播放.
5.src 要嵌到頁面的視頻的URL。可選；你也可以使用 <source> 元素來指定需要嵌到頁面的文件。
三.HTML5中的智能表單
1. 表單新增輸入類型
type="email":指定用戶輸入符合電子郵箱格式的值,如果提交一個不符合電子郵箱格式的值是,瀏覽器會生成警告信息. type="number":指定用戶輸入數字類型的值. type="tel": 對格式沒有要求,只是在針對移動端上,對點擊後跳出數字鍵盤. type="color":在支持該特性的瀏覽器中生成一個顏色選擇器,讓用戶可以選擇十六進制的顏色值 type="date:在支持該特性的瀏覽器中生成一個日期選擇器. type="month:在支持該特性的瀏覽器中生成一個月份選擇器. type="week:在支持該特性的瀏覽器中生成一個選擇器,選擇器允許用戶選擇一年中的某一周. type="time:允許用戶輸入一個24小時制的時間值,在支持該特性的瀏覽器中會生成一個加減控制按鈕. type="range和:生成一個滑動條,默認的輸入範圍是0到100.
2. 表單新增屬性
placeholder: 在表單域中顯示占位符 required:表明該表單必填,如果表單提交時,必填項沒有任何信息,瀏覽器則會顯示警告信息. autofocus:讓表單在加載完成時就有一個表單被默認選中,方便用戶輸入 autocomplete:幫助用戶根據歷史輸入信息自動完成輸入 list 和 <datalist>:list屬性中的值同時也是<datalist>中的id,這樣就可以讓<datalist>與輸入項關聯起來,在用戶開始輸入的時候,輸入框下面就會顯示一個數據選擇框,其中包含從<datalist>中檢索到的匹配數據. multiple:規定<input>元素可以選擇多個值. pattern:描述了一個正則表達式用於驗證<input>中的值.
3. 表單事件
oninput : 當用戶輸入內容的時候觸發該事件

oninvalid: 當信息無法驗證通過的時候觸發該事件

領取更多資料

加入職業技能圈 q群：272292492

分針網——每日分享：HTML5新增標簽 + 智能表單