陈超群’s Blog

做WEB开发都有三年多了，最近一年都在负责前端开发，发现进步不怎么大，现在决定重新温习基础，把前端技术打扎实。

以前做开发只管界面看得过去，附合美工给的界面就OK了，也没有考虑到太多的SEO，跟着大众走，看别人网站上用DIV，那就用DIV，列表用UL ,就用UL，有时候添加一个区块想也不用想，随便来一个SPAN或者DIV，标签乱用，反正能用CSS控制样式就行了。你是不是也是这样呢？告诉你，这样是很不正确的，人可以通过视觉的划分判断内容的语义,搜索引擎看到的只是代码。搜索引擎只能通过标签来判断内容的语义。

如果你知道WEB标准，应该知道结构与表现的分离。分离结构与表现的另一个重要方面是使用语义化的标记来构造文档内容。一个 XHTML 元素的存在就意味被标记内容的那部分有相应的结构化的意义，没有理由使用其他的标记。换句话说，不要让 CSS 使一个 HTML 元素看起来就像另一个 HTML 元素，比如用<div>来代替<p>标记标题。既然W3C弄出这么多的标签，每个标签肯定有它的含义。

如果无视标签语义和默认样式，所有标签都用div，其实也是可以写出来视觉效果很好的页面，只要你灵活运用CSS。但是那样的话虽然视觉上达到了要求，但是整个页面一点语义都没有，搜索引擎还是看不懂。所以，要记住：

结构(html)才是重点，样式(css)是用来修饰结构的。所以，要先确定html，确定标签，再来选用合适的css。

一般来说，所有的标签都会有一个默认的样式，所以一个简单的判断网页标签语义是否良好的方法就是：去掉样式，看网页结构是否组织良好有序，是否仍然有很好的可读性。

另外，值得重点提及的是h标签，h标签的语意是标题，搜索引擎对这个标签比较敏感，特别是h1,和h2。一个语义良好的页面，h标签应该是完整有序没有断层的。也就是说，要h1,h2,h3,h4这样推下来，不要h1,h3,h4，漏掉h2。一个结构良好的网页，h标签可以组织起一个网页的大纲。

接下来的时间，慢慢研究下每个标签的含义以及默认的显示样式吧。今天就到这。