iT邦幫忙

html5相關文章
共有 223 則文章
鐵人賽 開發技術 DAY 2
HTML5 & CSS3 系列 第 2

技術 30天分享(4) - HTML5 <canvas> 標籤

<canvas> 標籤是HTML5的畫布功能,可以在其中繪圖,但標籤本身只是個容器, 畫布內容必須用 javascript 來產生裡面的圖形,簡單的...

鐵人賽 開發技術 DAY 3
HTML5 & CSS3 系列 第 3

技術 30天分享(5) - HTML5 <video> 標籤

HTML5 除了 <audio> 標籤,也新增了 <video> 標籤,使影片能輕易的顯示在網頁上, 不過必須瀏覽器支援的格式,各家瀏覽...

技術 Day15 關於範本繫結資料 WinJS.Binding.Template

由於前幾個章節,提到了 ListView, GridiView, 甚至實作了分割應用程式等等,在這些範例中, 都有用到這個 WinJS.Binding.Temp...

徵才 【徵才】東森得易購 徵 React資深前端工程師(研發中心)

[團隊簡介] 前端團隊成員目前7人, 需補足8人。團隊採敏捷開發流程。 公司未來將發展跨境電商, 包括中國大陸, 東南亞, 日本, 韓國是我們的合作目標。 ht...

技術 Day 16 WinJS.UI.Flyout實作

FLlyout的詳細說明可見官方網站說明: http://msdn.microsoft.com/en-us/library/windows/apps/hh4...

鐵人賽 Modern Web DAY 24

技術 24 - 剖析投影片資料

昨天已經初步剖析出版面配置的資料,但是畫出來看還是有些問題。所以在剖析投影片資料前,先來修正一下... 修正版面配置的剖析方式 檢查了一下剖析出來的資料,看起來...

鐵人賽 Modern Web DAY 22

技術 22 - 用剖析出的資料試畫母片

大致上剖析出母片資料,除了寫測試之外,還是先試試看可不可以正常畫出來XD 目前產出的母片資料 先看看目前產出的母片資料長怎樣: "backgrou...

鐵人賽 開發技術 DAY 4
HTML5 & CSS3 系列 第 4

技術 30天分享(6) - HTML5 <svg> 標籤

<svg> 跟 <canvans> 有一些相同之處, 它們都是處理網頁上的圖像,並且標籤本身只是個像是畫布的容器,必須寫入內容才會顯示畫...

鐵人賽 開發技術 DAY 7
HTML5 & CSS3 系列 第 7

技術 30天分享(9) - HTML5 <details> & <dialog> 標籤

<details> 可以選擇展開內容或者關閉, 預設是標題會有個向右的三角形箭頭, 只要點三角箭頭就能隨意打開、關閉隱藏的內容, 而且只需要用到兩個...

技術 HTML Attributes 與 DOM Properties 的區別

 之所以寫這篇文章,只因在學習HTML5及Angular的過程,直接將attributes與properties搞混了,畢竟中文翻譯都叫「屬性」,在使用上(對菜...

鐵人賽 Modern Web DAY 19

技術 19 - 畫出標準投影片

之前只顧著做各種文字方塊、動畫效果及轉場效果,反而沒有嘗試畫出一個標準投影片,也就是標題加上文字列表,雖然投影片資料剖析的部份還沒做好,不過還是用預計會產生的資...

鐵人賽 Modern Web DAY 16

技術 16 - 文字呈現的細節

弄pptx的剖析有點膩了,今天先來看文字的呈現以及怎麼利用Canvas 2D Context來實作。 文字主體(p:txBody)、段落(a:p)與文字展現(a...

鐵人賽 Modern Web DAY 11

技術 11 - 試做轉場特效

之前的畫面繪製,都只有一個投影片,所以使用的資料都只有一個投影片。轉場特效通常會套用在投影片之間,這裡的試做就需要多張投影片,所以就需要調整一下了。 調整程式,...

鐵人賽 Modern Web DAY 7

技術 07 - 動畫的基礎

在Canvas做動畫不難,其實只是重複兩個動作: 清掉舊畫面 繪製出目前的畫面 很久以前,在HTML中做動畫,大概都是透過setTimeout()或setI...

鐵人賽 開發技術 DAY 12
HTML5 & CSS3 系列 第 12

技術 30天分享(14) - HTML5 fieldset 標籤

30天分享(14) - HTML5 fieldset 標籤 <fieldset> 是表單原本預設樣式的標籤,可以快速建立表單, 裡面的 CSS 設定...

鐵人賽 Modern Web DAY 3
菜鳥前端奮鬥史(欸? 系列 第 3

技術 Day03 「HTML?好吃嗎?」 ─ 沒有骨架人怎麼站呢?

有人來訊問到為什麼要放一隻柴柴當大頭照,其實牠的真身原本是這樣的 (饒富動感? 當初沒想到這麼快就會把腦海中的梗用完,果真有梗當思無梗之苦呀..   今天就...

鐵人賽 Modern Web DAY 23

技術 23 - 剖析佈景主題及版面配置

昨天畫出母片資料後,可以看到一些需要改善的部份,先來調整一下。 調整母片資料 這部份主要調整了幾個部分: 不需要繪製圖形背景時,不要繪製 剖析邏輯修正,這是導...

鐵人賽 開發技術 DAY 9
HTML5 & CSS3 系列 第 9

技術 30天分享(11) - HTML5 <figcaption> 標籤

30天分享(11) - HTML5 <figcaption> **** 標籤 <figcaption> 是 HTML5 用來排列圖片與...

鐵人賽 Modern Web DAY 9

技術 09 - 動畫改進

之前做的動畫效果很簡單,只有右移跟下移的直線動作。另一個基本的動畫是依照弧線來移動,就試著把它實作出來。 jQuery的動畫效果,預設會有加減速,而在Power...

鐵人賽 開發技術 DAY 11
HTML5 & CSS3 系列 第 11

技術 30天分享(13) - HTML5 <track> 標籤

30天分享(13) - HTML5 <track> 標籤 <track> 是用來顯示 video 裡的字幕 ,支援 vtt 檔 , 使用...

鐵人賽 Modern Web DAY 4
菜鳥前端奮鬥史(欸? 系列 第 4

技術 Day04 「Over my dead body」 ─ <body>裡面常見那些器官(欸

唉唷我累個擦,差一點就忘記發文直接去睡覺了 上一回我們介紹了很基礎的 HTML5 網頁架構 今天我們就來聊聊那些 body 中常看見的奇怪東西吧! <...

鐵人賽 Modern Web DAY 5

技術 05 - 單位的換算

Office OpenXML裡面使用的「單位」,目前看到的有幾個:長度、指定百分比、指定字型大小等,就用03的例子來實驗改進一下 長度 ECMA-376使用一種...

技術 【前端自學之路】如何開始?

大家好!我是Steven,現在是一位下班時用閒暇時間自學前端技術的上班族,今天想分享一些我在學習過程中所領悟到的事,並且分享給你們,首先今天想聊聊如何開啟前端自...

徵才 傑富資訊 ◆ 徵的就是你

【專注研發,追求創新】 我們是一群致力於遊戲軟體開發, 流著年輕活力血液的創新團隊, 公司目前北中南據點持續擴大業務中! 如果您也喜歡在Code世界中徜徉、對美...

鐵人賽 Modern Web DAY 1

技術 01 - 專案目標與相關技術資訊

緣起 我們原本有做一些SCORM的線上英語教材,製作方式是依據現有的版型與題型,用Excel製作課程的資料,然後套版產生html教材。 最近在規劃明年要做的教材...

鐵人賽 自我挑戰組 DAY 3
網頁學習紀錄 系列 第 3

技術 鐵人賽Day3-寫一個 Search 搜尋列吧!

這次來練習寫一個 Search Bar,要寫的樣式如下 我習慣在最外層寫一個 .wrap,在繼續將裡面要完成的 HTML 先寫完 所以程式碼會如下, <...

鐵人賽 影片教學 DAY 14

技術 Web前端整合 (2/2)

[Day 14] Web前端整合 3.2:HTML5 (HTML 5 + CSS 3 + JavaScript + APIs) (27min + 8min)...

鐵人賽 開發技術 DAY 13
HTML5 & CSS3 系列 第 13

技術 30天分享(15) - 加入 Shiv 讓舊版本瀏覽器支援 HTML5 新標籤

30天分享(15) - 加入 Shiv 讓舊版本瀏覽器支援 HTML5 新標籤 舊 IE 瀏覽器並不支援 HTML5, 所以並不認識 HTML5 新標籤 ,如果...

技術 鼠年全馬鐵人挑戰 WEEK 07:優化SEO- 語意化標籤!讓別人看懂你在寫什麼!

什麼是語意標籤?? 為了讓標籤(Tag)更具意義,已加強文件的結構化,讓搜尋引擎更清楚瞭解, 可以更清楚表現網頁中每個區塊的設計目的。 為什麼要用語意標籤?...