标签：
我收集到一些观点，大家姑且先听上一听，
有人说：
“没必要考虑语义化，只要我写的代码浏览器运行后没问题就行，反正领导根本不关心这些”
“语义化是w3c推广的，我是很想语义化我的代码，但总是用不明白”
“这个不好说，语义化再好有啥用，关键是有好的项目，客户才是金主！”
“除了专业人士，谁会去看我们的代码是不是语义化的”
不仅仅有页面重构人员的声音，也听一听工程师、设计师、还有项目管理人员，他们是怎么看“语义化”这件事的
Php工程师：“无所谓什么语义化，只要逻辑正确，不影响我循环数据”
项目管理人员：“我更看重在最短的时间，实现我的需求，至于语义化不是我们关心的，只要别耽误项目时间，你们怎么优化都行 ”
设计师：“什么是语义化？”
市场销售人员：“客户满意就行，客户满意我们才能赢利”
这些声音时常充斥在我们的耳边，虽有些片面，但似乎还是挺有道理的，可站在自己的立场上（一个页面重构人员），基于这些现实条件，我们要如何权衡，语义化和现实工作之间的关系？我们该怎么做呢？
先解释几个名词，我们再来讨论在实际工作中如何处理这些问题。
首先解释一下什么是语义化？
“语义化是指用合理HTML标记以及其特有的属性去格式化文档内容。
语义化的(X)HTML文档有助于提升你的网站对访客的易用性，比如使用PDA、文字浏览器以及残障人士将从中受益。对于搜索引擎或者爬虫软件来说，则有助于它们建立索引，并可能给予一个较高的权值。
事实上SEO最有效的一种办法，就是对网页的HTML结构进行重构，实质上就是语义化。”
语义化存在的意义
例如
<div class= " wrapper ">
<div class= " main"> …</div>
<div class= " sidebar">…</div>
</div>
很容易通过好的命名和清晰的结构看懂这些代码
接下来咱们抛开这些理论，讨论几个我们常见的结构,
恩，这个是新闻列表，平常工作中，你怎么写结构？
大家都不假思索的考虑用li来实现吧
<div class="module">
<h3>国际新闻每日排行</h3>
<ul>
<li><img alt=”hotTop1” src=”1.gif” /><a href=”” title =”完整标题”>德国总理……道歉</a></li>
<li><img alt=”hotTop2” src=” 2.gif” /><a href=”” title =”完整标题”>德国总理……道歉</a></li>
……
</ul>
</div>
在web标准中，ul ol li被赋予有序或无序列表的语义，可实际使用时，使用范围似乎被大家扩展了不少，看下面这几个图，li中的元素逐渐增多。
<div class="module">
<h3>时政要闻</h3>
<ul>
<li><span>03:50</span><img alt=”listDot” src=”dot.gif” /><a href=”” title =”完整标题”>最高法…巡查制度</a></li>
<li><span>03:50</span><img alt=” listDot” src=” dot.gif” /><a href=”” title =”完整标题”>最高法…巡查制度</a></li>
……
</ul>
</div>
Major Style
span{float:right;}
在这个例子中，出现了更多的元素，我们依然使用li，就解决了它。
我们继续看图写代码……
（我们只书写红框里菜单栏这部分代码）
<div class=”nav”>
<a href=”” title =””>业界动态</a>
<a href=”” title =””>业界动态</a>
<a href=”” title =””>业界动态</a>
<a href=”” title =””>……</a>
</div>
Major Style
a{float:left;}
这种方法代码量少，Dom节点深度小，在大页面下加载也会快一些，这种写法较适用于不需要扩展的模块, 而且我们没有用到li
另一种写法：
<div class=”nav”>
<ul>
<li><a href=”” title=””>业界动态 </a></li>
<li><a href=”” title =””>业界动态 </a></li>
<li><a href=”” title =””>业界动态 </a></li>
<li>…</li>
</ul>
</div>
Major Style
li{float:left;}
这种方法在代码量上略显臃肿，优点是扩展性好，增加了代码可读性。
可是这是列表吗？这么用对不对不清楚，好像我们一直都是用li的，难道不对吗？显示没有问题呀。不做解答，我们先继续看图写代码
看到这个图，我们首先考虑的是程序循环，然后在脑海中构思用什么标签来搭建结构，我继续使用li，其实我很矛盾，从语义化讲的列表到底是个什么范畴，如果不用li，又该怎么写呢，我们先写写看
方式一：
<div class="hotUserList">
<ul>
<li><img src="1.pic" alt=“ “ /><p class=“username”><a href=““ title =““>杜淳</a></p><p class=“attThis”><a href=““ alt=““>关注他</a></p></li>
<li><img src=“1.pic” alt=“ “ /><p class=“username”><a href=““ title =““>魏明</a></p><p class=“attThis”><a href=““ alt=““>关注他</a></p></li>
<li><img src=“1.pic” alt=“ “ /><p class=“username”><a href=““ title =““>叶莺</a></p><p class=“attThis”><a href=““ alt=““>关注他</a></p></li>
<li>…</li>
</ul>
</div>
Major Style
li{float:left;}
方式二：
<div class=“hotUserList”>
<div class=“rowlist”><img src=“1.pic” alt=“ “ /><p class=“username”><a href=““ title =““>杜淳</a></p><p class=“attThis”><a href=““ alt=““>关注他</a></p></div>
<div class=“rowlist”><img src=“1.pic” alt=“ “ /><p class=“username”><a href=““ title =““>魏明</a></p><p class=“attThis”><a href=““ alt=““>关注他</a></p></div>
<div class=“rowlist”><img src=“1.pic” alt=“ “ /><p class=“username”><a href=““ title =““>叶莺</a></p><p class=“attThis”><a href=““ alt=““>关注他</a></p></div>
<div class=“rowlist”>…</div>
</div>
Major Style
. rowlist {float:left;}
这样写没有什么不标准的问题，但是纵观上面使用li的代码，比较之下，总觉得div的不够美观，完美主义者们总是精益求精的希望自己的代码很精致很漂亮，这个全div的，的确没有上面那个li来的漂亮。
再回头看看上面的图片， 好像涉及到逻辑循环的，无论大小我们都先想到li，继而在li内部搭建它的结构，我们的出发点，和这么做的缘由是什么？现在想想大概有这么几个原因，使我们格外偏爱li。
缺点是什么，这个…… 我没找到耶
li只是语义化阵容中的一个类型，不能以偏概全，但多少可以说明一些问题，
作为一个页面重构工程师，不断对自己的代码进行完善精炼固然是好，但无论我们的技术实力有多么强大，作为一个工程师，不能只纠结在技术面上，还要考虑我们 做一个产品的初衷以及目标，服务于用户，所以在权衡代码和用户诉求时，还是要以大局为重，从用户角度出发，以产品需求为核心，考虑多方立场，实现在有效的 空间和时间范围内，达到利益最大化。盈利是根本！然后才是可持续发展，再然后才是考虑如何优化，就像之前读过的一些观点，说到技术型人才在做事情的时候，很容易钻牛角尖，很容易在问题的一个点上深入，而不太会考虑全局，这是作为工程师应该掌握的一个度
转自新浪UED
标签：
原文地址：http://www.cnblogs.com/iceyhu/p/4410293.html
