网页搜索引擎优化(天空飘来五个字儿~~代码不是事儿~~ )

　　网页搜索引擎优化(天空飘来五个字儿~~代码不是事儿~~

)

　　天上飘着五个字~~~代码没问题~~~

　　各位亲们好，我们的建站教程即将进入高潮。本期我们将开始深入讲解各种前端知识。准备好了吗，朋友们？（其实就是打开DW和PS而已……哈哈哈）

　　

　　说到这里，我在上一篇文章中问了我的朋友，这篇文章会不会有很多东西，要不要做视频教程，大家真的没有辜负我的期望。. . . . . . . . . . 一个回复都没有回复！！！

　　

　　好，我们继续以文章的形式发布。太长的话会分章节，免得小伙伴们头晕。嘿嘿嘿，主要是我一次写了这么多，晕了，嘿嘿嘿嘿。

　　上一篇我们讲了千篇一律的速度，嗯，有小伙伴吐槽低级代码。好吧，低水平的练习真的不起作用，对吧？你看，你看，没有什么可抱怨的，所以同志们，童鞋们，生活可不是那么容易满足的。就像我在上一篇文章末尾所说的那样，太容易满足容易被江湖淘汰。

　　

　　嘿，我什么都不会说。为了造福广大江湖朋友，我将高级功法拉出来。

　　首先，我们要忘记上一篇的过程，所以低级功法不会被自己废掉，高级功法怎么学，对吧？

　　所以，现在，我们有了之前个人网站的设计图，表格告诉我你还没有，神马？真的是木头？那就别着急看之前的教程设计。

　　

　　前端改造要遵循的江湖规律

　　一、关于页面打开速度

　　哟西，我们有设计图。作为一个练高功的有前途的小伙子，剪图前要先想一想——为什么会有高功，有什么区别？

　　这将涉及前端的存在。如果前端重构可以像我们上一篇那样随便做，那么老板们肯定要为前端付出这么高的薪水。

　　一个网页最重要的是什么？哎，要是直播这么好呢，现在可以找个童鞋给大家笑死了。

　　

　　嗯，说到最重要的一点，一定是开放时间。在之前的研究中，我们有很多重要的规律可以参考，比如五秒法则——消费者研究表明，消费者对任何一种商业信息传播的兴趣取决于五秒的时间（无论是电视广告，报纸新闻，或者在线信息），如果你不能在五秒钟内让消费者对你的信息感兴趣，那么消费者的下一个兴趣点可能会落在你的竞争对手身上。

　　因此，网页的打开时间一定要快。这是你的第一个障碍，也是你让用户继续前进的全部努力。那么，如何让网页打开更快呢？

　　这很简单。缩小网页文件大小。在同样的网速下，50k 的网页肯定比 500k 的网页快十倍。

　　那么第一个重要的切图点就出来了。我们要尽可能的使用代码来达到设计图的效果。绝对不可能像上一篇那样切大图。一张图几十上百K。不合理，不科学，不人道！

　　

　　二、关于那些可怜的搜索引擎爬虫

　　每个人都必须知道或见过SEO这个词。SEO是英文Search Engine Optimization的缩写，中文翻译为“搜索引擎优化”。SEO是指通过调整优化网站的内外站点，提高关键词在搜索引擎中的排名，使网站能够满足搜索引擎收录的排名要求并提高关键词在搜索引擎中的排名。用户带来网站，获得免费流量，产生直销或品牌推广。

　　也就是说，如果你不是为了自己而做 网站，你必须关心这一点。那么，如何做好SEO呢？

　　一般来说，SEO其实分为两部分，关键词优化和网站优化。关键词 优化由专业人员完成，不属于前端范畴。网站 优化 这部分是设计和前端重构需要做的。

　　网站优化主要包括以下内容：META标签的优化、内链的优化、网站地图的建立、每个网页最多可以从首页点击四次等。

　　接下来，让我们来解释一下字幕中的讨厌爬虫。搜索引擎的工作原理与此类似。一个巨大的母亲生下了无数的小蜘蛛。这些小蜘蛛每天都在广阔的互联网中爬行。找到一个新的地方后，小蜘蛛会小心翼翼地爬过这个地方的每一寸地方，然后把他们学到的所有信息都放进去。反馈给妈妈。这时，妈妈会过滤这个地方的信息，把不可理解的扔掉，把没用的扔掉，把剩下的可以理解的留给记忆，给这个信息一个序号。然后每天都有很多人来问妈妈这个地方在哪里。当然，很多人的问题都很模糊。此时，妈妈会提取记忆中与问题关键词相关的信息，按照序号排列在提问者面前。他自己选择。这是搜索引擎的一般原理，随便理解一下，以后写代码的时候就知道为什么会这样写了。写这么长的一段真的很头晕，不知道你们有没有头晕，呵呵。. . 呵呵呵呵。. .

　　

　　三、可扩展性和可维护性

　　你不觉得你的网站只有一页，你是想展示自己的作品，还是添加*敏*感*词*，或者更神奇的是，添加自己的博客功能让它肿起来？现在，当你有一天这样想的时候，打开你很久以前写的页面，到底是什么？这个是来做什么的？这段代码实现了什么？

　　这是Web代码的可扩展性和可维护性的必要性。

　　模块化、文件夹层级、CSS文件管理、JS文件、图片文件等，细节很多。有了良好的规划，网站添加节就不需要在重复的地方重写代码而造成混乱，例如幻灯片代码之类的标题。当您想要更新或修改之前的页面时，您也可以快速找到目标位置并实现您的目标，而不会破坏页面的内容和功能。

　　以上三点，请大家在设计重构时一定要理解并牢记在心。嗯，当然，现在可能还有一些毫无根据的童鞋，现在还一窍不通，不过没关系，回去看看练练一下就好了。骚年，任重而道远~~~

　　

　　开始编码

　　好了，介绍完这些烦恼，我们正式开始编码，拿出之前的设计图，打开你的DW，开始重构吧。

　　一、创建文件夹

　　看到这里，有的朋友可能会说，开什么玩笑，右键新建文件夹，你还放在这里说，你是不是在欺骗大家的感情？

　　嘿嘿，骚年不激动，网站的文件不能乱放在一个文件夹里，至少要有这几个文件夹，images，css，js，这三个文件夹和网页文件存放在同一层，然后将你创建的css文件，js文件和剪切图像分别放在里面。

　　好的，现在我们打开DW，新建一个HTML文件，在title标签中写下你的网站名字，然后保存。文件名为 index.html。主页通常以这个名字命名，属于程序的默认识别。的主页名称。请注意，它不是标题之间的名称。同样，标题之间的名称是您的网页名称，保存文件的名称是文件名。

　　然后在网页文件的同级创建images、css、js三个文件夹。

　　二、全局重置和外部样式库

　　看名字，大概就能猜到重点了。这里，我们需要通过css来重置标签属性。为什么要重置？其实html标签都有固定的属性，比如h1是一级标题，h2是二级标题，b是加粗字体等等。在写网页之前，我们应该把这些默认属性全部清除为防止属性冲突之类的事情。

　　继续上一步，重新打开网页文件 index.html。这次我们将使用外部样式表，通常是外部样式表，以保证网页文件的体积和整洁。Emma，我想到的是内联样式和内部样式。外部样式的加载顺序和优先级要放在最下面作为补充说明，还有meta标签的关键词等，知识点太多了。

　　在DW，new-CSS中，我们得到了一个不同于新HTML的窗口，这就是CSS编写窗口。点击保存，将这个文件保存在刚刚创建的CSS文件夹中，命名为global.css，意思是全局的。其实这个名字有很深的含义，涉及到CSS的模块化，这里就不赘述了。

　　然后我们回到网页文件，在我们上次写内部样式的头部添加如下代码

　　

　　它是链接开头的部分，它链接到您刚刚创建的 css 文件。现在可以随时调用你在css文件中编写的css属性。

　　回到正题，css的全局重置，打开css文件，在里面输入这一段

　　

　　其实这个大段不用你自己去琢磨。各大网站已经基本形成了完整的标准。只需找到一个主要的 网站 并复制它。自己写是不可能的。写不出来，前端大神也不能独善其身。只是复制粘贴这种东西来维持这样的生活。

　　

　　还有一点要注意的是，字的灰色部分是评论，所以一定要养成好习惯~

　　嗯，之前的准备工作基本上就是这样。下一期，我们将继续开始详细的代码编写。见啦~~

　　-------------------------------------------------- ------------

　　以下是补充说明

　　内联样式：内联样式是使用 style 属性添加到元素的样式。

　　这是一个段落。

　　也就是说，它是直接添加到 HTML 元素中的。

　　内部（嵌入式）样式：

　　当单个文档需要特定样式时，应使用嵌入式样式表。您可以使用

　　外部风格：

　　当需要将样式应用于许多页面时，外部样式表是理想的选择。使用外部样式表，您可以通过更改一个文件来更改整个站点的外观。每个页面都使用标签链接到一个样式表。标签位于（文档的）头部：

　　浏览器将从文件 mystyle.css 中读取样式声明并根据它格式化文档。

　　可以在任何文本编辑器中编辑外部样式表。该文件不能收录任何 html 标签。样式表应以 .css 扩展名保存。以下是样式表文件的示例：

　　hr {颜色：西耶娜；}

　　p {margin-left:20px;}

　　正文 {背景图像:url("/images/back40.gif");}

　　不要在属性值和单位之间留有空格。如果你使用“margin-left: 20 px”而不是“margin-left: 20px”，它只适用于 IE 6，但不适用于 Mozilla/Firefox 或 Netscape。

　　优先：

　　内联样式 > 内部样式 > 外部样式

　　也就是说，如果当前标签在多个样式表中具有相同的属性（如颜色），并且属性冲突，浏览器会按照这个优先级显示样式。

　　关于元标记

　　元素可以提供有关页面的元信息，例如搜索引擎的描述和 关键词 以及更新频率。

　　标签位于文档的头部，不收录任何内容。标签的属性定义了与文档相关的名称/值对。

　　名称属性

　　name 属性以名称/值对的形式提供名称。HTML 和 XHTML 标记都没有指定任何预定义的名称。通常，您可以自由使用对您自己和源文档的读者有意义的名称。

　　“关键字”是一个经常使用的名称。它为文档定义了一组关键字。一些搜索引擎在遇到文档时使用这些关键字对文档进行分类。

　　像这样的元标记可能有助于索引到搜索引擎：