SEO新手必备HTML详解.docx

1、SEO新手必备HTML详解基础篇十天学会HTML（第一天）其实，学习HTML用不了10天的时间，不过我们慢慢来。HTML（HyperTextMarkupLangeage：超文本标记语言）是全球广域网上描述网页内容和外观的标准。1989年，欧洲料子物理实验室（CERN）的研究员TimBerners-Lee和 AndersBerglund两人创建了一种基于标记的语言，以方便研究人员在万维网上共享技术文件，它就是大名鼎鼎的HTML。HTML实际就是一个文本文件，使用一套特定标记（这些标记全都以尖括号“”括起来）将文档标注起来，当通过浏览器打开HTML网页时，由浏览器负责解析这些标记。并按预先定义的格

2、式显示出内容。所以学习网页制作的第一步就是学习HTML（不懂得HTML，使用像FrontPage、Dreamweaver等网页制作软件也可以做出像模像样的网页来，但我想你永远都将只是个菜鸟，入不了大虾之流）。对了，编写程序要有程序编辑器，那么写HTML要用什么编辑器呢？因为HTML是一种文本化的脚本语言，所以就可用最简单的文本编辑工具“记事本”来完成这个工作。接下来用一分钟时间我们来体验一下HTML的魅力吧。打开记事本，输入以下文字（注意：HTML中所有的标记必须在英文输入法下输入，这点很重要的哦！否则你的浏览可不干活，因为它不认识。还有HTML不区分大小写。）：我的第一个网页链接到红袖添香网

3、站接下来，将其保存为test.htm。双击打开看看，是不是出现了一个文字为：“链接到红袖添香网站”的超级链接。单击这个链接就会打开我的站点（你必须在线）。嘻，是不是有些成绩感呢？下面，我解释上面几个标记的含义：和是网页的开始与结束的标志，是一个包容标记（包容标记由一个开始标记和一个结束标记构成，聪明的你立刻就明白开始标记和结束标记大致是一样的，只是结束标记多了一个斜杠（“/”）；HTML的另一种标记是空标记，很快我们就会用到），一张网页中所有的内容都应放置其中。和是网页的标头文件。和 就放于其中，把网页的题目放在其中，打开这个网页文件时，标题就会显示在InternetExplorer的标题栏中

4、。像上面例子中的“我的第一个网页”。和是网页最主要的部分，所有要在网页上显示的内容都要放在这个包容标记之间。如要显示的文字、图片、表单等。一句话，一个网页文件应该是以标记开始，以结束；和之间的内容属于文件头部分；和之间的内容属于文件体部分。 好了，你现在也知道什么是HTML了。基础篇十天学会HTML（第二天）HTML标记表注：表示该标记属包容标记，即需要关闭标记。表示该标记属空标记,即不需要关闭标记。IE表示该标记只适用于InternetExplorer。NC表示该标记只适用于NetscapeCommunicator。反对表示该标记不为W3C所赞同，通常这标记是IE或NC自订，且己为众所支持，

5、只是HTML标准中有其它同功能或更好的选择。弃用表示该标记己为W3C所弃用，是过时的标记，但HTML具向下兼容的特性，不用担心新浏览器不支援旧标记。新表示该标记是HTML4.0中新增的。基础篇十天学会HTML（第三天）排版标记本节课我们解释以下9个排版标记的使用。从这节课开始，请学友们把文章中提供的源代码复制到网页编辑器中，保存后再用IE打开文件查看显示效果。；：像很多电脑语言一样，HTML文件亦提供注解功能。浏览器遇到这个标记就会忽略此标记中的文字（可以是很多行）而不作显示，一般使用目的：为文中不同部份加上说明，方便日后修改。这对较复杂或非私人网页尤其重要，它不单是提醒自已，亦提醒你的同事这

6、部分做什么、那部分做什么。例子：用作版权声明。假如你不希望别人使用或复制你的网页，可加上警告字眼。例子：称为段落标记。作用：为字、画、表格等之间留一空白行。本来是一包容标记，标于一段落的头尾，但从HTML2.0开始己不需要作结尾。的常用参数：如：align=center可选值：right,left,center。默认值：align=left注：align是用于设置对齐的参数。其中，right为右对齐；left为左对齐；center为居中。例子：1、红袖添香是一个可以写日记，学习ASP的网站。红袖添香是一个可以写日记，学习ASP的网站。2、红袖添香是一个可以写日记，学习ASP的网站。红袖添香是一

7、个可以写日记，学习ASP的网站。说明：例1中的两句话在同一段显示；而例2中的两句话分两段显示。：称为换行标记。作用：令字、画、表格等显示于下一行。由于浏览器会自动忽略原始码中的空白和换行的部分，这使成为最常用的标记之一。标记的作用是使这一标记后的文本显示在下一行。但不分段，这是与的区别。无论你在原始码中编好了多漂亮的文章，若不适当地加上换行标记或段落标记，浏览器只会将它显示成一大段。：称为水平线。作用：插入一条水平线。之参数修改：以：为例。align=LEFT设定线条置放位置，可选择：left；right；center三种设定值。size=2设定线条厚度，以像素作单位，内定为2。width=7

8、0%设定线条长度，可以是绝对值（以像素作单位）或相对值，内定为100%。color=#0000FF只适用于IE设定线条颜色，内定为黑色。#0000FF代表蓝色，亦可以采用颜色的名称，即text=blue。noshade设定线条为平面显示，若删去则具阴影或立体，这是内定值。例子：称为居中标记。作用：令字、画、表格等显示于中间。这 标记原先是Netscape所定义，后来其它浏览器都支持它，但你会发现很多标记已有align=CENTER的参数，似乎多馀了，事实上它还是常用的标记之一，其简单易用，常用于文字上，对于己加有align=CENTER参数的标记亦要不厌其烦地加上居中标记，因有狻多浏览器不支持

9、标记中的align=CENTER参 数。例子：红袖添香是一个可以写日记，学习ASP的网站。说明：上面这一句话有了这个标记时，浏览器显示时会把它居中显示。如果没有这个包容标记，浏览器显示时是左对齐显示。：称为预设格式标记。作用：令文件按照原始码的排列方式显示。这标记允许保留你于原始码中输入的空白及Return。细看以下例子你便可体会到此标记的威力。除了运用一大堆表格标记之外你只有采用这标记才能有此效果。例子： CreationofWebpageLogAnalysisIComposerLearning459407480522547586673HTMLAdvanced2002682963583854

10、53506显示结果： CreationofWebpageLogAnalysisI ComposerLearning459407480522547586673HTMLAdvanced200268296358385453506：称为区隔标记。作用：设定字、画、表格等的摆放位置。应用于StyleSheet（式样表）方面会更显威力，它最终目的是给设计者另一种组织能力，有Class;Style;title;ID等属性，以为例：align=center可选值：center;left;right。决定字、画、表格等居中、靠左或靠右。的作用和居中标记一样，前者是由HTML3.0开始的标准，后者是通用己久的标示

11、法。：称为不折行标记。作用：令某些文字不因太长而绕行，显示于同一行或下一行。它对住址、数学算式、一行数字、程式码等尤为有用。例子：Ifyouwanttoknowhowtocreateyouownhomepagequickly,dontmissChrissCreationofWebpagewhichwillhelpyoualot.结果Ifyouwanttoknowhowtocreateyouownhomepagequickly,dontmissChrissCreationofWebpagewhichwillhelpyoualot.说明：其中ChrissCreationofWebpage将不被分开

12、而显示于同一行。：称为建议折行标记。作用：预设折行部位。例子：（若不加标记，整个网址会显示于下一行。）PleasevisitmyotherhomepagewhichlocateatTherearemanysoftwaresfordownload.Ithinkyouwillreallylovethatplace.结果PleasevisitmyotherhomepagewhichlocateatTherearemanysoftwaresfordownload.Ithinkyouwillreallylovethatplace.基础篇十天学会HTML（第四天）字体标记实体标记与逻辑标记：这一节【字体标

13、记】你必须先明白实体标记与逻辑标记的分别，否则你会迷惑于为何不同的标记却有相同的效果。两者分别有以下两处：1.实体标记有固定的显示效果，逻辑标记则依不同浏览器而不同。例如逻辑标记的由于浏览器的不同它所标示的文字不一定出现斜体效果，它可能是加底线、粗体或反白等，所以这一节是以它们在IE和NC中的效果作介绍。2.多个实体标记亦可有效标示同一字句，逻辑标记则通常于旧浏览器不能有效显示多重的标示。例如两个逻辑标记及同时标示一字句于旧浏览器常失去作用。实体标记有：逻辑标记有：若要求真确的效果当然以实体标记为佳。：两者皆能产生字体加粗的效果，但必须注意的是当文件被设为gb2312Encoding时，两者所

14、标示的中文字不会于NetscapeNetvigator显示粗体效果。例子：（第一行是没有任何字体标记的，作对照之用）源码：CreationofWebpageCreationofWebpageCreationofWebpage浏览器显示结果：CreationofWebpageCreation of WebpageCreation of Webpage：这 些标记于InternetExplorer都产生斜体效果，而只有于NetscapeNetvigator失去 作用。这些标记中只有较为特别，因它包括换行效果所以不必在它前面加上标记。例子：源码：CreationofWebpageCreationof

15、WebpageCreationofWebpageCreationofWebpageCreationofWebpageCreationofWebpage浏览器显示结果：Creation of WebpageCreation of WebpageCreation of WebpageCreation of WebpageCreation of WebpageCreation of Webpage为方便对照及记认，所以把十个标记于在一起介绍。可令每字母有相等宽度且每字母之间的距离稍为加宽。但于NC不见得如此。是加底线的标记，一些特别的浏览器并不支援，因顾虑到与连结混淆。加上删除线的标记。令字体加大。

16、令字体变细。为下标字，则为上标字，仅剩的数学标记。例子：（第一行是没有任何字体标记的，作对照之用）源码：CreationofWebpageCreationofWebpageCreationofWebpageCreationofWebpageCreationofWebpageCreationofWebpageCreationofWebpageCreationofWebpageCreationofWebpage12345767899浏览器显示结果：CreationofWebpageCreation of WebpageCreation of WebpageCreation of WebpageCr

17、eation of WebpageCreation of WebpageCreation of WebpageCreation of WebpageCreation of Webpage123457 67899：这些是标题标记，由至变粗变大加宽的程度逐渐减小。每个标题标记所标示的字句将独占一行且上下留一空白行。例子：源码：HeaderLevel1HeaderLevel2HeaderLevel3HeaderLevel4HeaderLevel5HeaderLevel6浏览器显示结果:Header Level 1Header Level 2Header Level 3Header Level 4He

18、ader Level 5Header Level 6：这一节只有这两个标记具参数设定，且两者的参数设定是一样的，都是负责设定文字的大小、字形及颜色，但各有用处，且看以下比较：可以用于文件的开头部分，即与之间的位置，将影响全文字句，是一个空标记，用以改变字体显示的内定值。是应用于文件的内文部分，即与之间的位置，只影响所标示的字句，是一个围堵标记。两标记可同时存在，唯没被所标示的字句才直接受所影响，而本身亦受的影响。的参数设定：例子：CreationofWebpageface=Arial设定文字的字形。Arial是常用的一种，请不要使用Window内建字形以外的字形。于没有设定为Gb2312Enc

19、oding的中文网页，NetscapeNetvigator不会显示此标记所指明的任何中文字形。size=+2设定文字的大小。其值可以是绝对或相对，绝对的意思便是标记自己决定文字的大小，不受的影响，如size=5表示其大小便是5，而html内定值为3，即size=3和没有设定是一样的。相 对的意思便是在内定值3的基础上增加或减少大小级数，如size=+2便等同绝对表示法的size=5，但若已设定则其实际大小便是n+2不再是3+2了。只有绝对表示法。color=#008000设定文字的颜色。#008000表示绿色例子：原始码:IloveCreationofWebpageIloveCreationofWebpageIloveCreationofWebpage浏览器显示结果:I love Creation of WebpageI love Creation of WebpageI love Creation of Webpage