web前端：main、header、footer、nav、article、ction标签的⽤法
HTML5
添加了诸如main、header、footer、nav、article、ction等⼤量新标签，这些新标签为开发⼈员提供更多的选择和辅助特性。
默认情况下，浏览器呈现这些新标签的⽅式与div相似。然⽽，合理地使⽤它们，可以使你的标签更加的语义化。辅助技术（如：屏幕阅读器）可以通过这些标签为⽤户提供更加准确的、易于理解的页⾯信息。
标签main
main标签⽤于呈现⽹页的主体内容，且每个页⾯只能有⼀个。这意味着它只应包含与页⾯中⼼主题相关的信息，⽽不应包含如导航连接、⽹页横幅等可以在多个页⾯中重复出现的内容。
main标签的语义化特性可以使辅助技术快速定位到页⾯的主体。有些页⾯中有 “跳转到主要内容” 的链接，使⽤main标签可以使辅助设备⾃动获得这个功能。
<header>
<h1>Weapons of the Ninja</h1>
</header>
<main>
//⽹页的主体内容
</main>
<footer></footer>
//main标签应该在header标签与footer标签之间。
标签article
article是另⼀个具有语义化特性的 HTML5 新标签。article是⼀个分段标签，⽤于呈现独⽴及完整的内容。这个标签适⽤于博客⼊⼝、论坛帖⼦或者新闻⽂章。trapeze
<h1>Deep Thoughts with Master Camper Cat</h1>
<main>
<article>
<h2>The Garfield Files: Lasagna as Training Fuel?</h2>
<p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleans. But let's turn our attention to an often ov erlooked fitness fuel, and examine the protein-carb-NOM trifecta that </p>
</article>
//⽤于呈现独⽴及完整的内容
<img src="samuraiSwords.jpeg" alt="">
<article>
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
<p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightening speed. But chin up, fellow fighters, our time for victory may soon </p>
</article>
<img src="samuraiSwords.jpeg" alt="">
<article>
<h2>Is Chuck Norris a Cat Person?</h2>
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact myst eriously disappears soon after. But the real question is, is he a cat person?...</p>
</article>
</main>
请注意ction和div的区别：
ction也是⼀个 HTML5 新标签，与article标签的语义含义略有不同。article⽤于独⽴的、完整的内容，⽽ction⽤于对与主题相关的内容进⾏分组。它们可以根据需要嵌套着使⽤。举个例⼦：如果⼀本书是⼀个article的话，那么每个章节就是ction。当内容组之间没有联系时，可以使⽤div。
<div> - 内容组
<ction> - 有联系的内容组pivot浏览器
<article> - 独⽴完整的内容
标签header
bac
header也是⼀个具有语义化的、提升页⾯可访问性的 HTML5 标签。它可以为⽗级标签呈现简介信息或者导航链接，适⽤于那些在多个页⾯顶部重复出现的内容。
与main类似，header的语义化特性也可以使辅助技术快速定位到它的内容。
努力学习的英文注意：
header⽤在 HTML ⽂档的body标签中。这点与包含页⾯标题、元信息的head标签不同。
<body>
<header>
<h1>Training with Camper Cat</h1>
</header>
//适⽤于那些在多个页⾯顶部重复出现的内容，导航或简介信息
<main>
<ction id="stealth">
<h2>Stealth & Agility Training</h2>
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
<article><h3>No training is NP-complete without parkour</h3></article>
</ction>
<ction id="combat">
<h2>Combat Training</h2>
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
</ction>
<ction id="weapons">
<h2>Weapons Training</h2>
真的有霍格沃茨吗<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
</ction>
夏令营英语</main>
</body>
标签nav
nav也是⼀个具有语义化特性的 HTML5 标签，⽤于呈现页⾯中的主导航链接。它可以使屏幕阅读器快速识别页⾯中的导航信息。
对于页⾯底部辅助性质的站点链接，不需要使⽤nav，⽤footer会更好。
<h1>Training with Camper Cat</h1>
broadspectrum<nav>
<ul>
<li><a href="#stealth">Stealth & Agility</a></li>
<li><a href="#combat">Combat</a></li>
<li><a href="#weapons">Weapons</a></li>
</ul>
</nav>
//⽤于呈现页⾯中的主导航链接
</header>
<main>
<ction id="stealth">
<h2>Stealth & Agility Training</h2>
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
<article><h3>No training is NP-complete without parkour</h3></article>
</ction>
<ction id="combat">
<h2>Combat Training</h2>
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
</ction>
<ction id="weapons">
<h2>Weapons Training</h2>
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
</ction>21世纪中学生英语报
</main>
</body>
标签footer
与header和nav类似，footer也具有语义化特性，可以使辅助设备快速定位到它。它位于页⾯底部，⽤于呈现版权信息或者相关⽂档链接。
<h1>Training</h1>
<nav>
<ul>
<li><a href="#stealth">Stealth & Agility</a></li>
<li><a href="#combat">Combat</a></li>
有道韩语在线翻译
<li><a href="#weapons">Weapons</a></li>
</ul>
</nav>
</header>
<main>
<ction id="stealth">
<h2>Stealth & Agility Training</h2>
do<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article> <article><h3>No training is NP-complete without parkour</h3></article>
</ction>
<ction id="combat">
<h2>Combat Training</h2>
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
</ction>
<ction id="weapons">
<h2>Weapons Training</h2>
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
</ction>
</main>
<footer>© 2016 Camper Cat</footer>//⽤于呈现版权信息或者相关⽂档链接
</body>
