這 12 個實用的 HTML標(biāo)簽（組件）建議盡早用上

家好，今天給大家分享一篇閱讀的文章，本篇文章主要講了 12 個 HTML 標(biāo)簽（組件），通過這些標(biāo)簽避免你在項目中集成復(fù)雜第三方組件，比如日歷組件、顏色選擇、進(jìn)度條等...，簡單的標(biāo)簽就能很方便的調(diào)用系統(tǒng)組件。

一、顏色選擇組件（Color Picker）

在項目中，你可能希望通過調(diào)色板組件動態(tài)調(diào)整顏色，這時你可以使用 <input type="color"> 就可以輕松調(diào)用一個調(diào)色板組件，省去你在找第三方組件，示例效果如下：

示例地址：https://codepen.io/madarsbiss/pen/vYJBqeX

二、引用標(biāo)簽（Blockquote）

在文章排版時，有時候我們需要引用一些信息，這時我們需要用特殊的樣式進(jìn)行強調(diào)，這時你可以使用<blockquote> 標(biāo)簽來強調(diào)你用的內(nèi)容，示例效果如下所示

示例地址：https://codepen.io/madarsbiss/pen/JjyPQBd

三、音頻播放器（Audio Player）

如果從頭寫個音頻播放器是一個費時費力又有挑戰(zhàn)性的工作，但是你現(xiàn)在可以使用<audio>標(biāo)簽就能很輕松的調(diào)用。系統(tǒng)的音頻播放器，示例效果如下所示：

示例地址：https://codepen.io/madarsbiss/pen/oNevrEb

四、視頻播放器（Video Player）

我們不僅能很方便的調(diào)用系統(tǒng)的音頻組件，我們還可以使用<video> 標(biāo)簽調(diào)用視頻組件，示例效果如下所示：

示例地址：https://codepen.io/madarsbiss/pen/BadBgxJ

五、折疊組件（Accordion）

折疊列表的需求也是比較常見的，點擊標(biāo)題展開對應(yīng)的信息內(nèi)容，這時 <details> 標(biāo)簽就派上用場了，示例效果如下所示：

gif

項目地址：https://codepen.io/madarsbiss/pen/zYdOVPV

六、日期選擇（Date Picker）

日期選擇組件可以說是項目中必備的組件，想必大家都有自己比較常用的日期組件，如果沒有復(fù)雜的樣式和交互需求，使用<input type="date"> 這個標(biāo)簽就能輕松的勝任，示例效果如下所示：

示例地址：https://codepen.io/madarsbiss/pen/qBXWzXE

七、滑塊組件（Slider）

滑塊組件也是一個比較常見的組件，主要應(yīng)用在數(shù)值范圍的篩選上，方便用戶進(jìn)行選擇，這時我們可以使用 <input type="range"> ，我們可以設(shè)置最小值、最大值以及當(dāng)前值，示例效果如下所示：

示例地址：https://codepen.io/madarsbiss/pen/GRvKbXv

八、內(nèi)容編輯（Content Editor）

為了讓內(nèi)容具有編輯性，你可以不必使用表單組件，比如 input、textarea 標(biāo)簽，你可以在可編輯的容器(div) 上添加 contenteditable 屬性，就能很輕松的完成當(dāng)前容器及所見即所得的編輯，示例如下所示：

示例地址：https://codepen.io/madarsbiss/pen/ExvYBwB

九、圖片標(biāo)簽（Picture Tag）

有時候需要在不同的分辨率下顯示不同的圖片，如果你使用<img> 標(biāo)簽的話，你需要做的工作就會許多，但是使用<picture> 標(biāo)簽就能很輕松的完成在不同分辨率下顯示不同圖片的設(shè)置，調(diào)整瀏覽器的大小，就會根據(jù)窗口的大小顯示不同大小的圖片，示例效果如下所示：

示例地址：https://codepen.io/madarsbiss/pen/abybomY

十、進(jìn)度條（Progress Bar）

進(jìn)度條組件也是個很常見的組件，你可以使用<progress> 標(biāo)簽就能輕松完成相關(guān)外觀的設(shè)置，示例效果如下：

示例地址：https://codepen.io/madarsbiss/pen/oNevKdp

十一、下拉組件（Dropdown）

如果下拉組件選項比較多，用戶選擇就會比較困難，用戶可能希望結(jié)合輸入，能很方便的定位到下拉組件的內(nèi)容，這時候你可以使用 <datalist> 標(biāo)簽就能滿足上述需求，示例效果如下所示：

示例地址：https://codepen.io/madarsbiss/pen/eYEOwdQ

十二、提示框（Tooltip）

如果你需要對頁面某部分進(jìn)行詳細(xì)介紹時，你可能需要鼠標(biāo)經(jīng)過此區(qū)域顯示詳細(xì)的提示框效果，這時我們可以使用 title 屬性就能輕松實現(xiàn)，示例效果如下所示：

示例地址：https://codepen.io/madarsbiss/pen/VwzwZvE

結(jié)束語

今天的文章就分享到這里，希望在日后的項目中你能想起今天分享的這12個標(biāo)簽（組件），感謝你的閱讀。

參考：
https://javascript.plainenglish.io/12-simple-html-snippets-to-avoid-complex-libraries-7f2965087312
作者：Madza

言

在Web開發(fā)中，尤其是在響應(yīng)式布局設(shè)計時，我們常常需要根據(jù)HTML元素的尺寸變化來調(diào)整頁面布局或內(nèi)容展示。Vue3 提供了強大的響應(yīng)式機制和Composition API，使得我們可以更靈活地監(jiān)聽并處理DOM元素尺寸的變化。本文將詳細(xì)介紹如何在Vue3項目中實現(xiàn)這一功能。

一、傳統(tǒng)方法：ResizeObserver

ResizeObserver 是瀏覽器提供的一個API，用于觀察目標(biāo)元素尺寸變化事件，并在其尺寸發(fā)生變化時觸發(fā)回調(diào)函數(shù)。首先引入 ResizeObserver 并創(chuàng)建一個觀察者實例：

import { onMounted, onUnmounted } from 'vue';

export default {
  setup() {
    const targetElement = ref(null); // 存儲需要監(jiān)聽的DOM元素引用

    let resizeObserver;
    
    // 當(dāng)組件掛載時創(chuàng)建ResizeObserver實例并開始監(jiān)聽
    onMounted(() => {
      resizeObserver = new ResizeObserver((entries) => {
        entries.forEach((entry) => {
          console.log('Element size changed:', entry.contentRect.width, entry.contentRect.height);
          // 在這里執(zhí)行相應(yīng)的邏輯處理
        });
      });

      if (targetElement.value) {
        resizeObserver.observe(targetElement.value);
      }
    });

    // 組件卸載時停止監(jiān)聽
    onUnmounted(() => {
      if (resizeObserver && targetElement.value) {
        resizeObserver.unobserve(targetElement.value);
      }
    });

    return {
      targetElement,
    };
  },
};

在模板中，綁定目標(biāo)元素到 targetElement ref：

<div ref="targetElement">需要監(jiān)聽大小變化的元素</div>

二、結(jié)合Vue3的響應(yīng)式優(yōu)勢

為了更好地與Vue3的數(shù)據(jù)響應(yīng)性相結(jié)合，我們可以利用Ref或者Computed屬性來存儲和更新元素尺寸信息：

import { ref, computed, onMounted, onUnmounted } from 'vue';

export default {
  setup() {
    const targetElement = ref(null);
    const elementSize = ref({ width: 0, height: 0 });

    let resizeObserver;

    onMounted(() => {
      resizeObserver = new ResizeObserver((entries) => {
        const entry = entries[0];
        elementSize.value = {
          width: entry.contentRect.width,
          height: entry.contentRect.height,
        };
      });

      if (targetElement.value) {
        resizeObserver.observe(targetElement.value);
      }
    });

    onUnmounted(() => {
      if (resizeObserver && targetElement.value) {
        resizeObserver.unobserve(targetElement.value);
      }
    });

    // 創(chuàng)建一個計算屬性以返回最新尺寸信息
    const reactiveElementSize = computed(() => elementSize.value);

    return {
      targetElement,
      reactiveElementSize,
    };
  },
};

現(xiàn)在你可以在其他組件內(nèi)部使用 reactiveElementSize 計算屬性來獲取實時的元素尺寸數(shù)據(jù)，并據(jù)此做出相應(yīng)布局調(diào)整。

在上述代碼示例中，elementSize 用于存儲元素的尺寸信息（寬度和高度），我們使用了 ref 來定義它。然而，如果你希望 elementSize 對象本身具有響應(yīng)性，即當(dāng)對象內(nèi)部的屬性發(fā)生變化時也能觸發(fā)視圖更新，那么使用 reactive 可能會更合適。

import { ref, reactive, onMounted, onUnmounted } from 'vue';

export default {
  setup() {
    const targetElement = ref(null);
    // 使用reactive創(chuàng)建響應(yīng)式對象
    const elementSize = reactive({ width: 0, height: 0 });

    let resizeObserver;

    onMounted(() => {
      resizeObserver = new ResizeObserver((entries) => {
        const entry = entries[0];
        // 直接修改響應(yīng)式對象內(nèi)部屬性
        elementSize.width = entry.contentRect.width;
        elementSize.height = entry.contentRect.height;
      });

      if (targetElement.value) {
        resizeObserver.observe(targetElement.value);
      }
    });

    onUnmounted(() => {
      if (resizeObserver && targetElement.value) {
        resizeObserver.unobserve(targetElement.value);
      }
    });

    return {
      targetElement,
      elementSize,
    };
  },
};

在這種情況下，因為 elementSize 是一個由 reactive 創(chuàng)建的響應(yīng)式對象，所以在其內(nèi)部屬性 width 和 height 發(fā)生變化時，依賴這些值的組件也會自動重新渲染，無需額外的操作。

需要注意的是，在實際應(yīng)用中，如果只是簡單的尺寸數(shù)值，使用 ref 足以滿足需求，因為 ref 的 .value 屬性本身就是響應(yīng)式的。而 reactive 更適用于需要整個對象結(jié)構(gòu)都具有響應(yīng)性的場景。

三、總結(jié)

Vue3 的 Composition API 結(jié)合瀏覽器原生的 ResizeObserver 可以為我們在監(jiān)聽HTML元素尺寸變化上提供強大而靈活的支持。通過這樣的方式，開發(fā)者可以輕松應(yīng)對各種復(fù)雜的響應(yīng)式布局需求，為用戶帶來更好的交互體驗。同時，借助Vue3的數(shù)據(jù)響應(yīng)性和自動更新機制，能夠在元素尺寸變化時及時刷新視圖，保持UI狀態(tài)與實際DOM的一致性。

言

在Web應(yīng)用開發(fā)中，圖片的展示和交互體驗至關(guān)重要，特別是在電子商務(wù)、社交網(wǎng)絡(luò)等領(lǐng)域。Element UI作為Vue.js生態(tài)中最受歡迎的UI組件庫之一，提供了豐富的組件以滿足不同的需求。雖然Element UI本身沒有專門針對圖片放大的組件，但我們可以結(jié)合其提供的基礎(chǔ)組件和一些自定義邏輯，輕松實現(xiàn)圖片的放大縮小功能。本文將詳細(xì)介紹如何在Element UI中實現(xiàn)這一功能，并通過代碼示例和源碼解析，幫助你更好地理解和應(yīng)用。

一、為什么需要圖片放大縮小功能？

在Web應(yīng)用中，圖片放大縮小功能主要服務(wù)于以下幾點：

增強用戶體驗：用戶可以更清晰地查看圖片細(xì)節(jié)，尤其在商品詳情、地圖、圖表等場景下。
節(jié)省帶寬：初始加載時使用較小尺寸的圖片，待用戶需要時再加載高清版本，從而降低頁面加載時間。
適應(yīng)不同設(shè)備：響應(yīng)式設(shè)計中，小屏幕設(shè)備顯示小圖，大屏幕顯示大圖，提高資源利用率。

二、實現(xiàn)思路

要實現(xiàn)在Element UI中的圖片放大縮小功能，我們可以通過以下步驟：

使用<el-image>組件展示圖片。
添加點擊事件監(jiān)聽器，觸發(fā)圖片放大效果。
利用CSS或JavaScript控制圖片的尺寸變化。

三、代碼示例

假設(shè)我們的Vue組件已經(jīng)引入了Element UI，并且在模板中使用了<el-image>組件。

HTML模板：

<template>
  <div class="image-container">
    <el-image :src="imageUrl" @click="toggleZoom"></el-image>
    <div v-if="isZoomed" class="zoomed-image">
      <img :src="highResImageUrl" alt="" @click="toggleZoom">
    </div>
  </div>
</template>

Vue腳本：

<script>
export default {
  data() {
    return {
      imageUrl: 'path/to/low-res/image.jpg',
      highResImageUrl: 'path/to/high-res/image.jpg',
      isZoomed: false,
    };
  },
  methods: {
    toggleZoom() {
      this.isZoomed = !this.isZoomed;
    },
  },
};
</script>

CSS樣式：

.zoomed-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.zoomed-image img {
  max-width: 90%;
  max-height: 90%;
}

四、源碼解析

在上述示例中，我們使用Vue.js的響應(yīng)式屬性isZoomed來控制是否顯示放大后的圖片。當(dāng)用戶點擊默認(rèn)尺寸的圖片時，toggleZoom方法被調(diào)用，切換isZoomed的狀態(tài)。如果isZoomed為真，則顯示一個覆蓋整個屏幕的背景層，并在其中心位置展示高分辨率的圖片。點擊放大后的圖片再次觸發(fā)toggleZoom，隱藏放大后的圖片并恢復(fù)到原始狀態(tài)。

五、優(yōu)化建議

懶加載：使用懶加載技術(shù)加載高分辨率圖片，避免不必要的資源消耗。
圖片格式優(yōu)化：使用WebP等現(xiàn)代圖片格式，減小文件大小而不犧牲畫質(zhì)。
響應(yīng)式設(shè)計：確保圖片放大縮小功能在不同設(shè)備上都能良好運行。

六、總結(jié)

通過上述代碼示例，我們成功地在Element UI中實現(xiàn)了圖片的放大縮小功能。這個功能不僅增強了用戶的視覺體驗，也提高了應(yīng)用的性能和資源利用效率。在實際項目中，你可以根據(jù)具體需求調(diào)整代碼細(xì)節(jié)，比如添加動畫效果、支持多級縮放等，以滿足更復(fù)雜的應(yīng)用場景。

#頭條創(chuàng)作挑戰(zhàn)賽#

在線咨詢

上一篇：使用TensorFlow進(jìn)行語音識別.js – 語音命令
下一篇：css3滾動條樣式及美化方法

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商