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 ( 小 ) 会自动跳下一行。通常用在如章节、段落等标题上。
如 :
标题
标题
如 :
标题
( 标题置中 )
标题
... 粗体字。
如 :
粗体字
粗体字
... 斜体字。
如 :
斜体字
斜体字
... 加底线。
如 :
加底线
加底线
... 横线 ( 表示删除 )。
如 :
横线
横线
... 打字体 ( 固定宽度文字 )。
如 :
打字体
打字体
... 上标字。
如 : 字体
上标字
字体上标字
... 下标字。
如 : 字体
下标字
字体下标字
注解 ( 不会显示在浏览器上 ),可以多行。
如 :
设定字体大小、颜色、字型
有关设定文字的方法共有以下几种 :
1.设定HTML文件主体文字颜色。...标记。
如 : ... 或
...
2.设定基本字体大小、颜色、字型。
...标记。
3.设定字体大小、颜色、字型。
...标记。
... 设定基本字体,SIZE = 1 ~ 7,1 ( 最小 ) 7 ( 最大 )。
如 :
基本字体大小为 4
基本字体大小为 4
如 :
设定颜色
设定颜色
如 :
设定字型
设定字型
... 基本字体加大。
如 :
基本字体大小为 4,
加大为 5
基本字体大小为 4,加大为 5
... 基本字体减小。
如 :
基本字体大小为 4,
减小为 3
基本字体大小为 4,减小为 3
... 设定字体大小、颜色、字型,SIZE = 1 ~ 7,1 ( 最小 ) 7 ( 最大 )。
如 :
字体大小为 4
字体大小为 4
如 :
基本字体大小为 4
+1字体大小为 5
-2字体大小为 2 ...
基本字体大小为 4
+1字体大小为 5
-2字体大小为 2
如 :
设定颜色
设定颜色
如 :
设定字型
设定字型
注意事项
1. 设定字体的大小分 : 绝对SIZE 如 :
和 相对SIZE 如 : ( 以 BASEFONT 设定的字体大小做加减 )。
2. 设定字体的颜色可以是颜色名称或#RRGGBB表红绿蓝强度 ( 00 暗 ~ FF 亮 )。 #RRGGBB 所代表的是红、绿、蓝三原色,每一色由两位十六进制的数值表示 ( 即十进制 0 ~ 255 )。
十六进制 : 0、1、2、3、4、5、6、7、8、9、A、B、C、D、E、F。
3. 设定字体的字型会按照顺序找出显示的字型,若找不到则以系统预设字型显示。
第三课
表格
关于规范使用各类表格的通知入职表格免费下载关于主播时间做一个表格详细英语字母大小写表格下载简历表格模板下载
表格是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
|
第四课 标示
HTML提供许多种类的标示标记,作项目标示,而且可以作巢状式标示!
常用标示标记
标示项目。
如 :
- 第一项
- 第二项
第一项
第二项
...
编号标示,可标示数字或英文、罗马字母。
如 :
- 第一项
- 第二项
第一项
第二项
符号标示,可标示数字或英文、罗马字母。
如 :
第一项
第二项
定义项目。
定义资料。
...
定义标示。
如 :
- 十进制 :
- 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
巢状式标示
如 :
- 第一章
- 第一节
- 第二节
- 第二章
- 第三章
第一章
第一节
第一段
第二段
第二节
第二章
第三章
其他标示标记
... 目录式标示 ( 自动加圆点 )。
如 :
网络学院 :
新手上路
软件教室
设计教室
开发教室
网络学院 :
新手上路
软件教室
设计教室
开发教室
注意事项
标示项目符号也可以用... 标记,以符号字元 ( ○、◆、◎、★、■...等 ) 标示。
如 : ●
特殊符号 :
在HTML文件中,有些符号是代表特定的意义的。所以当我们要使用这些特殊符号时,便要用替代指令。
符号 替代指令
" " 或 "
& & 或 &
< < 或 <
> > 或 >
不可分空格  
第五课 区段标记
一个网站不仅要内容丰富外,也要有美观简洁的版面。HTML所提供的区段标记功能,如果可以好好的利用也会有相当不错的效果。
常用区段标记
产生水平线。
如 :
--------------------------------------------------------------------------------
跳下一行。
如 : 太平洋网络学院,
网上学电脑的好去处。
太平洋网络学院,
网上学电脑的好去处。
...
段落,跳下一行并加一行空白。 ( 可省略 )
如 : 太平洋网络学院,网上学电脑的好去处。
太平洋网络学院,
网上学电脑的好去处。
... 置中。
如 : 置中
置中
... 不跳下一行。
如 : 太平洋网络学院,网上学电脑的好去处。
太平洋网络学院,网上学电脑的好去处。
...
以文件原始格式显示。
如 : 原始格式: 文件
原始格式: 文件
第六课 链接
链接可说是HTML中最重要的功能!因为HTML拥有链接的功能,使你能接上INTERNET、WWW ……享受多姿多彩的网络世界。
基本上链接分成 :
外部链接——链接至网络的某个URL网址或文件,可参考考网络链接方式。
内部链接——链接HTML文件的某个区段。
网络链接方式
网络链接方式 : //主机名称 / 路径 / 文件名称
网址 如 : http : //www.pconline.com.cn/
文件传输 如 : ftp : //ftp.pconline.com.cn/
GROPHER 传输 如 : gropher : //gropher.net.cn/
远端登入 如 : telnet : //bbs.net.cn/
文件下载 如 : file : //data/html/file.zip
NET NEWS 传输 如 : news : talk.hinet.net.cn
E-Mail 如 : mailto : pcedu@pconline.com.cn
常用链接标记
设定基本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已看过的链接部份颜色
如 :
第七课 框架
框架架构的标记,主要是分割窗口和插入浮动窗口的功能。如果能有效的运用将有助于浏览网页的效率!
常用窗口标记
定义分割窗口。
相关属性 :
·BORDER 边框
·COLS 行 , 设定分割左右窗口宽度 ( 用『,』分隔,可设百分比 % ;『*』表示剩余部份 )
·FRAMEBORDER 显示边框
·ROWS 列 , 设定分割上下窗口高度 ( 用『,』分隔,可设百分比 % ;『*』表示剩余部份 )
定义窗口。
相关属性 :
·FRAMEBORDER 显示边框
·NAME 名称
·NORESIZE 设定是否可以调整窗口大小
·SRC 文件或URL位址
·SCROLLING 设定是否可以卷动
... 无支援分割窗口浏览器显示文字。
插入浮动窗口。
相关属性 :
·BORDER 边框
·FRAMEBORDER 显示边框
·NORESIZE 设定是否可以调整窗口大小
·SRC 文件或URL位址
·SCROLLING 设定是否可以卷动
举例
如 : 本站窗口架构。
( 先分割成上下窗口,再于窗口各分割成左右窗口。 )
如 : 浮动窗口
注意
窗口基本架构的文件,通常放在HTML文件的第一页,如 : index.htm 。此HTML文件的基本架构并不需要本文区 ( BODY ),只需定义窗口架构,而其他HTML文件可用连结方式 ( A HREF=...连结标记 TARGET属性 ) 显示于指定的窗口中。
第八课 设置图片
现在的网站没有用图片的,几乎很少了吧!图片增加了网站版面的美观,不过也不要放了大量的图片,而拖慢网站传输的效率喔!
有关设定图片的方法共有以下几种 :
设定HTML文件背景图片、背景颜色。...标记。
如 : ... 或
...
设定图片。标记。
设定地图。标记。
常用图片标记
指令
相关属性 :
·ALIGN 调整
·ALT 提示字
·BORDER 边框
·HEIGHT 高度
·SRC 文件或URL位址
·USEMAP 地图名称
·WIDTH 宽度
如 : 可插入图片 ( GIF、JPG格式 )、AVI电影
地图
相关属性 :
·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 设定卷动距离
·SCROLLDELAY = milliseconds 设定卷动时间
·TRUESPEED = milliseconds 设定卷动速度
·WIDTH = n 宽度 ( 可设百分比% )
【举例】
如 :
太平洋网络学院
如 :