之前一直是开发后台的，这段时间由于公司项目的关系，开始前端的开发，同时前端也是自己一个比较感兴趣的内容。之前对于前端，可谓样样都懂点，样样又都不懂。

《编写高质量代码-web前端开发修炼之道》这本书没有讲太多的理论知识，而是通过大量的实践和技巧来帮助你对web前端的修炼，值得一读。本系列博客也主要会分成三部分：HTML，CSS，JavaScript。

高质量的HTML篇

HTML的标签从设计之初就考虑到了语义，而不是像下面这个例子一样，毫无语义可言：

 1 
 2          
logo
 3          
 4              
菜单一
 5              
菜单二
 6              
菜单三
 7       
 8 
   9 
......
10 
11           
xxx版权所有
12           
关于我们
13           .....14 
  

整个篇幅都是div，虽然说显示出来的后的美观程度可能并不受影响，但是，其一，搜索引擎看不到视觉效果，看到的都是网页的代码，而搜索引擎会通过标签来判断内容的语义；其二，这可能对以后前端的重构带来麻烦；其三，这完全不是一个编写高质量代码的人写出来的代码。

下面是一些容易被忽略的标签语义对照，其他常用的可以去w3school上查询：

标签名

中文对照

dl

定义列表

dt

定义术语

dd

定义描述

address

地址

var

变量

em

加重

粗体

斜体

那么，虽然我们知道了各种标签的语义，在编写HTML时，怎么才知道真正的使用合理了呢？

去掉样式，看网页结构是否组织良好有序，是否仍然有很好的可读性。

换句话就是说，可以通过某些工具，去掉网页中全部的CSS样式，在查看网页时，结构依然清晰。这个工具，推荐大家使用FireFox中的web developer，安装好后就是如下效果了：

就以百度首页为例，再去除了所有CSS后，展示情况依然看到比较清晰的结构信息，标签的使用上也绝不是依靠div堆砌出来的，而是灵活运用了诸如p、span、ul等的标签：

在语义化标签使用时应该注意的一些其他问题

尽可能少地使用无语义标签div和span，这样有利于整体网页的展示速度；在语义不明显，即可使用p也可以使用div的地方，尽量使用p，因为p默认情况下有上下间距，去掉样式后可读性好，对兼容性特殊的终端有利；不要使用纯样式标签，例如b、font和u等，改用CSS来设置。语义上强调的文本可以包括在strong或者em标签里，strong和em都有“强调”的语义，其中strong默认样式是加粗，em则是斜体；块级元素不要包含在内联元素中。

比如说这种情况就是错误的（span为内联元素，div为块级元素）……
……

随着HTML5的普及，语义化标签也显得越来越重要，例如最开始那个用div堆砌出来的HTML经过改造，以至于从肉眼上，我们就能够看到语义，O(∩_∩)O~

      
      logo     
    
……