HTML语言简易入门教程.docx

1、HTML语言简易入门教程第一课 基础 Html是英文 HyperText Markup Language 的缩写，中文意思是“超文本标志语言”，用它编写的文件(文档)的扩展名是.html或.htm，它们是可供浏览器解释浏览的文件格式。您可以使用记事本、写字板或 FrontPage Editor 等编辑工具来编写Html文件。Html语言使用标志对的方法编写文件，既简单又方便，它通常使用来表示标志的开始和结束(例如标志对)，因此在Html文档中这样的标志对都必须是成对使用的。 当我们畅游Internet时，我们透过浏览器所看到的网站，是由HTML (HyperText Markup Langua

2、ge) 语言所构成。HTML ( 超文件标记语言 ) 是一种建立网页文件的语言，透过标记式的指令 (Tag)，将影像、声音、图片、文字等连结显示出来。 HTML标记是由 所括住的指令，主要分为 : 单标记指令、双标记指令 ( 由 ，所构成 ) 。HTML网页文件可由任何文本编辑器或网页专用编辑器编辑，完成后 ( 以 .htm 或 .html 为文件后缀保存 ) 将HTML网页文件由浏览器打开显示，若测试没有问题则可以放到服务器 (Server) 上，对外发布信息。HTML文件基本架构 文件开始 标头区开始. 标题区 标头区结束 本文区开始本文区内容 本文区结束 文件结束 网页文件格式。 标头区

3、 : 记录文件基本资料，如作者、编写时间。 标题区 : 文件标题须使用在标头区内，可以在浏览器最上面看到标题。 本文区 : 文件资料，即在浏览器上看到的网站内容。注意事项 通常一份HTML网页文件包含二个部份 : . 标头区、 . 本文区。而 和 代表网页文件格式。 习惯上一个网站的首页名称通常订为 index.htm 或 index.html 这样只要浏览网站，浏览器便会自动的找出 index.htm 文件。 第二课 字体. 标题，设定标题字体大小， n = 1 ( 大 ) 6 ( 小 ) 会自动跳下一行。通常用在如章节、段落等标题上。 如 : 标题 标题如 : 标题 ( 标题置中 ) 标题

4、. 粗体字。 如 : 粗体字 粗体字 . 斜体字。 如 : 斜体字 斜体字 . 横线 ( 表示删除 )。 如 : 横线 . 打字体 ( 固定宽度文字 )。 如 : 打字体 打字体 . 上标字。 如 : 字体 上标字 字体上标字 . 下标字。 如 : 字体 下标字 字体下标字 注解 ( 不会显示在浏览器上 )，可以多行。 如 : 第三课 表格 表格是html的一项非常重要功能，利用其多种属性能够设计出多样化的表格。使用表格可以使你的页面有很多意想不到的效果，使页面更加整齐美观。 常用表格标记 . 表格指令。 相关属性 : align 调整bgcolor 背景颜色border 边框height 高

5、度width 宽度 . 表格标题。 相关属性 : align 调整 . 表格列 ( 可省略 ) 。 相关属性 : align 调整 . 表格栏标题 ( 表头 ) 粗体字 ( 可省略 ) 。 相关属性 : align 调整colspan 栏宽rowspan 栏高 . 表格栏资料 ( 储存格 ) ( 可省略 ) 。 相关属性 : align 调整bgcolor 背景颜色height 高度width 宽度colspan 栏宽rowspan 栏高 举例 如 : ( 基础型 ) 太平洋网络学院太平洋网络学院太平洋网络学院太平洋网络学院太平洋网络学院 太平洋网络学院 太平洋网络学院 太平洋网络学院 如 :

6、 ( 加强型 ) 增加背景颜色、表格标题、栏标题、跨栏宽、跨栏高。 表格标题行标题 1 行标题 2列标题 1 a a a ab b b b列标题 2 c c c cd d d d 表格标题行标题 1 行标题 2 列标题 1 a a a a b b b b 列标题 2 c c c c d d d d 第四课 标示html提供许多种类的标示标记，作项目标示，而且可以作巢状式标示！ 常用标示标记 标示项目。 如 : 第一项第二项1.第一项 2.第二项 . 编号标示，可标示数字或英文、罗马字母。 如 : 第一项第二项i.第一项 ii.第二项 . 符号标示，可标示数字或英文、罗马字母。 如 : 第一项第

7、二项第一项 第二项 定义项目。 定义资料。 . 定义标示。 如 : 十进制 :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.第三章 其他标示标记. 目录式标示 ( 自动加圆点 )。 如 : 网络学院 :新手上路软件教室设计教室开发教室 网络学院 : 新

8、手上路 软件教室 设计教室 开发教室 注意事项标示项目符号也可以用. 标记，以符号字元 ( 、.等 ) 标示。如 : 特殊符号 :在html文件中，有些符号是代表特定的意义的。所以当我们要使用这些特殊符号时，便要用替代指令。 符号 替代指令 " 或 " & & 或 & > 或 > 不可分空格   第五课 区段标记一个网站不仅要内容丰富外，也要有美观简洁的版面。html所提供的区段标记功能，如果可以好好的利用也会有相当不错的效果。 常用区段标记 产生水平线。 如 : 跳下一行。 如 : 太平洋网络学院，网上学电脑的好去处。太平洋网络学院，网上学电脑的好

9、去处。 . 段落，跳下一行并加一行空白。 ( 可省略 ) 如 : 太平洋网络学院，网上学电脑的好去处。太平洋网络学院， 网上学电脑的好去处。 . 置中。 如 : 置中置中 . 不跳下一行。 如 : 太平洋网络学院，网上学电脑的好去处。太平洋网络学院，网上学电脑的好去处。 . 以文件原始格式显示。 如 : 原始格式: 文件原始格式: 文件第六课 链接 链接可说是html中最重要的功能！因为html拥有链接的功能，使你能接上internet、www 享受多姿多彩的网络世界。 基本上链接分成 : 外部链接链接至网络的某个url网址或文件，可参考考网络链接方式。内部链接链接html文件的某个区段。 网

10、络链接方式 网络链接方式 : /主机名称 / 路径 / 文件名称 网址 如 : http : / 文件传输 如 : ftp : / gropher 传输 如 : gropher : / 远端登入 如 : telnet : / 文件下载 如 : file : /data/html/file.zip net news 传输 如 : news : e-mail 如 : mailto : *.cn 常用链接标记 设定基本url位置或路径，以後只要设定文件名称即会自动加上位置或路径。 相关属性 : href 链接的url位址或文件target 指定链接到的url位址或文件显示于那一个视窗 ( 可和 视窗

11、标记配合使用或开新的视窗 ) 如 : base href=http : / . 链接指令。 相关属性 : href 链接的url位址或文件name 名称target 指定链接到的url位址或文件显示于那一个视窗 ( 可和 视窗标记配合使用或开新的视窗 ) 如 : 外部链接a href=http : / 内部链接ch1.htm 文件 ( 欲链接至html文件 a 点 ) ( html文件 a 点 ) ch2.htm文件 (欲链接至ch1.htm 文件 a 点 ) 表示链接点，可以是文字或图案。( 即游标移到时，会变成手指形状的地方 ) 链接指令 ( 用于head区，设定css文件 )。 储存应用

12、资讯，可设定时间载入网页 ( 用于head区 )。 相关属性 : charset 设定content 回应表头资料内容 , 若是数字表示秒数http-equiv 回应表头 , 若设定为refresh载入url设定url html位置如 : 设定中文自动跳行。 设定十秒回到首页。 ( 若不设定html文件位置则再载入原html文件 ) 设定链接、未链接部份颜色 设定链接、未链接部份颜色，用.标记。 相关属性 : alink按下链接部份未放开时颜色 link未看过的链接部份颜色 vlink已看过的链接部份颜色 如 : 第八课 设置图片 图片增加了网站版面的美观，不过也不要放了大量的图片，而拖慢网站

13、传输的效率 有关设定图片的方法共有以下几种 : 1.设定html文件背景图片、背景颜色。.标记。如 : . 或. 2.设定图片。标记。 3.设定地图。.标记。 常用图片标记 指令 相关属性 : align 调整alt 提示字border 边框height 高度src 文件或url位址usemap 地图名称width 宽度 如 : 可插入图片 ( gif、jpg格式 )、avi电影. 地图 相关属性 : name 名称 设定地图动作区域 相关属性 : coords 设定动作区域座标 ( 左上角座标 : x1,y1 ; 右下角座标 : x2,y2 )href 动作区域连结点 ( 可载入位址或文件

14、)nohref 动作区域连结点不动作shape 外型 举例设定地图 第九课 加入声音 html不仅能插入图片，也可以载入midi音乐、wav 音效喔！ 常用音乐标记 背景音乐、音效。 相关属性 : loop 循环 , 背景音乐播放次数src 文件或url位址 (可为wav、midi格式 ) 如 : 内嵌音乐插件 . 内嵌插件。 相关属性 : height 高度width 宽度 ( 可设百分比% )src 设定内嵌物件的 url 位址loop 循环 , 背景音乐播放次数autostart 自动播放 如 : 第十课 滚动条这是由ie提供的滚动条，可不要被众多的属性吓到了，越多的属性功能越强喔！ 【

15、文字卷动标记】 . 文字卷动 ( 滚动条 )。【相关属性】 behavior = 设定卷动方式- alternate 交替来回卷动- scroll 卷动 ( 预设 )- slide 滑动 bgcolor = color 背景颜色 direction = 设定卷动方向 height = n 高度 loop = n 循环 , 卷动次数 ( 预设循环 )scrollamount = n 设定卷动距离 scrolldelay = milliseconds 设定卷动时间 truespeed = milliseconds 设定卷动速度 width = n 宽度 ( 可设百分比% ) 【举例】 如 : 太平

16、洋网络学院如 : 太平洋网络学院一 html的标签table，tbody,tr,td 称为html的标签，以双标签的形式出现，所谓双标签，也就是有一个就有一个对应的与之对应，同样适用于其他的双标签。一般标签都为双标签。标签最终所显示的网页效果由各个属性来表达，属性可选择使用，不一定全部都用。在整个图片或帖子里双标签以首尾呼应的方式出现。这里是图片,文字或帖子内容. 的常用参数设定： width=400 表格宽度，接受绝对值(如width=80)及相对值(width=80%)。border=1 表格边框的厚度，不同浏览器有不同的内定值。 cellspacing=2 表格格线的厚度align=ce

17、nter 表格的摆放位置(水平)，可选值为： left(居左), right(居右), center(居中)valign=top. 表格内内容的对齐方式(垂直)，可选值为： top, middle, bottom。 background=myweb.gif 表格的背景图片，与 bgcolor 不要同用。 bgcolor=#0000ff 表格的背景颜色，与 background 不要同用bordercolor=#cf0000 表格边框颜色bordercolorlight=#00ff00 表格边框向光部分的颜色bordercolordark=#00ffff 表格边框背光部分的颜色，使用 borde

18、rcolorlight 或 bordercolordark 时 bordercolor 将会失效。播放器宽度width和高度height的值根据需要自定二 帖图格式帖图基本代码如下： 称图形标记，主要用来插入图形标记。三 文字设制基本代码如下：插入文字 align=center表示字体居中，可选值为居右（right）居左（left） color=颜色代码face=字体常用字体为：宋体.黑体.楷体.仿宋.幻缘.新宋体.细明体等 size=字体大小，这里的最大值为7取值越大文字就越大四 加入音乐常用属性如下：src=your.mid 设定 midi 档案及路径，可以是相对或绝对。 autostar

19、t=true 是否在音乐档下载完之后就自动播放。true 是，false 否 (内定值)。 loop=true 是否自动反复播放。loop=2 表示重复两次，true 是， false 否。 hidden=true 是否完全隐藏控制画面，true 为是，no 为否 (内定)。 starttime=分:秒 设定歌曲开始播放的时间。如 starttime=00:30 表示从第30秒处开始播放。 volume=0-100 设定音量的大小，数值是0到100之间。内定则为使用系统本身的设定width=整数 和 high=整数 设定控制面板的高度和宽度。(若 hidden=no) align=center 设定控制面板和旁边文字的对齐方式，其值可以是 top、bottom、center、baseline、 left、right、texttop、middle、absmiddle、a