tag HTML

標籤
貢獻636
578
06:37 AM · Oct 27 ,2025
tuzixiansen_63d4d65909d62 頭像 u_15469972 頭像 u_17534189 頭像 u_16164933 頭像 u_17569005 頭像 u_13934709 頭像 u_9849794 頭像 smileZAZ 頭像 u_14540126 頭像 u_15903730 頭像 u_17487639 頭像 u_16213574 頭像

@HTML / 博客 RSS 訂閱

nihaoanihao 頭像

你好啊你好 - div + transform 實現旋轉圖片並得到期望的佔位盒子

效果圖 使用示例 script setup lang="ts" import RotatedImage from "**/RotatedImage.vue"; import { ref } from "vue"; const value = ref(50); const clockwise = ref(true); const src = ref( "https://naive-ui.os

vue.js , Css , HTML , 前端 , Javascript

收藏 評論

shuirongshui 頭像

水冗水孚 - 你用過docker部署前端項目嗎？Tell Me Why 為何要用docker部署前端項目呢？

需求開發場景 在説docker之前，我們先來看看一般的需求開發和部署場景，是否需要安裝node 需求開發部署場景 開發環境，我們使用windows或mac，開發前端項目，正常來説，都是要安裝好對應node版本 ，使用node提供的npm包管理（構建）工具【除非是一個簡單的只有hello world的html文件不用node】 生產環境，要發佈到服務器上 1. 靜態SPA單頁面應用部署 服務器

node.js , dockerfile , Docker , HTML , Ubuntu

收藏 評論

good_luck_5e9ba6e9aa054 頭像

360Web - 2026年Vue3 Admin前端框架開發技術深度解析

2026年Vue Admin前端框架開發技術深度解析 一、技術趨勢與演進方向 1.1 構建工具革命 2026年，Vite 6已成為默認構建工具，其基於Rust的Rolldown引擎使構建速度較Webpack提升300%。配合模塊聯邦（Module Federation）特性，可輕鬆實現微前端架構，例如將商品管理、支付系統拆分為獨立子應用動態加載。Vue Admin Better已實現通過單一配置項

css3 , HTML , 前端 , Javascript

收藏 評論

xingchendahai_68d7dff410962 頭像

星辰大海 - 自制版MC

!DOCTYPE html html lang="zh-CN" head meta charset="UTF-8" meta name="viewport" content="width=device-width, initial-scale=1.0" title大型3D方塊世界/title style * { margin: 0; paddin

HTML

收藏 評論

xingchendahai_68d7dff410962 頭像

星辰大海 - 論如何製作簡易網頁槍械

武器系統製作：從零開始 第一步：先創造一個武器（用HTML） 把武器想象成一個玩具模型，我們先把它做出來。 !-- 這把槍叫"M4"，傷害35，射速10 -- div class="weapon" id="m4" h3M4 突擊步槍/h3 p傷害：span class="damage"35/span/p p射速：span class="fire-rate"10/span/

HTML

收藏 評論

xingchendahai_68d7dff410962 頭像

星辰大海 - 模擬網頁中國象棋模擬對戰

簡介 本程序有人人對戰和人機對戰，歡迎挑戰 源碼 ''' !DOCTYPE html html lang="zh-CN" head meta charset="UTF-8" meta name="viewport" content="width=device-width, initial-scale=1.0" title迷你象棋/title style bod

人工智能 , HTML , Python

收藏 評論

xingchendahai_68d7dff410962 頭像

星辰大海 - 網頁自制數學助手

介紹 本論文的數學助手不做過多講解，因為比較簡單，主要是1，本文屬於AI回答，僅供參考。2，他會跟你秀一段。3,它有一定的思維能力，你可以把不會的數學題發給它 源碼 !DOCTYPE html html lang="zh-CN" head meta charset="UTF-8" meta name="viewport" content="width=device-width,

HTML

收藏 評論

tuzixiansen_63d4d65909d62 頭像

兔子先森 - uniapp微信小程序請求麥克風授權

首先找到manifest.json文件，開啓微信小程序授權請求 "permission": { "scope.record": { "desc": "需要使用麥克風進行語音錄製" // 此處描述需符合微信規範 } } 然後通過uni.getSetting查詢麥克風授權狀態 麥克風的scope值為scope.record，如果已授權則直接返回，若

vue.js , uniapp , HTML , 前端 , Javascript

收藏 評論

xingchendahai_68d7dff410962 頭像

星辰大海 - 自制植物大戰殭屍

介紹 1，基本講解 “UTF—8” 防止中文亂碼 "title" 這是網頁標題 “!DOCTYPE”**的作用是聲明這是“HTML5”，防止不同瀏覽器出現報錯信息 ** 如果有不理解的歡迎私信 源碼 !DOCTYPE html html lang="zh-CN" head meta charset="UTF-8" meta name="viewport" conte

HTML , Python

收藏 評論

tuzixiansen_63d4d65909d62 頭像

兔子先森 - uniapp微信小程序長按功能

現在要實現一個按鈕長按的功能，大概有如下幾個要點： 1、長按按鈕，按鈕覆蓋整個輸入框 2、長按的過程中移動手指，判斷手指移動的位置是否在按鈕內 3、長按鬆開，按鈕還原 按鈕結構如下： view id="audio-full" :class="[ 'audio-full', isLongpress 'touch-longpress'

vue.js , uniapp , HTML , 前端 , Javascript

收藏 評論

tuzixiansen_63d4d65909d62 頭像

兔子先森 - 流式輸出-建立SSE連接-01

什麼是流式輸出 流式輸出，也稱為流式傳輸，指的是服務器持續地將數據推送到客户端，而不是一次性發送完畢。這種模式下，連接一旦建立，服務器就能實時地發送更新給客户端。 人話講就是跟接口建立連接，只要接口不斷開，服務器就能實時的把信息發送給前端，AI流式輸出中，接口每次返回一小段話，前端拿到後流式渲染即可。 有點類似websocket，但SSE是單向的 fetch-event-source

react , vue.js , HTML , 前端 , Javascript

收藏 評論

tuzixiansen_63d4d65909d62 頭像

兔子先森 - 流式輸出-流式渲染-02

現在有很多框架實現了流式渲染，我在這裏例舉幾個： React框架 ● Ant-Design-X Vue框架 ● Element-Plus-X ● MateChat （PC/H5雙端兼容） H5移動端 ● ChatUI-React 這裏以MateChat框架做示例，MateChat是一個獨立的AI對話組件，不與其它UI框架關聯，可直接引入項目使用。 一般的流式渲染分兩種

vue.js , HTML , 前端 , Javascript

收藏 評論

tuzixiansen_63d4d65909d62 頭像

兔子先森 - 一個手寫的vue3錄音組件，支持錄音波紋、外觀自定義調節

該組件有兼容問題，MAC上不可用，需注意，這裏僅用來做記錄，如需音頻功能，可使用Recorder.js，方案很成熟。 組件如下： template div class="container" ref="container" canvas id="visualizer" ref="canvas"/canvas /div /template script setup lang=

react , vue.js , HTML , 前端 , Javascript

收藏 評論

tuzixiansen_63d4d65909d62 頭像

兔子先森 - 前端Audio常用API

1、實例化new AudioContext(); 2、AudioContext.decodeAudioData解析音頻 3、創建AudioBufferSourceNode接口source 4、給AudioBufferSourceNode接口提供Buffer用以播放：source.buffer = buffer 5、播放結束後開啓下一輪播放： source.onended =

react , vue.js , HTML , 前端 , Javascript

收藏 評論

shuirongshui 頭像

水冗水孚 - React中使用map+area標籤實現img圖片特定區域標記功能（可用Photoshop精準拾取對應點位）

需求描述 前段時間，工作中筆者接到了一個有意思的需求 就是給圖片做特定的交互效果 圖片中有幾個特殊區域 當用户hover特殊區域的時候，高亮 點擊特殊區域的時候，彈框給到一些提示信息 效果圖和線上演示 線上效果演示地址：https://ashuai.site/reactExamples/imagePoint 技術方案選擇 這個需求如果圖片中的特定區域都是矩形 我們完全可以直接

react , jquery插件 , Css , jquery , HTML

收藏 評論

yqyx36 頭像

雲輕雨細 - SEO合規指南：正確的鏈接屬性設置！

本文系轉載，轉載鏈接： SEO合規指南：鏈接中的sponsored+nofollow組合！ 前言 在SEO領域，搜索引擎對鏈接的使用有明確規則。如果你沒有正確標註付費鏈接、沒分清sponsored與nofollow的用法，就可能會被搜索引擎判定為“操縱排名”，導致網站降權甚至被移除索引。 今天就給大家分享一下 sponsored 屬性與 nofollow 屬性的用法，合規避坑。 一、sponsor

seo , HTML

收藏 評論

tuzixiansen_63d4d65909d62 頭像

兔子先森 - 前端recorder-core實時錄音並繪製波形，blob常規數據格式

npm：https://www.npmjs.com/package/recorder-core npm install recorder-core 這裏是常規錄音，每次結束後返回完整音頻blob，中間返回，並且結束後關閉音頻錄製並清空緩存 下面是一個vue3+ts+arco.design的案例，直接複製到項目中運行即可 template div class="snow-page"

react , vue.js , HTML , 前端 , Javascript

收藏 評論

tuzixiansen_63d4d65909d62 頭像

兔子先森 - 前端H5錄音實時幀回調-波形配置- Recorder.js

在H5端我們必須使用canvas作為容器來顯示波紋效果，這在官網上有詳細説明 這裏我定義了一個waveConfig變量用作波形的配置，具體的參數下文寫的很詳細，需要注意一點，compatibleCanvas參數綁定的是canvas容器，而且得是在canvas掛載後才能綁定。 // 創建音頻可視化圖形繪製對象 waveConfig.compatibleCanvas = recw

react , vue.js , HTML , 前端 , Javascript

收藏 評論

tuzixiansen_63d4d65909d62 頭像

兔子先森 - PC瀏覽器端-PCM錄音+實時幀回調+流式上傳-Recorderjs

看到這裏的時候一定要理解並運行上文的《前端H5錄音實時幀回調-波形配置- Recorder.js》，這樣對Recorder有個概念。 1、通過onProcess回調可實現錄音的實時處理，onProcess的buffers參數內容為pcm數組（16位 LE小端模式 Little Endian），能直接流式的將數據進行上傳； 2、onProcess內的buffers參數為所有的PCM集合，

react , vue.js , HTML , 前端 , Javascript

收藏 評論

tuzixiansen_63d4d65909d62 頭像

兔子先森 - PC瀏覽器端-MP3錄音+實時幀回調+流式上傳-Recorderjs

看到這裏的時候一定要理解並運行上文的《前端recorder-core實時錄音並繪製波形，blob常規數據格式》，這樣對Recorder有個概念。 在創建錄音對象的時候有一個takeoffEncodeChunk回調，該回調為實時編碼環境，會接管編碼器輸出。 當編碼器實時編碼出一塊有效的二進制音頻數據時實時回調此方法，也就是説每次獲取到有效的二進制音頻數據takeoffEncodeChun

react , vue.js , HTML , 前端 , Javascript

收藏 評論

tuzixiansen_63d4d65909d62 頭像

兔子先森 - unaipp內使用pinia以及持久化緩存

vue3版本的uniapp內置pinia，無需額外引入，有了pinia後就不需要App.vue內的globalData了，pinia還是響應式的，更好、更強大 main.js內配置 import App from './App' // #ifndef VUE3 import Vue from 'vue' import './uni.promisify.adaptor' Vue.co

react , vue.js , HTML , 前端 , Javascript

收藏 評論

tuzixiansen_63d4d65909d62 頭像

兔子先森 - uniapp微信小程序AI對話SSE流式輸出

微信小程序版本，主要針對AI對話的流式輸出，這裏主要有兩個要點 **1、如何流式渲染 2、如何建立SSE連接** 我們先從看得見的渲染開始着手，能渲染出來後再建立SSE做流式輸出 流式渲染 這裏使用uniapp插件市場的：zero-markdown-view 插件市場搜索直接下載導入到項目裏就可以用了 頁面使用： zero-markdown-view :theme-c

react , vue.js , HTML , 前端 , Javascript

收藏 評論

tuzixiansen_63d4d65909d62 頭像

兔子先森 - uniapp自動滾動到底，上滑取消置底-錨點滾動

主要通過scroll-view組件來實現，比手動js獲取高度、判斷啥的更方便，而且官方支持 滾動到底 實現思路，通過錨點滾動實現，官方支持 view id="chat-main" scroll-view class="chat-main-inner" :lower-threshold="15" :scroll-into-view="targetId" scroll-y="t

react , vue.js , HTML , 前端 , Javascript

收藏 評論

tuzixiansen_63d4d65909d62 頭像

兔子先森 - uniapp微信小程序流式錄音-PCM

uniapp在微信小程序中使用Record.js 先安裝核心依賴 npm install recorder-core 然後插件市場下載插件 頁面結構，我們需要一個canvas元素來承載波形的繪製，canvas需要設置大小，下面的代碼可以直接複製使用 template view class="recorder-box" canvas type

react , vue.js , HTML , 前端 , Javascript

收藏 評論