HTML5 <aside>标记用法及代码示例

<aside>标记用于以较短的方式(如荧光笔)描述网页的主要对象。它本质上标识与网页的主要内容相关的内容，但不构成主要页面的意图。 <aside>标记主要包含作者信息，链接，相关内容等。

<aside>与<div>：两个标签的行为相同，含义不同。

<div>：它在网页中定义或创建部门或部分。
<aside>：它通过创建部分或分区来完成相同的工作，但是它仅包含与主页相关的内容。

<aside>标签使页面的设计变得容易，并且增强了html文档的清晰度。它使我们可以轻松识别主要文本和从属文本。在同时<div>和<aside>都需要CSS进行特定的设计。 <aside>标记在HTML中支持Global属性和Event属性。

注意：<aside>标记是HTML5中的新标记。

用法:

<aside>
  <h3>Contents...</h3>
  <p>Contents...</p>
</aside>

范例1：

<html> 
    <head> 
        <title>aside tag</title> 
        <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 Tag Example</div> 
        <aside> 
            <h1>GeeksforGeeks</h1> 
            <p>A computer science portal for geeks</p>  
        </aside> 
    </body> 
</html>

输出：
aside tag
范例2：

<html> 
    <head> 
        <title>aside tag</title> 
        <style> 
            .gfg { 
                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 = "gfg">GeeksforGeeks</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及以上
Firefox 4.0及更高版本
Opera 11.1及更高版本
Safari 5.0及更高版本

相关用法

注：本文由纯净天空筛选整理自Sabya_Samadder大神的英文原创作品 HTML5 | <aside> Tag。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。