在本文中，我们将学习如何在 HTML5 中添加文章。
HTML5 中的新分段元素之一是
让我们考虑以下示例来了解如何在 HTML5 中添加文章
示例 1
在以下示例中，我们在文章元素中使用内联样式。
立即学习“前端免费学习笔记（深入）”；
<!DOCTYPE html>
<html>
<body>
<article style="width: 300px;border: 2px solid gray;padding: 10px;border-radius: 10px;margin: 5px;">
@@##@@
<h1>TutorialsPoint</h1>
<p>Tutorials Point originated from the idea that there exists a class of readers who respond better to online content</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/code/11042" title="SuperCms在线订餐系统"><img
src="https://img.php.cn/upload/webcode/000/000/003/176475061251428.jpg" alt="SuperCms在线订餐系统" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/code/11042" title="SuperCms在线订餐系统">SuperCms在线订餐系统</a>
<p>模板采用响应式设计，自动适应手机，电脑及平板显示；满足单一店铺外卖需求。功能：1.菜单分类管理2.菜品管理：菜品增加，删除，修改3.订单管理4.友情链接管理5.数据库备份6.文章模块：如：促销活动，帮助中心7.单页模块：如：企业信息，关于我们更强大的功能在开发中……安装方法：上传到网站根目录，运行http://www.***.com/install 自动</p>
</div>
<a href="/xiazai/code/11042" title="SuperCms在线订餐系统" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
</article>
</body>
</html>
执行脚本时，它将生成一个输出，显示使用 scr 上传的图像以及网页上
示例 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>
运行上述脚本时，它将生成一个输出，其中包含网页上脚本中使用的文章标签文本。
