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中文網其他相關文章！