在靠近用户的地方部署容器
本工程教育（EngEd）计划由科支持。
在全球范围内即时部署容器。Section是经济实惠、简单而强大的。
免费开始吧。
五个不起眼但有用的HTML标签
2020年8月5日
- 主题。
- 语言
如果你不熟悉HTML，这篇文章对你没有什么用处。对不起。
有很多的HTML标签。有时我了解到一个标签，非常兴奋地想在我的下一个项目中使用它。然后我想起我几乎不做网络项目。今天，我终于可以使用我晦涩难懂的知识了。我将向你展示一些对我来说最有趣的标签。所有这些都可以在HTML5中使用，并且不按特定顺序列出。
1.模板
<template> 标签包含用户看不到的内容。你需要使用JavaScript来在以后渲染它。一个模板可以在任何时候被多次渲染，并被放置在页面的任何地方。
<button onclick="showContent()">Show Me Some Stuff!</button>
<template>
<p>Hey look! It's stuff!</p>
<img src="stuff.jpg">
</template>
<script>
function showContent() {
var temp = document.getElementsByTagName("template")[0]; // gets the first template in the page
var clon = temp.content.cloneNode(true); // a clone of the template
document.body.appendChild(clon); // adds the template to the bottom of the page
}
</script>
使用。
- 如果你需要多次呈现相同的内容，但又不想把它打出来，你可以写一些JS代码来为你做这件事。
- 如果你需要重复内容，但只是改变一点点，你也可以在插入页面之前改变它
2.细节
默认情况下，<details> 标签内的内容是隐藏的，但可以通过点击它来显示。每个元素在被隐藏时都应该显示它的内容摘要。使用它看起来像这样。
<details>
<summary>Click me to learn about Malaria!</summary>
Ok, so here's some more information. Malaria, while being extremely common in some areas, is very easy to prevent. Malaria is mainly spread by mosquitos, which can be kept at bay using mosquito nets. It costs about $2 to buy a net. Donate a couple hundred of those, and you will have easily have saved a life.
</details>
用途。
- 这可以以一种相当明显的方式用于FAQ
- 三星在他们的网站上使用类似的东西来做脚注
3.wbr
<wbr> 标签可以用来显示一个可能的断字。有时你有一个词太长了，以至于网络浏览器会自动将其断开。使用<wbr> 标签可以给浏览器一个特定的地方，以便在必要时将一个词断开。
anti<wbr>dise<wbr>stablishmen<wbr>taria<wbr>nism
使用
- 我使用的Hugo主题为我在合理的地方自动拆分了单词。虽然，我应该说，它并没有使用
<wbr>标签。我猜它是用CSS来代替的。不是所有的浏览器都支持这个功能。你可以用它来兼容 检查笔记谷歌浏览器。 - 如果你有一个非常非常长的词，比如Lopadotemachoselachogaleokranioleipsanodrimhypotrimmatosilphioparaomelitokatakechymenokich
lepikossyphophattoperisteralektryonoptekephalliokigklopeleiolagoiosiraiobaphetraganopterygon或者这个词，你可能需要这个。
4.abbr
<abbr> 标签用于定义一个缩略语。当文本被悬停时，它将显示完整的标题。
To do this, we need <abbr title="HyperText Markup Language">HTML</abbr> content.
是的，我们可以用一个普通的<span> 做同样的事情。
To do this, we need <span title="HyperText Markup Language">HTML</span> content.
但是，使用<abbr> 可以帮助视力受损的人，他们需要文本到语音软件。文字转语音工具更容易分辨出这是一个缩写，这种方式。
5.时间
<time> 标签告诉浏览器，该文本指的是一个时间。
The meeting is on <time datetime="2020-07-17 19:00:00">Friday at 7pm</time>.
你并不总是需要datetime 这个属性。例如，如果你只是显示一个时间，那么你可以使用<time> ，而不使用datetime ，像这样。
The meeting is at <time>19:00</time>.
使用方法
- 在一些浏览器上（主要是在移动设备上），会有一个链接来把时间添加到日历上。
结论
有一个CodePen，里面有本文所介绍的所有例子。如果你想看看更多的HTML标签，W3 HTML参考总是一个很好的阅读。
类似的文章
[
语言
如何创建一个可重复使用的React表单组件
阅读更多
语言, Node.js
用Next.js构建一个薪资系统
阅读更多
架构
在Django中创建和使用装饰器
阅读更多
