以圖明志

HTML

用HTML5 Canvas做一個畫圖板

一個簡單的Canvas應用
功能很簡單,原理其實和拖放是類似的,主要是三個事件:在canvas 上綁定mousedown 事件以標志繪畫的開始(調用moveTo 移動畫筆) 在document 上綁定mousemove 事件來處理繪畫時的行為(調用lineTo 以及stroke 進行繪畫) 在document 上綁定mouseup 事件以標志繪畫的結束(解綁document 上的兩個事件)

HTML

用HTML5 canvas寫一個時鐘

圖片指針用ctx的drawImage可以實現
HTML5足夠強大實現很多功能,畫一個時鐘只是一個小玩意。圖片指針用ctx的drawImage可以實現。至于兼容性問題,網上的解決方案已經很多了。這個東東是用來玩的,不是用來做應用的,學習下canvas API。

HTML

你知道HTML標簽設計的本意嗎?

把HTML標簽用到該用的地方去
“DIV+CSS”這個詞匯不知道害了多少人,也許其提出者本意并沒有錯,但是跟風者從表現曲解了其意思,認為整個頁面就應當是DIV+CSS文件的組合。這樣做,對于視覺上并沒有什么影響,因為還原了之前設計的頁面效果圖,但如果這種HTML文檔交給機器(例如蜘蛛)去分析,它可能根本找不到重點,你整個頁面對它來說,就如同一個白蟻窩。

HTML

HTML標簽的使用要注意語義化

用什么標簽最能描述這塊內容
語義化標簽:你認為用什么標簽最能描述這塊內容,覺得這樣表述更有意義,那么就可以使用這個標簽。現在的瀏覽器對CSS支持都挺完善的(不包括CSS3),講究的是結構與表現相分離,結構與行為相分離,一個WEB頁面,結構是最主要的,結構相當于一棟房子的墻,標簽是一塊塊磚,磚擺得有序,擺得整治齊,墻才牢固,所以說標簽語義化很重要。

HTML

HTML5用canvas繪制五星紅旗

學習canvas的一個小實例
作為HTML5標準的一部分,Canvas元素允許腳本動態渲染點陣圖像。這個 HTML 元素是為了客戶端矢量圖形而設計的。它自己沒有行為,但卻把一個繪圖 API 展現給客戶端 javascript 以使腳本能夠把想繪制的東西都繪制到一塊畫布上。HTML 5 canvas 提供了通過 JavaScript 繪制圖形的方法,此方法使用簡單但功能強大。

HTML

圣誕了,送大家一顆HTML5圣誕樹

HTML5 Canvas圣誕樹
又逢圣誕了,為了讓小站NowaMagic有點節日氣氛,這里也弄一棵圣誕樹放放~大家可以先看下效果。由于用到canvas以及一些復雜的運算,建議使用Chrome瀏覽器觀看,最為流暢,其次是Opera(已經開始有點卡了),Firefox差不多是逐幀播放了,Safari貌似有bug,除非用鼠標不斷點擊,不然幾乎不會動了。用IE的話請自重。

HTML

HTML5 canvas流體力學效果

這個世界牛人實在太多了
某人用Java搞了一個流體力學的演示:http://grantkot.com/MPM/Liquid.html。 HTML 5版的流體力學演示(推薦使用Chrome瀏覽器瀏覽)不過,這僅僅是個開始。某同學將其發布上了reddit.com,于是,全世界的同學們開始給力了。

HTML

HTML5 canvas 創意:飛翔的鳳凰

藝術!不是嗎?
當我看到這件作品的時候,我表示非常喜歡。這個作品的產生不僅僅需要編程和算法,作者肯定是個充滿了藝術細胞的人。倘若有什么canvas藝術作品比賽的話,我想它就是獲獎的那個。先觀賞下演示吧。注意,要看到效果,請確保你的瀏覽器支持 HTML 5。如果你還在使用舊版 IE,請更換新版瀏覽器。

HTML

關于表單中Readonly和Disabled

靈活運用這兩個屬性
Readonly和Disabled是用在表單中的兩個屬性,它們都能夠做到使用戶不能夠更改表單域中的內容。但是它們之間有著微小的差別,Readonly只針對input(text / password)和textarea有效,而disabled對于所有的表單元素都有效,包括select, radio, checkbox, button等。

HTML

你所未必知道的關于<!DOCTYPE>標簽細節

學習從細節入手
你有沒有仔細了解過標簽嗎?W3cschool上建議使用XHTML Transitional DTD,很多人就很聽話地把Dreamweaver的HTML文檔類型默認設置為XHTML 1.0 Transitional。之后就理所當然地一直用到現在了。人這東西還真是,越長大就越懶了,很多東西都被潛意識地當成了理所當然。

HTML

解析 HTML DocumentType 元素

不起眼的一個細節學問也很多
W3C規范的正確翻譯應該為W3C推薦(W3C Recommendations)。很多設計師的眼里W3C就是標準。但是許多人都是一知半解。下面列于了目前W3C規范中的HTML規范和XHTML規范,稍后會講解HTML和XHTML的關系。 XHTML可以看成是最新的HTML規范,是一項可從 HTML 4.01 平穩遷移的 XML 應用。

HTML

HTML5 語義標簽介紹

語義標簽是HTML5的一大改進
HTML5 規范包括一系列新的語義元素,用于提供 Web 頁面的各個區域或部分的意義,例如頁眉、頁腳、導航等等。在以前版本的 HTML 中,通常使用 div 元素來創建這些部分,使用 ID 或 類屬性來區分它們。這樣做的問題是這沒有任何語義意義,因為沒有定義嚴格的規則來指定要使用的類名稱或 ID,使軟件極其難以確定特定區域的操作。

HTML

JavaScript DOM對表格的操作

表格簡單又不簡單
summary 屬性:用于概括整個表格的內容。它對于搜索引擎的機器人記錄信息十分重要。bordercolor 屬性:用來設置表格邊框的顏色。但它在不同的瀏覽器下顯示的效果不一致。(不推薦使用bordercolor 屬性,而推薦使用CSS 樣式表的border 屬性來進行設置)。

HTML

深入解析HTML的form標簽

常用的form標簽你真的了解嗎?
在Javascript中,頁面上的每一對form標記都解析為一個對象,即form對象。可以通過document.forms獲取以源順序排列的文檔中所有form對象的集合。每一個表單元素的文字描述都應該使用label標記。該標記用于將文字綁定到對應的表單元素上,它的for屬性指定它所要綁定的表單元素id值。

HTML

HTML圖片的熱區map area

在圖片的特定區域添加熱區與鏈接
area標記主要用于圖像地圖,通過該標記可以在圖像地圖中設定作用區域(又稱為熱點),這樣當用戶的鼠標移到指定的作用區域點擊時,會自動鏈接到預先設定好的頁面。shape和coords:是兩個主要的參數,用于設定熱點的形狀和大小。coords 屬性定義了客戶端圖像映射中對鼠標敏感的區域的坐標。

HTML

防止瀏覽器假死的一個HTML5方案

HTML5 webWorker的使用
在Web開發的時候經常會遇到瀏覽器不響應事件進入假死狀態,甚至彈出“腳本運行時間過長“的提示框,如果出現這種情況說明你的腳本已經失控了。一個瀏覽器至少存在三個線程:js引擎線程(處理js)、GUI渲染線程(渲染頁面)、瀏覽器事件觸發線程(控制交互)。
1 / 2 首頁 < Prev 1 2 Next > 尾頁 頁碼:
英超直播吻球网