CSS命名的语义化和html5为语义和体验而生
作者 佚名技术
来源 CSS技术
浏览
发布时间 2012-02-22
|
开篇前的一些YY 曾几何时，一个人出设计稿，出完设计稿打开DW用拖出一个页面，再苦逼一点拖完页面后自己还要写后台，武林人称：美工。更苦逼的是当每一次需求变更后，去修改一大堆发麻的 ，于是"div+css"被搬上了互联网时代的舞台，一夜间N多的《DIV+CSS》葵花宝典横空出世，那时，我们活在了div+css的年代，那时，我们用上了 之后，腰不酸，腿不痛，加班也带劲了。
YY结束，切入正题 Ghost曾在2年前就以《页面重构中的语义化》一文对语义化做过讲解，还有码头的《语义化的HTML结构到底有什么好处？》 重构历经7年，也许时至今日，我们可以熟练地写出一个页面，但对于写好一个页面又谈何容易？让我们梳理一下思路，重温下基础，并结合现在的趋势，再来谈一下语义化这个话题，神马是语义化？为何要语义化？ 重构中的语义化基本可以分为2块：(x)html标签的语义化和css命名的语义化。 (x)html标签的语义化不废话上案例：
(图1) 图1非语义化的实现方式：no_emantic_html 语义化的实现方式：emantic_html 你对 情有独钟吗？拿到一个设计稿之后，不经意间无数的 已经在你的弹指神功下落在屏幕？如 果是no_emantic_html那 样，恭喜你得了恋 癖。
"用合理HTML标记以及其特有的属性去格式化文档内容"—这是舒克对语义化标签的解释，能不用 的地方不用 ，因为 是无语义的标签，原本单词是division，为分隔、区块的意思，一般只用在架构html的地方，在(x)html以前的版本。
不过怎样才能写出语义化的标签？从基础入手吧，每天跟我们打交道的最多的就是div h1-h6 ul-li p之类的标签了 ，不知大家有没有对这些标签做过深入的理解，来看下面这张表
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢! |
你可能对下面的文章感兴趣
上一篇: CSS清理浮动方式更简洁的方案下一篇: 利用CSS让元素垂直居中的两种实现方法
关于CSS命名的语义化和html5为语义和体验而生的所有评论
