一.HTML5的新增語義標簽

1. 全新語義化標簽

:用來定義文檔或應用程序中的區域或章節.

:用來定義文檔的主導航區域,其中的鏈接指向其他頁面或當前頁面的某些區域.

用來包裹獨立的內容片段,通常用來包裹文檔中文章.

:用來表示與頁面主內容松散相關的內容,常被用來用作側邊欄的部分.

:如果頁面中有一組使用

,

,

等標簽的標題,標語和副標題, 則可以使用該標簽進行包裹.HTML5的大綱結構算法會自動組織好大綱.

:被用作網頁的頁眉部分

:被用作網頁的頁腳部分

2.語義化標簽的兼容性問題

在IE低版本瀏覽器中,無法識別HTML5的新增標簽,所以使用HTML5進行的頁面布局會全部無效.這里推薦使用Modernizr來解決兼容性問題

Modernizr是一個用于檢測瀏覽器功能的開源JavaScript庫.包括Twitter,微軟和谷歌都在使用Modernizr作為兼容性的解決方案.

2.2 引用Modernizr

Modernizr作為一個JavaScript的庫,引用方式和jQuery一樣,都是在

2.3針對IE低版本瀏覽器增加墊片腳本

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

二.HTML5中的多媒體

1. 多媒體標簽

1.1

HTML 標簽用于在HTML文檔中嵌入視頻文件.

1.2

HTML 標簽用于在HTML文檔中嵌入音頻文件.

1.3 文件格式的兼容性問題

由于專利的問題，不同的瀏覽器對HTML5的video和audio有不同的規范和實現；所以,多媒體的文件格式的不同會在不同瀏覽器中出現兼容性問題.通常使用元素來解決.

1.3.1 的兼容性解決方案

1.3.2 的兼容性解決方案

2. 多媒體常用屬性

1.autoplay

布爾屬性;指定后，視頻會馬上自動開始播放，不會停下來等著數據載入結束.

2.control

加上這個屬性，Gecko 會提供用戶控制，允許用戶控制視頻的播放，包括音量，跨幀，暫停/恢復播放.

3.loop

布爾屬性；指定后，會在視頻結尾的地方，自動返回視頻開始的地方.

4.muted

布爾屬性，指明了視頻里的音頻的默認設置。設置后，音頻會初始化為靜音。默認值是false,意味著視頻播放的時候音頻也會播放.

5.src

要嵌到頁面的視頻的URL。可選；你也可以使用 元素來指定需要嵌到頁面的文件。

三.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 和 :list屬性中的值同時也是中的id,這樣就可以讓與輸入項關聯起來,在用戶開始輸入的時候,輸入框下面就會顯示一個數據選擇框,其中包含從中檢索到的匹配數據.

multiple:規定元素可以選擇多個值.

pattern:描述了一個正則表達式用于驗證中的值.

3. 表單事件

oninput : 當用戶輸入內容的時候觸發該事件

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

總結

以上是生活随笔為你收集整理的html5下拉智能,HTML5新增标签 + 智能表单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。