详解HTML5中的元素与元素


Posted in HTML / CSS onAugust 17, 2015

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

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

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

使用例子:

XML/HTML Code复制内容到剪贴板
  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属性表示。

代码样例

XML/HTML Code复制内容到剪贴板
  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.     <article class="user_review">  
  18.       <p>I agree, dinos are my favorite.</p>  
  19.       <footer>  
  20.         <p>  
  21.           Posted on <time datetime="2015-05-17 19:00">May 17</time> by Tom.   
  22.         </p>  
  23.       </footer>  
  24.     </article>  
  25.   </section>  
  26.   <footer>  
  27.     <p>  
  28.       Posted on <time datetime="2015-05-15 19:00">May 15</time> by Staff.   
  29.     </p>  
  30.   </footer>  
  31. </article>  
HTML / CSS 相关文章推荐
CSS3 特效范例整理
Aug 22 HTML / CSS
详解CSS3中border-image的使用
Jul 18 HTML / CSS
CSS3中使用RGBa来调节透明度的教程
May 09 HTML / CSS
CSS3实现滚动条动画效果代码分享
Aug 03 HTML / CSS
利用CSS3实现进度条的两种姿势详解
Mar 21 HTML / CSS
CSS3制作hover下划线动画
Mar 27 HTML / CSS
10种CSS3实现的loading动画,挑一个走吧?
Nov 16 HTML / CSS
CSS3.0实现霓虹灯按钮动画特效的示例代码
Jan 12 HTML / CSS
html5时钟实现代码
Oct 22 HTML / CSS
html5基础标签(html5视频标签 html5新标签用法)
Dec 30 HTML / CSS
html5图片上传预览示例分享
Apr 14 HTML / CSS
HTML基础详解(下)
Oct 16 HTML / CSS
详解HTML5中download属性的应用
Aug 06 #HTML / CSS
详解HTML5中div和section以及article的区别
Jul 14 #HTML / CSS
一些常用的HTML5模式(pattern) 总结
Jul 14 #HTML / CSS
针对HTML5的Web Worker使用攻略
Jul 12 #HTML / CSS
极简的HTML5模版
Jul 09 #HTML / CSS
深入探究HTML5的History API
Jul 09 #HTML / CSS
HTML5中Localstorage的使用教程
Jul 09 #HTML / CSS
You might like
用函数读出数据表内容放入二维数组
2006/10/09 PHP
php中利用post传递字符串重定向的实现代码
2011/04/21 PHP
PhpStorm 如何优雅的调试Hyperf的方法步骤
2019/11/24 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
js检查页面上有无重复id的实现代码
2013/07/17 Javascript
javascript:文字不间断向左移动的实例代码
2013/08/08 Javascript
JavaScript实现拖拽网页内元素的方法
2015/04/15 Javascript
AngularJS进行性能调优的7个建议
2015/12/28 Javascript
浅析javascript函数表达式
2016/02/10 Javascript
老生常谈javascript变量的命名规范和注释
2016/09/29 Javascript
Javascript 函数的四种调用模式
2016/11/05 Javascript
JS实现点击表头表格自动排序(含数字、字符串、日期)
2017/01/22 Javascript
Bootstrap 3 进度条的实现
2017/02/22 Javascript
Mac 安装 nodejs方法(图文详细步骤)
2017/10/30 NodeJs
关于HTML5的data-*自定义属性的总结
2018/05/05 Javascript
layer的prompt弹出框,点击回车,触发确定事件的方法
2019/09/06 Javascript
KnockoutJS数组比较算法实例详解
2019/11/25 Javascript
解决vue+webpack项目接口跨域出现的问题
2020/08/10 Javascript
微信小程序实现滚动Tab选项卡
2020/11/16 Javascript
JavaScript中Object、map、weakmap的区别分析
2020/12/15 Javascript
Python模块学习 filecmp 文件比较
2012/08/27 Python
python解析xml文件操作实例
2014/10/05 Python
python分批定量读取文件内容,输出到不同文件中的方法
2018/12/08 Python
pytorch中nn.Conv1d的用法详解
2019/12/31 Python
python读取与处理netcdf数据方式
2020/02/14 Python
python 装饰器的使用示例
2020/10/10 Python
CSS3实现水平居中、垂直居中、水平垂直居中的实例代码
2020/02/27 HTML / CSS
Adobe Html5 Extension开发初体验图文教程
2017/11/14 HTML / CSS
欧洲最大的化妆品连锁公司:Douglas道格拉斯
2017/05/06 全球购物
日本热销NO.1胶原蛋白冻:Aishitoto爱希特多
2019/06/20 全球购物
创先争优活动方案
2014/02/12 职场文书
中秋晚会策划方案
2014/06/12 职场文书
建筑横幅标语
2014/10/09 职场文书
回门宴新娘答谢词
2015/09/29 职场文书
Python超详细分步解析随机漫步
2022/03/17 Python
win10识别不了U盘怎么办 win10系统读取U盘失败的解决办法
2022/08/05 数码科技