CSS命名的语义化和html5为语义和体验而生
|
以上只是列出了我们常用的一些标签，更多的标签请查阅w3c ，基本所有的html标签都是一个单词或者词组的缩写，这样其实本意是更便于我们对语义化的理解。其实所有的(x)html标签中，除了 和2个无语义的标签，其他标签都有它存在的意义，只有知道有哪些标签，以及对各个标签的本义做一个了解才能知道去用它。你不知道何时用
如果在一个页面中看到的基本全是div，那么说明你对语义化标签的使用还不是很明白：明明是一个标题，可以用标签来实现，却非要用无语义的 标签来实现，又或者一个段落，用
标签是否更语义？ 大家都知道每年的CSS裸奔节吧？如果选用的标签几乎全是不带语义的，那么在去样式后网页中几乎看不到任何结构信息，可读性非常差；如果选用的都是语义适合的标签，去样式后网页依然具有非常好的可读性；各个浏览器有自己的默认样式，默认的样式给予了各个标签不同的显示，标签使用的正确与否能体现网站的可用性，这也是检验一个网站可用性的最简单的方法之一。 这个推荐大家去看W3C官网的标签的使用，用web developer禁掉它的CSS看看如何？ CSS命名的语义化CSS语义化的命名是指用易于理解的名称对html标签附加的class或id命名。语义化的命名这里就涉及到了团队的命名规范，只有在团队的规范的基础之上进行更好的语义化命名才是王道。 在我的理解，一个语义化的CSS命名至少应遵守如下约定： 尽量规避拼音命名，用英文单词去命名 单词之间连接用三种方式：下划线_ 、间隔符-、驼峰命名。具体使用哪种方式请根据团队的规范，但个人建议不要同时使用2种以上的连接方法同时命名 单词后不要跟无意义的数字，如logo1234 (团队约定好的除外) 对于过长单词的连接命名可采取缩写形式，但应确保成员都能看懂 一些约定好的单词可以迅速的帮助大家命名： 这个太多了，这里就不一一列出了，遇到不会的单词大家再去补一下英文哈！ 下面鄙人做的一个招聘页面大体架构命名，仅供各位拍砖
为神马要语义化？ 的确，我们不可能也不会仅仅为了"裸奔"时的好看而去做语义化，普通用户看不到你的网站"裸奔"时的样子也不想去看，不过从今天看来语义化的好处已逐渐明朗和开放开来： 手持移动设备的无障碍阅读 盲人等一些障碍人士的更好地阅读 搜索引擎的友好收录 技术趋势所趋 来实现的结构，通过html5的标签我们可以更完美的表现。
便于团队项目的可持续运作及维护 以上总结的前4点只要针对的是(x)html的标签语义化使用，最后一点针对的是CSS样式的命名。 必须讲一下的其他东西 合理使用
，这是大错特错，不是不可以用，而是应该在合适的地方用。传统网络WEB1.0时代时，网页的信息以一种"推"的方式呈现到用户面前，多数以文字或者图片的形式进行展示，而没有太多的复杂的展示效果，当时 就是在这样的环境下被以一种hack的方式来实现网页技术，只需要在DW拖一个 就可以很简单地实现网页，以后的几年，大家都懒得去改变这一格局，所以 也经历较长的一段时间。如今， 的本义应当用作数据列表的地方，对于一些数据处理用 显得更加有序和语义。
html5–为语义和体验而生 （网站导航块）和。这种标签将有利于搜索引擎的索引整理， 同时更好的帮助小屏幕装置和视障人士使用，除此之外，还为其他浏览要素提供了新的功能，如和标记。html5也弥补了(x)html1.1以前版本在语义标签的缺陷，这样就可以更少的去使用 等无语义标签，而去使用等这类型语义标签。
微格式—将智能数据添加到网页上 |
凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢! |
