本文我将向你展示一些html被低估的元素。
<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>
可根据视口大小自动调节
<fieldset> HTML原生的“表单组”。在我看来，有时最好使用此标签来节省创建布局的时间，而实际上对于seo更好。但它太丑了，但这是另一个很好的新东西，因为你不用担心元素的位置，只需要把它们组合起来。
<fieldset>
<legend>登录:</legend>
用户名: <input type="text"><br>
密码: <input type="password"><br>
<button>登录</button>
</fieldset>
我们可以用CSS适当修饰一下样式。
<progress> 进度条，现在是市面上有太多带有复杂进度条的库，但是我不明白为什么这个标签没有得到充分利用。应用CSS也非常容易，如果你不介意设置一个最小值和最大值值也无所谓，因为它将显示为待定加载栏。
<progress max=100 value=13></progress>
如你所见，使用JAVAScript设置样式和操纵值非常容易，下次你需要进度条时，请考虑这个老朋友。
<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.1 日期输入 /
可能大家最了解这种类型的是 [type=date]，但我们还有更具体的，比如月、周甚至小时。
<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” />
<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>
效果如下
我喜欢一些格式化标签，但它们不足以占据我条目中的整个位置。这是一个标签，没有太多的样式，但是对于保持一致并以更好的做法编写HTML而言很重要，并且它们在下一个地方很有用。
/ 7.1 mark /
实际上，使用 <span> 环绕文本然后提供背景颜色是一种不好的做法，因为存在 <mark>，请避免使用 <span> 并在需要突出显示文本时开始使用 <mark>。<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 /
这不是一个格式化的文本，但在 <p> 元素中很好用，也不是什么大问题，所以我把它放在这里。作为分隔符使用，默认情况下，它有一个白色背景的对比色，并使用了父元素宽度的100%。
<!-- 就这么简单: -->
<hr />
易于设置样式，更改 border-color CSS属性。
如果要用HTML创建WYSIWYG（所见即所得）编辑器确实比您想象的要容易。仅将属性 [contenteditable] 添加到放置编辑器的div中，才会自动将用户可写的所有内容转换为可写内容。
<div contenteditable>
<p>如果要用HTML创建WYSIWYG（所见即所得）编辑器确实比您想象的要容易。</p>
</div>
这个功能比你想象的更强大，因为当一个元素处于designMode状态时，execCommand函数就可以使用，你可以将其绑定到按钮上，这样用户就可以加亮、加粗、斜体、下划线等。一些编辑器库，如Quilljs（推荐），TinyMCE（LGPL不推荐），甚至Medium编辑器，使用 [contenteditable] 来创建他们的编辑器库，他们并不像有人认为的那样使用大的 <textarea>。当需要将内容存储在数据库中时可能会遇到一些麻烦，必须避开换行符，引号或HTML标记，但最终还是值得的。
即使它们不是那么流行，也可以是一个更好的选择，而不是你经常使用的。我希望通过这篇文章，你能开始搜索其他有趣的属性，如pattern、hidden或data-*等语义元素。
如果对你有所启发和帮助，可以点个关注、收藏、转发，也可以留言讨论，这是对作者的最大鼓励。
京公网安备 11010802035086号