码云前端开发 2024-08-09

你可能没见过的！10个非常实用的HTML标签

文章目录隐藏

1.<abbr> 标签
2. <q> 标签
3. <s> 标签
4. 标签
5. 标签
6.<details> 标签
7. <optgroup>标签
8. <datalist> 标签
9. <fieldset> 标签
10. 和 标签
结语

HTML 远不止<div>、<a>和这些标签。

还有许多更复杂、功能更强大的标签，很多开发者几乎从不使用。

这些标签具有从现代列表可视化到🎨彩色高亮等有趣功能。

1.<abbr> 标签

<abbr>标签用于定义缩写或首字母缩略词，如 HTML、CSS 和 JS。

也包括 LOL——尽管现在它更像是一个独立的词。

I'm reading about
<abbr title="Hypertext Markup Language">HTML</abbr>
tags at
<abbr title="Coding Beauty">CB</abbr>

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

悬停在<abbr>上以显示完整形式:

2. <q> 标签

<q>标签表示其中的文本是一个简短的内联引用。

<q>码云笔记-前端博客，专注于 IT 技术的知识分享</q>

现代浏览器通常通过在封闭的文本周围添加引号来实现这个标签：

3. <s> 标签

<s>用于删除线。

用于更正而不破坏更改历史。

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

<del>和<ins>对类似，但在语义上用于文档更新而不是更正。

<!DOCTYPE html>
<html lang="en">
<head>
    <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>
</html>

4. 标签

用于标记或高亮文本。

码云笔记 <mark>前端</mark> 知识分享

默认为黄色背景：

就像浏览器显示搜索结果那样。

5. 标签

告诉浏览器，”你只能在这里和那里断开文本”，这样浏览器就不会随意地在关键词中断开。

这就是为什么它叫wbr — Word BReak Opportunity（单词断开机会）

不使用：

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

现在使用：

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

6.<details> 标签

<details>是用于展开和收缩的。

<details>
  <summary>码云笔记</summary>
  码云笔记是中国专业的开发者技术网站之一。我们一直致力于提供前沿的技术问答、技术博客、技术教程、技术笔记等文章，为开发者提供纯粹、高质的技术知识分享平台。
</details>

收缩：

展开：

7. <optgroup>标签

<optgroup>顾名思义 — 用于分组选项，通常可以将巨大的选项列表分组为清晰的层次结构。

<select name="country" id="countries">
  <optgroup label="中国">
    <option value="us">北京</option>
    <option value="ca">上海</option>
  </optgroup>
  <optgroup label="Europe">
    <option value="uk">United Kingdom</option>
    <option value="fr">France</option>
  </optgroup>
</select>

8. <datalist> 标签

<datalist>致力于让文本输入变得轻而易举。

通过下拉列表实现自动完成:

<form>
  <label for="lang">Choose a language:</label>
  <input list="langs" name="lang" id="lang" />
  <!--  <input> 连接到 <datalist> -->
  <datalist id="langs">
    <option value="English" />
    <option value="French" />
    <option value="Spanish" />
    <option value="Chinese" />
    <option value="German" />
  </datalist>
</form>

当我们输入后，会自动查询：

9. <fieldset> 标签

<fieldset>创建一组字段 — 创建清晰的视觉分隔，以便轻松理解表单，这个我觉得还挺有用处。

<form>
  <fieldset>
    <legend>名字</legend>
    
    <label for="fname">名字:</label>
    <input type="text" id="fname" name="fname" /><br />
    
    <label for="mname">中间名:</label>
    <input type="text" id="mname" name="mname" /><br />
    
    <label for="lname">姓:</label>
    <input type="text" id="lname" name="lname" />
  </fieldset>
  
  <br />
  <label for="email">电子邮箱:</label>
  <input type="email" id="email" name="email" /><br /><br />
  
  <label for="password">密码:</label>
  <input type="password" id="password" name="password" />
</form>

10. 和 标签

 — 上标。
 — 下标。

<p>该文本包含 <sub>下标</sub> 文本</p>
<p>该文本包含 <sup>上标</sup> 文本</p>

利用这个标签我们可以做更复杂的应用：

<p>&#x1D465;<sup>2</sup> - 3&#x1D465; - 28 = 0. Solve for &#x1D465;.</p>
<br />
<p>H<sub>2</sub>SO<sub>4</sub> + NaOH &#8594; Na<sub>2</sub>SO<sub>4</sub> + H<sub>2</sub>O</p>