十个鲜为人知的 HTML 标签

许多金
69 阅读2分钟

文章翻译自 Medium 文章 medium.com/coding-beau… ， 内容比较简单，快来补充自己的知识库吧。

HTML不仅仅只有<div>、<a>和<p>。还有许多更复杂和强大的标签，很多开发者几乎从未使用过。这些标签具有从现代列表可视化到🎨彩色高亮的有趣功能。

<abbr>

<abbr> 标签 <abbr>标签定义了一个缩写或首字母缩略词，比如 HTML、CSS 和 JS。

我们使用<abbr>标签的title属性来显示缩写/首字母缩略词的全称，当你悬停在元素上时会显示描述：

  I am reading about
  <abbr title="HyperText Markup Language">HTML</abbr>
  tags at 
  <abbr title="Coding Beauty">CB</abbr>

悬停在<abbr>上以显示全称：

0_W9TlsqT26HvsjtBC.png

<q> 标签

<q>标签表示其中的文本是一个简短的内联引用。现代浏览器通常通过在引用文本外包裹引号来实现这个标签：

<q>Coding creates informative tutorials on Web development technology</q>

image.png

<s> 标签

<s>标签用于表示删除的文本。用于纠正错误而不破坏变更历史。

Buy for <s>$200</s> $100

image.png

<del>和<ins>标签与之相似，但语义上更适合用于文档更新而不是纠正错误。

  <style>
    del{
      background-color: lightsalmon;
    }
    ins{
      text-decoration: none;
      background-color: lightgreen;
    }
  </style>
</head>
<body>
  My favorite programming language is <del>JavaScript</del> <ins>TypeScript</ins>
</body>

image.png

<mark> 标签

<mark>标签用于标记或高亮文本。默认情况下具有黄色背景色：

Coding <mark>Beauty</mark> Website

image.png

类似于浏览器显示搜索结果的方式:

image.png

<wbr> 标签

<wbr>标签告诉浏览器“你可以在这里或那里换行”。这样浏览器就不会随意地在关键字的任何地方换行了。

这就是wbr的意思——Word Break Opportunity（单词换行机会）

没有<wbr>的效果：

<p>this-is-a-very-long-text-created-to-test-the-wbr-tag</p>

image.png

使用<wbr>后的效果：

<p>this-is-a-very-long-te<wbr/>xt-created-to-test-the-wbr-tag</p>

image.png

<details> 标签

<details>标签用于展示和隐藏内容——就像宇宙的扩展和收缩。

收起：

<details>
  <summary>More info</summary>
  <p>This is additional information</p>
</details>

image.png

展开，点击More info查看更多信息：

image.png

<optgroup> 标签

顾名思义——分组选项。

我们通常将巨大的选项列表分成清晰的层次结构，而<optgroup>标签就是为此而生。

国家 → 大洲。

<select>
  <optgroup label="North America">
    <option>United States</option>
    <option>Canada</option>
  </optgroup>
  <optgroup label="Europe">
    <option>France</option>
    <option>Germany</option>
  </optgroup>
</select>

image.png

<datalist> 标签

<datalist>标签让输入文本变得轻而易举。带有自动完成下拉列表：

  <input list="langs">
  <datalist id="langs">
    <option value="English">
    <option value="French">
    <option value="Spanish">
  </datalist>

image.png

image.png

<fieldset> 标签

<fieldset>标签创建一组字段。创建一个清晰的视觉分隔，使表单易于理解。 我们使用<legend>标签为<fieldset>元素定义一个标题。

<fieldset>
  <legend>Personal Information</legend>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
</fieldset>

image.png

<sup>和<sub>

标签 <sup>——上标。<sub>——下标。

<p>E = mc<sup>2</sup></p>
<p>H<sub>2</sub>O</p>

image.png

更复杂的例子：中和反应 🧪

<p>NaOH + H<sub>2</sub>SO<sub>4</sub> → Na<sub>2</sub>SO<sub>4</sub> + H<sub>2</sub>O</p>

image.png

结论: 在本文中，我们探索了一些最不为人知和使用率比较低的HTML标签。尽管这些标签的使用率低，但在特定情况下它们非常有用。

avatar
文章
阅读
粉丝