前端是个很特殊，带点矛盾的职位。所以我们的“前端攻城师”也大都是些矛盾体。矛盾在感性和理性之间，矛盾在文艺和三俗之间，矛盾在放任和严谨之间。作为所谓的“攻城师”，攻的不仅是“前端”这座善变诡异的高城，同时也是在攻我们自己对于艺术和编码的心防。
【关于HTML】
--语义化
语义化，是什么？即用正确的标签做正确的事。我一直认为学一种编程语言和学一门我们常规意义里的“语言”如汉语，英语，其实是类似的。单字和单词以及语法都是一门语言的组成部分，但却不是最重要的部分。怎么去组织这些单字和语法去表达正确的意思才是语言的精髓。这就好比汉语我们每个人都会写，但是能用汉语写出惊艳的散文，写出逻辑严谨的小说的又有多少呢？所以，我们普通人和一些优秀的作家的最大的区别或许不在于知道单词的多少，了解语法的多少，而在于叙述一件事情，表达一个观点时的思维。。。
好像扯远了。回到html的语义化上。我说了，重点不在于你知晓标签的多少。哪怕你知晓了所有标签，甚至能区分了不同的DTD下符合规范的标签。那又怎么样呢？仅仅等同于熟背了一本《现代汉语词典》。每个标签都有他自己的语义。这也是为什么我们会抛弃用table来布局的方式。因为table本来的语义很明晰，就是“数据表格”，他该为数据表格而生，而不是为布局而生。
举一个一线互联网公司一个关于合理使用html标签的笔试题：
<P>小明说：<BR>小王是刚来公司的前端工程师，对公司内部的"FED"称谓不了解，你给他解释下吧。<BR><BR>我把一本《前端攻略》送给了小王，他很高兴。
请把一段简单的html写成你觉得规范的，优雅的html。
如果我们考虑到标签的闭合，考虑到标签的大小写。于是我们会这样改：
<p>小明说：<br/>小王是刚来公司的前端工程师，对公司内部的"FED"称谓不了解，你给他解释下吧。<br/><br/>我把一本《前端攻略》送给了小王，他很高兴。</p>
如果我们考虑到合理使用标签。为什么要两个br连用？其实那里应该已经可以分为两个段落了。所以：
<p>小明说：<br/>小王是刚来公司的前端工程师，对公司内部的"FED"称谓不了解，你给他解释下吧。</p><p>我把一本《前端攻略》送给了小王，他很高兴。</p>
如果上面一段html出现在一个内容充实的页面里，其实基本也可以了，可是，如果我们假设我们一个页面的主要内容就是上面那一小段html，或者甚至一个页面就那一小段。那么，或许我们还需要更好的语义去修饰：
<p><strong>小明</strong>说：<br/><q cite="xiaoming">小王是刚来公司的前端工程师，对公司内部的<abbr title="Front-End-Developer">"FED"</abbr>称谓不了解，你给他解释下吧</q></p><p>我把一本<cite>《前端攻略》</cite>送给了小王，他很高兴。</p>
到此为止，在某些情况下上面的强语义的方式是合理的，而或许某些情况上面的代码片段是有些冗余的。正如我们用汉语写文章，修饰的形容词用少了会觉得无味，用多了会显得口味重。所以，合理的判别文档在页面的权重以及用合理的标签去修饰它显得尤为重要。
--清晰地结构，与表现分离
说到html结构，我不得不说一种经典的思想：面向对象。OO的思想自从在经典的C语言中被推广开来后，一直长兴不衰，面向对象的确是编码中目前为此最为优雅的方式。有人或许会说，你说c，c++，java等面向对象的编码，我能理解，你说JavaScript也能面向对象的编码，我也能接受，至于html和css也能面向对象？这就有点唐突了。是的，html和css一个作为“置标语言”,一个作为样式表。能否真正的呈现面向对象的思想有待考究。不过这并不妨碍我们把OO的思想贯穿于我们的编码中。
我们知道。html是以“盒模型”为基础的，那我们不妨就面向“盒子”这个对象来架构我们的html。比如一个典型的“盒模型”类似：
<div class="box">
<h2 class="box-title"></h2>
<div class="box-con"></div>
<div class="box-footer"></div>
</div>
<h2 class="box-title"></h2>
<div class="box-con"></div>
<div class="box-footer"></div>
</div>
如果我们把这样一个盒子作为我们的“基对象”的话，那么html的结构会类似于下面这样：
<body>
<!-- 文档包裹 -->
<div class="wp">
<!-- header -->
<div id="header" class="header">
<div class="box">
<h2 class="box-title"></h2>
<div class="box-con"></div>
<div class="box-footer"></div>
</div>
</div>
<!-- main content -->
<div id="content" class="content">
<div class="box">
<h2 class="box-title"></h2>
<div class="box-con">
<!-- left column -->
<div class="box col-left">
...
</div>
<!-- right column -->
<div class="box col-right">
...
</div>
</div>
<div class="box-footer"></div>
</div>
</div>
<!-- footer -->
<div id="footer" class="footer">
<div class="box">
<h2 class="box-title"></h2>
<div class="box-con"></div>
<div class="box-footer"></div>
</div>
</div>
</div>
</body>
<!-- 文档包裹 -->
<div class="wp">
<!-- header -->
<div id="header" class="header">
<div class="box">
<h2 class="box-title"></h2>
<div class="box-con"></div>
<div class="box-footer"></div>
</div>
</div>
<!-- main content -->
<div id="content" class="content">
<div class="box">
<h2 class="box-title"></h2>
<div class="box-con">
<!-- left column -->
<div class="box col-left">
...
</div>
<!-- right column -->
<div class="box col-right">
...
</div>
</div>
<div class="box-footer"></div>
</div>
</div>
<!-- footer -->
<div id="footer" class="footer">
<div class="box">
<h2 class="box-title"></h2>
<div class="box-con"></div>
<div class="box-footer"></div>
</div>
</div>
</div>
</body>