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

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

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. 【shell脚本学习-2】

    #!/bin/bash - #echo do you have exetuate this project \n printf "please input your passwd" ...

  2. js 判断两个时间相差的天数

    judgeDay(sDate1, sDate2) { const sDate1 = `${new Date(sDate1).getFullYear()}-${new Date(sDate1).getM ...

  3. PHP----composer安装和TP5验证码类

    妈的,想用TP5做个项目,用到登录验证码了,结果煞笔TP5不内置了,需要用Composer,用吧,来下载 1.安装Composer 1.1 更新 sudo apt-get update 1.2 安装w ...

  4. NO-ZERO(空格补全)

    The NO-ZERO command follows the DATA statement REPORT Z_Test123_01. DATA: W_NUR(10) TYPE N. MOVE 50 ...

  5. SELECT(データ取得)

    WHERE 句は.満たすべき条件を指定することにより選択される行数を制限します. WHERE 句は.SELECT 命令と同様に OPEN CURSOR.UPDATE.および DELETE 命令でも使用 ...

  6. The Road to learn React书籍学习笔记(第三章)

    The Road to learn React书籍学习笔记(第三章) 代码详情 声明周期方法 通过之前的学习,可以了解到ES6 类组件中的生命周期方法 constructor() 和 render() ...

  7. Delphi中客户端获取数据库更新信息（更新条数）

    1.SQL语句 from tb where xxx='XXX') //不存在,则插入数据 begin insert into tb(xxx) values('XXX') //这里自己定义,插入或更新都 ...

  8. python基础——重访类型分类

    python基础--重访类型分类 对象根据分类来共享操作:例如,字符串.列表和元组都共享诸如合并.长度和索引等序列操作. 只有可变对象(列表.字典和集合)可以原处修改:我们不能原处修改数字,字符串.元 ...

  9. 用travis-ci编译android版nodejs

    第一步: fork 第二步: 添加.travis.yml 在repository根目录添加.travis.yml文件,在其中添加以下内容. language: c before_install: - ...

  10. 「日常训练」 Soldier and Traveling (CFR304D2E)

    题意 (CodeForces 546E) 对一个无向图,给出图的情况与各个节点的人数/目标人数.每个节点的人只可以待在自己的城市或走到与他相邻的节点. 问最后是否有解,输出一可行解(我以为是必须和答案 ...