HTML5應有盡有?連下載的進度條都有!! 到底怎麼用就讓我們看下去!!
HTML5應有盡有?連下載的進度條都有!! 到底怎麼用就讓我們看下去!!

到底是利用HTML5裡面的什麼元素,能讓前端工程師用來顯示網頁?如此方便?[/caption] 比起 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教學之標籤的重要性-網頁設計更上手的小秘密

HTML5教學裡的文字攏底在

HTML5教學讓你的網頁更容易被搜尋引擎"了解"

擠進高薪科技大門-Java課程等你來瞭解!

神奇的Java課程-竟可讓人從零經驗到成為工程師不用一年!!?

達內教育開幕 培養台灣IT人才進入全球企業

達內教育學員見證  

arrow
arrow

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