菜鳥前端工程師的HTML5新手指南(二)-何謂載入進度顯示條?

菜鳥前端工程師的HTML5新手指南(二)-何謂載入進度顯示條?

菜鳥前端工程師的HTML5新手指南(二)-何謂載入進度顯示條?
菜鳥前端工程師的HTML5新手指南(二)-何謂載入進度顯示條?

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新手指南(三)-影片嵌入怎麼做?


HTML5教學第一招-工欲善其事,必須要有免費的網頁編輯器


本日HTML5教學,教你利用CSS當你的網頁化妝師!


Java課程、UI課程、程式課程、網路行銷課程推薦


單一技能已被淘汰 讓Java課程使你充實自我 還能媒合高薪職缺


沃而瑪引進AI人工智慧,掃描貨價偵測價格標示樣樣來!!


再不報名Python課程,正從事這些職業的人就要飯碗不保啦!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *