想跟風當程式工程師的你,一定不能錯過本HTML5基礎系列!本篇是(6)-progress載入進度顯示條.
比起 HTML4,HTML5 新增的元素可說是應有盡有,多元富變化。其中還有 <progress> 元素,讓前端工程師可以用來顯示網頁的載入進度、或是上載、下載的進度等等。
想要在HTML5 中使用 <progress> 元素載入進度條 (progress bar) 的語法與結果範例如下:
上述的 <progress> 標籤,最大值設定為 100%、最小值設定為 0%。其進度是固定在 22% (語法:<progress value="22" max="100">) 的。如果希望進度條的進度能隨著網頁實際 loading 進度顯示的話,則需要配合 javascript 來設定。
HTML5新增元素目錄:
|
參考連結:
HTML5新手入門課程(4)-audio音訊嵌入元素
HTML5新手入門課程(5)-video影片嵌入
HTML5新手入門課程(7)-Web Storage 瀏覽器儲存
前端工程師入門款小常識-認識ID選擇器
搞清楚前端工程師的字體世界!-絕對單位
前端工程師看過來!如何用CSS來搞定字體?-相對單位篇
達內教育開幕 培養台灣IT人才進入全球企業