手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆
浏览模式: 标准 | 列表Tag:partition

几个html标签的语意和应用以及SEO相关

搜索引擎在分析内容的时候,并不完全是根据内容来的,也会根据html标签来进行判断,比如span,h1,em,当然有时候也会根据class,所以有语义的class名称还是占点优势的(class的名称,并未确认,只是猜测),比如class="title",对于搜索引擎来说很可能认为这是一个标题,但要是频繁出现,估计也会被认为是作弊了吧。

以下是一个人的文章,对于em,i,strong,b,h1~h6标签的介绍,因为我不是做前端的,所以以前没有关注过。但最近一直在做SEO,所以又关注了一点,因为h系列的权重好象也是属于比较高的。
全文开始。。。

到目前为止,我的人生只经历过一次面试,这次面试上面考官只问了一个问题,那就是<em>和<strong>标签是用来做 什么的,很杯具的是我当时连em表现成斜体都不知道,更别说什么语义化了,然后理所当然被刷了.

这一次就来仔细总结下这两个标签和H系列标签

1.em和strong,i和b.

还是贴一篇玉伯的文章吧,阐述很详细:http://lifesinger.org/blog/2008/12/the-different-of-em-and-strong/

首先,em和i在现在的浏览器上表现为斜体,strong和b表现为粗体,但是因为斜体的字体会导致锯齿,所以一般都不太用em.但是按照语义化来 说,应该适当使用em,样式可以用css来控制,而且不敢确保以后的浏览器会将em渲染成什么效果,这也是为什么不能依赖标签本身的表现来使用标签的原 因,说不定ie9突然觉得em渲染成灰色的粗体更好一点,然后改了渲染方式,应该用标签来表示结构,而不是样式.

在语意上,em表示对内容的强调,strong也表示强调,但是强调的程度更重一些.玉伯文章里也说了在html5里,em表示局部强 调,strong表示全局强调.我的理解就是,em表示你在看到这个网页的时候你不必注意em里的内容,而是在深入阅读的时候通过em的强调来理解内容的 含义,而strong则表示你一眼看去就知道了内容的重点,例如用在每篇文章的第一句话里.这也就是个局部和全局的概念吧.

玉伯文章里还提到:em 表示内容的着重点(stress emphasis),strong 表示内容的重要性(strong importance).这个理解起来其实也就是局部和全局的概念,可以自己去体会.

i和b标签前一阵传言即将被抛弃,不推荐使用,很多人用它来表示单纯的样式,当成一个非语义化的标签,但是在html5中他们被赋予了语意,b 元素现在描述为在普通文章中仅从文体上突出的不包含任何额外的重要性的一段文本。例如:文档概要中的关键字,评论中的产品名。或者代表强调的排版方式。i 元素现在描述为在普通文章中突出不同意见或语气或其他的一段文本,例如:一个分类名称,一个技术术语,一个外语中的谚语,一个想法等。或者代表斜体的排版 方式.

有一点要注意,按照理论,应该更多地应用em标签来表示着重,因为按常理,要着重加着重强调的总是比着重一次的几率少很多,所以strong只应该 用在需要的地方,不能够乱用.

2.H1,H2…….H6标签.

H标签用来定义标题,同时暗示文档结构,虽然样式上H1-H6分别呈现不同的大小,但是不要随便使用H标签来表示字体大小,也不要在一个标题中出现 多个H标签,他们应该用来表示文档层次.

文档的第一层标题应该总是用H1来表示,虽然H1的字体非常大,但是可以用css控制样式,不要因为H1太大,于是选用H2作为第一层标题,这样会 让某些搜索引擎感到迷惑.而且最好不要跳跃使用,H1下一级标题就应该用H2,而不是其他更小的H.记住原则即可,不要用样式去选择标签.

文章来自:http://www.beiju123.cn/blog/?p=394

--EOF--
H1的重要是无庸置疑的。em在很多时候,我看到都被人用来标记列表中的时间。看来对于各种各样的应用、判断,都是有着自己的见解。
span好象就没有什么特别的语义了,所以,尽量不要用span来做为关键内容的包含。
label,嘛就更不要说了。fieldset,倒也可以尝试,但是在不同的浏览器下,fieldset的样式很难精确控制,所以在CSS水平不高的情况下,还是放弃吧。

Tags: h1, em, strong, span, seo

9 个基于JavaScript 和 CSS 的 Web 图表框架

CB纯粹是一堆程序员发泄的地方,因此,在上面不可避免的会出现一些好的东西,比如这个:9 个基于JavaScript 和 CSS 的 Web 图表框架

图表,我个人还是觉得用FLASH来做比较好,比较有动感,而且现在所有浏览器都支持FLASH。它还是比较有前途的。FLASH和JS在运行的时候占用CPU应该是JS相对较高吧?FLASH图表还是有一些很不错的。比如open flash chart,就是一个开源的FLASH图片控件。

不过,标题是JS的,我当然还是把CB原文贴过来喽:http://www.cnbeta.com/articles/79418.htm

原文如下:

新闻来源:woork.blogspot.com
jQuery, MooTools, Prototype 等优秀的 JavaScript 框架拥有各种强大的功能,包括绘制 Web 图表,使用这些框架以及相应插件,我们可以非常轻松地实现曲线图,圆饼图,柱状图等 Web 图表的绘制,而不必象以往那样通过复杂的 Flash 技术实现。本文介绍了9个优秀的基于 JavaScript 与 CSS  的 Web 图表框架。
jQuery, MooTools, Prototype 等优秀的 JavaScript 框架拥有各种强大的功能,包括绘制 Web 图表,使用这些框架以及相应插件,我们可以非常轻松地实现曲线图,圆饼图,柱状图等 Web 图表的绘制,而不必象以往那样通过复杂的 Flash 技术实现。本文介绍了9个优秀的基于 JavaScript 与 CSS 的 Web 图表框架。
1. Flot


Flot 是一个纯粹的 jQuery JavaScript 绘图库,可以在客户端即时生成图形,使用非常简单,支持放大缩小以及鼠标追踪等交互功能。该插件支持 IE6/7/8, Firefox 2.x+, Safari 3.0+, Opera 9.5+ 以及 Konqueror 4.x+。使用的是 Safari 最先引入的 Canvas 对象,目前所有主流浏览器都支持该对象,除了 IE, 因此在 IE中使用 JavaScript 进行模拟。这里有一些实例
2. JS Charts


JS Charts 是一个免费的基于 JavaScript 的图表生成器,表格绘制非常简单,几乎不需要编码,也不需要插件和服务器模块,使用XML 或 JavaScript 数组缓存数据。
3. TableToChart
TableToChart 是一个 MooTools 脚本,可以将 HTML Table 对象中存储的数据绘制成图表。你可以使用 table 标签生成图表,柱状图,曲线图,圆饼图等。
4. PlotKit
PlotKit 是一个 JavaScript 绘图库,支持 HTML Canvas 标签,也支持 SVG。
5. Yahoo UI Charts Control


YUI Charts Control 可以在网页上将表格数据转换为图表,支持柱状图,曲线图以及圆饼图。支持 DataSource 工具,可设置的轴,鼠标盘旋提示,图表组合,以及皮肤等功能。
6. ProtoChart


ProtoChart 是一个基于 Prototype 和 Canvas 标签的开源库,这个库深受 Flot, Flotr, Plotkit 等启发,支持曲线图,柱状图,圆饼图等,可以在同一个图表上显示多套数据,支持可定制的图例,网格,边界以及背景图。支持 IE6/7, Firefox 2/3 以及 Safari,甚至支持 iPhone.
7. EJSChart


EJSChart 支持鼠标追踪,鼠标事件,按键追踪与事件,缩放,滚动,交互等功能,将用户体验上升到一个新高度。支持曲线图,面积图,离散图,圆饼图,柱状图等形式,拥有完备文档的属性和方法可以帮助实现很好的定制。
8. fgCharting
fgCharting 是一个很出色的 jQuery 插件,支持多种图形。
9. Pure Css Data Chart


以往的数据展示往往通过 flash 实现,现在,我们可以通过纯粹的 CSS 实现类似的功能。CSSGlobe 有一个非常实用的教程帮你实现基于 CSS 的绘图,甚至不需要 JavaScript。

本文国际来源:http://woork.blogspot.com/2009/03/useful-scripts-to-plot-charts-in-web.html
中文翻译来源:COMSHARP CMS 官方网站

Tags: css, chart, framework

小家伙最新的一些照片

这是最近买了推车后拍的照片,旁边的小照片是前段时间拍的,但是没有放上来,由于照片太多,所以,选了一些放在首页,否则。。。下载的时间就太长了。。
长宽没有控制好,所以,不能放在一行了,只能大大小小的放在一起。遗憾

» 阅读全文

Tags: 佑阳, 相片, 集锦