个人博客-HTML 隐藏的宝石：您应该了解的 HTML 标签

HTML 隐藏的宝石：您应该了解的 HTML 标签

作者：胡同里的砖头围观群众：113 更新于：2024-04-24

HTML 是 Web 的支柱，用于创建网页和 Web 应用程序。虽然您可能已经熟悉许多 HTML 标签，但存在一些较少讨论的标签，可以增强网页的深度。

在这篇博文中，我将向您介绍 7 个可以提升您的 Web 开发技能的 HTML 标签。

让我们开始吧！

1.<abbr>
<abbr> HTML 标记表示短语或较长单词的缩写或首字母缩略词。

此标记通过在用户将鼠标悬停在该标记上时提供说明来帮助提高可访问性和用户理解。
此标记可与 title 属性一起使用，当用户将鼠标悬停在 <abbr> 标记内容上时，title 属性的值。

<p>
<abbr title="World Wide Web">WWW</abbr> is a fundamental part of the internet.
</p>

2.<base>

<base> HTML 标记定义网页中所有相对 URL 的基本 URL。

当您想要为网页上的所有相对 URL 创建共享起点时，这很方便，从而可以更轻松地导航和加载资源。

<head>
   <base href="https://shefali.dev" target="_blank" />
</head>
<body>
   <a href="/blog">Blogs</a>
   <a href="/get-in-touch">Contact</a>
</body>

3.<cite>

<cite> HTML 标签用于指定创意作品的标题，例如引用的内容、书籍、网站、绘画等。

它有助于保持正确的引文格式和语义。

<blockquote>
   <p>Life is what happens when you're busy making other plans.</p>
   <cite>John Lennon</cite>
</blockquote>

4.<details> <summary>

如果要在网页上包含可折叠的内容，则可以使用<details>和<summary>标记。

<details> 标记为隐藏内容创建容器，而 <summary> 标记提供可点击的标签来切换该内容的可见性。

<details>
  <summary>Click to expand</summary>
  <p>This content can be expanded or collapsed.</p>
</details>

5.<fieldset>和<legend>
<fieldset> 标记用于对表单中的相关元素进行分组，<legend> 标记与 <fieldset> 一起使用，以定义 <fieldset> 标记的标题。

这对于创建更高效和更易于访问的表单非常有用。

<form>
   <fieldset>
      <legend>Personal details</legend>
      <label for="firstname">First name:</label>
      <input type="text" id="firstname" name="firstname" />
      <label for="email">Email:</label>
      <input type="email" id="email" name="email" />
      <label for="contact">Contact:</label>
      <input type="text" id="contact" name="contact" />
      <input type="button" value="Submit" />
   </fieldset>
</form>

<mark>

<mark> 标记用于突出显示网页上的文本。

当您需要强调或突出显示某些文本时，您可以使用 <mark> 标签。它将背景颜色应用于标记的文本并使其脱颖而出。

<p>This is a <mark>highlighted text</mark> within a paragraph.</p>

7.<optgroup>
<optgroup> 标记用于对 <select> HTML 标记中的相关选项进行分组。当您使用大型下拉菜单或一长串选项时，可以使用此功能。

<select>
   <optgroup label="Fruits">
      <option>Apple</option>
      <option>Banana</option>
      <option>Mango</option>
   </optgroup>
   <optgroup label="Vegetables">
      <option>Tomato</option>
      <option>Broccoli</option>
      <option>Carrot</option>
   </optgroup>
</select>

本文标题： HTML 隐藏的宝石：您应该了解的 HTML 标签

文章分类：【HTML/CSS】

非特殊说明，本文版权归【胡同里的砖头】个人博客所有，转载请注明出处.

留言评论

上一篇：Vue 3.0+ElementUI Plus之EL-Tree不用TS获取所有选中的节点

下一篇：数据库加密