<aside>标签是HTML5中的新标签,用于以较短的方式描述网页的主要对象;它基本上标识了与网页主要内容相关的内容,但不构成主页的主要意图。该<aside>标签主要包含作者信息、链接、相关内容等。
<aside>和<div>这两个标签具有相同的行为和不同的含义。
● <div>:它在网页中定义或创建分区或部分。
● <aside>: 它通过创建部分或部门来完成同样的工作,但它只包含与主网页相关的内容。
<aside>标签使页面设计变得容易,并增强了HTML文档的清晰度;它使我们能够很容易地识别主文本和次文本。无论是<div>还是<aside>都需要CSS来进行特定的设计。<aside>标签支持HTML中的全局属性和事件属性。
语法:
<aside>
<h3>目录...</h3>
<p>内容...</p>
</aside>
示例1:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.gfg {
font-size: 30px;
}
h1 {
font-size: 40px;
color: #090;
font-weight: bold;
}
p {
font-size: 20px;
margin: 20px 0;
}
</style>
</head>
<body>
<div class="gfg">Aside标签</div>
<aside>
<h1>目录</h1>
<p>这是一段测试文本!</p>
</aside>
</body>
</html>
效果图:
示例2:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.demo {
font-size:40px;
color:#090;
font-weight:bold;
text-align:center;
margin-bottom:20px;
}
article {
width: 50%;
float: left;
padding:10px;
float:left;
}
aside {
float:right;
width: 40%;
float: right;
background-color: green;
color: white;
padding:5px;
margin:10px;
height:100px;
}
</style>
</head>
<body>
<div class = "demo">目录</div>
<article>
<h1>Heading . . .</h1>
<p>Aside tag is use to display important information
about the primary page.</p>
</article>
<aside>
<h1>Aside tag example</h1>
<p>Aside tag content. . .</p>
</aside>
</body>
</html>
效果图:
浏览器支持
支持<aside>标签的浏览器
● Google chrome 6.0 及更高版本
● Internet Explorer 9.0 及更高版本
● Mozilla 4.0 及更高版本
● Safari 5.0 及更高版本
● Opera 11.1 及更高版本
相关推荐: