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

几个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

如何使页面的链接在新窗口中打开

我不知道这篇文章怎么算,因为我最后还是用了JS,所以我归类到javascript分类了。

页面中的链接在新窗口中打开,一般出现在专题、网页地图、列表中,因为在一般的网页里,如果所有的链接都是开新窗口,肯定用户体验一般。而如果每个链接都加上target="_blank"的话,仿佛听说是不符合w3c规范。但我是觉得,如果一个网页有上百个链接,都加上Target="_blank",那是多少字节啊。

虽然现在不再是“惜字节如金”,但该节约的还是要节约。

于是我在页面的<head>标签里加上了<base target="_blank" />,因为记忆中,这个标签还可以控制showModalDialog里的链接不开新窗口或者影响父窗口(当然那时候是<base target="_self">)

兴冲冲的放到网上,结果同事测试下来,IE6和Firefox都正常。但IE7和IE8却都不正常。没办法,只能用js解决。本想用jquery来搞定,但为了这么小的功能就加载一个几十K的jQuery,我还不如直接在链接里加上target="_blank"呢。

最后写了如下代码:

JavaScript代码
  1. var aTag = document.getElementsByTagName('a');  
  2. for(i in aTag){  
  3.     aTag[i].target='_blank';  
  4. }  

OH YEAH,搞定。

 

Tags: base, target

Mysql分区表局限性总结

昨天晚上asers.z问我怎么样使得数据在搜索的时候和58.com差不多,而且展示数据的速度要快。我一直想着用mysql的分区表解决,而乔楚(乔 大姐)则认为是采用sphinx来解决。
但后来我找了一个资料才发现,原来分区表还是有局限性的,比如他就不支持全文索引。我是看这里看到的。。

» 阅读全文

Tags: mysql, partition

[转]Firefox的优化技巧

这是一些优化firefox的奇技淫巧之一,我也是转载来的。
firefox是我最常用的浏览器(没有之一,最常用的就是它,没有其他的),从开机到关机,浏览器都在运行。除非是addon updater后的重启或者我新装了add-on后的重启,其他时间,就一直开着。
家里的笔记本还好,4G内存,随便我挥霍,单位只有2G,经常会发现FF占了4~500M左右的内存。所以当有个优化技巧在我面前时,我还得选择了尝试。目前尚未看出效果,估计时间还短效果还没有出来。

OK,打开你的Firefox,在地址栏内键入 about:config

XML/HTML代码
  1. 在页面的 filter 栏内输入 network  
  2. 找到network.http.pipelining 这一项,把值设为 True  
  3. 找到network.http.piplining.maxrequest这一项,把值改为10。  
  4.   
  5. 这是因为很多浏览器的默认设置都是依照拨号上网的情况来设置的,所以在现在的宽带时代,它们的潜力并没有被挖掘出来  
XML/HTML代码
  1. 查找 browser.cache.disk.parent_directory  
  2. 如果没有找到 browser.cache.disk.parent_directory ,则新建这个“字符串”  
  3. 修改到你需要存放的位置,例如我修改到RamDisk位置 x:\firefox  
  4. 在地址栏输入 about:cache ,可以发现Cache位置已经成功修改  
XML/HTML代码
  1. 查找 config.trim_on_minimize  
  2. 如果没有找到 config.trim_on_minimize ,则新建这个“布尔”  
  3. 设置为true——好处:在最小化时自动释放内存  
XML/HTML代码
  1. 查找 browser.cache.memory.capacity  
  2. 如果没有找到 browser.cache.memory.capacity ,则新建这个“整数”  
  3. 设置为固定值16384——好处:据说是最优化的大小  
XML/HTML代码
  1. 查 找 browser.sessionhistory.max_total_viewers 
  2. 如 果没有找到 browser.sessionhistory.max_total_viewers ,则新建这个“整数”  
  3. 设置为固定值5或者更小 ——好处:页面快进/快退功能中保存的页面总数,默 认是-1(无限)
XML/HTML代码
  1. 查 找 network.prefetch-next 
  2. 如 果没有找到 network.prefetch-next ,则新建这个“布尔”  
  3. 设置为固定值false——好处:关闭预读取网页的功能

转帖的来源:

http://blog.sunshow.net/2007/02/%E8%BD%AC%E8%BD%BD%E4%BC%98%E5%8C%96firefox%E7%9A%84%E6%96%B9%E6%B3%95/

http://blog.sunshow.net/2006/12/%E8%BD%AC%E8%BD%BD%E8%AE%A9%E4%BD%A0%E7%9A%84firefox%E5%92%8Cie%E8%B7%91%E7%9A%84%E6%9B%B4%E5%BF%AB/

Tags: firefox, 优化

setInterval和setTimeout到底有啥区别?

对于javascript的setInterval和setTimeout,很多人到现在一直搞不清楚。其实,真的很简单,也很方便的就能让人搞清楚在什么时候用什么函数。

当然我说的是简单的方法,请打开词霸,查看interval和timeout,就可以明白很多了

interval: n. 间隔;幕间休息;间距

timeout: n. 暂时休息;工间休息;超时

看到这两个意思,估计你也可以明白,setTimeout是在超过你定义的时间后,执行。而setInterval是间隔你定义时间区间执行函数。这样解释就让你明白很多了吧?

以前写的:

之所以写这篇文章,主要是因为看了http://www.phpweblog.net/jig68/archive/2010/03/17/7137.html这篇博客。才明白还是有很多人不太了解这方面,所以,换个简单的解释方法,总可以让人明白了吧?
PS:意外啊,一不小心多复制了点代码。。。

Tags: setinterval, settimeout