HTML 5 <aside> 标签定义和用法
<aside> 标签定义 article 以外的内容。aside 的内容应该与 article 的内容相关。
aside字面理解为“旁边”,在html5中范围更广一点,是跟主内容相关,但是又可以独立的内容 ,可以是广告、引用、侧边栏等等。
HTML5提供的<aside>元素标签用来表示当前页面或文章的附属信息部分,可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组,以及基于 KBEngine 的 HTML5 插件 kbengine_html5
iis7站长之家类似的有别与主要内容的部分。
根据目前的规范,<aside>元素有两种使用方法:
1) 被包含在<article>中作为主要内容的附属信息部分,其中的内容可以是与当前文章有关的引用、词汇列表等。
2) 在<article>之外使用,作为页面或站点全局的附属信息部分;最典型的形式是侧边栏(sidebar),其中的内容可以是友情链接、附属导航或广告单元等。
HTML 4.01 与 HTML 5 之间的差异
<aside> 标签是 HTML 5 的新标签。
HTML 5 <aside> 标签提示和注释:
注释:<aside> 的内容可用作文档的侧栏。
HTML 5 <aside> 标签属性
HTML 5 <aside> 标签标准属性
class, contenteditable, contextmenu, dir, draggable, id, irrelevant,
lang, ref, registrationmark, tabindex, template, title如需完整的描述,请访 HTML 5 中标准属性。
HTML 5 <aside> 标签事件属性
onabort, onbeforeunload, onblur, onchange, onclick, oncontextmenu,
ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover,
ondragstart, ondrop, onerror, onfocus, onkeydown, onkeypress, onkeyup,
onload, onmessage, onmousedown, onmousemove, onmouseover, onmouseout,
onmouseup, onmousewheel, onresize, onscroll, onselect, onsubmit, onunload
HTML 5 <aside> 标签代码举例1:
<aside>Aside 的内容是独立的内容,但应与文档内容相关。</aside>
HTML 5 <aside> 标签代码举例2:
<!doctype html>
<header>
</header>
<article>
<h2>新闻列表</h2>
<ul>
主内容
</ul>
</article>
<aside>
<section>
<h3>Html5最新动态</h3>
</section>
<section>
<h3>Html5新增元素</h3>
</section>
<section>
<h3>Html5新增Api</h3>
</section>
<section>
<h2>Html5文章推荐</h2>
</section>
</aside>
<footer>
</footer>
HTML 5 <aside> 标签代码举例3:
<body>
<header>
<h1>My Blog</h1>
</header>
<article>
<h1>My Blog Post</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
<aside>
<!-- Since this aside is contained within an article, a parser
should understand that the content of this aside is directly related
to the article itself. -->
<h1>Glossary</h1>
<dl>
<dt>Lorem</dt>
<dd>ipsum dolor sit amet</dd>
</dl>
</aside>
</article>
<aside>
<!-- This aside is outside of the article. Its content is related
to the page, but not as closely related to the above article -->
<h2>Blogroll</h2>
<ul>
<li><a href="#">My Friend</a></li>
<li><a href="#">My Other Friend</a></li>
<li><a href="#">My Best Friend</a></li>
</ul>
</aside>
</body>