当前位置: 首页 > 编程日记 > 正文

Html5 aside标签的用法和作用

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

aside元素的用法主要分为两种。

● 被包含在article元素内作为主要内容的附属信息。

● 在article元素之外使用,作为页面或站点全局的附属信息部分。最常用的使用形式是侧边栏,其中的内容可以是友情链接、广告单元等。

下面通过一个案例对aside元素的用法进行演示,如下所示。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>aside元素的使用</title>
</head>
<body>
<article>
<header>
<h1>标题</h1>
</header>
<section>文章主要内容</section>
<aside>其他相关文章</aside>
</article>
<aside>右侧菜单</aside>
</body>
</html>

上面案例中定义了两个aside元素,其中第1个aside元素位于article元素中,用于添加文章的其他相关信息。第2个aside元素用于存放页面的侧边栏内容。

1616578655558_aside元素

效果如下图所示

相关文章:

Numpy入门教程:10. 统计相关

背景 什么是 NumPy 呢&#xff1f; NumPy 这个词来源于两个单词 – Numerical和Python。其是一个功能强大的 Python 库&#xff0c;可以帮助程序员轻松地进行数值计算&#xff0c;通常应用于以下场景&#xff1a; 执行各种数学任务&#xff0c;如&#xff1a;数值积分、微分、…

Windows 7+Code::Blocks+wxWidgets实录(一)

环境配置篇 玩过Linux的人应该对Code::Blocks和wxWidgets并不陌生。 Code::Blocks是一款非常有名的代码编辑器&#xff0c;在linux下用不惯vim的话&#xff0c;这是个不错的选择。但千万不要把它和编译器混淆&#xff0c;CB本身并没有独立编译程序的功能&#xff0c;需要调用系…

技巧:两部解决U盘安装windows 7

第一步&#xff1a;准备一个4G的U盘并使用disk part 工具制作成引导盘1、在运行中输入cmd 回车2、在黑色的命令提示符界面中输入Diskpart3、插入U盘 并输入List Disk查看4、输入Select Disk 1 &#xff08;选择你的U盘所在的标识&#xff09;5、输入clean 清除旧的信息6、输入c…

报Java面授班有哪些优势

​ java技术在互联网行业的高速发展&#xff0c;让很多人都开始学习java技术&#xff0c;大家都想知道学习java技术面授班好还是网络班好&#xff0c;小编觉得当然是面授班比较好&#xff0c;下面小编就带大家来详细的了解一下报Java面授班有哪些优势? ​  报Java面授班有哪…

刻意练习:Python基础 -- Task13. datetime模块详解

datetime模块 datetime 是 Python 中处理日期的标准模块&#xff0c;它提供了 4 种对日期和时间进行处理的类&#xff1a;datetime、date、time 和 timedelta。 datetime类 class datetime(date):def __init__(self, year, month, day, hour, minute, second, microsecond, t…

关于java和c的选择结构和循环结构

java和c在这些结构上确实没区别。 另学会一个小技巧&#xff0c;在编辑界面选中段落之后按tab可以整体后移选中的段落&#xff0c;再按shifttab可以将选中的段落前移。转载于:https://www.cnblogs.com/hloli/archive/2012/03/15/2398675.html

从控制器到驱动器的WD——硬盘巨头启示录之西数篇

WD&#xff08;Western Digital&#xff0c;西部数据&#xff09;公司创立的时间比希捷公司还早近10年&#xff0c;但作为硬盘驱动器供应商的历史可不算长。1970年4月23日&#xff0c;一家名为General Digital&#xff08;通用数字&#xff09;的公司诞生了&#xff0c;其最初是…

java程序员入门先学什么开发者工具

学习java编程语言&#xff0c;那么开发工具是肯定少不了的&#xff0c;程序员入门基础中开发工具是一定要学会的&#xff0c;可以帮助开发者们提高开发效率、更优雅的写代码。由于开发者涉及的技术领域众多&#xff0c;以后端开发者的视角盘点平时可能用得到的工具&#xff0c;…

Numpy入门教程:11. 时间日期和时间增量

序言 什么是 NumPy 呢&#xff1f; NumPy 这个词来源于两个单词 – Numerical和Python。其是一个功能强大的 Python 库&#xff0c;可以帮助程序员轻松地进行数值计算&#xff0c;通常应用于以下场景&#xff1a; 执行各种数学任务&#xff0c;如&#xff1a;数值积分、微分、…

C#事件的发送方和接收方(订阅方)

C#事件的发送方和接收方&#xff08;订阅方&#xff09;基于Windows的应用程序也是基于消息的&#xff0c;Windows使用预定义消息与应用程序通讯。.NET Framework将Windows消息封装在事件中&#xff0c;可以把事件作为对象之间的通讯介质。事件发送方&#xff1a;发送事件的对象…

后台管理界面模版

http://www.cssmoban.com/cssthemes/houtaimoban/index_3.shtml转载于:https://www.cnblogs.com/hellojesson/p/7805516.html

选择PMP培训学校需要注意哪些

选择PMP培训学校需要注意哪些?如今各大职场对于项目管理这个岗位都是非常有需求的&#xff0c;有需求就有市场&#xff0c;PMP培训相关证书在市面上频繁出现&#xff0c;想要选择PMP培训学校需要注意哪些呢?来看看下面的详细介绍。 首先&#xff0c;我们来详细的了解一下什么…

绝对实用 NAT + VLAN +ACL管理企业网络

在企业中&#xff0c;要实现所有的员工都能与互联网进行通信&#xff0c;每个人各使用一个公网地址是很不现实的。一般&#xff0c;企业有1个或几个公网地址&#xff0c;而企业有几十、几百个员工。要想让所有的员工使用这仅有的几个公网地址与互联网通信该怎么做呢&#xff1f…

javascript 常用功能總結

1.路径符号的含义 src"/js/jquery.js"、"../"这个斜杠是绝对路径的意思&#xff0c;表示的是网站根目录. 其他的如"./ " 、 "../" 、 "jquery.js" 、 "js/jquery.js"等等表示的都是相对当前网页的路径&#xff0c…

学习资源:在线学习 Python(一)

背景 Python 是一种通用编程语言&#xff0c;其在科学计算和机器学习领域具有广泛的应用。如果我们打算利用 Python 来执行机器学习的代码&#xff0c;那么对 Python 有一些基本的了解就是至关重要的。 如果我们希望熟悉 Python 基本语法结构&#xff0c;但不希望在本地安装I…

什么BRIEF算法?BRIEF算法详解

BRIEF是一种特征描述子提取算法&#xff0c;并非特征点的提取算法&#xff0c;一种生成二值化描述子的算法&#xff0c;不提取代价低&#xff0c;匹配只需要使用简单的汉明距离(Hamming Distance)利用比特之间的异或操作就可以完成。因此&#xff0c;时间代价低&#xff0c;空间…

OpenLayers 动态添加标记(Marker)和信息窗(Popup)

方式一&#xff1a;使用marker方式 1、在地图上添加标记图层 var markers newOpenLayers.Layer.Markers("Markers"); map.addLayer(markers);//地图初始化添加 2、动态添加标记和Popup方法&#xff1a; //add map initial methodmap.events.register(click, this, fu…

Bag标签之中的一个行代码实行中文分词实例2

例1&#xff1a; 分词&#xff08;返回以逗号隔开每一个词带上引號的词组。gap","&#xff0c;quotes""或quotes"&#xff09; 单引號 <bag idpPage act2words namewords gap"," quotes"">我喜欢黄色高领T恤衫</bag>…

学习资源:在线学习 Python(二)

背景 Python 是一种通用编程语言&#xff0c;其在科学计算和机器学习领域具有广泛的应用。如果我们打算利用 Python 来执行机器学习的代码&#xff0c;那么对 Python 有一些基本的了解就是至关重要的。 如果我们希望熟悉 Python 基本语法结构&#xff0c;但不希望在本地安装I…

Java培训完可以应用在什么领域

​ java技术在互联网行业一直都是非常有发展前景的&#xff0c;很多小伙伴都想知道“Java培训完可以应用在什么领域”这个问题&#xff0c;下面小编就来为大家做下详细的介绍。 Java培训完可以应用在什么领域?java的应用非常的广泛&#xff0c;可以用来在开发软件工具、嵌入式…

技术图文:Matlab VS. Numpy 矩阵基本运算

背景 前段时间在知识星球上立了一个Flag&#xff0c;至少写10篇关于 Python&#xff0c;Matlab 和 C# 对比的总结。 这是第 3 篇&#xff0c;对比 Matlab 与 Numpy 在矩阵基本运算方面的区别与联系。 虽然 Numpy 定义了 matrix 类型&#xff0c;使用该 matrix 类型创建的是矩…

Improve Performance and Reduce Memory with PVRTC Textures and Cocos2d

转载自&#xff1a;http://www.uchidacoonga.com/2011/07/pvrtc-textures-and-cocos2d/ Hello everyone! A few months have passed since I posted Simple Platformer Using Cocos2d and Box2d with Collision Detection. I have received many positive feedbacks and intere…

VDI序曲二十三 制作OFFICE 2003应用程序虚拟化序列

APP-V平台由三个重要组件构成&#xff1a;APP-V排序器、用于虚拟应用程序交付和管理的APP-V管理和流式处理服务器以及APP-V客户端。并且在虚拟环境中不会包含不必要的文件和设置&#xff0c;让IT管理员按需交付应用程序软件。 我们之前在一台干净的PC上做好了“捕获鸟笼”&…

零基础学Java程序有什么好的建议

​ java技术的快速发展&#xff0c;引起了很多人的关注&#xff0c;尤其是一些零基础人群&#xff0c;都想通过学习java技术来改善自己的职业&#xff0c;那么零基础学Java程序有什么好的建议呢?来看看下面的详细介绍。 ​  零基础学Java程序有什么好的建议? 1.选择对的书籍…

Numpy入门教程:12. 线性代数

背景 什么是 NumPy 呢&#xff1f; NumPy 这个词来源于两个单词 – Numerical和Python。其是一个功能强大的 Python 库&#xff0c;可以帮助程序员轻松地进行数值计算&#xff0c;通常应用于以下场景&#xff1a; 执行各种数学任务&#xff0c;如&#xff1a;数值积分、微分、…

Exchange 2010 移动邮箱时提示超过了目标配额

在使用 new-moveRequest 移动邮箱时&#xff0c;提示超过了目标配额。解决过程如下&#xff1a; 经查看&#xff0c;此邮箱配额为 3.826G ,由于邮箱实际比配额大&#xff0c;因此移动时出现下面的错误 找到该用户&#xff0c;邮箱设置&#xff0d;存储配额&#xff0c;最下面的…

什么是URL?协议头,路径和端口是什么意思?

URL(Uniform Resource Locator&#xff0c;统一资源定位符)是互联网上标准资源的地址&#xff0c;互联网上每个文件(即资源)都有一个唯一的URL&#xff0c;它包含了文件的位置以及浏览器处理方式等信息。 URL地址由协议头、服务器地址、文件路径三部分组成。比如&#xff0c;一…

技术图文:Matlab VS. Numpy 常见矩阵

背景 前段时间在知识星球上立了一个Flag&#xff0c;至少写10篇关于 Python&#xff0c;Matlab 和 C# 对比的总结。 这是第 4 篇&#xff0c;对比 Matlab 与 Numpy 中经常用到的各种矩阵&#xff0c;比如零矩阵、单位矩阵、全1矩阵、对角矩阵、均匀分布的随机矩阵、标准正态分…

CssGaga 快速上手指南

CssGaga是ytzong&#xff08;涛哥&#xff09;基于我们在朋友网日常的重构工作流程&#xff0c;为了提高工作效率而开发并不断完善起来的一个重构辅助工具。运行于Windows .NET的环境&#xff0c;提供了重构相关的一系列解决方案。最近越来越多的朋友通过腾讯微博、QQ和Email咨…

学习web前端开发要注意什么

web前端的发展前景有目共睹&#xff0c;越来越多的人都对web前端这门编程语言非常感兴趣&#xff0c;想要学习web前端技术&#xff0c;那么学习web前端开发要注意什么呢?大家在学习之前是否有做好这些功课呢?来看看下面的详细介绍吧。 学习web前端开发要注意什么? 1、任何技…