快速业务通道

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之类的标签了 ,不知大家有没有对这些标签做过深入的理解,来看下面这张表

 

标签 原单词 说明 语义化(Y/N)
h1-h6 head 定义 HTML 标题 Y
p paragraph 定义段落 Y
ul unordered list 定义无序列表 Y
ol ordered list 定义有序列表 Y
li list item 定义列表的项目 Y
dl definition list 定义定义列表 Y
dt definition term 定义定义列表中的项目 Y
dd definition description 定义定义列表中项目的描述 Y
table table 定义表格 Y
thead table head 定义表格中的表头内容 Y
tbody table body 定义表格中的主体内容 Y
th table head cell 定义表格中的表头单元格 Y
tr table row 定义表格中的行 Y
td table data cell 定义表格中的单元 Y
a anchor 定义锚 Y
img image 定义图像 Y
div division 定义文档中的节 N
span span 定义文档中的节 N

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站: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号