前端最重要的工作——HTML构架
前端的工作是上承设计师，下接后端工程师的。其工作主要有三个方面——html\css\javascript(下简称为JS)；
其中，难度最小的是html，最大的是JS。
就我本人而言，JS依然是难以逾越的高峰，其中的逻辑需要大大超乎了我这个文科生所能理解的范畴。因此，我只能简单的写一些jQuery。遇到难题，则要去求教团队中的技术大拿。
而我今天不准备讨论JS方面的难度。因为水平远远不够。
我个人是从设计开始入行的，也就是从PS开始的。逐渐的进入到前端这个无底深坑里面。
今天我想说的是HTML。
一个良好的HTML基础是非常重要的。但是有太多的前端不把HTML当回事情，因为这是最简单的。
我想说的是HTML一点也不简单，想要写好HTML，必须遵循一下原则
- 善用HTML标签，不要一路DIV+SPAN
- 良好的结构，排除冗余
- 良好的HTML语义，利于后端理解，更加利于项目的SEO工作
- 善用ID，善用CLASS。不要全部ID，更不要全部CLASS
- 充分考虑改版需求，构架要灵活。
就第一条来说，善用HTML标签，就有太多的人做不到。在他们看来，HTML只要两个标签就够了，一个是DIV，一个是SPAN，不同的用途，加上不同的CLASS即可。
能不能完成工作？当然能，但是我认为这是远远不够的。
举个例子。
<div id="head"></div>
<div id="body">
<div id="bar"></div>
<div id="main"></div>
</div>
<div id="foot"></div>如上代码，就是很多前端写出来的布局。可不可以？当然可以。问题是，这样不够优秀，没有充分使用HTML5的更加丰富的标签，没有严格的语义。
那么我是如何来写的呢？我会像下面这样写：
<header id="head"></header>
<section id="body">
<aside id="bar"></aside>
<section id="main"></section>
</section>
<footer id="foot"></footer>看上去好像是差不多。但是在语义方面就相差甚远了。这一点是非常重要的。然而，这个例子并不能说服大家放弃DIV，因为这个实在是太顺手了。那么我们再来举个例子。
<ul>
<li>
<a href="#"><img src="test.jpg" alt="title"></a>
<a href="#"><span>title</span></a>
</li>
......
</ul>这段代码是很常见的。但是我认为这是有问题的。因为，出现了两个链接，这就造成了冗余。而且标题使用了没有语音的span。我会写如下的代码：
<ul>
<li>
<a href="#" title="title">
<img src="test.jpg" alt="title">
<h5>title</h5>
</a>
</li>
......
</ul>这样，就优化重复出现的a的问题，并且使用了有更加语义化的h5标题。当然，并非一定要使用h5。使用其他的h标签，或者strong也是没有问题的。
好吧，这个例子还是不极端，那么我就举一个极端的例子来说明问题。
<ul>
<li>
<a href="#" title="title">
<img src="test.jpg" alt="title">
<span class="title">title</span>
<span class="tejia">特价</span>
<span class="jiage">￥2000</span>
<span class="buy">立即购买</span>
</a>
</li>
......
</ul>在商城中，是会出现一些更多的文字的，如上面的例子。这已经非常好了，因为很清楚各个span是干嘛的，因为用了不同的class。但我认为这非常糟糕，我们可以这样优化这段代码：
<ul>
<li>
<a href="#" title="title">
<img src="test.jpg" alt="title">
<h5>title</h5>
<span>特价</span>
<strong>￥2000</strong>
<em>立即购买</em>
</a>
</li>
......
</ul>我不需要使用一个class，善用html标签，就能完成这一段代码，并且这段代码中的重点已经非常有层次了。这也为我们写css提供了极大的方便。
当然，要写好html并不仅仅是如此。其实有一些原则还是可以把握的：
- 不要在HTML中出现装饰性的内容，这些内容应该在css中去呈现。
- 良好的缩进，便于检查代码。我看到乱糟糟的缩进就疯了。
- 复杂的地方最好留有注释。
最最讨厌的还有一种情况，就是用DIV去模拟TABLE。这简直是吃饱了撑的。有TABLE不用，非得去模拟。如果是简单的还好，如果是复杂的，天哪，那个代码就不能看。
从我08年转型写div+css以来，就一直有讨论，要不要模拟table。我的回答就一句话——是表格的地方就用table，不是表格，就不用，因为，table，就是表格！！
另外，在不考虑搜索引擎优化的项目中（比如网站后台），则可以更多的使用table来制作列表，因为非常方便，代码量非常少。
当然，写好table也不是一件简单的事情。确实是有太多的人写太多糟糕的TABLE了。那么，我是如何来写table的呢？举个例子：
<table>
<col>
<col width="100">
<col width="200">
<col width="140">
<col width="80">
<tr>
<th>title1</th>
<th>title2</th>
<th>title3</th>
<th>title4</th>
<th>title5</th>
</tr>
<tr>
<td>content1</td>
<td>content2</td>
<td>content3</td>
<td>content4</td>
<td>content5</td>
</tr>
<tr>
<td>content1</td>
<td>content2</td>
<td>content3</td>
<td>content4</td>
<td>content5</td>
</tr>
<tr>
<td>content1</td>
<td>content2</td>
<td>content3</td>
<td>content4</td>
<td>content5</td>
</tr>
</table>如上面这个表格。表头就用th，语义非常好。也便于css使用不同的标签来给予不同的样式。与此同时，使用col来控制每一列的宽度（第一个留空，就表示自由拉伸）。这样，就不用在每一个TD里面去写宽度了。代码量非常的精简。
也不要在css中去控制宽度，只要给予table的宽度为100%即可。
这样做的好处是什么？就是在不同的地方可以使用同一个表格构架，根据展示内容的不同，给予不同的宽度即可。
一般来说，一个横列的表格和一个纵列的表格，两个样式，即可搞定一个网站后台的所需了。
当然，这篇文章只是我这么多年的工作的总结，如果有不对的地方，欢迎斧正！
腾讯云开发者
