一、語義化标簽有哪些？有什麼含義？
1、<header>...</header> 頭部
2、<footer>...</footer> 尾部
3、<nav>...</nav> 導航
4、<article>...</article> 文章（通常指資料内容）
5、<aside>...</aside> 側邊欄
6、<main>...</main> 網頁主體
7、<section>...</section> 區塊、片段類似div容器
二、應用小案例
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>語義化标簽</title>
</head>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
header,footer{
height: 60px;
background-color: #808080;
text-align: center;
color: #fff;
line-height: 60px;
}
main{
background-color: #87CEEB;
overflow: auto;
}
nav,section,aside {
float: left;
color: #fff;
text-align: center;
height: 500px;
}
nav{
width: 20%;
background-color: #87CEEB;
}
nav>a{
display: block;
background-color: #0999F8;
padding: 10px;
margin: 10px;
}
section{
width: 50%;
background-color: #b6f4b8;
}
section> article{
overflow: auto;
}
section> article>p{
margin: 10px;
padding: 5px;
background-color: #4cffac;
}
aside{
background-color: #fbff9c;
width: 30%;
}
aside>p{
margin: 10px;
padding: 10px;
background-color: #ffff75;
}
</style>
<body>
<header class="mui-bar mui-bar-nav">
Header
</header>
<main>
<nav>
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >LInk</a>
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >LInk</a>
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >LInk</a>
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >LInk</a>
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >LInk</a>
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >LInk</a>
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >LInk</a>
</nav>
<section>
<article>
<p>article</p>
<p>article</p>
<p>article</p>
<p>article</p>
<p>article</p>
<p>article</p>
</article>
<article>
<p>article</p>
<p>article</p>
<p>article</p>
<p>article</p>
</article>
</section>
<aside>
<p>aside</p>
<p>aside</p>
<p>aside</p>
<p>aside</p>
<p>aside</p>
</aside>
</main>
<footer>
Footer
</footer>
</body>
</html>
![APP強制更新(uni-app)項目要求：解決思路：效果圖：具體代碼：總結[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)