首页 > SEO优化 > 正文

SEO学习群讲座一：网页代码知识的基本介绍

发布-kenwu | 查看- | 发表时间-2009-10-10

本文是伍锐锋于2009年10月10日在SEO学习群的SEO系列讲座的第一讲“网页代码知识的基本介绍”的讲课实录，该讲座在晚上十点半开讲，主要针对HTML初学者和SEO爱好者开讲，讲座内容主要分三PART：
一、知识讲解；
二、疑问解答；
三、练习；
 SEO学习群群号：76862591（本群将不定期举办相关的SEO课程培训，欢迎加入交流学习）

讲课内容实录如下

 

领导(18470563) 
22:12:46
呢度开课吗？
领导(18470563) 
22:12:50
呵呵
ken(523585220) 
22:14:18
是的
ken(523585220) 
22:32:34
各位朋友打扰啦
领导(18470563) 
22:33:13
呵呵
领导(18470563) 
22:33:17
开课了
ken(523585220) 
22:34:06
我们的系列讲题是SEO，今天主要讲讲网页代码知识的基本介绍先啦
ken(523585220) 
22:34:54
什么是SEO呢，
ken(523585220) 
22:35:10
SEO是Search Engine Optimization的缩写，用英文描述是to use some technics to make your website in the top places in Search Engine when somebody is using Search Engine to find something，翻译成中文就是“搜索引擎优化”，一般可简称为搜索优化。与之相关的搜索知识还有Search Engine Positioning（搜索引擎定位）、Search Engine Ranking（搜索引擎排名）。 
ken(523585220) 
22:35:30
这是网上描述的标准定义了
ken(523585220) 
22:36:21
那我们为什么要做SEO呢，SEO有什么作用呢
ken(523585220) 
22:36:46
其实SEO的目的就是：提升网站关键词在搜索引擎的排名，获得目标流量
ken(523585220) 
22:37:10
具体来说有三点：
ken(523585220) 
22:37:28
为网站增加目标流量，让更多的潜在客户找到你；（针对企业）
ken(523585220) 
22:38:01
第二点是获取大量的流量，投放广告赚取广告费用；（针对个人站长）
ken(523585220) 
22:38:21
第三点是寻找商家合作，利润分成（针对个人站长）
ken(523585220) 
22:38:51
作为个人网站要通过SEO赚钱，主要有两种方式，
ken(523585220) 
22:39:30
一是卖产品，二是通过流量赚取广告费用，具体做那种是视个人实际情况而定，卖产品则需要拥有较具竞争力的商品来源，而赚流量则需要选择一些搜索量大的词去做，这方面需要观察和分析，寻找得当则可事半倍。
ken(523585220) 
22:40:02
撑握SEO并不难，也不需要撑握太多的网站技术，只要撑握一些简单HTML标记知识，了解基本的SEO原理就可以去做，今天先给大家讲讲网页相关的一些知识。
ken(523585220) 
22:40:34
下面开始进入今天的主题，呵呵
领导(18470563) 
22:40:40
恩恩
领导(18470563) 
22:40:42
好
ken(523585220) 
22:40:54
什么是HTML文件呢 
ken(523585220) 
22:42:07
我们平时上网都可注意到网页的后缀一般都有html或htm,这一个个HTML文件就是一个个的网页，通过互相链接就连成一个网站了。
ken(523585220) 
22:43:06
细心的朋友可能会发现，还有一些是以PHP，ASP，ASPX等后缀结束的，这又是怎么回事呢
ken(523585220) 
22:44:02
其实这些都是动态的程序语言，HTML则是静态的标记语言，有什么区别呢
ken(523585220) 
22:44:34
是不是有动画的就是动态，没有动画的就是静态网页呢
ken(523585220) 
22:44:56
其实不是的，HTML网页里也可以插入动画
ken(523585220) 
22:45:58
它们的主要区别是动态的程序语言会与数据库发生交互，而静态的HTML标记语言则不具备这种功能，只能单纯地展示信息
小白(292366627) 
22:46:22
哦哦
ken(523585220) 
22:46:51
但它们都有一个共同点：
ken(523585220) 
22:47:56
就是我们通过浏览器（如IE）去访问它时，所有的动态程序语言都是以HTML标记在前台输出
领导(18470563) 
22:48:46
系甘PHP，ASP，ASPX等？
ken(523585220) 
22:49:55
因为所有的浏览器只能识别HTML标记，不管是PHP还是ASPX页面它其实在服务器端已经将对应的程序语言转化成HTML标记输出到浏览器了
ken(523585220) 
22:50:21
比如大家看这里：http://www.bycoop.com/index.aspx
ken(523585220) 
22:50:51
再看看：http://www.bycoop.com/index.html
ken(523585220) 
22:51:26
分别右键相应的页面点击“查看源代码”，
ken(523585220) 
22:52:58
大家对比一下可以有什么发现，
ken(523585220) 
22:53:36
有看到吗？
小白(292366627) 
22:55:46
只有打开网址吧？
ken(523585220) 
22:56:15
分别右键该页面然后选择“查看源文件”
simplism(583725722) 
22:56:40
没这个选项
simplism(583725722) 
22:56:48
编码就有
ken(523585220) 
22:57:06
在空白处点右键
simplism(583725722) 
22:57:22
哦
ken(523585220) 
22:57:48
或者点击查看－》源文件也可以，
ken(523585220) 
22:58:02
然后仔细对比一下两个页面的源文件可以发现其实两个页面的源文件是一样的
ken(523585220) 
22:58:58
所以网页的最基本组成就是HTML标记
ken(523585220) 
22:59:14
HTML的英文全称是Hypertext Marked Language，中文叫做“超文本标记语言”。 
simplism(583725722) 
22:59:25
是
simplism(583725722) 
22:59:36
知
ken(523585220) 
22:59:40
和一般文本的不同的是，一个HTML文件不仅包含文本内容，还包含一些Tag，中文称“标记”。 
simplism(583725722) 
22:59:42
接着讲得啦
ken(523585220) 
22:59:56
一个HTML文件的后缀名是.htm或者是.html。 
用文本编辑器（即记事本）就可以编写HTML文件。 
simplism(583725722) 
23:00:13
继续
ken(523585220) 
23:00:20
下面是重点了
ken(523585220) 
23:00:34
先别插话啦

ken(523585220) 
23:00:40
下面我们来看看一个基本HTML页面的结构
ken(523585220) 
23:01:32
<html>
<head>
<title> HTML示例</title>
</head>
<body>
这是我的第一个网页 <b>这里的文字会加粗显示。</b>
<a href=http://www.ken-wu.cn>伍锐锋的网站</a>
</body>
</ html> 
ken(523585220) 
23:02:23
 大家打开记事本把上面的代码复制进去
ken(523585220) 
23:02:48
保存为first.html
ken(523585220) 
23:03:18
然后双击在浏览器打开看看效果
ken(523585220) 
23:05:32
大家有没有做出来
ken(523585220) 
23:05:41
？？
领导(18470563) 
23:06:11
做出了
领导(18470563) 
23:06:31
 
simplism(583725722) 
23:06:47
做出了
立邦师兄(61672498) 
23:06:49
哈哈 
ken(523585220) 
23:07:24
嗯嗯 好，不错
ken(523585220) 
23:07:57
HTML语言其实就是文本标记语言，与我们平时的txt文本相比就是多了一些标记（即Tag)，下面我们拿上面的例子来分析。
ken(523585220) 
23:08:45
这个文件的第一个Tag是<html>，这个Tag告诉你的浏览器这是HTML文件的头。文件的最后一个Tag是</ html>，表示HTML文件到此结束。
ken(523585220) 
23:09:29
在HTML文件里所有的标记都由开始部分和结束部分构成
ken(523585220) 
23:09:51
结束标记比开始标记多了一个/
ken(523585220) 
23:11:22
在<head>和</head>之间的内容，是Head信息。Head信息是不显示出来的，你在浏览器里看不到, 比如上面例子中的title标记之间的内容就没有在网页中显示出来。
ken(523585220) 
23:12:06
但是这并不表示这些信息没有用处。比如你可以在Head信息里加上一些关键词和把TITLE描述得当一些，有助于搜索引擎能够搜索到你的网页。
ken(523585220) 
23:12:31
在<title>和</title>之间的内容，是这个文件的标题。你可以在浏览器最顶端的标题栏看到这个标题。
ken(523585220) 
23:12:51
大家有没注意到刚才网页的标题栏是什么呢
simplism(583725722) 
23:13:29
这是我的第一个网页
领导(18470563) 
23:13:18
 
ken(523585220) 
23:13:41
就是<title> HTML示例</title>，在浏览器的左上角显示出来
ken(523585220) 
23:13:54
是HTML示例
ken(523585220) 
23:14:39
标题在写的时候要注意要包含的关键词，这是搜索引擎比较看重的一个地方
ken(523585220) 
23:14:57
好，继续
ken(523585220) 
23:15:12
在<body>和</body>之间的信息，是正文，就是我们在浏览器看到的内容。
ken(523585220) 
23:15:32
在<b>和</b>之间的文字，用粗体表示。<b>顾名思义，就是bold的意思。
ken(523585220) 
23:16:01
HTML文件看上去和一般文本类似，但是它比一般文本多了Tag，比如<html>，<b>等，通过这些Tag，可以告诉浏览器如何显示这个文件。
ken(523585220) 
23:17:15
body, p, title这些标记都是HTML元素，HTML元素用来标记文本，表示文本的内容
ken(523585220) 
23:17:56
HTML元素用Tag（即标记）表示，这些标记以<开始，以>结束。 
ken(523585220) 
23:18:35
标记通常是成对出现的，比如<body></body>。起始的叫做Opening Tag（开始标记），结尾的就叫做Closing Tag（结束标记）。 
ken(523585220) 
23:18:55
目前HTML的Tag不区分大小写的，比如，<HTML>和<html>其实是相同的。
ken(523585220) 
23:19:27
HTML元素可以拥有属性，属性可以扩展HTML元素的能力。
ken(523585220) 
23:19:42
比如你可以使用一个bgcolor属性，使得页面的背景色成为红色，就像这样：
ken(523585220) 
23:19:56
<body bgcolor="red"> 
ken(523585220) 
23:20:34
大家把刚才的网页里的 body改成上面的样子就可以看到网页的背景变成红色了
ken(523585220) 
23:21:52
属性通常由属性名和值成对出现，就像这样：name="value"。上面例子中的bgcolor就是name，red就是value，属性值一般用双引号标记起来，像这样"red"。
ken(523585220) 
23:22:40
好啦，关于HTML代码的相关知识今天主要就讲到这里啦，大家有什么疑问可以提出来
ken(523585220) 
23:25:02
如果暂时没问题就先来做个练习啦，用刚才的知识就可以做出来的了，
ken(523585220) 
23:25:58
建立一个网页
A、标题为“我的第一个网页”；
B、建立页面的背景色为黄色（yellow)，第一个字加粗；
C、加上一个链接指向百度;
ken(523585220) 
23:26:13
大家试试看？
simplism(583725722) 
23:31:54
 
ken(523585220) 
23:32:35
对了，就是这样

作者：伍锐锋(ken wu)
原载：网络百科：十万个为什么
版权所有，转载时必须以链接形式注明作者和原始出处及本声明。


或许你还对下面的文章感兴趣

◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。

最新文章
最近评论
访客留言
订阅本站
feedsky
QQ邮箱
抓虾
google reader
my yahoo
鲜果
哪吒
Copyright www.ken-wu.com All Rights Reserved. 粤ICP备11071653号