前端工程师必须要知道的SEO技巧(2):制作比设计还要漂亮的代码(内容和语义化代码)实现下

提醒自己:上一篇文章属于纯理论的文章,我自己有的部分之从网上摘抄的,我自己也是不理解的.或许过一段日子我就能全明白了.我自己还是喜欢实战,做几个例子就明白了.

怎么做让自己网页的标签来实现语义化,我直接上案例:

1.去掉不必要的div标签

看到好多人都在form或ul列表的外面嵌入一个div结构,为什么要嵌入这个你不需要的div那?你可以通过给相应的语义化的标签定义,引用新的css就可以达到同样的效果.

案例展示的是如何去掉div标签并定义一个新的样式给form标签.

优化后的代码:

2.使用语义化标签

在页面制作过程中，应尽量使用语义化的标签（如：h1定义标题，P定义段落文字，ul定义列表项目），即使不定义css样式，你的文档也是有意义的。

优化后的代码:

三.减少div的使用

链接导航效果,用p标签结构代替div标签结构更有意义.

用一个span标签代替了原来的两个div标签结构,但他们实现的布局结构是一样的

没有优化的代码:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="utf-8">
 5         <style type="text/css">
 6                 .date{
 7                     width: 50px;
 8                     height: 50px;
 9                     padding-top: 10px;
10                     background: #CCC;
11                     text-align: center;
12                 }
13                 .day{
14                     font-style: italic;
15                 }
16                 .mth{
17                     text-transform: uppercase;/*定义文本的大小写状态,此属性对中文无意义 */
18                 }
19         </style>
20     </head>
21     <body>
22         <div class="date">
23             <div class="day">27</div>
24             <div class="mtn">may</div>
25         </div>
26     </body>
27 </html>

优化之后的代码:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="utf-8">
 5         <style type="text/css">
 6                 .date{
 7                     width: 50px;
 8                     height: 50px;
 9                     padding-top: 10px;
10                     background: #CCC;
11                     text-align: center;
12                 }
13                 span{
14                     text-transform: uppercase;
15                 }
16         </style>
17     </head>
18     <body>
19         <p class="date">
20             27
21             <span>may</span>
22         </p>
23     </body>
24 </html>

实现的效果如左图.

四.格式化代码

你要保持格式化你的代码结构,这样容易阅读和调试.如果你使用的是Adobe Dreamweaver,你点击Commands > Apply Source Formatting就很容易实现代码的格式化.

五.注释闭合div标签
开发模版程序的时候(比如WordPress themes)，模版程序分成几个不同的文档index.php, header.php, sidebar.php, and footer.php等.同时,你也应该经常的注释你的div标签结构,不至于自己晕乎。当我看到</div><!– /wrapper –>时，我就能清楚的辨认出是<div id=”wrapper”>的注释.