<aside> | HTML5 侧边栏标签的定义与用法

由 hcduguo

定义与用法

  • <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>

效果演示：

一个简单的HTML页面
页眉

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

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

亲自试试

浏览器支持

主流浏览器都支持 <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>

效果展示：

亲自试试

相关