Html提高——HTML5 新增的语义化标签-编程知识

Html提高——HTML5 新增的语义化标签

引入：

以前布局，我们基本用 div 来做。div 对于搜索引擎来说，是没有语义的。

但是在html5里增加了语义化标签，如

<header>：头部标签
<nav>：导航标签
<article>：内容标签
<section>：定义文档某个区域
<aside>：侧边栏标签
<footer>：尾部标签

板图：

例子：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.main {width: 800px;margin: 0 auto;position: relative;}aside {margin-left: 10px;width: 190px;height: 650px;border-radius: 15px;background-color: pink;float: left;}header {width: 800px;height: 100px;line-height: 100px;font-size: 40px;border-radius: 15px;background-color: skyblue;margin: 0 auto;text-align: center;margin-bottom: 10px;}nav {width: 800px;height: 30px;line-height: 30px;font-size: 20px;border-radius: 15px;background-color: skyblue;margin: 0 auto;text-align: center;margin-bottom: 10px;}article {width: 600px;height: 650px;border-radius: 15px;margin-bottom: 10px;background-color: skyblue;float: left;}.bkm {padding: 20px;}section {width: 400px;height: 300px;background-color: pink;margin: 0 auto;margin-top: 10px;border-radius: 15px;}section img {margin: 10px;width: 380px;height: 280px;}footer {width: 800px;height: 30px;line-height: 30px;font-size: 20px;border-radius: 15px;background-color: skyblue;clear: left;margin: 0 auto;text-align: center;margin-bottom: 10px;}</style>
</head><body><div class="main"><header>header</header><nav>navigation</nav><article><div class="bkm">精灵宝可梦，也被称为宝可梦，是由日本任天堂公司开发的一款非常受欢迎的系列游戏，同时也有相关的动画、漫画、卡牌等多种形式的衍生作品。<br>在游戏中，玩家扮演一名宝可梦训练师，通过捕捉、培养和训练各种宝可梦，与其他训练师进行对战，目标是成为最强的宝可梦训练师。宝可梦种类繁多，每种宝可梦都有其独特的属性和技能，玩家需要根据自己的战略选择合适的宝可梦进行战斗。<br>电视动画系列《宝可梦》则是以游戏为原作改编的，讲述了少年小智以成为最厉害的宝可梦训练大师为目标，与皮卡丘等宝可梦一起踏上修行之旅的故事。动画中充满了冒险、友情和成长的主题，深受全球观众的喜爱。<br>此外，宝可梦系列还有丰富的周边商品和线下活动，形成了一个庞大的文化现象。无论是游戏玩家还是动画观众，都可以在这个世界中找到属于自己的乐趣和挑战。<br>总的来说，精灵宝可梦是一个充满想象力和创造力的世界，它不仅仅是一个游戏或者一个动画，更是一种文化、一种生活方式，带给人们无尽的欢乐和感动。<br></div><section><img src="https://p1.ssl.qhimgs1.com/sdr/400__/t01093c83c1a95b7d8b.png" alt=""></section></article><aside>a</aside><footer>footer</footer></div>
</body></html>