本文介紹的新標籤有:可以展開與收起子節點部分的details;與 input 標籤配合,實現模糊查詢的datalist;進度條標籤progress。
此標籤可以將一些資訊包裹在標籤標題下。
標準**與狀態如下:
其中:details 標籤是標題與內容的父級元素;summary 標籤是 details 標籤的子標籤,作用是修改 details 標籤的標題,只要在details 標籤的包裹內,位置關係不影響它的作用;p 標籤是可替換內容,作用是 details 的詳情內容。
details
hello, this is details
收起狀態【預設狀態】
展開狀態
作用:替代了以前我們手寫展開與收起按鈕,省去了樣式與功能的編寫部分,標籤化使得功能規範化。
此標籤與 input 標籤配合可以快速實現模糊搜尋欄,可以省去大量模糊搜尋欄的邏輯**的編寫,規範化**也使得使用成本大大降低。
用法:配合 array 中的 filter 選擇器使用,可以將資料批量匯入到 datalist 中的 option 中的 value 屬性中,直接完成模糊搜尋欄的製作。
效果:
作用:乙個標籤直接完成進度條功能,可以搭配簡單的定時器完成簡易的沙漏功能。
簡易**如下:
其中 max 屬性表示進度條的最大值, value 是當前顯示值部分。我使用了基礎的定時器功能完成乙個十秒倒計時功能。
部分效果圖
html5 標籤新特性
html5主要的特徵就是標籤語義化。語義化的好處就是使得 結構讓人清晰易讀,這些語義化的標籤會有一些自帶屬性,比如說邊距 顏色 和display的設定等等 頭部 內容 內容分塊1 內容分塊2 內容分塊3 底部 導航 側欄 引用 自帶邊距,和縮排 標記 保留書寫的樣式 包括空格 tab 還有 ente...
HTML5新標籤學習
標籤用來表示乙個縮寫詞或者首字母縮略詞,如 www 或者 nato 標籤為頁面上的所有的相對鏈結規定預設 url 或缺省目標。標籤用來覆蓋預設的文字方向 dir ltr 左開始 rtl 右開始 配合使用可以設定 的每列公用樣式 isbn title price 3476896 my first ht...
HTML5學習 新標籤 一
一 標籤定義外部的內容。外部內容可以是來自乙個外部的新聞提供者的一篇新的文章,或者來自 blog 的文字,或者是來自論壇的文字。亦或是來自其他外部源內容 二 標籤定義 article 以外的內容。aside 的內容應該與 article 的內容相關。三 audio 標籤定義聲音,比如 或其他音訊流。...