超文本标记语言

语言入门教程(一) 什么是HTML语言HTML (HyperText MarkUp Language) 是使用特殊标记来描述文档结构和表现形式的一种语言，由W3C (World Wide Web Consortium) 所制定和更新。我们可以用任何一种文本编译起来编辑HTML文件，因为它就是一总纯文本文件。 HTML语言的基本结构 下面我们来看一小段HTML语言的代码，来了解HTML语言的基本结构： HTML(HyperText MarkUp Language)是使用特殊标记来描述文档结构和表现形式的一种语言。 将这一小段代码粘贴至文本文件中，然后选择“另存为”，将文件的后缀名改为.htm或者.html即可，然后在所在的目录下就可看到一个IE的图标，名字就是你所存的文件名称。 这是声明HTML文件的语法格式。每一个HTML文件，都必须以开头，以结束 这是文件头声明的语法格式。在这之内的所有文字都属于文件的文件头，并不属于文件本体。 这是声明文件标题的语法格式。在这之中写下的所有内容，都将写在网页最上面的标题栏中。 这是声明文件主体的语法格式。在这之间写下的内容都是文件的主体，也就是说将会被显示在客户区之中。 注意：几乎每一种HTML语言的语法都是以开头，以结束。 在编辑HTML语言过程中，也可以使用注释。语法格式为： 。就好像C语言中的 /* */ 一样，中间的内容只是解释说明，并不被编译器所编译。 HTML语言的基本单位 1. 长度单位 长度单位可以用来定义水平线、表格边匡、图像等对象的长、宽、高等一系列属性，同时也可以用来定义这些对象在页面上的位置等属性，用来描述页面上可能遇到的各种长度。 长度的表示方法有两种：绝对长度和相对长度。他们的单位都是像素 (pixel)（用px表示） 和百分比(%)，像素代表的是屏幕上的每个点，而百分比代表的是相对于客户区的多少。下面我们就以水平线的宽度为例，说明这两种表示方法。 HTML语言的长度表示 HTML(HyperText MarkUp Language)是使用特殊标记来描述文档结构和表现形式的一种语言。 在文本编译器中编译，改变网页的大小，就会看到这两者表示长度方法的不同。 其中 标记是在页面上建立水平线的标记。width 是水平线元素中的一种属性，用来表示水平线的宽度。这里width=500即表示这个水平线的宽度是500像素；width=%50即表示水平线占据客户区的总宽度的%50。 2. 颜色单位 和长度单位一样，颜色单位也是描述页面表现形式的一种很重要的的数据类型。颜色单位有三种表示方法： 16 进制颜色代码 10进制RGB码 直接颜色名称 这三种表示方法不同，但是效果却是一样的。下面用一小段代码说明这三种颜色的表示方法： HTML语言中颜色的不同表示方法 静夜思 窗前明月光 疑是地上霜 举头望明月 低头思故乡 注意：本文件在保存时请选择 Unicode 字符型进行保存。 16进制颜色代码：语法格式： #RRGGBB 。16进制颜色代码之前必须有一个“#”号，这种颜色代码是由三部分组成的，其中前两位代表红色，中间两位代表绿色，后两位代表蓝色。不同的取值代表不同的颜色，他们的取值范围是00-FF。 10 进制RGB码：语法格式： RGB(RRR,GGG,BBB) 。在这种表示法中，后面三 个参数分别是红色、绿色、蓝色，他们的取值范围是0-255。以上两种表达方式可以相互转换，标 准是16进制与10进制的相互转换。 直接颜色名称：可以在代码中直接写出颜色的英文名称。 以上三种表示方法的效果相同，一般16进制颜色代码的表示方法比较常用。读者可以根据自己的喜好和实际情况来决定使用哪一种表示方法。关于不同颜色的定义，请查看相关资料。 3. URL路径 URL (Universal Resource Locator) 路径是一种互联网地址的表示法。在这个数据里可以包括以何种协议连接、要连接到哪一个地址、连接地址的端口 (Port) 号以及服务器(Server)里文件的完整路径和文件名称等信息。 在HTML中，URL路径分为两种形式：绝对路经和相对路径。 a. 绝对路径： 绝对路径是将服务器上磁盘驱动器名称和完整的伦够写出来，同时也会表现出磁盘上的目录结构。 语法格式： : 其中，是某一种传输协议，而 则是连接的位置信息。 例如： b. 相对路径： 相对路径是相对于当前的HTML文档所在目录或站点根目录的路径。 语法格式： 相对关系 / 部分路径 / 文件名 根据相对路径的参照点又可以分为相对文档的相对路径以及相对根目录的相对路径。 相对文档： 这种路径的表现形式是根据目标文档所在目录和当前文档所在目录之间的关系的一种表现形式。“./”表示上一级目录，没有“./”表示当前目录。 例如当前文档的路径是：test/project1/index.htm 。我们要找test目录下的html.htm 。而当前的目录是project1，我们要回到上一级目录中，所以路径是“./html.htm”。 相对根目录： 这种路径根据目标文档相对于根目录的关系的一种表现形式。在这种表达式种的第一个字符是“/”，这个符号表示这个路径是一个相对于根目录的表达式。 例如： head 部分的用法： 这一课介绍 html 文档中 head 部分的基本使用方法。 head这一部分是由标记开始，以标记结束，是html文档的首要部分。下面我们看一下head部分所包含的元素： 元素 描述 title 文档标题meta 描述非html标准的一些文档信息link 描述当前文档与其他文档之间的连接关系 base 定义体试时默认的外部资源 script脚本程序内容style 样式表内容下面简要介绍一下各个部分的功能及用法： title：文档标题 title包含的内容将会被显示在浏览器窗口的标题栏中。给自己的网页起一个适当的名字，可以体现出一些自己的个性。 语法格式： 在省略号处加入的文字或符号，都将显示在浏览器的标题栏中。 meta：描述非html标准的一些文档信息 meta元素提供的信息是用户不可见的。下面是meta的几种用法： 定义搜索关键字： 这里介绍两种基本的用法： 这样一来，在你的网页中就会体现出这样的信息。但是这些信息是不可见的，只是提供给那些搜索引擎使用。 控制页面缓存： 浏览器一般为了节约时间，都在本地硬盘上保存一个网上的文件作为临时版本。在用户下次打开这个网页的时候，浏览器将会直接调用硬盘上的这个版本，而不是网上的。如果想让浏览者每次打开网页的时候都是看到的最新版本，那么就在网页上加上这一句吧！ 定义语言： 我们可以通过这样的语句设定语言的编码方式。这样，浏览器就可以为我们正确的选择语言，不需要我们来选取。 上面的例子显示的就是简体中文，如果想要显示繁体中文，将GB3212替换为BIG5就可以了。 刷新页面： 这样的语句可以让我们的浏览器按照 content 属性中制定的时间来跳转到URL属性中设定的URL地址。上面的例子就是在打开页面60秒后调用一个新的页面new.htm。如果没有能够找到new.htm，浏览器就执行刷新本页的操作。这也是大多数聊天室的设定方法。link：描述当前文档与其他文档之间的连接关系 这个元素用来指定当前文档和其他文档之间的联接关系。 语法格式： rel：说明两个文档之间的关系； href：说明目标文档名。 以下是一个指定外联样式表文件的例子： 关于css层叠样式表，请查阅有关资料。 base：定义体试时默认的外部资源 用于定义文档提交是默认的外部资源。 语法格式： href：指定文档中链接到的所有文件默认的URL地址。在这里指定href的属性，所有的相对卢劲的前面都会加上href属性中的值。 target：指定文档中所有链接的默认打开窗口。最常见的应用是在框架页 (frame) 中。我们要把Menu框架中的联接显示到content框架中，就可以在Menu的网页中加上。这样，就省去了在Menu网页上所有链接的属性上加上target属性了。 script：脚本程序内容 标记用来在页面中加入脚本程序。 语法格式： 在language中一定要指定脚本语言的种类。如VBScript等。 style：样式表内容 用来指定当前文档的css层叠样式表。css对于网页的字体样式、背景、边界等都有很大的应用。详细部分请大家参阅css有关内容。 body 的部分用法 大家从各大门户网站的主页上就可以看出，body部分占据了大部分的代码。可见body是一个网页代码的绝对主要部分。body是由开始，由结束。下面我们看一下body部分的元素：元素描述bgcolor 背景色background 背景图案text 文本颜色link 链接文字颜色alink 活动链接文字颜色vlink 已访问链接文字颜色leftmargin 页面左侧的留白距离topmargin页面顶部的留白距离 下面介绍各个部分的功能及用法： bgcolor：背景色 用于指定页面的背景颜色。在Microsoft公司的IE浏览器中，默认情况下是白色，Netscape公 司的Navigator浏览器的默认情况是灰色。 语法格式： background:：背景图案 background 属性用于指定页面的背景图案。 语法格式： 下面是几种文字的属性，可以改变文字的颜色,以及在页面上留出空白： text， link， alink， vlink， leftmargin， topmargin text：文本颜色 即非链接文字的颜色； link： 链接文字颜色 即可连接文字的颜色； alink：活动链接文字颜色 即正被点击的可链接文字的颜色； vlink： 已访问链接文字颜色 即已被点击的可链接的文字的颜色； leftmargin：页面左侧的留白距离； topmargin：页面顶部的留白距离。 语法格式： 示例： body元素示例 这里显示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 是英文 HyperText Markup Language 的缩 写，中文意思是“超文本标志语言”，用它编写的文件(文档)的扩展名是.html或.htm，它们是可供浏览器解释浏览的文件格式。您可以使用记事本、写字板或 FrontPage Editor 等编辑工具来编写Html文件。Html语言使用标志对的方法编写文件，既简单又方便，它通常使用来表示标志的开始和结束(例如标志对)，因此在Html文档中这样的标志对都必须是成对使用的。 当我们畅游Internet时，我们透过浏览器所看到的网站，是由HTML (HyperText Markup Language) 语言所构成。HTML ( 超文件标记语言 ) (Tag)，将影像、声音、 图片、文字等连结显示出来。 HTML标记是由 所括住的指令，主要分为：单标记指令（只有，没有）、双标记指令 ( 由 ，所构成 ) 。HTML网页文件可由任何文本编辑器或网页专用编辑器编辑，完成后 ( 以 .htm 或 .html 为文件后缀保存 ) 将HTML网页文件由浏览器打开显示，若测试没有问题则可以放到服务器 (Server) 上，对外发布信息。HTML文件基本架构 文件开始： 标头区开始 . 标题区 标头区结束 本文区开始 本文区内容 本文区结束 文件结束 网页文件格式 标头区 : 记录文件基本资料，如作者、编写时间。 标题区 : 文件标题须使用在标头区内，可以在浏览器最上面 本文区 : 文件资料，即在浏览器上看到的网站内容。 注意事项： 通常一份HTML网页文件包含二个部份 ：. 标头区、 . 本文区。而 . 和. 代表网页文件格式。 习惯上一个网站的首页名称通常订为 index.htm 或 index.html 这样只要浏览网站，浏览器便会自动的找出 index.htm 文件。 第二课 字体 . 标题 设定标题字体大小， n = 1 ( 大 ) 6 ( 小 ) 会自动跳下一行。通常用在如章节、段落等标题上。 如： 标题 标题 如： 标题 ( 标题置中 ) 标题 . 粗体字如： 粗体字 粗体字 . 斜体字如： 斜体字 斜体字 . 横线 ( 表示删除 )如： 横线 . 打字体 ( 固定宽度文字 )如： 打字体 打字体 . 上标字 如：字体 上标字 字体上标字 . 下标字 如：字体 下标字 字体下标字 注解 ( 不会显示在浏览器上 )，可以多行。如： 第三课 表格 表格是html的一项非常重要功能，利用其多种属性能够设计出多样化的表格。使用表格可以使你的页面有很多意想不到的效果，使页面更加整齐美观。 常用表格标记： . 表格指令 相关属性 ： align ：调整 bgcolor： 背景颜色 border： 边框 height： 高度 width： 宽度. 表格标题相关属性： align： 调整 . 表格列 ( 可省略 ) 。 相关属性：align： 调整. 表格栏标题 ( 表头 ) 粗体字 ( 可省略 ) 。 相关属性：align ：调整 colspan： 栏宽 rowspan： 栏高 . 表格栏资料 ( 储存格 ) ( 可省略 ) 。 相关属性： align： 调整 bgcolor： 背景颜色 height： 高度 width： 宽度 colspan： 栏宽 rowspan： 栏高 举例 如：( 基础型 ) 太平洋网络学院 太平洋网络学院 太平洋网络学院 太平洋网络学院 太平洋网络学院 太平洋网络学院 太平洋网络学院 太平洋网络学院 如：( 加强型 ) 增加背景颜色、表格标题、栏标题、跨栏宽、跨栏高。 表格标题 行标题 1 行标题 2 列标题 1 a a a a b b b b 列标题 2 c c c c d d d d 表格标题行标题 1行标题 2列标题 1aaaabbbb列标题 2ccccdddd第四课 标示 提供许多种类的标示标记，作项目标示，而且可以作巢状式标示！ 常用标示标记 标示项目。如： 第一项 第二项 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 十进制 ： 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文件的某个区段。 网络链接方式： 网络链接方式 : /主机名称 / 路径 / 文件名称 网址 如 : http : // 文件传输 如 : ftp : // gropher 传输 如 : gropher : // 远端登入 如 : telnet : // 文件下载 如 : file : /data/html/file.zip net news 传输 如 : news : e-mail 如 : mailto : 常用链接标记： 设定基本url位置或路径，以後只要设定文件名称即会自动加上位置或路径。 相关属性 : href： 链接的url位址或文件target： 指定链接到的url位址或文件显示于那一个视窗 ( 可和 视窗标记配合使用或开新的视窗 ) 如 : . 链接指令： 相关属性： href： 链接的url位址或文件 name： 名称 target： 指定链接到的url位址或文件显示于那一个视窗 ( 可和 视窗标记配合使用或开新的视窗 ) 如 : 外部链接 第六课 链接 内部链接 ch1.htm 文件 ( 欲链接至html文件 a 点 ) ( html文件 a 点 ) ch2.htm文件 (欲链接至ch1.htm 文件 a 点 ) 表示链接点，可以是文字或图案。( 即游标移到时，会变成手指形状的地方 ) 链接指令 ( 用于head区，设定css文件 )。 储存应用资讯，可设定时间载入网页 ( 用于head区 )。 相关属性 : charset ：设定 content： 回应表头资料内容 , 若是数字表示秒数 http-equiv： 回应表头 , 若设定为refresh载入url设定 url html位置 : 设定中文自动跳行： 设定十秒回到首页。 ( 若不设定html文件位置则再载入原html文件 ) 设定链接、未链接部份颜色 设定链接、未链接部份颜色，用.标记。 相关属性 : alink：按下链接部份未放开时颜色link：未看过的链接部份颜色 vlink：已看过的链接部份颜色 如 : 第八课 设置图片 图片增加了网站版面的美观，不过也不要放了大量的图片，而拖慢网 站传输的效率 有关设定图片的方法共有以下几种 : 1. 设定html文件背景图片、背景颜色：.标记。 如 : . 或 . 2. 设定图片： 标记。 3. 设定地图： . 标记。 常用图片标记 指令 相关属性 : align： 调整 alt： 提示字 border： 边框 height： 高度 src： 文件或url位址 usemap： 地图名称 width： 宽度 如 : 可插入图片 ( gif、jpg 格式 )、avi 电影 img src=./././images/pcedu_lo.gif alt=太平洋网络学院 . 地图 相关属性 : name：名称 ：设定地图动作区域 相关属性 : coords：设定动作区域座标 ( 左上角座标 : x1,y1 右下角座标 : x2,y2 ) href：动作区域连结点 ( 可载入位址或文件 ) nohref 动作区域连结点不动作 shape 外型 举例 设定地图 加入声音 html不仅能插入图片，也可以载入midi音乐、wav 音效喔！ 常用音乐标记： 背景音乐、音效。 相关属性 : loop：循环 , 背景音乐播放次数 src：文件或 url 位址 (可为wav、midi格式 ) 如 : 内嵌音乐插件 . 内嵌插件。 相关属性 : height： 高度 width：( 可设百分比% ) src： 设定内嵌物件的 url 位址 loop： 循环 , 背景音乐播放次数 autostart： 自动播放 例 : 第十课 滚动条 这是由ie提供的滚动条，可不要被众多的属性吓到了，越多的属性功能越强喔！ 【文字卷动标记】 . 文字卷动 ( 滚动条 )。 【相关属性】 behavior：= 设定卷动方式 -alternate：交替来回卷动 - scroll：卷动 ( 预设 ) - slide ：滑动 bgcolor = color： direction =： 设定卷动方向 height = n： 高度 loop = n： 循环 ，卷动次数 ( 预设循环 ) scrollamount = n ：设定卷动距离 s： 设定卷动时间 truespeed = milliseconds： 设定卷动速度 width = n： 宽度 ( 可设百分比% ) 【举例】 如 : 太平洋网络学院 如 : 太平洋网络学院 一、html 的标签 table，tbody, tr, td 称为 html 的标签，以双标签的形式出现，所谓双标签，也就是有一个就有一个对应的与之对应，同样适用于其他的双标签。 一般标签都为双标签。标签最终所显示的网页效果由各个属性来表达，属性可选择使用，不一定全部都用。在整个图片或帖子里双标签以首尾呼应的方式出现。 背景图片地址： border=0 cellpadding=0 cellspacing=0 bordercolor=#0000ff width=100% 这里是图片,文字或帖子内容. 的常用参数设定： 表格： width=400： 表格宽度，接受绝对值(如width=80)及相对值(width=80%)。 border=1 ： 表格边框的厚度，不同浏览器有不同的内定值。 align=center：表格的摆放位置(水平)，可选值为： left：(居左), right： (居右), center：(居中) valign=top：表格内内容的对齐方式(垂直)，可选值为： top：（上对齐） ， middle（居中对齐），bottom（下、底部对齐）。 background=myweb.gif： 表格的背景图片，与 bgcolor 不要同用。 bgcolor