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

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

1.去掉不必要的div标签

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

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

优化后的代码:

2.使用语义化标签

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

优化后的代码:

三.减少div的使用

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

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

没有优化的代码:

 <!DOCTYPE html>

 <html lang="en">

     <head>

         <meta charset="utf-8">

         <style type="text/css">

                 .date{

                     width: 50px;

                     height: 50px;

                     padding-top: 10px;

                     background: #CCC;

                     text-align: center;

                 }

                 .day{

                     font-style: italic;

                 }

                 .mth{

                     text-transform: uppercase;/*定义文本的大小写状态,此属性对中文无意义 */

                 }

         </style>

     </head>

     <body>

         <div class="date">

             <div class="day">27</div>

             <div class="mtn">may</div>

         </div>

     </body>

 </html>

优化之后的代码:

 <!DOCTYPE html>

 <html lang="en">

     <head>

         <meta charset="utf-8">

         <style type="text/css">

                 .date{

                     width: 50px;

                     height: 50px;

                     padding-top: 10px;

                     background: #CCC;

                     text-align: center;

                 }

                 span{

                     text-transform: uppercase;

                 }

         </style>

     </head>

     <body>

         <p class="date">

             27

             <span>may</span>

         </p>

     </body>

 </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”>的注释.

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

  1. 前端工程师必须要知道的SEO技巧(1):rel=nofollow的使用

    前提:最近我在找工作,想面试一些关于前端的工作,被问到了一些关于SEO优化的问题.我深深的感觉我所回答的太过于表面,没有深入.所以,又把SEO的内容看了一遍.自己总结如下:有的是看的其他博友的贴子,发 ...

  2. 前端工程师必须要知道的HTTP部分

    1. IETF组织制定的标准 rfc7234: https://tools.ietf.org/html/rfc7234 --- 原来的2616以被废弃 2. 格式 HTTP分为 请求Request 和 ...

  3. 每个极客都应该知道的Linux技巧

    每个极客都应该知道的Linux技巧 2014/03/07 | 分类: IT技术 | 0 条评论 | 标签: LINUX 分享到:18 本文由 伯乐在线 - 欣仔 翻译自 TuxRadar Linux. ...

  4. 几个超级实用但很少人知道的 VS 技巧

    大家好,今天分享几个我知道的实用 VS 技巧,而这些技巧我发现很多人都不知道.因为我经常在工作中遇到:我在同事电脑上解决问题,或在会议上演示代码示例时,使用了一些 VS "骚"操作 ...

  5. 几个超级实用但很少人知道的 VS 技巧[更新]

    大家好,今天分享一些实用的 VS 技巧,而这些技巧我发现很多人都不知道.因为我经常在工作中遇到:我在同事电脑上解决问题,或在会议上演示代码示例时,使用了一些 VS "骚"操作,他们 ...

  6. 前端程序员应该知道的15个 jQuery 小技巧

    下面这些简单的小技巧能够帮助你玩转jQuery. 返回顶部按钮 预加载图像 检查图像是否加载 自动修复破坏的图像 悬停切换类 禁用输入字段 停止加载链接 切换淡入/幻灯片 简单的手风琴 让两个div高 ...

  7. 前端程序员应该知道的 15 个 jQuery 小技巧

    下面这些简单的小技巧能够帮助你玩转jQuery. 返回顶部按钮 预加载图像 检查图像是否加载 自动修复破坏的图像 悬停切换类 禁用输入字段 停止加载链接 切换淡入/幻灯片 简单的手风琴 让两个div高 ...

  8. 【译】前端开发者都应知道的 jQuery 小技巧

    回到顶部按钮 通过使用 jQuery 中的 animate 和 scrollTop 方法,你无需插件便可创建一个简单地回到顶部动画: // Back to top $('a.top').click(f ...

  9. 开发人员应该知道的SEO

    搜索引擎是如何工作的 > 如果你有时间,可以读一下谷歌的框架: http://infolab.stanford.edu/~backrub/google.html > 这是一个老的,有些过时 ...

随机推荐

  1. java 代码调用函数

    sql 中调用函数 getDistance(lng1 float, lat1 float, lng2 float, lat2 float) 例如: SELECT id, f_seller_id sel ...

  2. python核心编程2 第十一章 练习

    11-2 函数.结合你对练习5-2的解,以便你创建一个带一对相同数字并同时返回它们之和以及产物的结合函数. multiply = lambda x, y: x * y if __name__ == ' ...

  3. JS对象和数组在谷歌浏览器中引用存储的表现

    大家都知道JS的数据分为基本类型和引用类型.具体什么不说了,今天主要说说对象和数组作为引用类型在谷歌浏览器中的表现. 首先,问题是这么发现的.我在控制台使用console打印了一个数组,然后对数组进行 ...

  4. 前端javaScript经典面试题

    1.alert(1&&2),alert(1||0) alert(1&&2)的结果是2 只要“&&”前面是false,无论“&&”后面是t ...

  5. 判断不同浏览器，加载不同的css和js文件

    在低版本的IE中,条件注释还有效果,但是在ie9,10,11浏览器中,条件注释不起作用. 在网上找了个校验ie的方法. function isIE(){  if (window.ActiveXObje ...

  6. Hadoop Eclipse 插件制作以及安装

    在本地使用Eclipse调试MapReduce程序,需要Hadoop插件,笔摘记录下制作安装过程. 准备工作(hadoop-2.6.0为例): 搭建好Hadoop环境 下载Hadoop安装包,解压到某 ...

  7. pynlpir + pandas 文本分析

    pynlpir是中科院发布的一个分词系统,pandas(Python Data Analysis Library) 是python中一个常用的用来进行数据分析和统计的库,利用这两个库能够对中文文本数据 ...

  8. hive的desc命令

    desc命令 desc 命令是为了展示hive表格的内在属性.例如列名,data_type,存储位置等信息.这个命令常常用在我们对hive表格观察之时,我们想要知道这个hive各个列名(基于这些具体列 ...

  9. Drupal 网站漏洞修复以及网站安全防护加固方法

    drupal是目前网站系统使用较多一个开源PHP管理系统,架构使用的是php环境+mysql数据库的环境配置,drupal的代码开发较为严谨,安全性较高,但是再安全的网站系统,也会出现网站漏洞,dru ...

  10. vuls安装记录

    第一步安装go环境apt-get install golang-go(显示出错,go版本apt安装太低,apt-get purge golang-go卸载后手动安装,必须1.8.3以上) 还需将/us ...