程式課程選達內 -
美國上市IT教育集團

0800-777-100


週一到週五 09:00~21:00 週六到週日 09:00~18:00

熱門課程

前端工程師HTML5入門課程(6)-progress載入進度顯示條

  • 時間:2019-05-29
  • 發布:達內教育台灣
  • 來源:達內教育台灣 > 知識庫 > 前端工程師/網頁設計教學

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

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

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

上述的 <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入門課程(5)-video影片嵌入元素
下一篇:前端工程師HTML5入門課程(1)-HTML5的7個內容模組Content Models
使用平板電腦搜尋網頁的使用者圖片|SEO優化|達內教育

2018年SEO八部曲之1-秒懂你的使用者

等網頁Loading等到想睡著的男性圖片|SEO優化|達內教育

2018年SEO 8部曲之2-你的網頁夠快嗎?

使用Macbook搜尋網頁的貓咪圖片|SEO優化|達內教育

2018年SEO 8部曲之3-Title與Meta Description還是要做SEO優化

使用Macbook搜尋網頁的貓咪圖片|SEO優化|達內教育

2018年SEO 8部曲之4-原來URL也可以做SEO優化

使用Macbook搜尋網頁的貓咪圖片|SEO優化|達內教育

2018年SEO八部曲之5-圖片的 SEO 優化

使用平板電腦搜尋網頁的使用者圖片|SEO優化|達內教育

2018年SEO八部曲之7-Schema結構化資料

 

選擇城市和中心
貴州省

廣西省

海南省