如何在HTML5中加入文章？-html教學-PHP中文網

範例 2

TutorialsPoint

MSD

YUVI

SREYAS IYER

首頁

web前端

html教學

如何在HTML5中加入文章？

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 12, 2023 am 11:37 AM

html 添加文章

如何在HTML5中加入文章？

在本文中，我們將學習如何在 HTML5 中新增文章。

HTML5 中的新分段元素之一是

標記。文章使用

標籤以 HTML 形式表示。更具體地說，

元素中包含的內容與網站的其餘內容不同（即使它們可能相關）。

讓我們考慮以下範例來了解如何在 HTML5 中新增文章

範例 1

在以下範例中，我們在文章元素中使用內聯樣式。

<!DOCTYPE html>
<html>
<body>
   <article style="width: 300px;border: 2px solid gray;padding: 10px;border-radius: 10px;margin: 5px;">
      <img class="alignnone size-medium wp-image-560930 lazy"  src="/static/imghw/default1.png"  data-src="https://www.tutorialspoint.com/static/images/logo-color-footer.png" alt="image"   style="max-width:90%" style="max-width:90%"/>
      <h1 id="TutorialsPoint">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 上傳的圖像以及網頁上

標記內使用的文字。

範例 2

考慮以下範例，我們正在創建三篇獨立的文章和獨立的內容。

<!DOCTYPE html>
<html>
<body>
   <article>
      <h1 id="MSD">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 id="YUVI">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 id="SREYAS-IYER">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>

登入後複製

在執行上述腳本時，它將產生一個輸出，其中包含網頁上腳本中使用的文章標籤文字。

以上是如何在HTML5中加入文章？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn