HTML 特定语义元素
nav/main/foot
下面是一个 结合 grid/flexbox 布局的网站主界面示例
<head>
<style>
body {
height: 100vh;
margin: 0;
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: 100%;
}
.nav {
background: #218a8a;
color:white;
padding: 1rem;
}
.main {
background: whitesmoke;
color: #444;
padding: 1rem;
}
.footer {
background: #e0e0e0;
padding: 1rem;
text-align:center
}
</style>
</head>
<body>
<div class='nav'>
导航栏
</div>
<div class='main'>
<strong>这里是主体内容.</strong>
<pre>
1
2
4
1
2
4
</pre>
</div>
<div class='footer'>
白月黑羽版权所有
<br>
<small>2020-2022 @copy rights reserved</small>
</div>
</body>
导航栏、主体部分、页脚 这些典型的界面组成部分都是用 div 元素表示的。
div 只是告诉浏览器如何显示这个元素,但是这个元素在这个网页中的地位、含义,是导航栏、还是主体部分、页脚? 这些浏览器是不知道的
而HTML5规范 对这些界面的组成部分,都有专门对应的元素。
比如
nav
是导航栏元素
main
是界面主体元素
foot
是页脚元素
虽然使用这些元素本身,有时并不能带来任何视觉上的特别改变(视觉呈现往往还是要靠CSS),
但是这些元素代表专有的含义,合理的使用这些元素,对界面的可读性,搜索引擎SEO都有特别的好处,称之为 语义元素(Semantic Elements)
我们应该尽量使用这些元素,而不是一股脑都用 div 。
上例的例子中,导航栏、主体部分、页脚 应该分别用 nav、main、foot 来替换,就是这样
<head>
<style>
body {
height: 100vh;
margin: 0;
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: 100%;
}
nav {
background: #218a8a;
color:white;
padding: 1rem;
}
main {
background: whitesmoke;
color: #444;
padding: 1rem;
}
footer {
background: #e0e0e0;
padding: 1rem;
text-align:center
}
</style>
</head>
<body>
<nav>
导航栏
</nav>
<main>
<strong>这里是主体内容.</strong>
<pre>
1
2
4
1
2
4
</pre>
</main>
<footer>
白月黑羽版权所有
<br>
<small>2020-2022 @copy rights reserved</small>
</footer>
</body>
header/aside/section/article
常见的语义元素还有: header
/ aside
/ section
/ article
-
header
header
元素(注意不是head)用于展示网页整体介绍通常位于网页顶部
比如 标题、Logo、搜索框、作者名称,等等。
有的网站会把 nav 也包含在 header里面,有的网站 nav位于header的下面
-
article
通常 新闻、博客、论坛 这种 文章类页面,一个
article
元素 对应 一篇文章article
元素通常放在main
元素里面 -
section
对应界面内容中的一个部分(或者说一个主题区),比如
文章里面有可以有几个部分,对应几个section
<article> <h1>选购笔记本电脑指南</h1> <section> <h2>说明</h2> <p>本文档帮助你根据自己的需求挑选笔记本电脑</p> </section> <section> <h2>准则</h2> <p> 选择笔记本电脑,需要根据你自身的情况来决定 包括你的预算、常用应用程序、是否经常外带使用 等等... </p> </section> </article>
-
aside
aside通常放置一些 和文章当前部分不直接相关的内容,但有一定的参考旁白说明意义的内容
比如
<head> <style> body { height: 100vh; margin: 0; display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: 100%; } nav { background: #218a8a; color:white; padding: 1rem; } main { background: whitesmoke; color: #444; padding: 1rem; } footer { background: #e0e0e0; padding: 1rem; text-align:center } aside { width: 40%; padding-left: .5rem; margin-left: .5rem; float: right; box-shadow: inset 5px 0 5px -5px #29627e; font-style: italic; color: #29627e; } aside > p { margin: .5rem; } p { font-family: 'Fira Sans', sans-serif; } </style> </head> <body> <nav> 导航栏 </nav> <main> <p>蝾螈是一组具有蜥蜴样外观的两栖动物,包括幼虫和成虫形式的短腿和尾巴。</p> <aside> <p>粗皮蝾螈用致命的神经毒素保护自己。</p> </aside> <p>几种蝾螈栖息在太平洋西北部的温带雨林中,包括 Ensatina、西北蝾螈和粗皮蝾螈。 大多数蝾螈是夜间活动的,捕食昆虫、蠕虫和其他小动物。</p> </main> <footer> 白月黑羽版权所有 <br> <small>2020-2022 @copy rights reserved</small> </footer> </body>