首頁>網頁設計教程> HTML教程
全部 Dreamweaver教程 Javascript教程 HTML教程 CSS教程 心得技巧 DHTML教程 網頁特效 WEB標準化
HTML教程
  • HTML5實作行動端複製功能

    HTML5實作行動端複製功能

    首先遇到這個需求是就各種百度,但發現基本上都是用js實現,而且相容性還非常不好。但在尋覓和嘗試的過程中,發現只需要css程式碼也可以完全實現的,對需要複製內容的標籤加上下面這幾行程式碼就可以了。 -webkit-touch-callout: a
    2025-03-19
  • HTML5實現文件斷點續傳的方法

    HTML5實現文件斷點續傳的方法

    HTML5的FILE api,有一個slice方法,可以將BLOB對象進行分割。前端通過FileList對象獲取到相應的文件,按照指定的分割方式將大文件分段,然後一段一段地傳給後端,後端再按順序一段段將文件進行拼接。斷點續傳原理目前比較常用
    2025-03-19
  • 微信小程式之html5 canvas繪圖並儲存到系統相冊

    微信小程式之html5 canvas繪圖並儲存到系統相冊

    開始實現之前先上個效果圖tips1.網絡圖片需要先配置download域名,可透過wx.getImageInfo轉為臨時路徑;2.個人習慣問題,我習慣使用async-await語法,所以需要引入regenerator這個庫,使用方式可上網查。
    2025-03-19
  • 詳解行動端HTML5音訊與視訊問題及解決方案

    詳解行動端HTML5音訊與視訊問題及解決方案

    最近在研究用影片取代動畫,用影片取代精靈動畫,我們稱這種影片叫做互動影片。傳統的精靈動畫:磁碟空間大,下載慢,尤其是在線播放,會更慢文件太多,在線播放的時候,太多http請求,會導致響應慢,或者行為失常因此,急需開發了一套技術,用影片代替精
    2025-03-18
  • 詳解HTML5新增標籤

    詳解HTML5新增標籤

    HTML 5 是新的網路標準,目標在於取代現有的HTML 4.01, XHTML 1.0 and DOM Level 2 HTML 標準。它希望能夠減少瀏覽器對於需要插件的豐富性網頁應用服務(plug-in-based rich in
    2025-03-18
  • HTML5單頁面手勢滑屏切換原理分析

    HTML5單頁面手勢滑屏切換原理分析

    H5單頁面手勢滑屏切換是採用HTML5 觸摸事件(Touch) 和CSS3動畫(Transform,Transition)來實現的,效果圖如下所示,本文簡單說一下其實現原理和主要思路。 1、實現原理假設有5個頁面,每個頁面佔屏幕100%寬,
    2025-03-18
  • HTML5網頁音樂播放器的範例程式碼

    HTML5網頁音樂播放器的範例程式碼

    本文介紹了HTML5網頁音樂播放器的範例程式碼,分享給大家,具體如下:1功能介紹HTML5中推出了音視頻標籤,可以讓我們不借助其他插件直接播放音視頻。下面我們就利用H5的audio標籤及其相關屬性和方法來製作一個簡單的音樂播放器。主要包
    2025-03-18
  • canvas離屏技術與放大鏡實現程式碼範例

    canvas離屏技術與放大鏡實現程式碼範例

    利用canvas除了可以實現濾鏡,還可以利用離螢幕技術放大鏡功能。為了方便講解,本文分為2 個應用部分:實現浮水印和中心縮放實現放大鏡1. 什麼是離屏技術? canvas 學習和濾鏡實作介紹過drawImage介面。除了繪製影像,這個介面還可以
    2025-03-18
  • HTML5的postMessage的使用手冊

    HTML5的postMessage的使用手冊

    我們在碼程式碼的時候,常常會碰到以下跨域的情況:1、頁面內嵌套iframe,與iframe的訊息傳遞2、頁面與多個頁面之間的傳遞訊息針對這些令人頭痛的跨域問題,html5特地推出新功能--postMessage(跨文件訊息傳輸)。 postMe
    2025-03-18
  • 利用Storage Event實現頁間通訊的範例程式碼

    利用Storage Event實現頁間通訊的範例程式碼

    我們都知道觸發window.onstorage必須滿足以下兩個條件:透過localStorage.setItem或sessionStorage.setItem儲存(更新)某個storage儲存(更新)這個storage時,它的新值必須與之前
    2025-03-18
  • canvas 實作github404動態效果的範例程式碼

    canvas 實作github404動態效果的範例程式碼

    前幾天使用css樣式和js致敬了一下github404的類似界面,同時最近又接觸了canvas,本著瞎折騰的想法,便藉著之前的js的算法,使用canvas來完成了github404的動態效果。效果圖檔案目錄檔案資源檔案來源碼與圖片在文章結尾給
    2025-03-18
  • 解決微信小程式scroll-view換行問題

    解決微信小程式scroll-view換行問題

    今天在寫小程式的時候使用了scroll-view,但是發現在scroll-view中一行文字不能換行,程式碼如下:<scroll-view scroll-y style=width:100rpx;height:100rpx;> asdhadjh
    2025-03-18
  • 前端面試必備之html5的新特性

    前端面試必備之html5的新特性

    前言什麼是HTML5:HTML5 是下一代的HTML,將成為HTML、XHTML 以及HTML DOM 的新標準。今天來談談前端面試中基本上每次一面的時候都會被問到的一個問題,那就是html5的新特性。這個是學習前端必須掌握的基礎知識。
    2025-03-18
  • HTML5拖拉上傳文件的簡單實例

    HTML5拖拉上傳文件的簡單實例

    在HTML5的pc上面實現了相當多的功能,工作中也用到了拖拉上傳,特地記錄下該功能在拖動目標上觸發事件(源元素): ondragstart - 用戶開始拖動元素時觸發ondrag - 元素正在拖動時觸發ondragend - 用戶完成元素
    2025-03-18
  • div寬度設置width:100%後再設置padding或margin超出父元素的解決辦法

    div寬度設置width:100%後再設置padding或margin超出父元素的解決辦法

    前言本文介紹的是利用CSS3的新屬性box-sizing,解決div寬度設置width:100%後再設置padding或margin超出父元素的問題,有需要的朋友們可以參考借鑒。語法box-sizing: content-box|borde
    2025-03-17