出于某些原因，需要在网页上用几个滑块。

其实，这是很简单的一件事情，只需敲一行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",然后你将会免费获得一个清除的按钮。