tag HTML

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

@HTML / 博客 RSS 訂閱

momeak9 頭像

泯瀧 - 「譯」如何寫出更好的Typescript代碼

鏈接：https://medium.com/@technicadil_001/how-to-write-better-types... 作者：Debabrata Dash 原標題：How to write better Typescript codes? 在本文中，我們將討論大約 15 個編寫更好的 Typescript 代碼的技巧。 譯者：本文討論了 15 個實用技巧，以幫助開發者編

ecmascript-6 , typescript , HTML , 前端 , Javascript

收藏 評論

yangy5hqv 頭像

夢想雲圖網頁CAD - （WEB在線編輯DWG）在線CAD中實現測量圓、測量面積的方法

一、前言 本章將介紹如何利用mxcad插件實現在CAD圖紙中測量圓和測量面積的功能，用户點擊目標圓對象將自動標記出這個圓的半徑、面積值和周長值，同時可以自定義選擇標註文字的位置，測量圓功能能夠快速掌握目標圓對象的數據信息，方便統計工程量。 測量面積功能（多邊形、矩形）以多邊形的每一個頂點來確定多邊形的形狀和位置，通過點擊矩形的量角點來確定矩形的大小和位置，也可以自定義標註文字的位置。 二、測

ecmascript-6 , typescript , HTML , html5 , Javascript

收藏 評論

chongdongdedaxiongmao_kxfei 頭像

chongdongdedaxiongmao_kxfei - 探索 Java 中的 Stream API：優雅處理集合的利器

Java 8 引入了一個功能強大的工具——Stream API，極大地簡化了對集合的操作。傳統上，Java 程序員習慣使用 for 循環來遍歷集合並進行過濾、映射等操作，這種方式雖然直觀但代碼冗長且難以維護。Stream API 通過流式編程的方式，使得我們能夠以更簡潔和優雅的方式操作集合。 本文將介紹 Java Stream API 的基本概念及其常見的使用場景，幫助你更好地掌握這一工具。 一、

ecmascript-6 , typescript , HTML , 前端 , Javascript

收藏 評論

refanbanzhang 頭像

熱飯班長 - 最好的svg使用方案（個人覺得）

方案1：img 將svg作為img的src import icon from './xxx.svg' img :src="icon" 無法很好的自定義尺寸，圖片會模糊（使用了img後，會喪失svg的特性） 無法指定顏色 方案2：插件 添加vite-svg-loader插件 找了好幾個常見的插件，比如vite-plugin-svg-icons、vite-plugin-svg-loader、u

react , vue.js , vite , HTML , svg

收藏 評論

daoshanghundesijidou 頭像

用户bPdeG32 - 深入理解 CSS Flexbox：如何使用彈性佈局實現自適應的水平和垂直居中

在 Web 開發中，佈局一直是 CSS 的一個重要主題，而水平和垂直居中往往是佈局中最常見、最基礎的需求。傳統的居中方法通常需要使用多層嵌套、position、margin 等屬性來實現，代碼繁瑣且不夠靈活。而隨着 CSS 彈性佈局（Flexbox）的引入，水平和垂直居中變得非常簡單、直觀，幾乎可以適應所有的佈局場景。 本文將專注於如何使用 CSS Flexbox 來實現內容的自適應居中，包括水平

ecmascript-6 , css3 , Css , HTML , 前端

收藏 評論

daoshanghundesijidou 頭像

用户bPdeG32 - 深入理解 HTML 語義化標籤：為什麼語義化標籤對網頁結構和 SEO 至關重要

在前端開發中，HTML 是構建網頁的基礎。HTML 的功能不僅僅是展示信息，還要幫助網頁結構化數據，以便瀏覽器、搜索引擎和輔助技術更好地理解網頁內容。語義化標籤是 HTML5 引入的一個重要概念，旨在讓標籤名稱表達其內容的意義。合理使用語義化標籤可以提高網頁的可訪問性和 SEO（搜索引擎優化）效果，使得頁面更具可讀性和結構性。 本文將專注於HTML 語義化標籤的定義、優勢、常用標籤及其適用場景，幫

ecmascript-6 , css3 , node.js , HTML , html5

收藏 評論

wanzuqiudeshangba 頭像

玩足球的傷疤 - JavaScript與TypeScript的對比：深入理解兩者的異同

JavaScript 和 TypeScript 是當今最流行的兩種編程語言，尤其在前端開發中，它們佔據着主導地位。雖然這兩種語言在表面上看起來很相似，但它們有着顯著的差異，尤其是在類型系統、開發體驗、代碼維護性等方面。本文將深入探討 JavaScript 和 TypeScript 的差異，幫助開發者理解何時選擇使用 JavaScript 或 TypeScript，以及如何在項目中有效地運用它們。

ecmascript-6 , typescript , HTML , 前端 , Javascript

收藏 評論

jianzhuangdeyaling 頭像

用户bPdeUmS - TypeScript 中的類型推斷詳解：為什麼我們應該信任 TypeScript 的推斷能力？

在 TypeScript 中，類型推斷（Type Inference）是一個強大且被廣泛使用的特性。它允許開發者在許多情況下省略顯式的類型註解，從而簡化代碼，同時仍然享受強類型系統帶來的安全性和可靠性。然而，對於初學者或經驗不足的開發者來説，常常會疑惑：我真的可以完全信任 TypeScript 的類型推斷嗎？它的邊界和侷限性是什麼？ 本文將聚焦於這個問題，通過深入解析 TypeScript 的類型

ecmascript-6 , typescript , HTML , 前端 , Javascript

收藏 評論

hyfhao 頭像

hyfhao - webpack多頁面打包的一次嘗試

初始化 cd 項目名 webpack init 創建第二頁面與其頭文件 touch page2.html touch src/page2.js 修改page2.js console.log("success") 修改webpack.config.js 添加page2.html至plugins項，添加src/page2.js至entry項 最終模板: const path = requi

webpack , HTML , Javascript , Web

收藏 評論

wupeng_5a4de5c290b9d 頭像

PatWu16 - PWA離線應用調研

1、PWA應用介紹 PWA 是一種通過現代 Web 技術提供類似原生應用體驗的 Web 應用。它的核心特性包括： 可離線訪問：通過 Service Worker 實現離線緩存快速加載 利用緩存策略加速資源加載可安裝 用户可以將 PWA 添加到主屏幕，像原生應用一樣使用響應式設計 適配各種設備屏幕 PWA 的核心技術包括： Service Worker：用於攔截網絡請求、管理緩存

pwa , HTML , 前端 , Javascript

收藏 評論

wupeng_5a4de5c290b9d 頭像

PatWu16 - PWA離線應用實踐

上篇文章整理了PWA離線應用的技術脈絡和注意事項，本篇文章將記錄使用Vue + Workbox + localforage 實現離線應用的實踐過程。 一、Vue工程改造 Vue CLI 提供了一個官方的 PWA 插件，可以快速為 Vue 項目添加 PWA 支持。運行以下命令安裝插件： // 在vue工程目錄下執行如下命令 vue add pwa 安裝完成後，插件會自動生成以下文件： src/

pwa , HTML , 前端 , Javascript

收藏 評論

tuzixiansen_63d4d65909d62 頭像

兔子先森 - 微信小程序獲取和修改用户頭像信息

這裏主要用到button的open-type功能，官網已有説明： 給button設置open-type="chooseAvatar"，來使bindchooseavatar方法生效，在bindchooseavatar指定的函數中獲取用户的頭像信息 button open-type="chooseAvatar" bindchooseavatar="chooseavatar"/b

vue.js , 微信小程序 , HTML , 前端 , Javascript

收藏 評論

xingzoudedahuoji 頭像

行走的打火機 - 在線考試答題系統（Web+H5+小程序）開發方案與實現附源代碼

　　隨着教育信息化與數字化轉型的加速推進，傳統線下考試模式正面臨效率瓶頸與場景侷限。組織大規模考試時，試卷印製、考場安排、人工監考及成績統計等環節耗費大量資源，且難以應對突發情況。在此背景下，在線考試答題系統應運而生，成為重塑教育評估體系的核心工具。 　　源碼及演示：zx.xcxyms.top 　　在線考試答題系統需覆蓋多端使用場景，包含題庫管理、在線答題、成績統計、錯題分析等核心功能。目標用户包

小程序 , php , webapp , HTML

收藏 評論

ailvyoudetiebanshao 頭像

溪抱魚 - SEO關鍵詞的研究與優化 一

關鍵詞研究和優化是SEO的核心。通過深入瞭解目標受眾使用的搜索詞，我們可以優化網站內容，提高搜索引擎排名，並吸引更多相關流量。本章將詳細探討關鍵詞研究的方法、和最佳實踐。 關鍵詞類型對比分析 1. 關鍵詞研究的基礎 瞭解不同類型的關鍵詞對於制定全面的SEO策略至關重要。每種類型的關鍵詞都有其獨特的特點和應用場景： 1.1 主關鍵詞 定義： 通常由1-2個詞組成，代表廣泛的主題或概念。 特點

seo , 程序員 , HTML , 前端

收藏 評論

rentian 頭像

任天鏜 - navigator.mediaDevices.getUserMedia undefined問題解決

navigator.mediaDevices.getUserMedia只有在https或者localhost下使用。 如果需要再http協議下使用navigator.mediaDevices.getUserMedia，需要打開不安全的配置。 火狐瀏覽器打開多媒體不安全的配置： chomre打開不安全配置： 瀏覽器輸入chrome://flags/ 搜索Insecure o

chrome , firefox , HTML , 前端 , Javascript

收藏 評論

codepencil 頭像

CodePencil - CSS專題之層疊上下文

前言 石匠敲擊石頭的第 15 次 在平常開發的時候，有時候會遇到使用 z-index 調整元素層級沒有效果的情況，究其原因還是因為對層疊上下文不太瞭解，看了網上很多前輩的文章，決定打算寫一篇文章來梳理一下，如果哪裏寫的有問題歡迎指出，不勝感激。 什麼是層疊上下文 層疊上下文（Stacking Context）是 HTML 中的三維概念，它決定了元素在 Z 軸（垂直於電腦屏幕的方向） 上的顯示順序。

css3 , Css , HTML , 前端 , html5

收藏 評論

codepencil 頭像

CodePencil - CSS專題之水平垂直居中

前言 石匠敲擊石頭的第 16 次 在日常開發中，經常會遇到水平垂直居中的佈局，雖然現在基本上都用 Flex 可以輕鬆實現，但是在某些無法使用 Flex 的情況下，又應該如何讓元素水平垂直居中呢？這也是一道面試的必考題，所以打算寫一篇文章來好好梳理一下，如果哪裏寫的有問題歡迎指出，不勝感激。 分類 實現元素水平垂直居中的方法有很多，大致可以分為以下兩類： 固定寬高元素適用的方法 不固定寬高元素

css3 , Css , HTML , 前端 , html5

收藏 評論

ailvyoudetiebanshao 頭像

溪抱魚 - Seo工具使用與數據觀察實踐 上

第11章.Seo工具使用與數據觀察實踐 1.通過SimilarWeb選擇合適的競品 首先我們明確一個概念，當我們要做項目的時候，會有兩種情況，一種是有競品，另外一種是沒有競品。 而沒有競品的那種情況，一個可能是你的項目和Idea沒有價值。另外一個可能是你的項目實在是太牛逼了，門檻太高在那個時間段幾乎無懈可擊（Open Ai的早期）。 那麼我們回到擁有競品的項目，我們需要對它和它的網站的流量進行分析

seo , HTML , 前端

收藏 評論

dewujishu 頭像

得物技術 - Redis 是單線程模型？｜得物技術

一、背景 使用過Redis的同學肯定都瞭解過一個説法，説Redis是單線程模型，那麼實際情況是怎樣的呢？ 其實，我們常説Redis是單線程模型，是指Redis採用單線程的事件驅動模型，只有並且只會在一個主線程中執行Redis命令操作，這意味着它在處理請求時不使用複雜的上下文切換或鎖機制。儘管只是單線程的架構，但Redis通過非阻塞的I/O操作和高效的事件循環來處理大量的併發連接，性能仍然非常高。

bootstrap , HTML

收藏 評論

key_686e189f2e7cc 頭像

Key - 使用ENO將您的JSON對象生成HTML顯示

ENO 是簡單易用，性能卓越，自由靈活開源的 WEB 前端組件；實現 JSON 與 HTML 互操作的 JavaScript 函數庫。沒有任何其它依賴，足夠輕量. 　　WEBPack NPM 工程安裝。 　　npm install @joyzl/eno 　　然後在JS中引用 　　import "@joyzl/eno"; 　　將JS實體對象填充到表單 　　假設有一個如下

enoent , HTML , 前端 , Javascript , Json

收藏 評論

momeak9 頭像

泯瀧 - 在企業環境中正確使用 Node.js 的九大原則

鏈接：https://www.platformatichq.com/node-principles 作者：James Snell 等 原標題：9 Principles for Doing Node.js Right in Enterprise Environments Node.js 為超過 630 萬個網站和無數的 API 提供支持，是包括沃爾瑪和網飛在內的現代應用程序的有效基石。每年

node.js , npm , HTML , 前端 , Javascript

收藏 評論

tuzixiansen_63d4d65909d62 頭像

兔子先森 - 《vue.js設計與實現》——嵌套的 effect 與 effect 棧

effect 是可以發生嵌套的 vue.js的下渲染函數其實就是在一個effect中執行的 當組件發生嵌套時，例如Foo組件渲染了Bar組件 // Bar組件 const Bar = { render() { } } // Foo組件嵌套渲染了Bar組件 const Foo = { render() { return Bar / } } 此時就發

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

收藏 評論

tuzixiansen_63d4d65909d62 頭像

兔子先森 - 《vue.js設計與實現》——調度執行

調度性的定義：當我們執行trigger動作觸發副作用函數重新執行時，有能力決定副作用函數的時機、次數以及方式 控制執行時機 先來看看如何決定副作用函數的執行方式 const data = { foo: 1 } const obj = new Proxy(data, {}); // 為了演示，省略代理配置 effect(() = { console.log(obj.foo); }) obj.

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

收藏 評論

tuzixiansen_63d4d65909d62 頭像

兔子先森 - 《vue.js設計與實現》——計算屬性computed與lazy

在深入瞭解計算屬性之前，我們需要先知道懶執行的effect，也就是lazy的effect 我們現在實現的effect函數會立即執行傳遞給它的副作用函數，例如： effect( // 這個函數會立即執行 () = { console.log('執行了'); } ) 但有的時候我們不需要他立即執行，而是在需要的時候才執行，這個特性就跟計算屬性很像 我們可以在option

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

收藏 評論