出于某些原因，需要在網頁上用幾個滑塊。

其實，這是很簡單的一件事情，只需敲一行html代碼就可以了：

<input type="range" name="points" min="1" max="10">

耗時不超過一分鐘，非常容易的一件事情。

不過這樣不僅不美觀，而且讓人感覺很低端：

怎么辦呢？其實也很簡單，因為已經有人做好了，而且不僅做了滑塊，交互頁面上可能需要用到的東西都做好了，我們拿過來用即可。這一套東西就叫前端 UI 框架。

有一個框架叫layui，簡單易用，花點時間閱讀一下說明文檔就可以了。做出來的滑塊比默認的好看了。

但是很不幸的，做出來的滑塊在PC端正常，但在手機端不能滑動，這是什么原因呢？

于是我開始排查起來：

會不會是手機瀏覽器兼容性問題呢？

會不會是我引用layui時出了什么問題呢？

會不會是我寫的代碼有問題呢？

會不會是瀏覽器緩存的問題呢？

按部就班地查了一遍，都沒有問題。那么，問題十有八九在layui自身上了。很快，我的猜疑得到了印證：

糟糕透了！雖然我找到了問題所在，但幾個小時時間也過去了。

layui不行了，那就換一個吧。有一個很熱門的叫Element，據說是餓了嗎團隊開發的，我就選它了。

于是開始登錄它的官網，在手機上測試了一下，確定能用之后就開始閱讀文檔，動手試著做了幾個小例子，還挺好用。

正當我準備開始用Element在我的頁面上添加滑塊的時候，眼角的余光瞥見了瀏覽器上推送過來的幾個字“Element停止維護”。

“有這事？”一邊想著，一邊搜了一下，還真是，停止維護了。

停止維護！雖然這對于我用Element做個滑塊沒有任何影響，滑塊也依然能用，但我自身的執拗阻止了我繼續使用Element。代價，就是差不多一個小時時間又廢掉了。

接下來怎么辦呢?要么再找一個框架，要么直接找一個單獨的滑塊組件來用。

找了幾個單獨的滑塊組件，有的只支持低版本的jquery，有的有一些bug，都不盡如人意。

再找個框架嘛，又有諸多顧慮。比如這框架會不會又停止維護？

猶豫中，詢問了一個做前端的小伙伴，扯了一會，快一個小時時間又過去了。

后來，我也懶得瞻前顧后了，直接用jquery-ui吧。

這是最后的樣子，不好看，但也顧不了這么多了。

原本小小的一個問題，被我搞得這么復雜，這里邊暴露了一些問題，其中就包括我的執拗。

如果有產品經理問我，加幾個滑塊需要多長時間？

我回答：“二十分鐘吧！”

然后，我發現我掉入了一個深坑里。

再然后呢?

加班吧，兄弟！

網頁設計中，內容滑塊（Content Slider）是一個非常有用的工具，它可以突出顯示圖像、傳遞信息、用動畫元素吸引用戶。在網頁主頁上，內容滑塊可以在有限的空間內傳遞大量信息。

下文是用于顯示圖像、視頻或HTML內容的滑塊工具清單。有一些標準的內容滑塊工具可以自定義主題、動畫和樣式元素,還有一些可選的滑塊工具能夠以有趣的方式顯示圖像。所有這些內容滑塊都是免費的，但也有一些提供升級的付費版本。

1、Zoom Slider（縮放滑塊）

Zoom Slider是具有縮放功能的簡單內容滑塊。每張幻燈片都有一個預定義的縮放區域，用于計算全屏幕填充的適當縮放值。單擊縮放圖標后，縮放區域和頁面將被縮放，從而產生查看者正在接近該項目的錯覺。

2、Elastic Content Slider（彈性內容滑塊）

Elastic Content Slider是一個簡單且響應迅速的jQuery內容滑塊。它有一個用于內容的滑塊區域，底部有一個類似于標簽的導航。每個列表項都是一張幻燈片，在導航中具有相應的鏈接元素。

3、Turntable

Turntable是一個響應式的jQuery滑塊，當你的鼠標或手指滑過時它可以在一系列圖像中旋轉，類似于用JavaScript制作的數字翻頁本。你所需要的只是一組圖像和jQuery。

4、Nivo Slider

Nivo Slider是一個受歡迎的內容滑塊，有超過120萬個網站使用。它具有獨立的jQuery版本和WordPress插件。Nivo Slider提供了一系列現成的主題和圖像過渡效果。你可以自定義要在單個幻燈片上展示的內容。

5、FlexSlider

FlexSlider是WooCommerce的響應式jQuery滑塊工具包。支持所有主流瀏覽器，它提供水平和垂直幻燈片、淡入淡出動畫、自定義導航選項、支持觸摸滑塊。

6、Glide

Glide是JavaScript ES6滑塊。它輕量、靈活、快速且可滑動。插入模塊時可以獲取附加功能。

7、bxSlider

bxSlider是一個響應式jQuery內容滑塊。它具有水平、垂直、淡入淡出模式以及許多配置選項。幻燈片可以包含圖像、視頻或HTML內容。

8、Owl Carousel

Owl Carousel是支持觸摸的jQuery插件，它可以為移動瀏覽創建響應式的輪播滑塊。具有60多種自定義選項，各種用戶都適用。Owl Carousel支持模塊化插件結構，可刪除不必要的插件或創建新的插件。

9、ajSlider

ajSlider是一個幻燈片jQuery插件，適合作為網頁或圖庫的主橫幅。根據你的需要設置滑塊的高度和寬度，讓它根據圖像自動計算尺寸。另外，你還可啟用或禁用自動幻燈片放映操作。

10、jcSlider

jcSlider是一個響應式滑塊jQuery插件，帶有CSS動畫(而不是jQuery)，可以最大限度地提高性能。它反應靈敏，具有60多種效果。

11、Unslider

Unslider是一個輕量級、響應迅速的jQuery滑塊。可以根據需要更改、添加和刪除每個幻燈片中的CSS。Unslider是輕量級的滑塊，但它提供了一系列的選項，如動畫速度和延遲。

12.Tiny Circleslider

Tiny Circleslider是一種輕便的圓形輪播滑塊。它為開發人員提供了標準輪播的獨特替代方案。可以將間隔設置為自動滑塊。

13、Smart Slider

Smart Slider是WordPress和Joomla的免費插件。創建精美的滑塊和內容時無需任何代碼，你可從空白滑塊開始，或者從各種模板中選擇。使用圖層可增強滑塊。

通過選擇標題、文本、圖像、按鈕或視頻并應用自定義選項，可以進行編輯。只需單擊幾下，即可添加YouTube和Vimeo視頻為圖層。

14、RoyalSlider

RoyalSlider是圖片庫和內容滑塊插件，具有jQuery和WordPress版本。每個滑塊模板都具有響應性和觸摸友好性。它提供了50多個可定制選項、4個皮膚、9個模板、視頻支持等等。RoyalSlider經常被應用在流行的品牌和組織網站上，如Diesel、Peugeot、Audi、Twitch、Ralph Lauren和NYC.gov。

15.Jssor

Jssor是具有200多種幻燈片效果的觸摸滑塊式圖像輪播。Jssor Slider響應迅速并針對移動瀏覽器進行了優化。它提供jQuery和無jQuery版本，并具有幻燈片和字幕幻燈片動畫。另外，它還有一個收費版本，每年15美元。

16、Master Slider

Master Slider是WordPress的免費插件，響應式圖像和視頻滑塊。它支持觸摸導航，帶有8個入門模板、6個交互轉換、定時器和用戶界面控件、循環和線性滑塊等等。

（編譯/雨果網 呂曉琳）

【特別聲明】未經許可同意，任何個人或組織不得復制、轉載、或以其他方式使用本網站內容。轉載請聯系：editor@cifnews.com

上雨果網搜索“跨境資料庫”,領取歐美/東南亞各國市場商機、各大平臺熱銷品報告、跨境電商營銷白皮書！

文地址：https://markodenic.com/html-tips/

Marko 2020年4月12日

在這篇文章中，我很興奮地與您分享一些非常有用的HTML小技巧。

*文章會定期更新，假如有新的小技巧的話。

但是首先，什么是HTML？

超文本標記語言（HTML）是設計用來在瀏覽器中顯示文檔的標準標記語言。它能夠獲得諸如級聯樣式表（CSS）、JavaScript等腳本語言技術的支持。

我們開始吧

1、loading="lazy"屬性

性能小技巧，我們能夠通過使用loading=lazy屬性，去推遲圖片的加載，直到用戶滾動看到它們。

<img src='image.jpg' loading='lazy' alt='Alternative Text'>

2、郵箱、電話和短信的鏈接：

<a href="mailto:{email}?subject={subject}&body={content}">
  Send us an email
</a>

<a href="tel:{phone}">
  Call us
</a>

<a href="sms:{phone}?body={content}">
  Send us a message
</a> 

3、有序列表的"start"屬性

通過使用"start"屬性去改變有序列表的開始點。

4、meter元素

您可以使用<meter>元素來顯示數量，無需JavaScript和CSS。

5、HTML的搜索

6、Fieldset元素

您可以使用fieldset元素，在一個web表單中對幾個控件和標簽(<label>)進行分組。

7、window.open

用target="_blank"打開的新頁面，新頁面中可以訪問原始的來源window，通過window.opener。這個可能會有隱含的安全或者性能問題。使用 rel="noopener" 或者 rel="noreferrer"去阻止這種行為。

<a href="https://markodenic.com/" target="_blank" rel="noopener">
	Marko's website
</a> 

8、Base元素

如果您想讓您文檔中的所有鏈接都在新的tab頁打開，您可以使用base標簽：

_self: 載入結果到當前瀏覽上下文中。（該值是元素的默認值）。

_blank: 載入結果到一個新的未命名的瀏覽上下文。

_parent: 載入結果到父級瀏覽上下文（如果當前頁是內聯框）。如果沒有父級結構，該選項的行為和_self一樣。

_top: 載入結果到頂級瀏覽上下文（該瀏覽上下文是當前上下文的最頂級上下文）。如果沒有父級，該選項的行為和_self一樣

9、破壞Favicon的緩存

為了能夠刷新你網站的favicon，你可以強制瀏覽器去下載新文件，通過給文件鏈接后面添加?v=2。

這個在生產環境特別有用，確保你的用戶使用的是最新的版本。

<link rel="icon" href="/favicon.ico?v=2" />

10、`spellcheck` 屬性

通過spellcheck屬性去定義元素是否應該檢查拼寫錯誤。

11、原生的HTML滑塊

您可以通過使用<input type="range">來創建一個滑塊

12、HTML手風琴

您可以使用details元素去創建原生的HTML手風琴

13、`mark` 標記

您可以使用<mark>標記去高亮文本。

14、`download`屬性

您可以在鏈接上使用download屬性，去下載您的文件，而不是打開鏈接。

<a href='path/to/file' download>
  Download
</a>  

15、性能提示

使用圖片大小更小的.webp格式，同時提升網站性能。

<picture>
  <!-- load .webp image if supported -->
  <source srcset="logo.webp" type="image/webp">
  
  <!-- 
	Fallback if `.webp` images or <picture> tag 
	not supported by the browser.
  -->
  <img src="logo.png" alt="logo">
</picture> 

16、Video縮略圖

使用poster屬性指定一張在視頻下載時顯示的圖片，或者一直到用戶點擊播放按鈕。

<video poster="path/to/image">

17、input type="search"

對于你的搜索輸入框可以使用type="search",然后你將會免費獲得一個清除的按鈕。