HTML5 语义

HTML5 语义元素具有反映组件类型的重要名称。让我们以表格、页眉、页脚等为例

• 对于 HTML4，开发人员使用自己的 id/类名称来设计元素，例如顶部、页眉、底部、菜单、页脚、主要、导航、材质、对象、顶部导航、侧边栏等。然而，正因为如此，搜索引擎无法识别网页的正确内容。

  HTML5 语义示例

  现在让我们看一些 HTML5 语义元素的示例：

  示例 #1 –

  顾名思义，它指的是页面介绍段的标题。一页上可以找到许多标题。

  代码：

  
  
  <title>Header Element for the page</title>
  <style>
  h1, h4 {
  Color:#red;
  Text-align:centre;
  margin-bottom:2px;
  }
  p {
  font-size:23px;
  text-align:centre;
  margin-top:2px;
  }
  </style>
  
  
  <article>
  <header>
  <h1 id="Educba-learning-bridge">Educba learning bridge</h1>
  <h3 id="Become-a-techinal-learner-with-EDUCBA">Become a techinal learner with EDUCBA</h3>
  <p>Hey the best online training institute in ASIA </p>
  </header>
  </article>
  
  

  输出：

  

  示例 #2 –

  导航链接的集合，用于描述导航菜单或导航栏。

  代码：

  
  
  <title>Navigation Element</title>
  <style>
  h1 {
  color:#Grey;
  }
  </style>
  
  
  <h1 id="Navigation-Bar-for-EduCBA">Navigation Bar for EduCBA</h1>
  <nav>
  <a href="https://www.educba.com/">Home</a> |
  <a href="https://www.educba.com/data-science/">Data Science</a> |
  <a href="https://www.educba.com/software-development/">Software Development</a> |
  <a href="https://www.educba.com/design/">Design</a> |
  <a href="https://www.educba.com/finance/">Finance</a>
  </nav>
  
  

  输出：

  

  示例 #3 –

  页面可以分为简介、联系方式、详细信息等部分，每个部分都有一个元素。

  代码：

  
  
  <title>Have a look for Section Element in EduCBA</title>
  <style>
  h1 {
  color:#Grey;
  }
  p {
  font-size:20px;
  text-align:left;
  margin-top:2px;
  }
  </style>
  
  
  <section>
  <h1 id="AWS-Tutorials-for-EduCBA">AWS Tutorials for EduCBA</h1>
  <p>Amazon Web Services (AWS) is one of the world's most popular and used cloud services. 175 supported services are available in AWS. </p>
  </section>
  <section>
  <h1 id="Data-Mining">Data Mining</h1>
  <p>AThrough technological development such as big data and data science companies around the world have benefited from data mining by recognize opportunities and making their organizations efficient through waste reduction, to achieve their business goals.
  </p>
  </section>
  
  

  输出：

  

  示例 #4 – 

  此标记元素用于突出显示文本。

  代码：

  
  
  <title>EduCBA mark Element</title>
  <style>
  h2 {
  color:#Grey;
  }
  </style>
  
  
  <h1 id="How-to-mark-text">How to mark text </h1>
  <p> In theory, this method transforms <mark>raw data into valuable information</mark> or insights.</p>
  
  

  输出：

  

  示例 #5 –

  它是块或段划分的一个方面。它被用作一个包。

  代码：

  
  
  <title>div Element</title>
  <style>
  .edu {
  color:#grey;
  }
  </style>
  
  
  <h1 id="div-Element-for-educba">div Element for educba </h1>
  <div class="EduCBA">
  <h1 id="Data-Science">Data Science</h1>
  <p>Data analatics computer Science nachine learning </p>
  </div>
  
  

  输出：

  

  示例 #6 – 和

  • 此元素用于定义用户可以查看或隐藏的其他详细信息。
  • 此元素用于定义
    的可见标题。元素

  实施的计划和

  代码：

  
  
  <title>Details for the EduCBA Summery</title>
  <style>
  .GFG {
  Color:#red;
  font-size:60px;
  Text-align:left;
  margin-bottom:0px;
  }
  p {
  font-size:25px;
  text-align:left;
  margin-top:3px;
  }
  </style>
  
  
  <details>
  <summary class="EDUCBA">Make your Study easily with us</summary>
  <p>One of the best Data Science and web portal
  where you can learn good skills of programming.
  </p>
  </details>
  
  

  输出：

  

  

  7. ：
     该元素用于指定页面内容之外的内容。
  8. ：此元素用于指定时间或日期。
  9. ：
     该元素用于指定文档的主要内容。

  如何在一个示例中实现所有元素代码？

  这里我们通过一个示例了解如何实现元素代码。

  代码：

  
  
  <title>Header Element for the page</title>
  <style>
  color:red;
  h1, h4 {
  Color:#red;
  Text-align:centre;
  margin-bottom:2px;
  }
  p {
  font-size:20px;
  text-align:centre;
  margin-top:2px;
  }
  </style>
  
  
  <article>
  <header>
  <h1 id="Educba-learning-bridge">Educba learning bridge</h1>
  <nav>
  <a href="https://www.educba.com/">Home</a> |
  <a href="https://www.educba.com/data-science/">Data Science</a> |
  <a href="https://www.educba.com/software-development/">Software Development</a> |
  <a href="https://www.educba.com/design/">Design</a> |
  <a href="https://www.educba.com/finance/">Finance</a>
  </nav>
  <details>
  <h3 id="Become-a-technicall-learner-with-EDUCBA">Become a technicall learner with EDUCBA</h3>
  <section>
  <h1 id="mark-AWS-Tutorials-for-EduCBA-mark"><mark>AWS Tutorials for EduCBA</mark></h1>
  <p>Amazon Web Services (AWS) is one of the world's most popular and used cloud services. 175 supported services are available in AWS. </p>
  </section>
  <section>
  <h1 id="mark-Data-Mining-mark"><mark>Data Mining</mark></h1>
  <p>Through technological development such as big data and data science companies around the world have benefited from data mining by recognize opportunities and making their organizations efficient through waste reduction, to achieve their business goals.
  </p>
  </section>
  <p><em>EduCBA is the best online training institute in ASIA</em></p>
  </details></header>
  </article>
  
  

  输出：

  

以上是HTML5 语义的详细内容。更多信息请关注PHP中文网其他相关文章！