HTML(HyperTextMarkUpLanguage)是使用特殊标记来描述文档结构和表现形式的一种语言,由W3C(WorldWideWebConsortium)所制定和更新。我们可以用任何一种文本编译起来编辑HTML文件,因为它就是一总纯文本文件。
下面我们来看一小段HTML语言的代码,来了解HTML语言的基本结构:
HTML(HyperTextMarkUpLanguage)是使用特殊标记来描述文档结构和表现形式的一种语言。
将这一小段代码粘贴至文本文件中,然后选择“另存为”,将文件的后缀名改为.htm或者.html即可,然后再所在的目录下就可看到一个IE的图标,名字就是你所存的文件名称。
…………
…………注意:几乎每一种HTML语言的语法都是以<>开头,以>结束。在编辑HTML语言过程中,也可以使用注释。语法格式为:。就好像C语言中的/*…………*/一样,中间的内容只是解释说明,并不被编译器所编译。
1.长度单位
长度单位可以用来定义水平线、表格边匡、图像等对象的长、宽、高等一系列属性,同时也可以用来定义这些对象在页面上的位置等属性,用来描述页面上可能遇到的各种长度。
长度的表示方法有两种:绝对长度和相对长度。他们的单位都是像素(pixel)和百分比(%),像素代表的是屏幕上的每个点,而百分比代表的是相对于客户区的多少。下面我们就以水平线的宽度为例,说明这两种表示方法。
在文本编译器中编译,改变网页的大小,就会看到这两者表示长度方法的不同。
其中
标记是在页面上建立水平线的标记。width是水平线元素中的一种属性,用来表示水平线的宽度。这里width="500"即表示这个水平线的宽度是500像素;width="%50"即表示水平线占据客户区的总宽度的%50。
2.颜色单位
和长度单位一样,颜色单位也是描述页面表现形式的一种很重要的的数据类型。颜色单位有三种表示方法:16进制颜色代码、10进制RGB码、直接颜色名称。这三种表示方法不同,但是效果却是一样的。下面用一小段代码说明这三种颜色的表示方法。
注意:本文件在保存时请选择Unicode字符型进行保存。
16进制颜色代码,语法格式:#RRGGBB。16进制颜色代码之前必须有一个“#”号,这种颜色代码是由三部分组成的,其中前两位代表红色,中间两位代表绿色,后两位代表蓝色。不同的取值代表不同的颜色,他们的取值范围是00--FF。
10进制RGB码,语法格式:RGB(RRR,GGG,BBB)。在这种表示法中,后面三个参数分别是红色、绿色、蓝色,他们的取值范围是0--255。以上两种表达方式可以相互转换,标准是16进制与10进制的相互转换。
直接颜色名称,可以在代码中直接写出颜色的英文名称。
3.URL路径
URL(UniversalResourceLocator)路径是一种互联网地址的表示法。在这个数据里可以包括以何种协议连接、要连接到哪一个地址、连接地址的端口(Port)号以及服务器(Server)里文件的完整路径和文件名称等信息。在HTML中,URL路径分为两种形式:绝对路经和相对路径。
a.绝对路径:
绝对路径是将服务器上磁盘驱动器名称和完整的伦够写出来,同时也会表现出磁盘上的目录结构。
语法格式:
其中,
例如:
b.相对路径:
相对路径是相对于当前的HTML文档所在目录或站点根目录的路径。
语法格式:相对关系/部分路径/文件名
根据相对路径的参照点又可以分为相对文档的相对路径以及相对根目录的相对路径。
<1>相对文档:
这种路径的表现形式是根据目标文档所在目录和当前文档所在目录之间的关系的一种表现形式。“../”表示上一级目录,没有“../”表示当前目录。
例如当前文档的路径是:test/project1/index.htm。我们要找test目录下的html.htm。而当前的目录是project1,我们要回到上一级目录中,所以路径是“../html.htm”。
<2>相对根目录:
这种路径根据目标文档相对于根目录的关系的一种表现形式。在这种表达式种的第一个字符是“/”,这个符号表示这个路径是一个相对于根目录的表达式。
这一课我给大家介绍html文档中head部分的基本使用方法。
head这一部分是由标记
开始,以标记结束,是html文档的首要部分。下面我们看一下head部分所包含的元素:元素
描述
title
文档标题
meta
描述非html标准的一些文档信息
link
描述当前文档与其他文档之间的连接关系
base
定义体试时默认的外部资源
script
脚本程序内容
style
样式表内容
下面简要介绍一下各个部分的功能及用法:
title:
title包含的内容将会被显示在浏览器窗口的标题栏中。给自己的网页起一个适当的名字,可以体现出一些自己的个性。
语法格式:
在省略号处加入的文字或符号,都将显示在浏览器的标题栏中。
meta:
meta元素提供的信息是用户不可见的。下面是meta的几种用法:
定义搜索关键字:
这里介绍两种基本的用法:
这样一来,在你的网页中就会体现出这样的信息。但是这些信息是不可见的,只是提供给那些搜索引擎使用。
控制页面缓存:
定义语言:
我们可以通过这样的语句设定语言的编码方式。这样,浏览器就可以为我们正确的选择语言,不需要我们来选取。上面的例子显示的就是简体中文,如果想要显示繁体中文,将GB3212替换为BIG5就可以了。
刷新页面
link:
这个元素用来指定当前文档和其他文档之间的联接关系。
关于css层叠样式表,请查阅有关资料。
base:
用于定义文档提交是默认的外部资源。
target指定文档中所有链接的默认打开窗口。最常见的应用是在框架页(frame)中。我们要把Menu框架中的联接显示到content框架中,就可以在Menu的网页中加上
script:
标记用来在页面中加入脚本程序。
在language中一定要指定脚本语言的种类。如VBScript等。
style:
用来指定当前文档的css层叠样式表。css对于网页的字体样式、背景、边界等都有很大的应用。详细部分请大家参阅css有关内容。
这一次我给大家介绍html语言中的body的部分用法。
大家从各大门户网站的主页上就可以看出,body部分占据了大部分的代码。可见body是一个网页代码的绝对主要部分。body是由
开始,由结束。下面我们看一下body部分的元素:bgcolor
背景色
background
背景图案
text
文本颜色
链接文字颜色
alink
活动链接文字颜色
vlink
已访问链接文字颜色
leftmargin
页面左侧的留白距离
topmargin
页面顶部的留白距离
下面介绍各个部分的功能及用法:
bgcolor:
bgcolor用于指定页面的背景颜色。在Microsoft公司的IE浏览器中,默认情况下是白色,Netscape公司的Navigator浏览器的默认情况是灰色。
background:
background属性用于指定页面的背景图案。
下面介绍几种文字的属性,可以改变文字的颜色,以及在页面上留出空白:
textlinkalinkvlinkleftmargintopmargin
他们的作用分别是:非链接文字的颜色;可连接文字的颜色;正被点击的可链接文字的颜色;已被点击的可链接的文字的颜色;页面左侧的留白;页面顶部的留白。
示例:
这里显示body的示例。
说明:对于link这样的属性,大多数html的页面已经不使用这样的用法了。现在多数是在head中加入相应的代码。要达到的效果是鼠标放到有链接的字体上时,字体变色,点击后字体变为灰色。具体方法如下:
A:link{color:#00007f;}A:visited{color:#65038e;}A:active{color:#ff0000;}A:hover{color:#ff0000;}
将这段代码加入到head中,在body中加入有链接的文字,就可以看出效果了。这一部分是属于css中的知识。在body中加入有链接的文字:在Dreamweaver中,选定文字后,在下面的Properties中的link中加入想要链接到的页面的地址。在FrontPage中,选定文字后,点击右键就会有相应的选项。
第一课基础
Html是英文HyperTextMarkupLanguage的缩写,中文意思是“超文本标志语言”,用它编写的文件(文档)的扩展名是.html或.htm,它们是可供浏览器解释浏览的文件格式。您可以使用记事本、写字板或FrontPageEditor等编辑工具来编写Html文件。Html语言使用标志对的方法编写文件,既简单又方便,它通常使用<标志名>标志名>来表示标志的开始和结束(例如标志对),因此在Html文档中这样的标志对都必须是成对使用的。
当我们畅游Internet时,我们透过浏览器所看到的网站,是由HTML(HyperTextMarkupLanguage)语言所构成。HTML(超文件标记语言)是一种建立网页文件的语言,透过标记式的指令(Tag),将影像、声音、图片、文字等连结显示出来。
HTML标记是由<和>所括住的指令,主要分为:单标记指令、双标记指令(由<起始标记>,结束标记>所构成)。HTML网页文件可由任何文本编辑器或网页专用编辑器编辑,完成后(以.htm或.html为文件后缀保存)将HTML网页文件由浏览器打开显示,若测试没有问题则可以放到服务器(Server)上,对外发布信息。
HTML文件基本架构
文件开始
标头区开始文件结束
注意事项
通常一份HTML网页文件包含二个部份:
...标头区、...本文区。而和代表网页文件格式。习惯上一个网站的首页名称通常订为index.htm或index.html这样只要浏览网站,浏览器便会自动的找出index.htm文件。
第二课字体
如:
标题
标题
如:
...粗体字。
如:粗体字
粗体字
...斜体字。
如:斜体字斜体字
...横线(表示删除)。
如:横线
...打字体(固定宽度文字)。
如:打字体打字体
...上标字。
如:字体上标字字体上标字
...下标字。
如:字体下标字字体下标字
注解(不会显示在浏览器上),可以多行。
如:
第三课表格
表格是html的一项非常重要功能,利用其多种属性能够设计出多样化的表格。使用表格可以使你的页面有很多意想不到的效果,使页面更加整齐美观。
常用表格标记
举例
如:(基础型) 太平洋网络学院 如:(加强型)增加背景颜色、表格标题、栏标题、跨栏宽、跨栏高。 表格标题 行标题1 行标题2 列标题1 a b 列标题2 c d 第四课标示 html提供许多种类的标示标记,作项目标示,而且可以作巢状式标示! 常用标示标记 如: 1.第一项 2.第二项 如: i.第一项 ii.第二项 如: 如: 十进制: 0、1、2、3、4、5、6、7、8、9 十六进制: 0、1、2、3、4、5、6、7、8、9、a、b、c、d、e、f 巢状式标示 巢状式标示如: 1.第一章 i.第一节 §第一段 §第二段 ii.第二节 2.第二章 3.第三章 其他标示标记 如:网络学院: 网络学院: ·新手上路 ·软件教室 ·设计教室 ·开发教室 标示项目符号也可以用...标记,以符号字元(○、◆、◎、★、■...等)标示。 如: 特殊符号: 在html文件中,有些符号是代表特定的意义的。所以当我们要使用这些特殊符号时,便要用替代指令。 符号 替代指令 " "或" & &或& < <或< > >或> 不可分空格   第五课区段标记 一个网站不仅要内容丰富外,也要有美观简洁的版面。html所提供的区段标记功能,如果可以好好的利用也会有相当不错的效果。 常用区段标记 如: 如:太平洋网络学院, ... 如:太平洋网络学院, 网上学电脑的好去处。太平洋网络学院, 网上学电脑的好去处。 如: 置中 如: 如: 原始格式:文件 第六课链接 链接可说是html中最重要的功能!因为html拥有链接的功能,使你能接上internet、www……享受多姿多彩的网络世界。 基本上链接分成: 外部链接——链接至网络的某个url网址或文件,可参考考网络链接方式。内部链接——链接html文件的某个区段。 网络链接方式 网络链接方式://主机名称/路径/文件名称 文件传输如:ftp://ftp.pconline.com.cn/ gropher传输如:gropher://gropher.net.cn/ 远端登入如:telnet://bbs.net.cn/ 文件下载如:file://data/html/file.zip netnews传输如:news:talk.hinet.net.cn e-mail如:mailto:pcedu@pconline.com.cn 常用链接标记 ...链接指令。 "■"表示链接点,可以是文字或图案。(即游标移到时,会变成手指形状的地方) 设定链接、未链接部份颜色 设定链接、未链接部份颜色,用 ·alink按下链接部份未放开时颜色·link未看过的链接部份颜色·vlink已看过的链接部份颜色 如: 第八课设置图片 图片增加了网站版面的美观,不过也不要放了大量的图片,而拖慢网站传输的效率 有关设定图片的方法共有以下几种: 1.设定html文件背景图片、背景颜色。太平洋网络学院 太平洋网络学院 太平洋网络学院 太平洋网络学院 a a a a b b b b c c c c d d d d ...
编号标示,可标示数字或英文、罗马字母。...
符号标示,可标示数字或英文、罗马字母。...
定义标示。
产生水平线。
跳下一行。
网上学电脑的好去处。太平洋网络学院,网上学电脑的好去处。...
以文件原始格式显示。原始格式:文件