ToB企服应用市场:ToB评测及商务社交产业平台

标题: 摆脱 `<div>`！7 种更语义化的 HTML 标签替换方案 [打印本页]
作者: 王柳    时间: 4 天前
标题: 摆脱 `<div>`！7 种更语义化的 HTML 标签替换方案
在开辟 Web 应用时，项目通常从简朴开始，但随着需求的增长，文档结构会变得复杂起来。
  标签虽然机动，但滥用会导致代码紊乱、难以维护。原因在于 `
  ` 是纯粹的容器，没有任何语义意义。
  幸好，HTML 提供了语义化标签这一优雅的解决方案。
  根据 W3Schools 的界说：语义化元素是带有明确意义的 HTML 元素。它们不但能让浏览器理解，还能清晰地转达意图给开辟者和用户。
  
  为什么要使用语义化标签？

  
  总之，除非别无选择，只管少用 <div>。
  下面是 7 个可以替换 <div> 的语义化标签及其应用场景。
  
  1. <section>：组织相关内容

  <section> 用于将相关内容分组，就像书中的章节，每个部分围绕特定主题。
  示例：
  1. <section>
  2.   <h2>我们的服务</h2>
  3.   <p>我们提供网站开发、设计和营销等多种服务，助您取得成功。</p>
  4. </section>
复制代码
  2. <article>：独立的内容单元

  <article> 得当表现独立的内容单元，例如文章、博客或新闻条目。
  示例：
  1. <article>
  2.   <h3>早晨锻炼的好处</h3>
  3.   <p>晨练可以提升能量，改善心情，是开启一天的绝佳方式。</p>
  4. </article>
复制代码
  3. <nav>：导航链接

  <nav> 用于界说导航区域，就像网站的目录或地图，指引用户浏览站点。
  示例：
  1. <nav>
  2.   <ul>
  3.     <li><a href="#home">首页</a></li>
  4.     <li><a href="#about">关于我们</a></li>
  5.     <li><a href="#services">服务</a></li>
  6.     <li><a href="#contact">联系我们</a></li>
  7.   </ul>
  8. </nav>
复制代码
  4. <header>：头部内容

  <header> 用于页面或部分内容的头部区域，通常包括标题和导航。
  示例：
  1. <header>
  2.   <h1>我的个人博客</h1>
  3.   <p>分享世界各地的故事与见解。</p>
  4. </header>
复制代码
  5. <footer>：底部内容

  <footer> 用于表现页面或部分内容的底部，通常包括版权声明、联系信息等。
  示例：
  1. <footer>
  2.   <p>&copy; 2024 我的个人博客。保留所有权利。</p>
  3.   <a href="#privacy-policy">隐私政策</a>
  4. </footer>
复制代码
  6. <main>：重要内容区域

  <main> 用于包含网页的重要内容，不包括头部、底部或侧边栏。
  示例：
  1. <main>
  2.   <h2>欢迎访问我们的网站</h2>
  3.   <p>我们为您提供量身定制的解决方案。</p>
  4. </main>
复制代码
  7. <aside>：补充内容

  <aside> 用于表现与主内容间接相关的信息，例如侧边栏或附加说明。
  示例：
  1. <aside>
  2.   <h4>相关文章</h4>
  3.   <ul>
  4.     <li><a href="#article1">改善睡眠的 10 个小技巧</a></li>
  5.     <li><a href="#article2">经济实惠的健康饮食指南</a></li>
  6.   </ul>
  7. </aside>
复制代码
  可视化：语义化标签的页面结构

  使用语义化标签构建页面时，页面结构会更加清晰。例如：
  1. <header>...</header>
  2. <nav>...</nav>
  3. <main>
  4.   <section>...</section>
  5.   <article>...</article>
  6.   <aside>...</aside>
  7. </main>
  8. <footer>...</footer>
复制代码
如许不但方便开辟人员理解页面结构，还能让搜索引擎和辅助装备更好地解析内容。
  
  结论

  滥用 <div> 会导致代码冗杂且不易维护。通过使用 <section>、<article>、<nav>、<header>、<footer>、<main> 和 <aside> 等语义化标签，你可以创建更清晰、更具可读性和更高效的网页结构。
  记住：除非没有合适的语义化标签，否则只管少用 <div>！
  
最后：

  
React Hook 深入浅出

  
CSS本领与案例详解

  
vue2与vue3本领合集

  
VueUse源码解读


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4