Logo

菜单

发布于 2026-01-05 3 阅读
0

你可能不知道的24个HTML标签。

你可能不知道的24个HTML标签。

我们都知道 HTML，它能帮助我们构建网站内容，它包含许多标签，可以帮助我们快速开发 Web 应用程序。当然，也有一些标签我们可能从未用过，因为我们甚至不知道它们的存在。这里我列出了 24 个 HTML 标签，它们或许会在你 Web 开发生涯的某个阶段派上用场。你可以在这个CodePen示例中看到这些标签的实际应用。如果你知道其他有趣的标签，请告诉我。希望这份列表能对你有所帮助，祝你编码愉快！

1. 地址元素

地址元素是一个容器元素，用于表示联系信息或将联系信息分组在一起。

<address>
  <a href="mailto:kiran2345raj@gmail.com">kiranraj</a>
  <p>Location : Kerala, India</p>
</address>
Enter fullscreen mode Exit fullscreen mode

2. 数据元素

数据元素将给定内容与其机器可读的翻译关联起来。该数据元素有一个属性，即值，用于指定机器可读的翻译。默认情况下，该值对用户不可见。

<ul>
    <li><data value="1972">C Language</data></li>
    <li><data value="1979">C++ Language</data></li>
    <li><data value="1995">JavaScript</data></li>
</ul>
Enter fullscreen mode Exit fullscreen mode

3. 数据列表元素

数据列表元素包含一组选项元素。数据列表可用于为 HTML 中的输入元素创建自动完成功能。

<label for="SELECT">Pick a country</label>
<input list="country" id="SELECT" />

<datalist id="country">
    <option value="INDIA">
    <option value="USA">
    <option value="UK">
    <option value="GERMANY">
    <option value="RUSSIA">
</datalist>
Enter fullscreen mode Exit fullscreen mode

4. bdi元件（双向隔离）

bdi 元素告诉浏览器根据方向性对 bdi 元素内的内容进行不同的处理。

<p>Hello World <bdi>مرحبا بالعالم</bdi></p>
Enter fullscreen mode Exit fullscreen mode

5. bdo 元素（双向覆盖）

bdo 元素会覆盖 bdo 标签内文本的当前文本方向，即 bdo 标签内的文本将具有 bdo 标签的 dir 属性指定的方向。

<p>Hello World <bdo dir="rtl">Hello World</bdo></p>
Enter fullscreen mode Exit fullscreen mode

6. 代码元素

代码元素用于区分程序代码片段和普通文本，用于显示代码标签内文本的默认字体为等宽字体。

<p>To install create-react-app use <code>npx create-react-app</code>.</p>
Enter fullscreen mode Exit fullscreen mode

7. dl 元素（描述列表）

dl 元素用于定义描述列表。该列表由术语或术语组组成，每个术语或术语组由 dt 标签表示，并且每个术语的相应详细信息包含在 dd 标签中。

dt 元素（描述术语）

dt 元素用于在描述列表中定义描述术语。

dd 元素（描述详情）

dt 元素用于在描述列表中定义描述详情。

<!-- 7. Description Element -->
<dl>
  <dt>bdi tag</dt>
  <dd>The bdi tag help to display part of the text in the opposite direction</dd>
  <dt>bdo tag</dt>
  <dd>The bdo tag overrides the default text direction.</dd>
</dl>
Enter fullscreen mode Exit fullscreen mode

8. kbd 元素（键盘输入元素）

kbd 元素是一个行内标签，用于表示用户通过键盘或其他文本输入设备输入的内容。默认情况下，kbd 使用等宽字体。

<!-- 8. Keyboard input Element -->
<p>Use <kbd>Ctrl</kbd> + <kbd>S</kbd> to save your work.</p>
Enter fullscreen mode Exit fullscreen mode

9. 标记元素

mark 标签用于突出显示文本内容，它是一个行内元素。

<!-- 9. Mark Element -->
<p>Use <mark>Ctrl+ S</mark> to save your work.</p>
Enter fullscreen mode Exit fullscreen mode

10. 米元件

计量标签用于定义水平计量单位。它具有一些属性，例如值、最小值、最大值、低值、高值和最优值。值表示当前数值，且必须介于最小值和最大值之间。最小值和最大值分别表示计量标签的上限和下限。低值和高值分别表示低值的上限和高值的下限。低值必须大于最小值，高值必须小于最大值。

<!-- 10. Meter Element -->
<label for="Mark">Mark:</label>
<meter id="Mark" min="0" max="100" value="80"></meter>
Enter fullscreen mode Exit fullscreen mode

11. noscript 元素

仅当浏览器禁用 JavaScript 时，才会显示 noscript 标签的内容。

<!-- 11. Noscript Element -->
<noscript>
  <p>JavaScript is disabled in the browser</p>
</noscript>
Enter fullscreen mode Exit fullscreen mode

12. 对象元素

object 标签定义了一个用于存放外部资源的容器。

<!-- 12. Object Element -->
<object type="image/jpg"
    data="https://images.unsplash.com/photo-1448375240586-882707db888b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1950&q=80"
    width="250"
    height="200">
</object>
Enter fullscreen mode Exit fullscreen mode

13. 输出

输出结果是一个容器元素，可用于显示计算结果/用户操作结果。

<!-- 13. Output -->
<form oninput="sum.value = parseInt(num1.value) + parseInt(num2.value)">
  <input type="number" name="num1" value="4"> +
  <input type="number" name="num2" value="7"> =
  <output name="sum">11</output>
</form>
Enter fullscreen mode Exit fullscreen mode

14. 进度要素

进度元素显示进度条，该进度条接受两个属性 max 和 value。

<!-- 14. Progress -->
<progress id="file" max="100" value="70"> 70% </progress>
Enter fullscreen mode Exit fullscreen mode

15. 子元素（下标）

包含在子元素中的文本会显示为下标。

<!-- 15. sub element -->
<p>H<sub>2</sub>O</p>
Enter fullscreen mode Exit fullscreen mode

16. sup 元素（上标）

`sup` 元素用于设置文本的显示样式，使其显示为上标。

<!-- 16. sup element -->
<p> (x + y)<sup>2</sup> = x<sup>2</sup> + 2xy + y<sup>2</sup></p>
Enter fullscreen mode Exit fullscreen mode

17. 细节元素

详细信息元素创建了一个披露小部件，该小部件隐藏信息，只有当我们单击详细信息元素内的摘要元素的内容时，这些信息才会显示。

<!-- 17. Details Element -->
<details>
    <summary>Address</summary>
      <a href="mailto:kiran2345raj@gmail.com">kiranraj@gmail.com</a>
      <p>Location : Kerala, India</p>
</details>
Enter fullscreen mode Exit fullscreen mode

18. 时间要素

时间元素表示 24 小时制时间，它是一个行内元素。

<!-- 18. Time Element -->
<p>
  The IPL starts at <time datetime="2021-05-04T20:00">20:00</time>.
</p>
Enter fullscreen mode Exit fullscreen mode

19. var element

var 标签用于表示数学或编程表达式中的变量名称。

<!-- 19. var Element -->
<div>
    <p>Var Element</p>
  <p>let <var>x</var> = 10</p>
</div>
Enter fullscreen mode Exit fullscreen mode

20. wbr 元素（断行机会）

当我们输入较长的文本时，浏览器会自动添加换行符以保持段落宽度在指定限制内​​，您可以使用 wbr 元素来指示浏览器换行的理想位置。

<!-- 20. wbr Element -->
<div class="wbr">
  <p>Wbr Element</p>
  <p>helloworld,welcome</p>
  <p>hello<wbr>world,<wbr>welcome</p>
</div>
Enter fullscreen mode Exit fullscreen mode

21. abbr 元素（缩写）

abbr 元素表示缩写，它有一个可选的 title 属性，可以在其中放置缩写的完整内容。这是 acronym 元素的替代方案，某些浏览器支持 acronym 元素。

<!-- 21. abbr Element -->
<div class="wbr">
  <p>
    <abbr title="kiran raj r">krr</abbr>
  </p>
</div>
Enter fullscreen mode Exit fullscreen mode

22. 前置元素

pre 元素表示预格式化文本，浏览器会按照 html 代码中编写的顺序显示文本，并且不会忽略空格。

<!-- 22. pre Element -->
<div>
  <p>Pre Element</p>
  <pre>
      <code>
function greet(name) {
    console.log('Good Morning ' + name + '!');
}

sayHello('kiran raj');
      </code>
  </pre>
</div>
Enter fullscreen mode Exit fullscreen mode

23. q 元素

q 元素用于表示简短的行内引用，cite 元素用于表示引用的出处。对于较长的引用，请使用 blockquote 元素。

<!-- 23. q Element -->
<div>
  <p>q and cite Elements</p>
  <q>Imagination is more important than knowledge. 
    <cite>Albert Einstein</cite></q>
</div>
Enter fullscreen mode Exit fullscreen mode

24. 样本元素

samp 元素用于表示计算机程序的内联示例输出。浏览器默认使用等宽字体。

<!-- 24. samp Element -->
<p>samp Elements</p>
<p> x + y gives <samp>undefined</samp> </p>
Enter fullscreen mode Exit fullscreen mode

如果您发现任何错误，请留言；也欢迎您提供任何与此主题相关的补充信息。如果您喜欢这篇文章，请浏览我的其他文章，谢谢！

kiranrajvjd

终极 Web 开发人员资源列表 🔥超过 200 个超棒资源

Kiran Raj R ・ 2021年5月6日

#css #javascript #webdev #beginners
kiranrajvjd

12 个使用 CSS 实现的简单按钮悬停动画

Kiran Raj R ・ 2021年5月5日

#webdev #生产力 #css #beginners
kiranrajvjd

19 个使用 CSS 实现的简单悬停动画

Kiran Raj R ・ 2021年5月4日

#css #beginners #webdev #生产力
kiranrajvjd

10 个超棒的 GitHub 代码库，供 Web 开发人员使用

Kiran Raj R ・ 2021年4月26日

#javascript #beginners #生产力 #webdev
文章来源：https://dev.to/kiranrajvjd/24-html-tags-you-may-not-know-37be
堆叠杰克
终端设置 - 让你的 Mac 终端更强大