HTML5基礎訓練班第二課-認識progress載入進度顯示條

一談到HTML5,你一定要來認識一下<progress>元素~它可以讓前端工程師輕鬆掌握網頁載入進度哦!

說實在的,比起 HTML4,HTML5 新增的元素可說是應有盡有。其中還有 <progress> 元素,可以讓前端工程師可以用來顯示網頁的載入進度、或是上載、下載的進度等等。

假設要在 HTML5 中使用 <progress> 元素,載入進度條 (progress bar) 的語法與其結果範例如下:

See the Pen progress bar by Tedutw (@Tedutw) on CodePen.

一般前端工程師建議,如上述在HTML5中的 <progress> 標籤為例,最大值設定為 100%、最小值設定為 0%。其進度是固定在 22% (語法:<progress value="22" max="100">) 。如果希望進度條的進度能隨著網頁實際 loading 進度顯示的話,則必需配合 javascript 來設定。

HTML5新增元素目錄:

  1. HTML5的7個內容模組Content Models
  2. header,nav與footer元素
  3. article,section與aside元素
  4. audio影片嵌入元素
  5. video影片嵌入元素
  6. progress載入進度顯示條

 

 

 

 

推薦閱讀:
HTML5基礎訓練班第三課-video影片嵌入應用


網路行銷菜鳥的日記Day1-HTML5教學,第一次寫不用錢!?


想要網頁漂亮又吸引人?今日的HTML5教學不要錯過!


中國IT教育領導品牌 達內教育集團第一家海外授權中心


讓你實現目標與夢想的技術實力-Java課程


最適合台灣人的人工智慧語音辨識APP----雅婷逐字稿!!


想跟上主流進修Python課程,現在是絕佳時刻!

    jimchen19901212 發表在 痞客邦 留言(0) 人氣()