HTML：被低估，且未被广泛使用的有用的标签

2020-05-14

本文我将向你展示一些html被低估的元素。

1. picture

<picture> 标签的结构类似于带有 <sources> 的 video 标签，但用于图像。有人会说：“等等，我们不是有 <img> 吗？为什么我要使用它呢？”。<picture> 远比 <img> 强大的多。

<picture> 用于处理响应式图片，当你具有两种或两种以上质量的图像时，如何处理？也许你尝试使用服务器渲染来检测用户代理，以便为设备和页面提供对应质量的图像。使用Picture元素，你可以使用媒体查询来告诉浏览器应显示哪个图像，而其他来源将被忽略，从而可以更快地加载图像。如果将Picture与css响应式经典属性结合使用，则可以实现真实的响应式图像。

来看一个示例：

<picture>
  <source media="(max-width: 500px)" srcset="alt/image.img">
  <img src="path/to/default.img">
</picture>

可根据视口大小自动调节

2. fieldset

<fieldset> HTML原生的“表单组”。在我看来，有时最好使用此标签来节省创建布局的时间，而实际上对于seo更好。但它太丑了，但这是另一个很好的新东西，因为你不用担心元素的位置，只需要把它们组合起来。

<fieldset>
  <legend>登录:</legend>
  用户名: <input type="text"><br>
  密码: <input type="password"><br>
  <button>登录</button>
</fieldset>

我们可以用CSS适当修饰一下样式。

3. progress

<progress> 进度条，现在是市面上有太多带有复杂进度条的库，但是我不明白为什么这个标签没有得到充分利用。应用CSS也非常容易，如果你不介意设置一个最小值和最大值值也无所谓，因为它将显示为待定加载栏。

<progress max=100 value=13></progress>

如你所见，使用JAVAScript设置样式和操纵值非常容易，下次你需要进度条时，请考虑这个老朋友。

4. base

<base>标签是我的最爱之一，它比你想象的更有帮助。这将有助于更好地处理相对的 <a> 链接，因为你只需要在头中用 <base> 声明根网址，所有的相对路径的链接都不会采用默认的，而是采用已声明的根网址，一般的目标属性也可以重写。默认情况下，相对链接会重定向到实际路径，但是有时生成的动态内容并不理想。除非提供完整的URL，否则相对图像或文件的路径也将采用 <base> 默认值，如果这样做，则 <base> 会被毫无问题地忽略。

<base href=”https://zhangbing.site/" target=”_blank”>
<a href="vue3.html">Vue3备忘单</a>

当鼠标移到链接“Vue3备忘单”的时候显示为“https://zhangbing.site/vue3.html”，且在新浏览器标签页打开此网页。

知道有什么用了吧！此标签可以放在网页的 <head> 里面。

5. 更多输入标签

你是否知道输入内容不只是文字或密码类型？我也不是在谈论电子邮件输入。

/ 5.1 日期输入 /

可能大家最了解这种类型的是 [type=date]，但我们还有更具体的，比如月、周甚至小时。

date - 选取日、月、年
month - 选取月、年
week - 选取周和年
time - 选取时间（小时和分钟）
datetime - 选取时间、日、月、年（UTC 时间）
datetime-local - 选取时间、日、月、年（本地时间）

<input type=”date” />
<input type=”datetime-local” />
<input type=”month” />
<input type=”week” />
<input type=”time” />

此输入将返回 Date() 类的有效且可读的格式。

/ 5.2 颜色选择 /

老实说，[type = color] 输入提示的样式在很大程度上取决于你的浏览器，但它是一种快速干净的解决方案，可为用户提供选择颜色的选项。

<input type=”color” />

此输入将返回一个十六进制数字值。

/ 5.3 范围 Range /

当你要为用户提供选择范围内数字的选项时，范围输入类型是解决方案。使用此功能在自己的视频播放器中创建音量滑块后，便可以使用可接受的最小值和最大值进行操作。

<input type=”range” />

6. details

<details> 标签规定了用户可见的或者隐藏的需求的补充细节，用来供用户开启关闭的交互式控件。任何形式的内容都能被放在 <details> 标签里边。<details> 元素的内容对用户是不可见的，除非设置了 open 属性。只需单击 <details> 内的 <summary> 标记就足以显示所有隐藏的内容。顺便说一下，不需要 JavaScript，你可以使用CSS使其更漂亮。

下面是一个例子

<details>
  <summary>
    <span class="summary-title">Details 元素与自定义箭头！</span>
    <div class="summary-chevron-up">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>
    </div>
  </summary>

  <div class="summary-content">来自国内知名电动车电池供应商星恒电源的消息显示，星恒为青桔骑行配套锂电池达成 100 万组，并且双方又签订的新的战略合作协议，青桔骑行宣布正式加盟星恒推出的《恒星伙伴计划》，他们为青桔骑行配套的锂电池产自滁州生产基地。</div>
</details>

效果如下

7.文本格式化标签

我喜欢一些格式化标签，但它们不足以占据我条目中的整个位置。这是一个标签，没有太多的样式，但是对于保持一致并以更好的做法编写HTML而言很重要，并且它们在下一个地方很有用。

/ 7.1 mark /

实际上，使用  环绕文本然后提供背景颜色是一种不好的做法，因为存在 ，请避免使用  并在需要突出显示文本时开始使用 。 默认使用经典的荧光笔黄色，但它对颜色CSS属性的响应没有任何问题。

<p>
 	滴滴、美团、哈啰纷纷加码共享电单车：馅饼or陷阱？ 
	<mark>事情正在起变化，一个曾经“死去”的赛道正在悄悄复活。</mark> 
	曾经被证伪的共享电单车，巨头与无数小玩家又纷纷入局、狂飙，泥沙俱下。最终即便巨头胜出，又能否避开共享单车的结局？
</p>

效果如下

/ 7.2 abbr /

如果你需要在文本中使用一个缩写名称，这个标签是可以胜任的坏孩子。

<abbr title=”Software as a Service”>SaaS</abbr>

标题属性可以是一个很好的补充，可以得到首字母缩写的原生工具提示。

/ 7.3 pre /

预格式化的文本或 <pre> 用于显示文本，它是用来显示所写的文本，所有的空格、制表符和支持的字符都将被完全按照它在块中的格式化来显示。

<pre>
  /* Code */
  var json = {
    a: 1,
    b: 2,
    c: 3
  }

  function example(){
    console.log(“Hello world”);
    return true;
  }

  example();
</pre>

/ 7.4 hr /

这不是一个格式化的文本，但在  元素中很好用，也不是什么大问题，所以我把它放在这里。作为分隔符使用，默认情况下，它有一个白色背景的对比色，并使用了父元素宽度的100%。

<!-- 就这么简单: -->
<hr />

易于设置样式，更改 border-color CSS属性。

8. [contenteditable]

如果要用HTML创建WYSIWYG（所见即所得）编辑器确实比您想象的要容易。仅将属性 [contenteditable] 添加到放置编辑器的div中，才会自动将用户可写的所有内容转换为可写内容。

<div contenteditable>
  <p>如果要用HTML创建WYSIWYG（所见即所得）编辑器确实比您想象的要容易。</p>
</div>

这个功能比你想象的更强大，因为当一个元素处于designMode状态时，execCommand函数就可以使用，你可以将其绑定到按钮上，这样用户就可以加亮、加粗、斜体、下划线等。一些编辑器库，如Quilljs（推荐），TinyMCE（LGPL不推荐），甚至Medium编辑器，使用 [contenteditable] 来创建他们的编辑器库，他们并不像有人认为的那样使用大的 <textarea>。当需要将内容存储在数据库中时可能会遇到一些麻烦，必须避开换行符，引号或HTML标记，但最终还是值得的。

结束

即使它们不是那么流行，也可以是一个更好的选择，而不是你经常使用的。我希望通过这篇文章，你能开始搜索其他有趣的属性，如pattern、hidden或data-*等语义元素。

如果对你有所启发和帮助，可以点个关注、收藏、转发，也可以留言讨论，这是对作者的最大鼓励。