快速业务通道

CSS命名的语义化和html5为语义和体验而生

作者 佚名技术 来源 互联网 浏览 发布时间 2012-01-17

 

以上只是列出了我们常用的一些标签,更多的标签请查阅w3c ,基本所有的html标签都是一个单词或者词组的缩写,这样其实本意是更便于我们对语义化的理解。其实所有的(x)html标签中,除了

2个无语义的标签,其他标签都有它存在的意义,只有知道有哪些标签,以及对各个标签的本义做一个了解才能知道去用它。你不知道何时用
定义列表标签?又如果你不知道有标签?

 

如果在一个页面中看到的基本全是div,那么说明你对语义化标签的使用还不是很明白:明明是一个标题,可以用标签来实现,却非要用无语义的

标签来实现,又或者一个段落,用

标签是否更语义?

大家都知道每年的CSS裸奔节吧?如果选用的标签几乎全是不带语义的,那么在去样式后网页中几乎看不到任何结构信息,可读性非常差;如果选用的都是语义适合的标签,去样式后网页依然具有非常好的可读性;各个浏览器有自己的默认样式,默认的样式给予了各个标签不同的显示,标签使用的正确与否能体现网站的可用性,这也是检验一个网站可用性的最简单的方法之一。

这个推荐大家去看W3C官网的标签的使用,用web developer禁掉它的CSS看看如何?

CSS命名的语义化

CSS语义化的命名是指用易于理解的名称对html标签附加的class或id命名。语义化的命名这里就涉及到了团队的命名规范,只有在团队的规范的基础之上进行更好的语义化命名才是王道。

在我的理解,一个语义化的CSS命名至少应遵守如下约定:

尽量规避拼音命名,用英文单词去命名

单词之间连接用三种方式:下划线_ 、间隔符-、驼峰命名。具体使用哪种方式请根据团队的规范,但个人建议不要同时使用2种以上的连接方法同时命名

单词后不要跟无意义的数字,如logo1234 (团队约定好的除外)

对于过长单词的连接命名可采取缩写形式,但应确保成员都能看懂

一些约定好的单词可以迅速的帮助大家命名:

头:header
内容:content/container
尾:footer
导航:nav
侧栏:sidebar
栏目:column
登录条:loginbar
标志:logo
广告:banner
轮转:promo
页面主体:main
热点:hot
新闻:news
下载:download
子导航:subnav
菜单:menu
子菜单:submenu
搜索:search
友情链接:friendlink
版权copyright

这个太多了,这里就不一一列出了,遇到不会的单词大家再去补一下英文哈!

下面鄙人做的一个招聘页面大体架构命名,仅供各位拍砖

为神马要语义化?

在 森林的聚会 上被allan问到 做语义化到底为了什么? 我一时无言了,只是为了"祼奔"时好看?有多少用户会 看到"祼奔"的页面,并且看下去?

的确,我们不可能也不会仅仅为了"裸奔"时的好看而去做语义化,普通用户看不到你的网站"裸奔"时的样子也不想去看,不过从今天看来语义化的好处已逐渐明朗和开放开来:

手持移动设备的无障碍阅读
手持移动设备如PDA、智能手机等可能对CSS的解析能力较弱,这时可能就需要更语义的标签来体现一个页面的易读性

盲人等一些障碍人士的更好地阅读
屏幕阅读器对不同标签所发出的声音是不同的,使用更语义的标签以能传达不同信息的重要性

搜索引擎的友好收录
虽然各大搜索引擎的排名规则不断的再变化,但规则里的正则始终是要匹配标签的,如果能用更语义的标签,蜘蛛爬行能够根据标签的使用来确定上下和各关键字的权重。

技术趋势所趋
正如html诞生时的初衷那样,各个标签的本义就是希望能在特定的地方使用合适的标签,而不是去用样式来表现一个不语义的标签。html5新增了更多的语义化的标签,原本用

来实现的结构,通过html5的标签我们可以更完美的表现。

 

便于团队项目的可持续运作及维护
语义化的命名能够使我们在多人协作一个项目时更加有序和快捷,而不需要去纠结另一位伙伴的CSS命名是什么意思。如果是个人项目,也便于后期其他同事的修改,语义化的命名时一个项目的可读性更高。

以上总结的前4点只要针对的是(x)html的标签语义化使用,最后一点针对的是CSS样式的命名。

必须讲一下的其他东西

合理使用
进入

 

,这是大错特错,不是不可以用,而是应该在合适的地方用。传统网络WEB1.0时代时,网页的信息以一种"推"的方式呈现到用户面前,多数以文字或者图片的形式进行展示,而没有太多的复杂的展示效果,当时

就是在这样的环境下被以一种hack的方式来实现网页技术,只需要在DW拖一个

就可以很简单地实现网页,以后的几年,大家都懒得去改变这一格局,所以

也经历较长的一段时间。如今,

的本义应当用作数据列表的地方,对于一些数据处理用

显得更加有序和语义。

 

html5–为语义和体验而生
HTML5提供了一些新的元素和属性,例如

(网站导航块)和。这种标签将有利于搜索引擎的索引整理, 同时更好的帮助小屏幕装置和视障人士使用,除此之外,还为其他浏览要素提供了新的功能,如和标记。html5也弥补了(x)html1.1以前版本在语义标签的缺陷,这样就可以更少的去使用

等无语义标签,而去使用等这类型语义标签。

 

微格式—将智能数据添加到网页上
(x)HTML标签本身并不具备对它们的含义进行描述的功能。如果一个网站链接到另一个网站,那么该链接并不承载任何为什么有关这些网站互相链接的原因方面的信息。但是,如果这些都能被实现将会怎么样呢?微格式就是标签进行简单的扩展,将智能数据添加到网页上。如Smallni's Blog。上面的链接标记包括rel="home"属性,该属性显示链接的目标页面是该网站的首页。通过为已有的链接元素添加语义化属性,就为这个链接添加了具体的结构和意义。

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号