如何在HTML5中添加文章?


在这篇文章中,我们将学习如何在HTML5中添加文章。

HTML5中的一个新的分区元素是<article>标签。文章使用<article>标签在HTML中表示。更具体地说,<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.com/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.