HTML是超文本标记语言，它能够轻松地为网页创建元素，可以使用标签、属性、添加脚本等等。同时 HTML 比想象的更有用，在有些场景下可以不需要 JavaScript。今天跟大家分享9个不需要 JavaScript 能够实现的小功能。
1.颜色选择器
使用HTML标签 <input> 可以轻松的创建颜色选择器，将其类型设置为 "color" 的即可。
<label for="color-picker">颜色选择器：</label> <input type="color" id="color-picker" value="#ff0000" />
2.自动刷新
自动刷新和调整都可以通过 HTML 来实现，设置标签 <meta> 即可实现。在 HTML 页面的 <head></head> 内加入以下代码即可实现 10 秒刷新一次：
<meta http-equiv="refresh" content="10" />
以下代码是 10秒 后跳转到指定 https://juejin.cn/ 首页，如果想直接调整，将 10 改为 0 即可：
<meta http-equiv="refresh" content="10; url='https://juejin.cn/'" />
3.响应式图像
通常在开发响应式页面时，需要根据不同的分辨率适配不同的图片，以节省流量，减少等待时间，通常是借助 JavaScript 来实现。通过<picture>标签可以在无JavaScript的情况实现响应式。
<picture> <source media="(min-width: 495px)" srcset="small.jpg"> <source media="(min-width: 768px)" srcset="mid.jpg"> <img src="high.jpg" alt="high"> </picture>
<source>标签的media属性为媒体查询表达式，srcset属性就是<img>标签的srcset属性，给出加载的图像文件。
浏览器按照<source>标签出现的顺序，依次判断设备是否满足media属性的媒体查询条件，如果满足则加载 srcset 属性指定的图片，并且不再执行后面的<source>标签和<img>标签。
4.进度条
<progress> 标签可以实现进度条效果，不需要 JavaScript。如：
<label for="finished">完成进度：</label> <progress id="finished" value="80" max="100"></progress>80%
效果如图：
5.显示和隐藏文本
在 HTML 中，可以不使用 JavaScript 的情况下实现文本的显示或者隐藏，使用 details 标签。
<details>元素可创建一个挂件，仅在被切换成展开状态时，它才会显示内含的信息。<summary>元素可为该部件提供概要或者标签。
<details> <summary>点击展开或者隐藏</summary> <p>卡耐基对微笑有这样的描述：“它在家中产生，他不能买，不能求，不能借，不能偷，因为在人们得到它之前，对谁都是无用的东西，他给予后人之后，会使你得到别人的好感，它是疲倦者的休息，希望的阳光，悲哀者的力量，又是大自然免费赋予人们的一种解除苦难的良药。”</p> </details>
加一点样式：
details { border: 1px solid #aaa; border-radius: 5px; padding: 1em; } summary { font-weight: bold; padding: 0.5em; }
6 定义度量衡
<meter> 标签可以用来定义度量衡，用于已知最大和最小值的度量指标，<meter>标签是双标签，在<meter></meter>之间的元素内容是不可见的。
<label for="bandwidth">带宽：</label> <meter id="bandwidth" value="200" min="0" max="1024">2-1024</meter> <br /> <label for="memory">内存：</label> <meter id="memory" value="0.6">60%</meter>
效果如下：
progress为动态的 ;meter为静态的
7.下拉和搜索输入框
可以仅使用 HTML 在输入中创建下拉列表和可搜索文本，使用datalist标签。
<datalist>元素包含了一组<option>元素，这些元素表示其它表单控件可选值，搜索不区分大小写。
<input list="words" /> <datalist id="words"> <option value="Dream"></option> <option value="Teamwork"></option> <option value="Development"></option> <option value="Cheer"></option> </datalist>
8.动态输出
在vue中经常有计数器的示例，其实HTML也可以实现类似的。通过标签 <output>，这个标签用来表示计算或用户操作的结果。
<form oninput="result.value=parseInt(a.value)*parseInt(b.value)"> <input type="number" id="b" name="b" value="2" /> × <input type="number" id="a" name="a" value="2" /> = <output name="result" for="a b">4</output> </form>
上面的代码实现了计算器乘法运算，运行效果如下：
9.可编辑文本
可编辑文本容器，相比有JavaScript的富文本来说差一点，如代码：
<div class="editor-box" contenteditable="true"> 卡耐基对微笑有这样的描述：“它在家中产生，他不能买，不能求，不能借，不能偷，因为在人们得到它之前，对谁都是无用的东西，他给予后人之后，会使你得到别人的好感，它是疲倦者的休息，希望的阳光，悲哀者的力量，又是大自然免费赋予人们的一种解除苦难的良药。” </div>
效果如下：
上面的小功能是在不使用任何 JavaScript 的情况下在 HTML 中完成的。
