抛弃 div 标签：使用这些 HTML 标签

2025-06-04

抛弃 div 标签：使用这些 HTML 标签

Div标签是一种 HTML 元素，可用于将网页划分为多个部分，并可使用CSS进行样式设置。虽然div标签在创建页面布局和分隔内容方面非常有用，但不应过度或不必要地使用它们。通常，最好使用最合适的HTML元素来标记您要标记的内容，而不是div始终依赖标签。

因此，在本文中，我选择了一些可以轻松替换 div 标签的替代方案。它们是：

部分

此标签定义文档中的某个部分，例如章节或附录。它通常用于对语义相关的内容进行分组。

<section>
  <h1>This is a section</h1>
  <p>This is a paragraph within the section</p>
</section>
Enter fullscreen mode Exit fullscreen mode

文章

此标签定义独立、自包含的内容，例如博客文章或新闻文章。

<article>
  <h1>This is an article</h1>
  <p>This is a paragraph within the article</p>
</article>
Enter fullscreen mode Exit fullscreen mode

标题

此标签定义部分或页面的标题。它可以包含徽标、导航菜单或出现在页面顶部的其他元素。

<header>
  <h1>This is the page title</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>
Enter fullscreen mode Exit fullscreen mode

页脚

此标签定义部分或页面的页脚。它可以包含版权信息、站点地图或显示在页面底部的其他元素。

<footer>
  <p>Copyright 2021 My Company</p>
  <ul>
    <li><a href="#">Terms of Service</a></li>
    <li><a href="#">Privacy Policy</a></li>
  </ul>
</footer>
Enter fullscreen mode Exit fullscreen mode

一边

此标签定义与页面主要内容略微相关的内容。它通常用于显示侧边栏或相关内容部分。

<aside>
  <h2>Related Articles</h2>
  <ul>
    <li><a href="#">Article 1</a></li>
    <li><a href="#">Article 2</a></li>
    <li><a href="#">Article 3</a></li>
  </ul>
</aside>
Enter fullscreen mode Exit fullscreen mode

导航

此标签定义包含导航链接的页面部分。

<nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
Enter fullscreen mode Exit fullscreen mode

主要的

此标签定义页面的主要内容。该标签每个页面只能使用一次，且应包含与页面目的直接相关的内容。

<main>
  <h1>Welcome to my website</h1>
  <p>This is the main content of the page.</p>
</main>
Enter fullscreen mode Exit fullscreen mode

数字

此标签定义独立内容，例如图像、图表或代码片段。它通常与figcaption定义内容标题的标签结合使用。

<figure>
  <img src="image.jpg" alt="A description of the image">
  <figcaption>This is a caption for the image</figcaption>
</figure>
Enter fullscreen mode Exit fullscreen mode

细节

此标签定义部分内容的摘要或描述。用户可以展开或折叠它，通常用于显示附加信息或选项。

<details>
  <summary>Click here to view more details</summary>
  <p>Additional details go here</p>
</details>
Enter fullscreen mode Exit fullscreen mode

字段集

此标签定义一组相关的表单元素，例如复选框或单选按钮。它通常用于对属于同一逻辑实体的表单控件进行分组。

<form>
  <fieldset>
    <legend>Personal Information</legend>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name"><br>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email"><br>
  </fieldset>
</form>
Enter fullscreen mode Exit fullscreen mode

地址

此标签定义部分或整个页面作者的联系信息。它通常用于显示作者的姓名、电子邮件地址和实际地址。

<address>
  Contact me at:<br>
  John Doe<br>
  johndoe@example.com
</address>
Enter fullscreen mode Exit fullscreen mode

形式

此标签定义一个可供用户填写的表单。它可以包含各种表单元素，例如文本输入框、复选框和按钮。

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name"><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br>
  <input type="submit" value="Submit">
</form>
Enter fullscreen mode Exit fullscreen mode

桌子

此标签定义数据表。它可以包含行、列和单元格，并可用于以结构化的方式显示表格数据。

<table>
  <tr>
    <th>Name</th>
    <th>Email</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>johndoe@example.com</td>
  </tr>
  <tr>
    <td>Jane Doe</td>
    <td>janedoe@example.com</td>
  </tr>
</table>
Enter fullscreen mode Exit fullscreen mode

预

此标签定义预格式化的文本。它保留空格和字体格式，常用于显示代码片段或其他格式化的文本。

<pre>
  This is some preformatted text.
  It preserves both spaces and line breaks.
</pre>
Enter fullscreen mode Exit fullscreen mode

代码

此标签定义一段计算机代码。它通常与pre标签一起使用来显示代码片段。

<p>To create a new file in the terminal, use the following command:</p>
<code>touch new_file.txt</code>
Enter fullscreen mode Exit fullscreen mode

块引用

此标签定义了与正文不同的长引文。它通常用于引用其他来源或以更独特的方式呈现长段文本。

<blockquote>
  "The world is a book, and those who do not travel read only a page." - Saint Augustine
</blockquote>
Enter fullscreen mode Exit fullscreen mode

标记

此标签定义突出显示的文本以供参考。它通常用于标记与当前上下文相关或需要稍后复习的文本段落。

<p>I love to eat <mark>fruits</mark> and vegetables every day.</p>
Enter fullscreen mode Exit fullscreen mode

时间

此标签定义日期或时间。它可用于标记文档的发布日期，或指示事件的开始或结束时间。

<p>I was born on <time datetime="1785-12-30">December 30, 1985</time>.</p>
Enter fullscreen mode Exit fullscreen mode

缩写

此标签定义缩写或首字母缩略词。它可用于为 title 属性中的缩写提供完整解释。

<p>The <abbr title="United Nations">UN</abbr> was founded in 1945.</p>
Enter fullscreen mode Exit fullscreen mode

布多

此标签定义文本的方向。它可用于更改从右向左书写的语言（例如阿拉伯语或希伯来语）的文本方向。

<p>This text is written left to right. <bdo dir="rtl">This text is written right to left.</bdo></p>
Enter fullscreen mode Exit fullscreen mode

列组

此标签定义表格中的一组列。它可用于将样式或属性应用于一组列，而不是单独应用于每一列。

<table>
  <colgroup>
    <col span="2" style="width:50%">
    <col style="width:50%">
  </colgroup>
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
  </tr>
</table>
Enter fullscreen mode Exit fullscreen mode

删除

此标签定义已删除的文本。它通常用于标记已从文档中删除的文本并显示删除的原因。它通常与ins元素结合使用，以标记文档的添加和删除。

<p>I went to the store and bought a <del>car</del> <ins>bike</ins>.</p>
Enter fullscreen mode Exit fullscreen mode

动态链接库

此标签定义了一个定义列表。它可用于创建术语及其定义的列表，或将相关项目分组到列表中。

<dl>
  <dt>Term 1</dt>
  <dd>Definition 1</dd>
  <dt>Term 2</dt>
  <dd>Definition 2</dd>
  <dt>Term 3</dt>
  <dd>Definition 3</dd>
</dl>
Enter fullscreen mode Exit fullscreen mode

插件

此标签定义插入的文本。它通常用于标记已添加到文档的文本，并显示插入的原因。

<p>I went to the store and bought a <del>car</del> <ins>bike</ins>.</p>
Enter fullscreen mode Exit fullscreen mode

大腿肌肉萎缩症

此标签定义键盘输入。它通常用于标记用户应使用键盘输入的文本。

<p>To save the document, press <kbd>Ctrl</kbd>+<kbd>S</kbd>.</p>
Enter fullscreen mode Exit fullscreen mode

输出

HTML 中的此标签元素表示计算或用户操作的结果。它通常与表单元素（例如input和select）结合使用，以显示计算或用户操作的结果。

<form>
  <label for="num1">Number 1:</label>
  <input type="number" id="num1" name="num1"><br>
  <label for="num2">Number 2:</label>
  <input type="number" id="num2" name="num2"><br>
  <label for="result">Result:</label>
  <output id="result" name="result"></output><br>
  <input type="button" value="Calculate" onclick="calculate()">
</form>

<script>
  function calculate() {
    const num1 = document.getElementById("num1").value;
    const num2 = document.getElementById("num2").value;
    const result = document.getElementById("result");
    result.value = parseInt(num1) + parseInt(num2);
  }
</script>
Enter fullscreen mode Exit fullscreen mode

潜艇

此标签定义下标。它通常用于以较小的字体显示下标字符或公式。

H<sub>2</sub>O
Enter fullscreen mode Exit fullscreen mode

苏普

此标签定义上标。它通常用于以较小的字体显示上标字符或公式。

E = mc<sup>2</sup>
Enter fullscreen mode Exit fullscreen mode

小的

此标签定义小号文本。它通常用于以较小的字体显示细则或法律免责声明文本。

<p>Welcome to our website! <small>By using this website, you agree to our terms of service.</small></p>
Enter fullscreen mode Exit fullscreen mode

结论

希望这些标签能帮到你。如果你有任何问题，或者我需要添加其他标签，请在评论区告诉我。感谢阅读。

文章来源：https://dev.to/arafat4693/ditch-the-div-tag-use-these-tags-instead-2a3c
Devto 翻译
PREV
2024 年 PHP 开发人员十大 VS Code 扩展
NEXT
完整的 CSS 选择器速查表：带图片的实用指南😍