HTML5的aside与article标签详细实例教程

元素
HTML

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

元素使用注意事项:

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

使用例子:

  
    
    The Disney movie The Little Mermaid was   
    first released to theatres in 1989.   
    
    
    The movie earned $87 million during its initial release.   
    
    
    More info about the movie...

HTML5中aside标签的两种使用方法

aside元素在网站制作中主要有以下两种使用方法

1)被包含在article元素中作为主要内容的附属信息部分,其中的内容可以是与当前文章有关的相关资料、名次解释,等等。

  …  …  …

2)在article元素之外使用作为页面或站点全局的附属信息部分。最典型的是侧边栏,其中的内容可以使友情链接,博客中的其它文章列表、广告单元等。

  …      …    …    …      …    …

元素
Article元素(

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

元素用法:

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

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

代码样例

  
    
    侏罗纪公园  
    
    
    Dinos were great!  
    
    
      
      Way too scary for me.  
        
          
          Posted on May 16 by Lisa.   
          
        
      
      
      I agree, dinos are my favorite.  
        
          
          Posted on May 17 by Tom.   
          
        
      
    
    
      
      Posted on May 15 by Staff.

html5中article标签的讲解

标签是用来定义一些来自外部的内容。比如一些网友的投稿或是新闻记者的文章或是摘取某博客、论坛的信息,以及其他媒介资料。

用户看到的内容并不是对应本网站的一个具体的页面,是可以嵌套使用的,内外层内容相关联

示例代码:

HTML5 项目HTML5是用于修正现在html的下一个网页规范HTML5是万维网结构方面的标准

标签支持HTML5中新的标准属性。

class, contenteditable, contextmenu, dir, draggable, id, irrelevant, lang, ref, registrationmark, tabindex, template, title

标签支持事件属性。

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

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索结构
, 标签
, 代码
属性
article aside、aside标签、html aside标签、aside标签有什么用、html5 aside标签,以便于您获取更多的相关知识。

时间: 2024-11-04 05:37:20

HTML5的aside与article标签详细实例教程的相关文章

MySQL 创建存储过程详细实例教程(1/9)

mysql教程 创建存储过程 "pr_add" 是个简单的 mysql 存储过程,这个存储过程有两个 int 类型的输入参数 "a"."b",返回这两个参数的和. drop procedure if exists pr_add; -- 计算两个数之和 create procedure pr_add (    a int,    b int ) begin    declare c int;    if a is null then       s

JavaScript+java解析json数据详细实例教程

关于json的概念及优势,我们已经讲过很多次了,不懂的同学可以搜索一下,本文我们主要讲JavaScript如何处理解析JSON数据. 举个简单的例子: js 代码 function showJSON() {        var user =        {        "username":"andy",        "age":20,        "info": { "tel": "1

html5中article标签的讲解

<article> 标签是用来定义一些来自外部的内容.比如一些网友的投稿或是新闻记者的文章或是摘取某博客.论坛的信息,以及其他媒介资料. 用户看到的内容并不是对应本网站的一个具体的页面,<article>是可以嵌套使用的,内外层内容相关联 示例代码: <html><body><article><h5>HTML5 项目</h5><p>HTML5是用于修正现在html的下一个网页规范</p><p&

走进HTML5入门到精通:&lt;article&gt;标签

<article> 标签 定义和用法 <article> 标签定义外部的内容. 外部内容可以是来自一个外部的新闻提供者的一篇新的文章,或者来自 http://www.aliyun.com/zixun/aggregation/9435.html">blog 的文本,或者是来自论坛的文本. 亦或是来自其他外部源内容. 实例 <article><a href="http://www.apple.com">Safari 5 rel

SEO干货分享:title标签设置实例

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 [为什么要设置title标签] title标签也就是标题标签,一个网站可能有几百个甚至是上千上万个页面,那么我们就需要为这些页面单独地定义一个title标签,而不是重复的使用默认标题.从用户体验的角度上看,单一的标题不利于用户快速地去了解页面的信息.而从SEO优化的角度上看,显然重复的标题几乎是无法创造出长尾关键词的. 当然并不是说为每个页面

small标签详细介绍

html教程,small标签详细介绍. 类似于<em></em>之类的短语元素,既可以改进文档结构,同时也保留了预期的视觉样式.但<small></small>在平时应用中不是很常见,第一眼的影响是淘宝UED是不是在这个小问题上疏忽了? 关于<small></small>,网上搜索下来的结果也很零碎,有的说不建议使用,也有的在废弃标签里没有提到它的名字.好在<精通HTML 语义.标准和样式>一书中对此作了详细的解释. &l

Photoshop详细实例解析计算命令的原理

  本教程主要使用Photoshop详细实例解析计算命令的原理,通过通道利用计算命令计算出精确选区,应用图像命令调整色彩.不同于色相/饱和度.色彩平衡的色彩调整方式. 混合模式是计算命令的灵魂,使用计算命令为选择 不少人常常会问:计算命令的实质究竟是什么? Photoshop帮助文件这样描述计算命令,计算命令使您可以混合两个来自一个或多个源图像的单个通道.然后可以将结果应用到新图像或新通道,或现用图像的选区.不能对复合通道应用计算命令. 它是一个计算过程的描述,这个描述对于能够熟练使用计算命令的

mysql UNION 语法详细说明与实例教程

mysql教程 union 语法详细说明与实例教程 本文介绍如何在mysql中使用union来组合成一个单一的结果 union语法 select field1, field2 ...union [all | distinct]select field1, field2 ... 下面看一款查询三个表普通方法 select brand from car; select brand from computer; select brand from clothing; 我们利用union连接起来查询 s

C#调用Java方法(详细实例)

原文:C#调用Java方法(详细实例) C#可以直接引用C++的DLL和转换JAVA写好的程序.最近由于工作原因接触这方面比较多,根据实际需求,我们通过一个具体例子把一个JAVA方法转换成可以由C#直接调用的DLL C#调用c++ C#调用C++的例子网上很多,以一个C++的具体方法为例. C++代码 // 获取一帧图像数据 MVSMARTCAMCTRL_API int __stdcall MV_SC_GetOneFrame(IN void* handle, IN OUT unsigned ch