搜文章
推荐 原创 视频 Java开发 iOS开发 前端开发 JavaScript开发 Android开发 PHP开发 数据库 开发工具 Python开发 Kotlin开发 Ruby开发 .NET开发 服务器运维 开放平台 架构师 大数据 云计算 人工智能 开发语言 其它开发
Lambda在线 > 斑马编程教程 > <aside> | HTML5 侧边栏标签

<aside> | HTML5 侧边栏标签

斑马编程教程 2021-01-14

定义与用法

  • <aside>标签表示标签中包含的内容与页面主要内容相关,但不是该页面的一部分。

  • <aside> 标签是 HTML 5 的新标签。


提示:<aside> 的内容可用作文章的侧边栏,本站的侧边栏就是用<aside> 标签定义的。


语法格式

<aside>……</aside>


示例代码

<!DOCTYPE html> 
<html>
<head>
<title>一个简单的HTML页面</title>
</head>
<body>
<header>页眉</header>
<section>
<article>
<p>这是页面内容的一个重要部分,可能是一篇博文。</p>
<aside>
<p>这是第一篇博客文章的旁白.</p>
</aside>
</article>
<article>
<p>这是页面内容的一个重要部分,可能是一篇博文。</p>
</article>
</section>

<div id='footer'>页脚</div>

</body>
</html>

效果演示:


页眉

这是页面内容的一个重要部分,可能是一篇博文。

这是页面内容的一个重要部分,可能是一篇博文。

页脚


点击下方“阅读原文”可亲试效果



浏览器支持


IE Firefox Chrome Safari Opera
<aside> | HTML5 侧边栏标签 <aside> | HTML5 侧边栏标签 <aside> | HTML5 侧边栏标签

主流浏览器都支持 <aside> 标签, IE 8 或更早版本的 IE 浏览器不支持 <aside> 标签。



全局属性


<aside> 标签支持 HTML 的全局属性。



事件属性


<aside> 标签支持 HTML 的事件属性。



更多示例


<aside>标签用于页面布局:
<!DOCTYPE html> 
<html>
<head>
<title>HTML5 aside 标签示例</title>
<style>
li { display: inline-flex; padding: 25px }
section{ background-color: #607D8B; width: 79%; position: absolute; height: 150px; }
article{ width: 79%; background-color: #607d8b70; position: absolute; top: 158px; height: 150px; }
aside{ background-color: #607d8b99; width: 20%; position: absolute; left: 80%; height: 300px; }
h2 , p { text-align: center; color: #9c27b0; }
ul{ text-align: center; }
</style>
</head>

<body>
<div class="main">
<section>
<h2>分区</h2>
<p>此部分通常显示一些指定内容</p>
</section>
<article>
<h2>文章内容</h2>
<p>此部分通常显示具体的详细内容</p>
</article>
<aside>
<h2>侧边栏</h2>
<p>这部分通常会包括静态内容,如:菜单、固定内容或广告位等</p>
</aside>
</div>
</body>

</html>


效果展示:


点击下方“阅读原文”可亲试效果

版权声明:本站内容全部来自于腾讯微信公众号,属第三方自助推荐收录。《<aside> | HTML5 侧边栏标签》的版权归原作者「斑马编程教程」所有,文章言论观点不代表Lambda在线的观点, Lambda在线不承担任何法律责任。如需删除可联系QQ:516101458

文章来源: 阅读原文

相关阅读

关注斑马编程教程微信公众号

斑马编程教程微信公众号:pythonclass

斑马编程教程

手机扫描上方二维码即可关注斑马编程教程微信公众号

斑马编程教程最新文章

精品公众号随机推荐