CSS命名的语义化和html5为语义和体验而生
开篇前的一些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 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢! |