SEO新手必备HTML详解.docx
- 文档编号:7446987
- 上传时间:2023-01-24
- 格式:DOCX
- 页数:13
- 大小:77.19KB
SEO新手必备HTML详解.docx
《SEO新手必备HTML详解.docx》由会员分享,可在线阅读,更多相关《SEO新手必备HTML详解.docx(13页珍藏版)》请在冰豆网上搜索。
SEO新手必备HTML详解
基础篇·十天学会HTML(第一天)
其实,学习HTML用不了10天的时间,不过我们慢慢来。
HTML(Hyper Text Markup Langeage:
超文本标记语言)是全球广域网上描述网页内容和外观的标准。
1989年,欧洲料子物理实验室(CERN)的研究员Tim Berners-Lee和Anders Berglund两人创建了一种基于标记的语言,以方便研究人员在万维网上共享技术文件,它就是大名鼎鼎的HTML。
HTML实际就是一个文本文件,使用一套特定标记(这些标记全都以尖括号“<”和“>”括起来)将文档标注起来,当通过浏览器打开HTML网页时,由浏览器负责解析这些标记。
并按预先定义的格式显示出内容。
所以学习网页制作的第一步就是学习HTML(不懂得HTML,使用像FrontPage、Dreamweaver等网页制作软件也可以做出像模像样的网页来,但我想你永远都将只是个菜鸟,入不了大虾之流)。
对了,编写程序要有程序编辑器,那么写HTML要用什么编辑器呢?
因为HTML是一种文本化的脚本语言,所以就可用最简单的文本编辑工具――“记事本”来完成这个工作。
接下来用一分钟时间我们来体验一下HTML的魅力吧。
打开记事本,输入以下文字(注意:
HTML中所有的标记必须在英文输入法下输入,这点很重要的哦!
否则你的浏览可不干活,因为它不认识。
还有HTML不区分大小写。
):
接下来,将其保存为test.htm。
双击打开看看,是不是出现了一个文字为:
“链接到红袖添香网站”的超级链接。
单击这个链接就会打开我的站点(你必须在线)。
嘻,是不是有些成绩感呢?
下面,我解释上面几个标记的含义:
和是网页的开始与结束的标志,是一个包容标记(包容标记由一个开始标记和一个结束标记构成,聪明的你立刻就明白开始标记和结束标记大致是一样的,只是结束标记多了一个斜杠(“/”);HTML的另一种标记是空标记,很快我们就会用到),一张网页中所有的内容都应放置其中。
和是网页的标头文件。
像上面例子中的“我的第一个网页”。
和是网页最主要的部分,所有要在网页上显示的内容都要放在这个包容标记之间。
如要显示的文字、图片、表单等。
一句话,一个网页文件应该是以标记开始,以结束;
和之间的内容属于文件头部分;和之间的内容属于文件体部分。好了,你现在也知道什么是HTML了。
基础篇·十天学会HTML(第二天)
HTML标记表
注:
● 表示该标记属包容标记,即需要关闭标记。
○ 表示该标记属空标记,即不需要关闭标记。
IE 表示该标记只适用于Internet Explorer。
NC 表示该标记只适用于Netscape Communicator。
反对 表示该标记不为W3C所赞同,通常这标记是IE或NC自订,且己为众所支持,只是HTML标准中有其它同功能或更好的选择。
弃用 表示该标记己为W3C所弃用,是过时的标记,但HTML具向下兼容的特性,不用担心新浏览器不支援旧标记。
新 表示该标记是HTML4.0中新增的。
基础篇·十天学会HTML(第三天)
排版标记
本节课我们解释以下9个排版标记的使用。
从这节课开始,请学友们把文章中提供的源代码复制到网页编辑器中,保存后再用IE打开文件查看显示效果。
--注解--> ;
;
;
;
;;; ; ■
--注解-->:
像很多电脑语言一样,HTML 文件亦提供注解功能。
浏览器遇到这个标记就会忽略此标记中的文字(可以是很多行)而不作显示,一般使用目的:
·为文中不同部份加上说明,方便日后修改。
这对较复杂或非私人网页尤其重要,它不单是提醒自已,亦提醒你的同事这部分 做什么、那部分做什么。
例子:
--由这处开始是产品订购表格-->
·用作版权声明。
假如你不希望别人使用或复制你的网页,可加上警告字眼。
例子:
--本文版权为 2005, Creation of Webpage 所拥有,未经许,请勿抄摘-->
■
:
称为段落标记。
作用:
为字、画、表格等之间留一空白行。
本来
是一包容标记,标于一段落的头尾,但从 HTML 2.0 开始己不需要
作结尾。
的常用参数:
如:
·align="center"
可选值:
right, left, center。
默认值:
align="left"
注:
align是用于设置对齐的参数。
其中,right 为右对齐;left为左对齐; center为居中。
例子:
1、红袖添香是一个可以写日记,学习ASP的网站。
红袖添香是一个可以写日记,学习ASP的网站。
2、红袖添香是一个可以写日记,学习ASP的网站。
红袖添香是一个可以写日记,学习ASP的网站。
说明:
例1中的两句话在同一段显示;而例2中的两句话分两段显示。
■
:
称为换行标记。作用:
令字、画、表格等显示于下一行。
由于浏览器会自动忽略原始码中的空白和换行的部分,这使
成为最常用的标记之 一。
标记的作用是使这一标记后的文本显示在下一行。但不分段,这是与
的区别。
无论你在原始码中编好了多漂亮的文章,若不适当地加上换行标记或段落标记, 浏览器只会将它显示成一大段。
■
:
称为水平线。作用:
插入一条水平线。
之参数修改:
以:
为例。
·align="LEFT"
设定线条置放位置,可选择:
left;right;center 三种设定值。
·size="2"
设定线条厚度,以像素作单位,内定为 2。
·width="70%"
设定线条长度,可以是绝对值(以像素作单位)或相对值,内定为 100%。
·color="#0000FF" 『只适用于IE』
设定线条颜色,内定为黑色。
#0000FF 代表蓝色,亦可以采用颜色的名称,即 text="blue" 。
·noshade
设定线条为平面显示,若删去则具阴影或立体,这是内定值。
例子:
■
: 称为居中标记。 作用:
令字、画、表格等显示于中间。
这标记原先是 Netscape 所定义,后来其它浏览器都支持它,但你会发现很多标记已有 align="CENTER" 的参数,
似乎多馀了,事实上它还是常用的标记之一,其简单易用,常用于文字上,对于己加有 align="CENTER" 参数的 标记亦要不厌其烦 地加上居中标记,因有狻多浏览器不支持
标记中的 align="CENTER" 参数。
例子:
红袖添香是一个可以写日记,学习ASP的网站。 说明:
上面这一句话有了这个标记时,浏览器显示时会把它居中显示。
如果没有这个包容标记,浏览器显示时是左对齐显示。
■
:称为预设格式标记。作用:
令文件按照原始码的排列方式显示。
这标记允许保留你于原始码中输入的空白及 Return。
细看以下例子你便可体会到此标记的 威力。
除了运用一大堆表格标记之外你只有采用这标记才能有此效果。
例子:
Creation of Webpage Log Analysis IComposer Learning 459 407 480 522 547 586 673
HTML Advanced 200 268 296 358 385 453 506
显示结果:
Creation of Webpage Log Analysis I
Composer Learning 459 407 480 522 547 586 673
HTML Advanced 200 268 296 358 385 453 506
■
:称为区隔标记。作用:
设定字、画、表格等的摆放位置。
应用于 Style Sheet(式样表)方面会更显威力,它最终目的是给设计者另一种组织能力,有 Class ; Style ; title ; ID 等属性,以为例:
·align="center"
可选值:
center ; left ; right 。
决定字、画、表格等居中、靠左或靠右。
的作用和居中标记一样,前者是由 HTML3.0 开始 的标准,后者是通用己久的标示法。
■
:
称为不折行标记。 作用:
令某些文字不因太长而绕行,显示于同一行或下一行。
它对住址、数学算式、一行数字、程式码等尤为有用。
例子:
If you want to know how to create you own homepage quickly, don't miss
Chris's Creation of Webpage which will help you a lot.结果
If you want to know how to create you own homepage quickly, don't miss Chris's Creation of Webpage which will help you a lot.
说明:
其中 Chris's Creation of Webpage 将不被分开而显示于同一行。
■
:
称为建议折行标记。 作用:
预设折行部位。
例子:
(若不加
标记,整个网址会显示于下一行。 )
Please visit my other homepage which locate at There are many softwares for download. I think you will really love that place.
结果
Please visit my other homepage which locate at There are many softwares for download. I think you will really love that place.
基础篇·十天学会HTML(第四天)
字体标记
■实体标记与逻辑标记 :
这一节【字体标记】你必须先明白实体标记与逻辑标记的分别,否则你会迷惑于为何不同的标记却有相同的效果。
两者分别有以下两处:
1.实体标记有固定的显示效果,逻辑标记则依不同浏览器而不同。
例如逻辑标记的 由于浏览器的不同它所标示的文字不一定出现斜体效果, 它可能是加底线、粗体或反白等,所以这一节是以它们在IE 和NC中的效果作介 绍。
2.多个实体标记亦可有效标示同一字句,逻辑标记则通常于旧浏览器不能有效显示多重的标示。
例如两个逻辑标记 及 同时标示一字句于旧浏览器常失去作用。
·实体标记有:
·逻辑标记有:
若要求真确的效果当然以实体标记为佳。
■ :
两者皆能产生字体加粗的效果,但必须注意的是当文件被设为 gb2312 Encoding 时,两者所标示的中文字不会于 Netscape Netvigator 显示粗体效果。
例子:
(第一行是没有任何字体标记的,作对照之用)
源码:
Creation of Webpage
Creation of Webpage
Creation of Webpage浏览器显示结果:
Creation of Webpage
CreationofWebpage
CreationofWebpage
■ :
这些标记于 Internet Explorer 都产生斜体效果,而只有 于 Netscape Netvigator 失去作用。
这些标记中只有
较为特别,因它包括换行效果所以不必在它前面加上
标记。
例子:
源码:
Creation of Webpage
Creation of Webpage
Creation of Webpage
Creation of WebpageCreation of Webpage
Creation of Webpage浏览器显示结果:
CreationofWebpage
CreationofWebpage
CreationofWebpage
CreationofWebpage
CreationofWebpage
CreationofWebpage
■
为方便对照及记认,所以把十个标记于在一起介绍。
·
可令每字母有相等宽度且每字母之间的距离稍为加宽。
但于NC不见得如此。
· 是加底线的标记,一些特别的浏览器并不支援,因顾虑到与连结混淆。
·
加上删除线的标记。
· 令字体加大。
· 令字体变细。
· 为下标字, 则为上标字,仅剩的数学标记。
例子:
(第一行是没有任何字体标记的,作对照之用)
源码:
Creation of Webpage
Creation of Webpage
Creation of Webpage
Creation of Webpage
Creation of Webpage
Creation of Webpage
Creation of Webpage
Creation of Webpage
Creation of Webpage
123457 67899浏览器显示结果:
Creation of Webpage
CreationofWebpage
CreationofWebpage
CreationofWebpage
CreationofWebpage
CreationofWebpage
CreationofWebpage
CreationofWebpage
CreationofWebpage
12345767899
■
:
这些是标题标记,由
至
变粗变大加宽的程度逐渐减小。
每个标题标记所标示 的字句将独占一行且上下留一空白行。
例子:
源码:
Header Level 1
Header Level 2
Header Level 3
Header Level 4
Header Level 5
Header Level 6
浏览器显示结果:
HeaderLevel1
HeaderLevel2
HeaderLevel3
HeaderLevel4
HeaderLevel5
HeaderLevel6
■
: 这一节只有这两个标记具参数设定,且两者的参数设定是一样的,都是负责设定文字的大小、字形及颜色,但各有用处,且看以下比较:
·
与 之间的位置,将 影响全文字句,是一个空标记,用以改变字体显示的内定值。可以用于文件的开头部分,即
是应用于文件的内文部分,即 与 之间的位置,只影响 所标示的字句,是一个围堵标记。
·两标记可同时存在,唯没被 所标示的字句才直接受
所影 响,而 本身亦受 的影响。
的参数设定:
例子:
Creation of Webpage
·face="Arial"
设定文字的字形。
Arial 是常用的一种,请不要使用 Window 内建字 形以外的字形。
于没有设定为 Gb2312 Encoding 的中文网页,Netscape Netvigator 不会显示此标记 所指明的任何中文字形。
·size="+2"
设定文字的大小。
其值可以是绝对或相对,
绝对的意思便是标记自己决定文字的大小,不受
的影响,如 size="5" 表示其大小便是 5, 而html内定值为 3,即 size="3"和没有设定是一样的。
相对的意思便是在内定值 3 的基础上增加或减少大小级数,如 size="+2" 便等同绝 对表示法的 size="5",但若已设定
则其实际大小便是 n+2 不 再是 3+2 了。
只有绝对表示法。
·color="#008000"
设定文字的颜色。
#008000 表示绿色
例子:
原始码:
I love Creation of Webpage
I love Creation of Webpage
I love Creation of Webpage浏览器显示结果:
IloveCreationofWebpage
IloveCreationofWebpage
IloveCreationofWebpage
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- SEO 新手 必备 HTML 详解
冰豆网所有资源均是用户自行上传分享,仅供网友学习交流,未经上传用户书面授权,请勿作他用。关于本文copyright@ 2008-2022 冰点文档网站版权所有
经营许可证编号:鄂ICP备2022015515号-1