• 售前

  • 售后

热门帖子
入门百科

详解HTML5中的<aside>元素与<article>元素

[复制链接]
恋恋青城黄 显示全部楼层 发表于 2021-10-26 13:04:24 |阅读模式 打印 上一主题 下一主题
<aside>元素
HTML<aside>元素表现一个页面的一部门, 它的内容跟这个页面的别的内容的关联性不强,或者是没有关联,单独存在。<aside>元素通常表现成侧边栏(sidebar)或一些插入增补内容。通常用来在侧边栏表现一些定义,好比目录、索引、术语表等;也可以用来表现相干的广告宣传,作者的介绍,Web应用,相干链接,当前页内容简介等。
<aside>元素利用注意事项:
    不要利用<aside>元素标记括号中的笔墨,因为这种范例的文本被以为是主内容的一部门。
利用例子:
XML/HTML Code复制内容到剪贴板
       
  • <article>      
  •   <p>      
  •     The Disney movie <em>The Little Mermaid</em> was      
  •     first released to theatres in 1989.      
  •   </p>      
  •   <aside>      
  •     The movie earned $87 million during its initial release.      
  •   </aside>      
  •   <p>      
  •     More info about the movie...      
  •   </p>      
  • </article>  

<article>元素
Article元素(<article>)故名思议,可以表现论坛帖子、杂志或消息文章、博客、用户提交的批评、交互式组件,或者其他独立的内容项目。它的重要语义为表现自己是一个独立的内容布局。每一个<article>元素内部布局都应该是相似的,好比都应该包罗一个头标题(h1-h6元素)等。
<article>元素用法:
    当<article>元素嵌套利用时,则该元素代表与父元素有关的文章。例如,代表博客批评的<article>元素可嵌套在代表博客文章的<article>元素中。
    <article>元素中文章作者的信息可通过<address>元素表现,但是不适用于嵌套的<article>元素。
    <article>元素中文章的发布日期和时间可通过<time>元素的pubdate属性表现。
代码样例
XML/HTML Code复制内容到剪贴板
       
  • <article class="film_review">      
  •   <header>      
  •     <h2>侏罗纪公园</h2>      
  •   </header>      
  •   <section class="main_review">      
  •     <p>Dinos were great!</p>      
  •   </section>      
  •   <section class="user_reviews">      
  •     <article class="user_review">      
  •       <p>Way too scary for me.</p>      
  •       <footer>      
  •         <p>      
  •           Posted on <time datetime="2015-05-16 19:00">May 16</time> by Lisa.      
  •         </p>      
  •       </footer>      
  •     </article>      
  •     <article class="user_review">      
  •       <p>I agree, dinos are my favorite.</p>      
  •       <footer>      
  •         <p>      
  •           Posted on <time datetime="2015-05-17 19:00">May 17</time> by Tom.      
  •         </p>      
  •       </footer>      
  •     </article>      
  •   </section>      
  •   <footer>      
  •     <p>      
  •       Posted on <time datetime="2015-05-15 19:00">May 15</time> by Staff.      
  •     </p>      
  •   </footer>      
  • </article>  

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作