aside元素用来表示当前页面或文章的附属信息部分,它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条,以及其他类似的有别于主要内容的部分。

aside元素主要有以下两种使用方法:

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

代码事例如下:

<header>
<h1>f#入门</h1>
</header>
<article>
<h1>第四节 词法闭包</h1>
<p>词法闭包正文</p>
<aside>
<!-- 因为这个aside元素被放置在一个article元素内部,所以分析器将这个aside元素的内容理解成是和article元素的内容相关联的。 -->
<h1>名词解释</h1>
<dl>
<dt>f#</dt>
<dd>f#为.net2010中引入的新型函数型编程语言</dd>
</dl>
<dl>
<dt>词法闭包</dt>
<dd>词法闭包是指,将创建lambda表达式时的环境保存起来</dd>
</dl>
</aside>
</article>

运行结果:

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

代码事例如下:

<aside>
<nav>
<h2>评论</h2>
<ul>
<li>
<a href="https://i.cnblogs.com/EditPosts.aspx?opt=1">aside元素</a>--<br/>
<a href="https://i.cnblogs.com/EditPosts.aspx?opt=1">点击了解详情</a>
</li>
</ul>
</nav>
</aside>

aside元素的更多相关文章

  1. 读书笔记:《HTML5开发手册》--HTML5新的结构元素

    读书笔记:<HTML5开发手册> (HTML5 Developer's CookBook) 虽然从事前端开发已有很长一段时间,对HTML5标签也有使用,但在语义化上面理解还不够清晰.之前在 ...

  2. 【CSS进阶】伪元素的妙用--单标签之美

    最近在研读 <CSS SECRET>(CSS揭秘)这本大作,对 CSS 有了更深层次的理解,折腾了下面这个项目: CSS3奇思妙想 -- Demo (请用 Chrome 浏览器打开,非常值 ...

  3. HTML kbd键盘元素

    1. 说明 kbd :即Keyboard Input Element(键盘输入元素).表示键盘按键的语义元素,常用于网页上对快捷键.按键说明的场景. 样式规格:内联样式. 为了在页面上突出显示,可以给 ...

  4. CSS HTML元素布局及Display属性

    本篇文章主要介绍HTML的内联元素.块级元素的分类与布局,以及dispaly属性对布局的影响. 目录 1. HTML 元素分类:介绍内联元素.块级元素的分类. 2. HTML 元素布局:介绍内联元素. ...

  5. HTML5 语义元素(一)页面结构

    本篇主要介绍HTML5增加的语义元素中关于页面结构方面的,包含: <article>.<aside>.<figure>.<figcaption>.< ...

  6. HTML5 语义元素(二)文本内容

    上一篇介绍的是关于页面结构方面的语义元素,本篇介绍文本内容方面,包含:<bdi>.<details>.<summary>.<mark>.<outp ...

  7. HTML5 input元素新的特性

    在HTML5中,<input>元素增加了许多新的属性.方法及控件.本文章分别对这三方面进行介绍. 目录 1. 属性 2. 方法 3. 新控件 1. 属性 <input>元素在H ...

  8. HTML块级元素

    前面的话   在HTML5出现之前,人们一般把元素分为块级.内联和内联块元素.本文将详细介绍HTML块级元素 h   标题(Heading)元素有六个不同的级别,<h1>是最高级的,而&l ...

  9. JavaScript动画-拖拽改变元素大小

    ▓▓▓▓▓▓ 大致介绍 拖拽改变元素大小是在模拟拖拽上增加了一些功能 效果:拖拽改变元素大小 ▓▓▓▓▓▓ 拖拽改变元素大小原理 首先这个方块得知道我们想要改变这个它的大小,所以我给它设定一个范围,当 ...

  10. js:给定两个数组,如何判断他们的相对应下标的元素类型是一样的

    题目: 给Array对象原型上添加一个sameStructureAs方法,该方法接收一个任意类型的参数,要求返回当前数组与传入参数数组(假定是)相对应下标的元素类型是否一致. 假设已经写好了Array ...

随机推荐

  1. 【编程练习】poj1068

    Parencodings Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 24202   Accepted: 14201 De ...

  2. 与音频相关的技术知识点总结(Linux方向的开发)

    几个术语和概念: 1.       关于PCM的 PCM是Pulse code modulation的缩写,它是对波形最直接的编码方式.它在音频中的地位可能和BMP在图片中的地位有点类似吧. Samp ...

  3. Android首选项SharedPreference-android学习之旅(六)

    SharedPrefenence采用的键值对的方式来进行存储,采用内部存储的方式. 实例 public class MainActivity extends Activity { private Sh ...

  4. UNIX环境高级编程——线程

    线程包含了表示进程内执行环境必需的信息,其中包括进程中标示线程的线程ID.一组寄存器值.栈.调度优先级和策略.信号屏蔽字.errno变量以及线程私有数据. 进程的所有信息对该进程的所有线程都是共享的, ...

  5. 【Linux 操作系统】 Secure CRT 终端配置 -- 配置语法高亮 光标 和 字体

    . 1. Secure CRT 中没有想要的字体 Windows 8 下没有 Courier New 字体, 需要在系统的字体上进行配置, 进入 C:\Windows\Fonts 目录, 下面是目录的 ...

  6. 工作中常用的Linux命令

    1.从其他机器拷贝文件夹 格式: scp -r 文件夹名 用户名@机器名:/路径 范例: scp -rsearch work@zjm-testing-ps23.zjm.baidu.com:/home/ ...

  7. 检查一个二叉树是否平衡的算法分析与C++实现

    今天面试一个实习生,就想既然是未出校园,那就出一个比较基础的题吧,没想到答的并不如人意,对于树的操作完全不熟悉,因此此题算是未作答.原来我想看一下他分析问题的思路,优化代码的能力.接下来会把最近半年我 ...

  8. git的撤销动作

    有时候我们提交完了才发现漏掉了几个文件没有加,或者提交信息写错了.想要撤消刚才的提交操作,可以使用--amend 选项重新提交: $ git commit --amend -m"修改 提交 ...

  9. Java进阶(二十六)公司项目开发知识点回顾

    公司项目开发知识点回顾 前言 "拿来主义"在某些时候并不是最佳选择,尤其是当自己遇到问题的时候,毫无头绪. 在一次实验过程中,需要实现数据库的CRUD操作.由于之前项目开发过程中, ...

  10. (NO.00001)iOS游戏SpeedBoy Lite成形记(二十二)

    自己的游戏自己更需要多玩,这样才能首先发现不足的地方.所以本猫到现在已经忍一个地方很久了,就是弹出moneyLayer后每次都要输入数字才能关闭,这多少让人不爽.于是本篇我们就修正这个小小的不便. 首 ...