如何在HTML5中新增文章?


在這篇文章中,我們將學習如何在HTML5中新增文章。

HTML5 中新的分節元素之一是<article> 標籤。文章在 HTML 中使用 <article> 標籤表示。更具體地說,<article> 元素包含的內容與網站其餘內容不同(即使它們可能相關)。

讓我們考慮以下示例,瞭解如何在 HTML5 中新增文章

示例 1

在下面的示例中,我們在文章元素中使用內聯樣式。

<!DOCTYPE html>
<html>
<body>
   <article style="width: 300px;border: 2px solid gray;padding: 10px;border-radius: 10px;margin: 5px;">
      <img src="https://tutorialspoint.tw/static/images/logo-color-footer.png"alt="image"width="300"height="250"class="alignnone size-medium wp-image-560930"/>
      <h1>TutorialsPoint</h1>
      <p>Tutorials Point originated from the idea that there exists a class of readers who respond better to online content</p>
   </article>
</body>
</html>

當指令碼執行時,它將生成一個輸出,顯示使用 scr 上傳的影像以及在網頁上<article> 標籤內使用的文字。

示例 2

考慮以下示例,我們建立三個獨立的文章和自包含的內容。

<!DOCTYPE html>
<html>
<body>
   <article>
      <h1>MSD</h1>
      <p>Mahendra Singh Dhoni is an Indian former professional cricketer who was captain of the Indian national cricket team in limited-overs formats</p>
   </article>
   <article>
      <h2>YUVI</h2>
      <p>Yuvraj Singh is a former Indian international cricketer who played in all formats of the game. 
      He is an all-rounder who batted left-handed in the middle order</p>
   </article>
   <article>
      <h3>SREYAS IYER</h3>
      <p>Shreyas Santosh Iyer is an Indian cricketer who plays for the national side in international cricket, Mumbai in domestic cricket</p>
   </article>
</body>
</html>

執行上述指令碼後,它將生成一個輸出,其中包含指令碼在網頁中使用的 article 標籤文字。

更新於:2023年11月24日

910 次瀏覽

啟動您的職業生涯

透過完成課程獲得認證

開始學習
廣告
© . All rights reserved.