无需JavaScript可以实现的9个网页功能-一一网

【这是我参与更文挑战的第 19 天，活动详情查看：更文挑战”】

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="https://juejin.cn/post/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" mce-contenteditable="true">
    卡耐基对微笑有这样的描述：“它在家中产生，他不能买，不能求，不能借，不能偷，因为在人们得到它之前，对谁都是无用的东西，他给予后人之后，会使你得到别人的好感，它是疲倦者的休息，希望的阳光，悲哀者的力量，又是大自然免费赋予人们的一种解除苦难的良药。”
</div>
复制代码

效果如下：