完美体育(中国)官方网站SEO教程 - 豆丁网

　　完美体育(中国)官方网站SEO教程 - 豆丁网SEO教程针对技术人员序：此教程绝非资料的堆积和复制，而是我甄选的一些最需要解决的问题。希望每一个技术人员认真阅读（最好在Word中打开“试图文档结构图”）。有任何疑问，请随时与我联络()。第一部分技术要点知识点：HTML（DOM）/CSS及布局精要请把教条主义教程忘得一干二净，让我们重新认识HTML和DOM先提两点：不要迷信网上泛滥的HTML教程（实际上，有相当一部分教程网站只是为了赚取流量而作），只看知名网站的教程（文末会列一个“白名单”，欢迎补充）不要迷信Dreamweaver等任何“宣称”可以不用手写HTML的软件。一定要手写，对自己所写的HTML做到心中有数。关于HTML（DOM），也就是我们通常所说的“页面源代码”。应该用数据结构的思想理解之。如下图所示，我们称之为“DOMTree”（DOM树）。它由结点（Node），比如“html”、“head”、“div”之间的关系产生。我们要对DOM非常熟悉。我们要对DOM有一个非常熟悉的概念。熟悉到什么程度？我认为，作为一个基本称职的Web前端工程师，思维要能轻松地在DOMTree和HTML代码之间切换。例如，看到上面的树形结构，应该立即能反应出以下的代码：htmlheadtitle{sometile}/title/headbodyh1/h1divp/p/div/body/html反之亦然：看到上面的代码，能画出上面的树形结构。不要畏惧CSS，其实它无非就那么几个经典问题了解了DOM和HTML代码的关系之后，理解CSS可谓是“手到擒来”：CSS，就是控制HTML的外观的代码。如何控制：通过控制每一个，或者某一组结点的样式来展现成二维的网页版面。这叫做CSS的选择器（Selector）选取。例如，我们可以控制某一个id为someID的结点：#someID{background-color:#f00}或者，一个idsomeID结点下，包括其本身在内的一个类为someClass（或多个类为someClass）结点#someID.someClass{background-color:#ff0}控制某一组：控制类为someClass的所有结点以及id为someID的一个结点.someClass,#someID{background-color:#00f}CSS的两个经典问题：盒子模型和浮动闭合（布局必备常识）简单的改变颜色，显然不足以应对我们的复杂需求。对于新手来说，在CSS布局中最重要的两点，一个是盒子模型，一个是浮动闭合。以下的内容，也是一个Web前端工程师的必备技能。1、关于盒子模型的理论资料参考：、关于浮动闭合的理论资料参考：长篇的理论资料看起来必然容易产生疲劳（如果你对理论非常感兴趣，看一看也很有好处）。可以概括为一些简单的原则：1、DOM结点的盒子模型上图中，中间的“Loremipsum….”是正文内容。也就是某一个div（或者任何结点）中的内容，包括你的图片、简单的文字连接（例如一个标题，或者关键词列表）、段落（例如文章，或者对某项产品的简要描述），等等。padding，可理解为这段内容在内部的间距。它不会延伸到border以外，作为背景的一种拓margin，可理解为在外界的间距。它不包括结点背景，也就是说，结点的背景被“封”在border内部，填满包括padding在内的所有区域。以下列举一个实例，来演示一个具体的div随着样式的改变，在页面中的呈现外观：（注意完美体育(中国)官方网站，在Firebug中调试页面，下面为HTML代码，上面为我们看到的页面）1、我们建立一个宽度100px，高度30px的div，并且内含文本“test”2、我们给这个div加上一个padding-left:5px的属性。这样，test文字左侧（div内部）就有一个5px的空间了。注意，这样会导致整个div占用的宽度由原来的100px变味了105px，这种改变，常常会让我们的一些布局“破裂”。所以，在设计的时候，这些一定要考虑好。下面讲到的浮动闭合，会详细讲解如何去做到完美。3、加上一个边框与上面一步引入padding一样，加上边框所导致的结果是，这个div的占有宽度为105px+2px+2px=109px4、再引入一个div可以看到，div2紧紧地靠在上面一个div的下面（不是右边，为什么呢，下面在浮动闭合相关的讲解中会提到）5、给这个新div一个margin可以看到，margin-top立即生效，div2和test两个div中间分开了。注意：下面一个div的border仍然紧贴“div2”，如果不是设置margin，而是设置padding，这时border就会紧贴了。这也就是上面提到的：padding表示这段内容在内部的间距；无论是test还是div2的背景，都没有影响到它们外面的区域。也就是说，margin是在外界的间距。2、DOM布局必备知识（浮动布局，可通俗理解为左右布局）作为一个优秀的Web前端工程师，一定要知道页面布局用css实现的原理。其实完美体育(中国)官方网站，最关键的核心，就是float式布局。叫做“浮动布局”，也可理解为“左右布局”。首先，要了解结点的显示（display）属性，最重要的两种：1、#someId{display:inline}这是行元素。这样的元素宽度根据其内容自动缩放，人为通过CSS制定它的宽度和高度是没有任何作用的。通常我们用它放一段文本，中间也可包含一些链接或者小图标。浅红色标注的，全部都是行元素结点（或者多个结点的集合，例如我用深红色标注出的标签）。2、#someId{display:block}这是块级元素。通常，会有一个具体的高度和宽度（可以是绝对长度，如100像素，也可以是百分比）。通常，放一块内容。比如：如上图所示，“块级元素”通常是一个大的（方块）布局内容。通常，“块级元素”里面还会许多内容，这些内容，也可以是一些“块级元素”，例如上图中的“紫色方块”在我们可以使用的众多HTML标签中，作为一个称职的Web前端工程师，一定要牢记最常见的几个HTML标签的默认display属性，比如最常用到的div、span标签：div{display:block}span{display:inline}{display:inline}页面布局，无外乎两种基本构造：左右，上下。我们看到任何设计图都不能惊慌，而应该冷静地将其分解。两个实例：任何布局，最终经过拆分，总能分解为若干个左右布局和上下布局的小结构。实现上下布局，非常简单，直接“堆砌”div 就可以了，比如： 然而，对于左右布局，则需要通过float 来完成： 不探讨理论，我用3 点简单概括左右布局的精要： 为所有的wrapper加上一个clearfix 的类（class），这个类应该定义在每一个页面的头部 （当然，你可以放到一个文件统一引用） .clearfix:after {content:.;display:block;height:0;clear:both;visibility:hidden;} .clearfix {display:inline-block;} Hidefrom IE Mac .clearfix{display:block;} Endhide from IE Mac 其间涉及到不同浏览器对浮动布局的解析原理，不用在意细节，奉行拿来主义即可作业： 叙述以下四个布局的设计思路。最好画图分析。(请于11 日下午9点之前提交) 回顾：20071031 的作业点评： 很高兴看到沈江波和胡琴及时地反馈了自己的思路。分析的不错，我觉得没有大问题。 不过，缺少一个总结。也许是我在提交作业的时候并没有要求。 毕竟，这只是4 张图，我们具体工作中，会有无数的不同的页面，如何去实现每一个页面， 我们需要一个“一通百通”的做法（思想），以做到“一劳永逸”、“手到擒拿”： 任何布局，都可划分为上下布局与左右布局。而左右布局，都需要有一个wrapper（理论上， 有些场合可以不要，但是初学者最好全部加上，这会保证100%安全），并且给这个wrapper 一个clearfix 的属性。 对了，请不要自称“美工”。现在你们的 title 应该是“Web 前端开发工程师”。要有“工程 师”的自信和严谨追求：） JavaScript/AJAX 前言（非技术细节） 这里不会涉及太多的技术细节，因为我在后面会为大家讲解如何利用 jQuery 这样一款优秀 的开源框架瞬间构建JavaScript 程序和AJAX 程序。 也许看到这里，你会有这样的疑问：为什么要讲解JavaScript 和AJAX？ 不妨回到 SEO 的根本：SEO 的目的是什么？ 这绝对不是管理人员才“有资格”过问的问题。 传统的项目开发，开发人员总是不关心这些问题。不称职的管理人员为了追求“短期回报”， 甚至会“扼杀”开发者在追溯某些问题的根源上的好奇心，而仅仅让开发者“按照规定行事” Web2.0 时代的到来，“Web 开发”率先进入扁平式的运作模式，这是“Web 开发”行业最有 趣的现象。作为一个Web 开发者，有权利知道企业整个Web 产品的最终目标，也有义务将 Web 产品的每一个细节把握到位。 回到上面的问题：SEO的目的是什么？ 最直观地从结果入手： SEO，Search Engine Optimization 搜索引擎优化。优化是一个客观的、技术性的概念，它的目的是为了SEM（Search Engine Marketing 搜索引擎营销），而SEM，则是为了搜索引擎能将你的页面排在其他网站之前。 那么，搜索引擎凭什么将你的页面排在别人之前呢？ 答案只有一个：用户 注意，只有这一个答案。你出了多少推广费用与此无关。百度之所以进行“推广”排名，是 因为他们作为一家上市公司，必须通过盈利以回报投资人，迫于核心投资方的压力，不得不 做出各种盈利的动作。而这种“推广”，显然是以牺牲用户体验为代价的。百度依靠它在国 内市场的垄断地位，这么做，是有“历史必然性”的。然而，我们千万不能因此忽视用户在 搜索引擎产品（如百度、google、yahoo 搜索、iask、soso，等等）中的重要特性。 搜索引擎不是傻子，它们的目的很简单：让用户找到自己想要的东西完美体育(中国)官方网站。如果一个用户在百度 搜索某一个关键词，结果前3 页都没有太多相关的信息，或者说高质量的信息，那么百度肯 定会瞬间丢掉市场。（切莫小看搜索引擎，他们有许多办法去判断信息质量） JavaScript 和AJAX 作为浏览器段的“经典技术”，在Web2.0 火热之后进一步“疯狂升温”， 其实，这是有原因的。随着大量的 Web 应用步入普通网名，AJAX 已经和“用户体验”密 不可分了！从意识形态来说，AJAX、JS 和“搜索引擎”一样，都是为了完善“用户体验”。 我们可以这样理解：在 DOM 开发中，为迎合 SEO，必然会有一些体验的损失，这些损失 则需要依靠AJAX、JS 来“弥补”，至于具体实例以及解决方案，后文将逐渐提出。