• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > 详解HTML5中的<aside>元素与<article>元素

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

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含HTML5,aside,article等相关知识,佚名 希望在学习及工作中可以帮助到您

<aside>元素
HTML<aside>元素表示一个页面的一部分, 它的内容跟这个页面的其它内容的关联性不强,或者是没有关联,单独存在。<aside>元素通常显示成侧边栏(sidebar)或一些插入补充内容。通常用来在侧边栏显示一些定义,比如目录、索引、术语表等;也可以用来显示相关的广告宣传,作者的介绍,Web应用,相关链接,当前页内容简介等。

<aside>元素使用注意事项:

    不要使用<aside>元素标记括号中的文字,因为这种类型的文本被认为是主内容的一部分。

使用例子:

  1. <article>  
  2.   <p>  
  3.     The Disney movie <em>The Little Mermaid</em> was   
  4.     first released to theatres in 1989.   
  5.   </p>  
  6.   <aside>  
  7.     The movie earned $87 million during its initial release.   
  8.   </aside>  
  9.   <p>  
  10.     More info about the movie...   
  11.   </p>  
  12. </article>  


<article>元素
Article元素(<article>)故名思议,可以表示论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件,或者其他独立的内容项目。它的主要语义为表示自己是一个独立的内容结构。每一个<article>元素内部结构都应该是相似的,比如都应该包含一个头标题(h1-h6元素)等。

<article>元素用法:

    当<article>元素嵌套使用时,则该元素代表与父元素有关的文章。例如,代表博客评论的<article>元素可嵌套在代表博客文章的<article>元素中。
    <article>元素中文章作者的信息可通过<address>元素表示,但是不适用于嵌套的<article>元素。

    <article>元素中文章的发布日期和时间可通过<time>元素的pubdate属性表示。

代码样例

  1. <article class="film_review">  
  2.   <header>  
  3.     <h2>侏罗纪公园</h2>  
  4.   </header>  
  5.   <section class="main_review">  
  6.     <p>Dinos were great!</p>  
  7.   </section>  
  8.   <section class="user_reviews">  
  9.     <article class="user_review">  
  10.       <p>Way too scary for me.</p>  
  11.       <footer>  
  12.         <p>  
  13.           Posted on <time datetime="2015-05-16 19:00">May 16</time> by Lisa.   
  14.         </p>  
  15.       </footer>  
  16.     </article>  
  17.     

您可能想查找下面的文章:

  • HTML5知识点总结
  • HTML5的本地存储
  • HTML5本地存储之IndexedDB
  • Html5实现文件异步上传功能
  • Html5新标签datalist实现输入框与后台数据库数据的动态匹配
  • 详解HTML5 window.postMessage与跨域
  • HTML5拖放API实现拖放排序的实例代码
  • 解决html5中video标签无法播放mp4问题的办法
  • HTML5新特性 多线程(Worker SharedWorker)
  • Html5新增标签有哪些

相关文章

  • 2018-12-03h5实现文本框提示语的代码实例
  • 2018-12-03HTML5 Canvas实战之刮奖效果的实例详情
  • 2018-12-03什么是响应式网站设计?
  • 2018-12-03HTML5边玩边学(十)-俄罗斯方块之控制界面篇(源码)
  • 2018-12-03html5游戏开发-零基础开发RPG游戏-开源讲座(三)-卷轴&对话实现 ... ...
  • 2018-12-03IE9对HTML5中部分属性不支持的原因分析_html5教程技巧
  • 2017-08-06移动端html5 meta标签的神奇功效
  • 2018-12-03CSS3有关特性查询功能的讲解介绍
  • 2017-08-06移动端解决悬浮层(悬浮header、footer)会遮挡住内容的3种方法
  • 2017-09-02梳理 文件缓存 manifest 用法

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • html5-websocket基于远程方法调用的数据交互实现_html5教程技巧
    • <acronym> 和 <abbr> 这两个标签有什么本质上的区别吗?
    • HTML5元素拖拽drag与拖放drop相关API的具体介绍(图文)
    • HTML5--多媒体标签详解
    • HTML5超帅动画制作-LTweenLite的妙用
    • 详解HTML5实现微信拍摄上传照片的功能
    • 用仿ActionScript的语法来编写html5——第八篇,图片处理+粒子效果
    • html5中在可拖动的元素或选取的文本移出放置目标时执触发的事件ondragleave
    • 详解如何通过H5唤起本地app
    • HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有