数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济
心理学
社会科学
时尚研究
法律研究HTML5 语义
HTML5 语义指的是为 HTML 页面提供意义的语义标签。在 HTML5 中，标签分为两个类别——语义和非语义。HTML5 为 HTML 带来了几个新的语义标签。
一些 HTML5 语义标签如下 −
| 标签 | 说明 |
|---|---|
| figure | 指定不同格式的图像。 |
| article | 指定一个独立的自包含文章。 |
| nav | 指定一个用于导航链接的容器。 |
| aside | 为除主要内容（如侧边栏）之外的内容指定一个标签。 |
| section | 表示文档中的一个章节。 |
| details | 为其他详细信息指定一个标签。 |
| header | 指定一个用于章节或文档的标题。 |
| footer | 指定一个用于章节或文档的页脚 |
| figcaption | 指定一个 HTML 文档中图像的小描述。 |
| main | 指定页面的主要内容，且该内容应该是唯一的。 |
| summary | 指定 <details> 元素的标题。 |
| mark | 指定高亮文字。 |
让我们看一个 HTML5 语义的例子 −
示例
<!DOCTYPE html>
<html>
<style>
* {
box-sizing: border-box;
}
body {
color: #000;
background-color: #8BC6EC;
background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
text-align: center;
}
header {
background-color: #000;
padding: 20px;
text-align: center;
color: white;
}
nav {
float: left;
width: 20%;
height: 200px;
background: #282828;
padding: 60px 10px;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul li a {
text-decoration: none;
color: #fff;
}
article {
float: left;
padding: 80px 10px;
width: 80%;
background-color: #fff;
height: 200px;
text-align: center;
}
section:after {
content: "";
display: table;
clear: both;
}
footer {
background-color: #000;
padding: 20px;
text-align: center;
color: white;
}
</style>
<body>
<h1>HTML Semantics Demo</h1>
<header>This is Header</header>
<section>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<article>This is an article element.</article>
</section>
<footer>This is Footer</footer>
</body>
</html>输出
更新时间:01-Oct-2019
663 浏览量
广告