网站面包屑指的是什么?

html-css06

网站面包屑指的是什么?,第1张

简而言之就是这样的东西:百度知道>电脑/网络>互联网

网页中这个就是所谓的面包屑,是一种类似站内目录的功能

具体来历见下面:

面包屑导航(Breadcrumb Navigation)的概念来自于格林童话"汉赛尔与格莱特",我们先来看一下这个童话故事,看完后或许你就能明白什么是网站面包屑导航,以及为什么网站面包屑导航对于SEO和用户体验有非常重要的作用了。

故事大意是这样的:在大森林的边上,住着一个贫穷的樵夫,他的两个孩子--汉赛尔与格莱特还有他们的继母。由于生活贫穷,继母打算把两个孩子带到森林深处,然后借口去干活,偷偷走掉,把他们丢在森林里。但是汉赛尔无意中知道了继母的计划,于是他偷偷的在沿路洒下东西,帮助自己找到回家的路。第一次他是用闪闪发光的石子,顺利找到了回家的路;第二次时由于没办法出去捡石子,只好以面包屑代替。但是当他们想按照面包屑的指引回家时,却发现却怎么也找不到一点面包屑了,原来它们都被那些在树林里、田野上飞来飞去的鸟儿一点点地啄食了。故事到此并未结束,但和我们面包屑的故事已无关系,如果您对结局感兴趣的话,可以百度一下。

在童话中,当汉赛尔与格莱特穿过森林时,他们在沿途走过的地方都撒下了面包屑,让这些面包屑来帮助他们找到回家的路,这是一种“历史记录”的应用方式,目的是帮助你追溯来路。在浏览器中已经包含了追溯来路的功能,所以,在网页应用中面包屑导航来表达内容归属关系,作用是告诉访问者他们目前在网站中的位置以及如何返回。较典型的面包屑导航如下所示:

面包屑导航

最右端的地址为当前浏览页,最左端的为起始页面,这种结构使得用户对于所访问页的层次结构一目了然。面包屑导航不仅可改善网站的实用性,同时亦可提高网站对搜索引擎的友好性。访客使用面包屑导航可以快速返回上层目录,查看其它需要的内容。在许多关于网站用户使用体验的调查报告中也得出,如果超过3次点击,访客还没有找到需要的信息,那么有大约80%的访客会离开网站。这一点对搜索引擎来说也不例外。提供良好的返回导航连接可帮助搜索引擎更好地检索整个网站。而且,“面包屑型”导航连接中的锚文本还可以增进链接页的权重。

对于SEO来讲,面包屑型导航是一个非常实用的功能,同时也提供了友好的用户体验,所以大家可不要把面包屑弄丢了,找不到回家的路啊!

首先,我们打开自己电脑上的网页编辑器,我以DW软件为例。我们新建一个HTML文档。

然后我们在HTML的body部分开始写我们的代码。面包屑导航是横排的几个文字和图片的组合。

我们可以用ul>li,或者dl>dt>dd来实现。因为这两个都可以横着在一行显示。

我以dl>dt>dd为例。我们在html页面中写入dl和dd标签。这个导航的class我们一般使用breadcrumb,这个比较通用。

我们在dd标签中输入部分文字。按下F12,查看不写样式页面在浏览器中的效果。可以看到不写样式,三段文字是竖着排列的。

我们需要让三个dd标签横着排列,我们在style中将dd标签设为行内元素。默认情况下dd是有margin-left的,我们需要将其设为0;

这样一个简单的面包屑导航就做好了,一般导航是可以点击的链接,我们可以再为其添加上a标签。