HTML基本语法
当我们畅游Internet时，我们透过浏览器所看到的网站，是由HTML (HyperText Markup Language) 语言所构成。HTML ( 超文件标记语言 ) 是一种建立网页文件的语言，透过标记式的指令 (Tag)，将影像、声音、图片、文字等连结显示出来。
HTML标记是由 < 和 > 所括住的指令，主要分为 : 单标记指令、双标记指令 ( 由 < 起始标记 >，< / 结束标记 >所构成 ) 。HTML网页文件可由任何文本编辑器或网页专用编辑器编辑，完成后 ( 以 .htm 或 .html 为文件后缀保存 ) 将HTML网页文件由浏览器打开显示，若测试没有问题则可以放到服务器 (Server) 上，对外发布信息。
HTML文件基本架构
<HTML> 文件开始
<HEAD> 标头区开始
<TITLE>...</TITLE> 标题区
</HEAD> 标头区结束
<BODY> 本文区开始
本文区内容
</BODY> 本文区结束
</HTML> 文件结束
<HTML> 网页文件格式。
<HEAD> 标头区 : 记录文件基本资料，如作者、编写时间。
<TITLE> 标题区 : 文件标题须使用在标头区内，可以在浏览器最上面看到标题。
<BODY> 本文区 : 文件资料，即在浏览器上看到的网站内容。
注意事项
通常一份HTML网页文件包含二个部份 : <HEAD>...</HEAD> 标头区、 <BODY>...</BODY> 本文区。而 <HTML> 和 </HTML> 代表网页文件格式。
首页文件名一般为defualt.htm 或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. 设定字体的字型会按照顺序找出显示的字型，若找不到则以系统预设字型显示
常用表格标记
... 表格指令 。
相关属性 :
· ALIGN 调整
· BGCOLOR 背景颜色
· BORDER 边框
· HEIGHT 高度
· WIDTH 宽度 ... 表格标题 。
相关属性 :
· ALIGN 调整 ... 表格列 ( 可省略 ) 。
相关属性 :
· ALIGN 调整 ... 表格栏标题 ( 表头 ) 粗体字 ( 可省略 ) 。
相关属性 :
· ALIGN 调整
· COLSPAN 栏宽
· ROWSPAN 栏高 ... 表格栏资料 ( 储存格 ) ( 可省略 ) 。
相关属性 :
· ALIGN 调整
· BGCOLOR 背景颜色
· HEIGHT 高度
· WIDTH 宽度
· COLSPAN 栏宽
· ROWSPAN 栏高
HTML标示
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 已看过的链接部份颜色
如 :
Re：[教程]HTML基本语法 基本组合规律 常用标记 属性
框架架构的标记，主要是分割窗口和插入浮动窗口的功能。如果能有效的运用将有助于浏览网页的效率！
常用窗口标记
<FRAMESET>...</FRAMESET> 定义分割窗口。
相关属性 :
·BORDER 边框
·COLS 行 , 设定分割左右窗口宽度 ( 用『,』分隔，可设百分比 % ;『*』表示剩余部份 )
·FRAMEBORDER 显示边框
·ROWS 列 , 设定分割上下窗口高度 ( 用『,』分隔，可设百分比 % ;『*』表示剩余部份 )
<FRAME> 定义窗口。
相关属性 :
·FRAMEBORDER 显示边框
·NAME 名称
·NORESIZE 设定是否可以调整窗口大小
·SRC 文件或URL位址
·SCROLLING 设定是否可以卷动
<NOFRAMES>...</NOFRAMES> 无支援分割窗口浏览器显示文字。
<IFRAME>...</IFRAME> 插入浮动窗口。
相关属性 :
·BORDER 边框
·FRAMEBORDER 显示边框
·NORESIZE 设定是否可以调整窗口大小
·SRC 文件或URL位址
·SCROLLING 设定是否可以卷动
举例
如 : 本站窗口架构。
( 先分割成上下窗口，再于窗口各分割成左右窗口。 )
<FRAMESET ROWS=74,* COLS=140,* FRAMEBORDER=NO BORDER=0>
<FRAME SRC=rad.htm NAME=RAD NORESIZE SCROLLING=NO>
<FRAME SRC=a-1.htm NAME=FRAME1 NORESIZE SCROLLING=NO>
<FRAME SRC=b-1.htm NAME=FRAME2 NORESIZE SCROLLING=AUTO>
<FRAME SRC=c-1.htm NAME=FRAME3 NORESIZE SCROLLING=AUTO>
</FRAMESET>
如 : 浮动窗口
<CENTER>
<IFRAME FRAMEBORDER=YES SCROLLING=YES SRC=c1-01.htm>
</IFRAME>
</CENTER>
注意
窗口基本架构的文件，通常放在HTML文件的第一页，如 : index.htm 。此HTML文件的基本架构并不需要本文区 ( BODY )，只需定义窗口架构，而其他HTML文件可用连结方式 ( A HREF=...连结标记 TARGET属性 ) 显示于指定的窗口中。
Re：[教程]HTML基本语法 基本组合规律 常用标记 属性
HTML不仅能插入图片，也可以载入MIDI音乐、WAV 音效喔！
常用音乐标记
<BGSOUND> 背景音乐、音效。
相关属性 :
·LOOP 循环 , 背景音乐播放次数
·SRC 文件或URL位址 (可为WAV、MIDI格式 )
如 :
<BGSOUND SRC=m-1.mid LOOP=True>
内嵌音乐插件
<EMBED>...</EMBED> 内嵌插件。
相关属性 :
·HEIGHT 高度
·WIDTH 宽度 ( 可设百分比% )
·SRC 设定内嵌物件的 URL 位址
·LOOP 循环 , 背景音乐播放次数
·AUTOSTART 自动播放
如 :
<EMBED SRC=m-1.mid WIDTH=145 HEIGHT=60 AUTOSTART=True LOOP=True></EMBED>
这是由IE提供的滚动条，可不要被众多的属性吓到了，越多的属性功能越强喔！
【文字卷动标记】
<MARQUEE>...</MARQUEE> 文字卷动 ( 滚动条 )。
【相关属性】
·BEHAVIOR = 设定卷动方式
-- ALTERNATE 交替来回卷动
-- SCROLL 卷动 ( 预设 )
-- SLIDE 滑动
·BGCOLOR = color 背景颜色
·DIRECTION = 设定卷动方向
·HEIGHT = n 高度
·LOOP = n 循环 , 卷动次数 ( 预设循环 )
·SCROLLAMOUNT = n 设定卷动距离
·SCROLLDELAY = milliseconds 设定卷动时间
·TRUESPEED = milliseconds 设定卷动速度
·WIDTH = n 宽度 ( 可设百分比% )
Re：[教程]HTML基本语法 基本组合规律 常用标记 属性
全写： HyperText Mark-up Language
译名： 超文件注标式语言（译名之一）
简释：一种为普通文件中某些字句加上标示的语言，其目的在于运用标记（tag）使文件 达到预期的显示效果。
HTML 是在 SGML 定义下的一个描述性语言，或可说 HTML 是 SGML 的一个应用程式，HTML 不是程式语言，如 C++ 和 Java 之类，它只是标示语言，基本上你只要明白了各种 标记的用法便算学懂了 HTML，HTML 的格式非常简单，只是由文字及标记组合而成，于 编辑方面，任何文字编辑器都可以，只要能将文件另存成 ASCII 纯文字格式即可，当然 以专业的网页编辑软件为佳。
■ 阅读须知：
这一篇【HTML剖析】偏重于标记的介绍，考虑到易懂及每节的篇幅问题，我并不按 W3C 的 HTML 分类，这可令你更易选择有兴趣的标记，其中只有【文件标记】是必读的，其 余可任意选择。这一篇不会提及任何网页编辑软件，只要掌握了 HTML ，任何网页 编辑工具都可以变成一把利器。
■ 标记写法：
任何标记皆由" < "及" > "所围住，如 < P >
标记名与小于号之间不能留有空白字符。
某些标记 要加上参数，某些则不必。如 <font size="+2" >Hello</font>
参数只可加于起始标记中。
在起始标记之标记名前加上符号" / "便是其终结标记，如 < / font>
标记字母大小写皆可。
■ 围堵标记与空标记：
标记按型态分为围堵标记与空标记
围堵标记
顾名思义，它以起始标记及终结标记将文字围住，令其达到预期显示效果。
例如 HTML Source ： <b> Creation of Webpage </b> is my favourite.
显示成： Creation of Webpage is my favourite.
其中 <b> </b> 便称为围堵标记。
它以起始标记 <b> 及终结标记 </b> 标示文字 Creation of webpage ，令它显示成粗体，两者失其一都会发生错误显示。
空标记
是指标记单独出现，只有起始标记没有终结标记。
例如 HTML Source：
I love Creation of Webpage. <br> It's a wonderful place.
显示成：
I love Creation of Webpage.
It's a wonderful place.
其中换行标记 <br> 便属空标记。
它的作用便是将标记后所有东西显示于下一行，可见终结标记于它是没意义的， 但有些人会为空标记加上终结标记，这是为方便记认而己，对 HTML 没有影响。
Re：[教程]HTML基本语法 基本组合规律 常用标记 属性
HTML 标记一览
标记 类型 译名或意义 作 用 备注
文件标记
<HTML> ● 文件声明 让浏览器知道这是 HTML 文件
<HEAD> ● 开头 提供文件整体资讯
<TITLE> ● 标题 定义文件标题，将显示于浏览顶端
<BODY> ● 本文 设计文件格式及内文所在
排版标记
<!--注解--> ○ 说明标记 为文件加上说明，但不被显示
<P> ○ 段落标记 为字、画、表格等之间留一空白行
<BR> ○ 换行标记 令字、画、表格等显示于下一行
<HR> ○ 水平线 插入一条水平线
<CENTER> ● 居中 令字、画、表格等显示于中间 反对
<PRE> ● 预设格式 令文件按照原始码的排列方式显示
<DIV> ● 区隔标记 设定字、画、表格等的摆放位置
<NOBR> ● 不折行 令文字不因太长而绕行
<WBR> ● 建议折行 预设折行部位
字体标记
<STRONG> ● 加重语气 产生字体加粗 Bold 的效果
<B> ● 粗体标记 产生字体加粗的效果
<EM> ● 强调标记 字体出现斜体效果
<I> ● 斜体标记 字体出现斜体效果
<TT> ● 打字字体 Courier字体，字母宽度相同
<U> ● 加上底线 加上底线 反对
<H1> ● 一级标题标记 变粗变大加宽，程度与级数反比
<H2> ● 二级标题标记 将字体变粗变大加宽
<H3> ● 三级标题标记 将字体变粗变大加宽
<H4> ● 四级标题标记 将字体变粗变大加宽
<H5> ● 五级标题标记 将字体变粗变大加宽
<H6> ● 六级标题标记 将字体变粗变大加宽
<FONT> ● 字形标记 设定字形、大小、颜色 反对
<BASEFONT> ○ 基准字形标记 设定所有字形、大小、颜色 反对
<BIG> ● 字体加大 令字体稍为加大
<SMALL> ● 字体缩细 令字体稍为缩细
<STRIKE> ● 画线删除 为字体加一删除线 反对
<CODE> ● 程式码 字体稍为加宽如<TT>
<KBD> ● 键盘字 字体稍为加宽，单一空白
<SAMP> ● 范例 字体稍为加宽如<TT>
<VAR> ● 变数 斜体效果
<CITE> ● 传记引述 斜体效果
<BLOCKQUOTE> ● 引述文字区块 缩排字体
<DFN> ● 述语定义 斜体效果
<ADDRESS> ● 地址标记 斜体效果
<SUB> ● 下标字 指数
<SUP> ● 下标字 下标字
Re：[教程]HTML基本语法 基本组合规律 常用标记 属性
清单标记
<OL> ● 顺序清单 清单项目将以数字、字母顺序排列
<UL> ● 无序清单 清单项目将以圆点排列
<LI> ○ 清单项目 每一标记标示一项清单项目
<MENU> ● 选单清单 清单项目将以圆点排列，如<UL> 反对
<DIR> ● 目录清单 清单项目将以圆点排列，如<UL> 反对
<DL> ● 定义清单 清单分两层出现
<DT> ○ 定义条目 标示该项定义的标题
<DD> ○ 定义内容 标示定义内容
表格标记
<TABLE> ● 表格标记 设定该表格的各项参数
<CAPTION> ● 表格标题 做成一打通列以填入表格标题
<TR> ● 表格列 设定该表格的列
<TD> ● 表格栏 设定该表格的栏
<TH> ● 表格标头 相等于<TD>，但其内之字体会变粗
表单标记
<FORM> ● 表单标记 决定单一表单的运作模式
<TEXTAREA> ● 文字区块 提供文字方盒以输入较大量文字
<INPUT> ○ 输入标记 决定输入形式
<SELECT> ● 选择标记 建立 pop-up 卷动清单
<OPTION> ○ 选项 每一标记标示一个选项
图形标记
<IMG> ○ 图形标记 用以插入图形及设定图形属性
连结标记
<A> ● 连结标记 加入连结
<BASE> ○ 基准标记 可将相对 URL 转绝对及指定连结目标
框架标记
<FRAMESET> ● 框架设定 设定框架
<FRAME> ○ 框窗设定 设定框窗
<IFRAME> ○ 页内框架 于网页中间插入框架 IE
<NOFRAMES> ● 不支援框架 设定当浏览器不支援框架时的提示
影像地图
<MAP> ● 影像地图名称 设定影像地图名称
<AREA> ○ 连结区域 设定各连结区域
多媒体
<BGSOUND> ○ 背景声音 于背景播放声音或音乐 IE
<EMBED> ○ 多媒体 加入声音、音乐或影像
其他标记
<MARQUEE> ● 走动文字 令文字左右走动 IE
<BLINK> ● 闪烁文字 闪烁文字 NC
<ISINDEX> ○ 页内寻找器 可输入关键字寻找于该一页 反对
<META> ○ 开头定义 让浏览器知道这是 HTML 文件
<LINK> ○ 关系定义 定义该文件与其他 URL 的关系
StyleSheet
<STYLE> ● 样式表 控制网页版面
<span> ● 自订标记 独立使用或与样式表同用
注：
● 表示该标记属围堵标记，即需要关闭标记如 </标记>。
○ 表示该标记属空标记，即不需要关闭标记。
IE 表示该标记只适用于 Internet Explorer。
NC 表示该标记只适用于 Netscape Communicator。
反对 表示该标记不为 W3C 所赞同，通常这标记是 IE 或 NC 自订，且己为众所支 持，只是 HTML 标准中有其它同功能或更好的选择。
弃用 表示该标记己为 W3C 所弃用，是过时的标记，但 HTML 具向下兼容的特 性，不用担心新浏览器不支援旧标记。
新 表示该标记是 HTML 4.0 中新增的。
Re：[教程]HTML基本语法 基本组合规律 常用标记 属性
文件标记
■ HTML 基本架构：
以下 HTML Source Code 便是一份 HTML 文件的基本架构 ：
<HTML>
<HEAD>
<TITLE> 网页的标题 </TITLE>
</HEAD>
<BODY>
网页的内容，很多标记都作用于此
</BODY>
</HTML>
特点解说：
整份文件处于标记<HTML>与</HTML>之间。
<HTML>用以声明这是 HTML 文件，让浏览器认出并正确处理此 HTML 文件。
文件分两部分，由<HEAD>至</HEAD>称为开头，<BODY>至</BODY>称本文。
基本上两者各有适用的标记，如<TITLE>只可出现于开头部分。
开头部分用以存载重要资讯，而只有本文部分会被显示。
所以大部分标记会运用于本文部分。
<TITLE>所标示的是文件的标题。
会出现于浏览器顶部及为别人 Bookmark 时的名称，所以每页有不同而明确的标题 是需要的。
上述标记中只有<BODY>具参数设定。
■ <BODY> 之参数设定：
例子：
<BODY text="#000000" link="#0000FF" alink="#FF0000" vlink="#0000FF" background="bg1.gif" bgcolor="#FFFFFF" leftmargin=2 topmargin=2 bgproperties="fixed">
text="#000000"
用以设定文字颜色。 #000000 代表黑色，亦可以采用颜色的名称，即 text="black" 。各种颜色的值及名称可参考【调色原理】一节。
link="#0000FF"
设定一般文字连结颜色。
alink="#FF0000"
设定刚按下时文字连结颜色。
vlink="#0000FF"
设定连结后的颜色。（被按过）。
background="bg1.gif"
设定背景墙纸。GIF 或 JPEG 皆可，可以是绝对途径或相对途径。
bgcolor="#FFFFFF"
设定背景颜色。当己设定背景墙纸时会失去作用，除非墙纸有透明部分。
leftmargin=2
设定整份文件显示画面的左方边沿空间，单位为像素。 『只适用于IE』
topmargin=2
设定整份文件显示画面的上方边沿空间。 『只适用于IE』
bgproperties="fixed"
固定背景墙纸，当卷动文字时墙纸不会跟著卷动。 『只适用于IE』
标记及参数之字母大小都可以。 其他如 onload 等事件将于【Java Script 剖析】介绍。
Re：[教程]HTML基本语法 基本组合规律 常用标记 属性
用好基本图像标记—img
网页中最引人入胜的莫过于那丰富多彩的图像了。成功的站点中不能没有绚丽的图像，否则便使测览者觉得索然无味。下面介绍HTML语言中的基本图像标记：<img>。其基本语法结构如下：
<img
align=top|middle|center|bottom|left|right
class=type
id=Value
name=value
src=url
title=text
alt=value
border=n
height=n
width=n
hspace=n
vspace=n
ismap=image
usemap=url
onload=function
onabort=function
onerror=function
dynsrc=url
controls=controls
loop=n
start=type>
可以看出，关于基本图像标记<img>的应用参数多达21项。当然，我们实际应用的只是其中几项，只有在需要实现特殊效果的情况下，才需要使用较多的参数。下面先介绍一下各参数的具体含义：
align：是指定图像的位置是靠左、靠右、居中、靠上或者是靠底。默认情况下是靠上，即align＝top。在图文混排时，这个参数很有用。
class和id：分别指定图像所属的类型和图像的id号。
name：用于设定图像的名称。
src：规定插入的图像的url地址，也就是含路径的图像文件名。
title：设定图像的标题。
alt：表示图像的替代字，主要用于在浏览器还没有装入图像（或关闭图像显示）的时候，先显示有关此图像的信息。这是初学者最易忽略的参数，因不设定它在正常显示时没问题。
border：设定图片的边框。
height和width：分别用于指定图像的高度和宽度，可以与图片原来的宽度和高度不同。
hspace和vspace：分别用于设定图像的左右边框大小和上下边框大小，在图文混排时会用到。
ismp和usemap：在应用图像地图时使用。ismap表示图像地图的数据存放在服务器中，当鼠标在图像上的某个区域上时，可以将此区域的坐标传送给服务器处理。usemap则用于设定图像地图的名称。
onload、onabort、onerror对应于设定的子程序，分别在图像被载入、取消载入、载入出错的情况下各自对应的子程序，不常用。
dynsrc：指定要下载的影像片断的url地址。
controls：设定影像播放的控制接钮。
loop：指定影像片断的播放次数，当loop=-1时，影像片断将循环播放直至页面更新。
start：设定何时开始播放影像片断，有三种选择：start=fileopen表示页面载入后即开始播放，默认的就是这种状态；start=mouseover表示当鼠标移到影像上即开始播放；start=fileopen,mouseover表示当有上面两种情况之一发生时就开始播放。
应用技巧
1、给图片加边框
上边这张图片的边框是border="4"所产生的效果，注意：边框的颜色默认的是黑色，不美观，而<img>标记也没有设置边框颜色的参数，我们可以通过设置Class参数调用CSS达到改变边框颜色的目的，如本例的完整代码是：
<img src="image/yks2.jpg" width="59" height="48" border="4" alt="黄山迎客人松" align="left" class="style1">，这里的CSS的“style1”放在网页源代码的<head>与</head>之间，其代码为：
<style type="text/css">
<!--
.style1 { border-color: #009900 }
-->
</style>
2、给图片加动态说明和替代文字
若想制作当鼠标移到图片上出现一行简短说明文字的效果，不必去使用图层技术（特殊效果的说明除外），设定title参数就行了。例：在上例的图片的代码改成这样：<img src="image/yks2.jpg" width="59" height="48" border="4" title="这就是著明的黄山迎客松，她已有近千年的树龄了。" alt="黄山迎客松" align="left" class="style1">。这样，当鼠标移到图片上，就会显示出说明文字“这就是著明的黄山迎客松，她已有近千年的树龄了。”。
给图片加上替代文字是一种好习惯，象上例那样设置alt参数，当用户关闭图像显示或页面刚刚下载时，图片还没来不得及显示时，图像的替代文字就会显示出来，这样用户就能知道对应的图像内容。
3、图像与文字混排
图文混排主要是设置align参数。在这里要注意：
1） top、middle、center、bottom所产生的效果只是一行文字，在多行文本与图象对齐时要用left和right参数值。
2)<img>中的对齐参数align所产生的效果是指图片与周围文字的位置关系，而图片在页面中的位置对齐是在图片所在的页面元素中设置的。如下面这段代码：
<p align="left"><img src="image/yks2.jpg" width="59" height="48" border="4" alt="黄山迎客人松" align="top" class="style1">图文混排示例</p>
在上面这段代码中，标记<p>中的align="left"表示图片的位置在窗口的左端；而<img>中的align="top"则表示图片旁边的文字与图片的顶端对齐。
3）为了避免图片与旁边文字挨得太近不便阅读，可以通过设置hspace参数来控制图片与文字间的距离，一般设置hspace="10"（表示图片的左右有10个像素的空白）就能达到较好的效果。
4、动态替换图像
鼠标不在图片上
鼠标移到图片上
当用户的鼠标放在图片上时，图片会自动更换，鼠标离开之后，图片又会恢复原来的样了。象上边所示的这种效果，当把鼠标移到上面时，看到的效果似乎是那个白色窗口向上下展开了，实际上是换了一张图片。鼠标移开，又恢复了原样。制作这样的效果，先要给欲替换的图片设定名字，本例中是name="hscfjj"；然后设定onmuseover和onmouseout 参数。本例<img>标记的完整代码如下：
<img src="image/htmlp1.gif" width="182" height="129" align="left" name="hscfjj" onmouseover="hscfjj.src='image/htmlp2.gif'" onmouseout="hscfjj.src='image/htmlp1.gif'" alt="黄山村夫站（
http://fym888.go.163.com)简介图片" vspace="10" hspace="10">
采用本例来制作动态按钮将会达到很吸引人的效果。
5、在网页加入影像片断
例：在move 目录下有一介绍“黄山风光”的影像片断文件“hsfg.avi”，现要在网页中播放。那么源代码是这样的：<img dynsrc="move/hsfg.avi" start="mouseover" width="380" height="288" controls loop="1" alt="黄山风光介绍"影像片断">
上面这段代码的效果是，当鼠标移开影像片断上时即开始训动媒体播放器播放影像一次，并且还设定了显示播放器控制面板，以便对播放过程进行控制。
从上面的代码可以看出，在网页中加入影像片断与加普通图像基本相同，如它们都要指定来源、设定大小和替代文字等。但在这里请注意：加入影像片断时要使用“dynsrc”参数，且不能再在同个<img>标记中使用“src”参数，否则将不能播放影像片断，只能显示替代文字了。
Re：[教程]HTML基本语法 基本组合规律 常用标记 属性
超链接相关问题
以下问题用上了css。
如何去掉下划线？若想在整页中都去掉，在<head>与</head>之间加上
<style>
<!--
a {text-decoration: none}
-->
</style>
若只对特定链接使用，则链接语法为
<a href="你的链接" style=text-decoration: none></a>如何使鼠标放到有超级链接的字体时出现字体颜色变化？
在<head>与</head>之间加上
<style>
<!--
a:link {color:$}
a:visited {color:$}
a:active {color:$}
a:hover {color:$}
-->
</style>
其中link是超链接的颜色,visited是访问过的链接颜色,hover是鼠标移上去的颜色。把$换成你需要的颜色，例如black或#000000。还可与下划线一起使用，如 a:hover{color:$;text-decoration: none}
Re：[教程]HTML基本语法 基本组合规律 常用标记 属性
用好HTML的帧窗口标记
帧窗口是一种复杂的页面技术，应用帧窗口使得用户可以在同一个浏览器窗口中浏览不同网站的内容，可以在一个小窗口中发出查询命令而在另一个小窗口中接收查询结果。实现帧窗口的思路是将浏览器窗口按照功能分割成多个小窗口。每个窗口都对应有自己的HTML页面，按照一定的组合方式组合在一起，以实现特殊的效果。
在HTML中用<frameset>（分割窗口标记）来分割窗口，<frameset>在多窗口页面中的地位就相当于<body>在普通单窗口页面中的地位，在页面中用<frameset>……</frameset>标志页面主体部分的起止位置。而且，<frameset>标记决定了怎样划分窗口，以及每个窗口的位置和大小。其基本语法结构如下：
<frameset
cols＝n
rows=n
frameborder=yes|no
border＝n
bordercolor＝#n
framespacing=n>
cols和rows：是决定页面如何分割的两个参数。分割左右窗口用cols，各帧的左右宽度用占窗口宽度的百分比来表示。比如：cols="30%,40%,*"就表示水平方向分割成三个窗口，各自所占总宽度的百分比依次是30%，40%和30%。其中"*"表示剩余部分，也就是说"*"对应的小窗口宽度为剩余的宽度。分割上下窗口用rows，同样采用百分比的设定方法。
frameborder：是指定各分窗口是（ye）否（no）要加边框；如果加过框的话，则用 border参数指定边框的宽度，bordercolor指定边框的颜色。
framespacing：用于设定各分窗口之间的间隔大小，默认值是0。
用<frameset>标记把窗口分割好后，各窗口的属性是用HTML的<frame>标记来定义的，所以<frameset>标记中必须包含<frame>标记，用以定义各分窗口的属性。其语法如下：
<frame
align=left|center|right|top|bottomv name=framename
src＝url
noresize
scrolling＝yes|on|auto
frameborder=yes|no
bordercolor＝＃n
marginheight=n
marginwidth＝n>
align：设定分窗口的位置是靠左（left）、靠右（right）、居中（center）、靠上（top）还是靠底（bottom）。
name：用于指定分窗口的名称，src则用于指定分窗口所对应的HTML页面地址。
noresize：是对用户来说的，当<frame>标记中包含此参数的时候，用户就不能用鼠标调整修改各分窗口的大小。
scrolling：设定分窗口是否要滚动条。scrolling=no时不要滚动条，scrolling＝yes时表示要滚动条，scrolling＝auoto时表示根据实际情况自动设置滚动条。
frameborder和bordercolor：是设定分窗口有无边框和边框颜色的。但对象只限于用<frame>标记的分窗口。
marginheight和marginwidth：分别用于设定分窗口的上下边缘和左右边缘的宽度。
用上面的两个标记，就能够实现多窗口页面，下面将举例说明。
1、左小右大两窗口
这种页面一般在左边的窗口放一个网站导航页，右面放网站页面内容。制作方法：
先用<frameset>标记并通过设置其cols参数，沿水平方向分割成两个窗口，左边的窗口占20%，右边的窗口取剩余部分，再用<frame>标记分别定义两个窗口的属性。完成后的分帧页面源代码如下：
<html>
<head>
<title>分帧窗口示例</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<frameset cols="20%,*" >
<frame name="leftFrame" noresize src="ahtml.htm">
<frame name="mainFrame" noresize src="bhtml.htm">
</frameset>
<noframes>
<body>
<p>很抱歉！这是一个分帧页面，但由于你的浏览器不支持，所以不能浏览！ </p>
<p>Sorry!This page uses frames,but your browser doesn't support them .
</body></noframes>
</html>
从上面的代码看，设计帧窗口页面并没有想象得那么复杂，但以下几点在具体操作时要注意：
1）用<frame>标记定义分窗口属性时，要注意其在<frameset>标记中的顺序，切不要搞乱了；
2）分窗口的名称虽可随意定，但最好是以其所在位置命名比较好；
3）分窗口的scrolling（滚动条）一般取其默认值"auto"比较好；
4）虽然在最终往往不要分窗口的边框，但在设计阶段，还是设置为有边框比较好，这样在编辑时一目了然；
5）上面页面代码中后面那句话一般加上为好，因为有的浏览器版本不支持分帧页面，若没加那名话，用户的浏览器若不支持分帧时，看到的是一片空白，不知是怎么一回事了，有那句话提示一下就明白了。
2、一顶一左一右页面
先看这种分帧页面的源代码：
<frameset rows="20%,*">
<frame name="topFrame" scrolling="NO" noresize src="toppage.htm" >
<frameset cols="18%,*">
<frame name="leftFrame" noresize src="leftpage.htm">
<frame name="mainFrame" src="mainpage.htm">
</frameset>
</frameset>
从上面的代码中可看出，建立复杂分帧页面的方法是由简到繁，如本例中，先用<frameset>定义其“rows”参数，把窗口分成上下两个窗口，再用<frame>标记定义上部窗口，因下部窗口还需再分，所以不用<frame>定义其属性，而是用<frameset>标记设置其cols参数，把它再分成左右两个窗口，因已达目的，所以开始用<frame>标记定义左右两个窗口的属性。
只要记住：先粗分，后细分，cols横向分， rows纵向分，无需再分的窗口用<frame>定义属性，这些基本原则，制作分帧窗口页面就会轻松自如。
Re：[教程]HTML基本语法 基本组合规律 常用标记 属性
HTML表单设计基础
表单在HTML页面中起着重要作用，它是与用户交互信息的主要手段。一个表单至少应该包括说明性文字、用户填写的表格、提交和重填按钮等内容。用户填写了所需的资料之后，按下“提交资料”按钮，这样所填资料就会通专门的CGI接口传到Web服务器上。网页的设计者随后就能在Web服务器上看到用户填写的资料，从而完成了从用户到作者之间的反馈和交流。对于免费个人网站，往往服务器不提供CGI功能，也可以电子邮件来接收用户的反馈信息。
表单中主要包括下列元素：
button——普通按钮
radio ——单选按钮
checkbox——复选框
select ——下拉式菜单
text ——单行文本框
textarea——多行文本框
submit——提交按钮
reset—— 重填按钮
用HTML设计表单常用的标记是：<form>、< input>、<Option>、<Select>、<textarea>和<isindex>等标记。
1、<form>表单标记
该标记的主要作用是设定表单的起止位置，并指定处理表单数据程序的url地址。其基本语法结构如下：
<form
action＝url
method=get|post
name＝value
onreset=function
onsubmit＝function
target=window>
</form>
其中action：用于设定处理表单数据程序url的地址。这样的程序通常是CGI应用程序，采用电子邮件方式时，用action="mailto:你的邮件地址"。
method：指定数据传送到服务器的方式。有两种主要的方式，当method=get时，将输入数据加在action指定的地址后面传送到服务器；当method=post时则将输入数据按照HTTP传输协议中的post传输方式传送到服务器，用电子邮件接收用户信息采用这种方式。
name：用于设定表单的名称。onrest和onsubmit是主要针对“reset”按钮和“submit”按钮来说的，分别设定了在按下相应的按钮之后要执行的子程序。
target：指定输入数据结果显示在那个窗口，这需要与<frame>标记配合使用。
2、<input>表单输入标记
此标记在表单中使用频繁，大部分表单内容需要用到此标记。其语法如下：
<inPut
aligh=left|righ|top|middle|bottom
name=value
type=text|textarea|password|checkbox|radio|submit|reset|file|hidden|image|button
value=value
src=url
checked
maxlength=n
size=n
onclick=function
onselect=function>
align：是用于设定表单的位置是靠左（left）、靠右（right）、居中（middle）、靠上 top）还是靠底（bottom）。
name：设定当前变量名称。
type：决定了输入数据的类型。其选项较多，各项的意义是：
type=text：表示输入单行文本；
typet=textarea：表示输入多行文本；
type=password:表示输入数据为密码，用星号表示；
type－checkbox：表示复选框；
type－radio：表示单选框；
type一submit：表示提交按钮，数据将被送到服务器；
tyPe－reset：表示清除表单数据，以便重新输入；
type－file：表示插入一个文件；
type－hidden：表示隐藏按钮；
type＝image：表示插入一个图像；
type一button：表示普通按钮；
value：用于设定输入默认值，即如果用户不输入的话，就采用此默认值；
src：是针对type=image的情况来说的，设定图像文件的地址；
checked：表示选择框中，此项被默认选中；
maxlength：表示在输入单行文本的时候，最大输入字符个数；
size：用于设定在输入多行文本时的最大输入字符数，采用width，height方式；
onclick：表示在按下输入时调用指定的子程序；
onselect：表示当前项被选择时调用指定的子程序。
3、<select>下拉菜单标记
用<select>标记可以在表间中插入一个下拉菜单，它需与<option>标记联用，因为下拉菜单中的每个选项要用<option>标记来定义。<select>标记的语法如下：
<select
name=nametext
size=n
multiple>
其中name：设定下拉式菜单的名称；
size：设定菜单框的高度，也就是一次显示几个菜单项，一般取默认值（size="1"）；
multiple：设定为可以进行多选。
4、<option>选项标记
该标记为下拉菜单中一个选项，语法很简单：
<option
selected
value=value>
其中selected：表示当前项被默认选中；
value：表示该项对应的值，在该项被中之后，该项的值就会被送到服务器进行处理。
5、<textarea>多行文本输入标记
这是一个建立多行文本输入框的专用标记，其语法如下：
<textarea
name=name
cols=n
rows=n
wrap=off|hard|soft>
各参数含义：name：文本框名称；clos：宽度；rows：高度（行数）；wrap：换行控制，off：不自动换行；hard：自动硬回车换行，换行标记一同被传送到服务器中去；soft：自动软回车换行，换行标记不会传送到服务器中去。
表单所涉及的标记较多，参数也较复杂，而实际制作表单时就是这些标记的组合应用，但一般的表单不可能涉及所有参数，我们还是那个原则，能用默认值的尽量用默认值，绝不设定一个不用的参数。我在后面的文章中将通过实例介绍一些常用参数的应用技巧。
Re：[教程]HTML基本语法 基本组合规律 常用标记 属性
HTML中的META元素
META元素就是经常在和之间出现的东东。它对访问者本人是不可见的(除非分析HTML源文件)，但是，它对浏览器和一些搜索引擎是可见的，用来描述文档特性。本文拟就对实用的和常见的META特性进行讨论。
首先，看一下META所支持的属性：
name="" 指定特性名
content="" 指定特性值
scheme="" 命名一个解释特性值的方案
http-equiv="" HTTP服务器以此属性收集HTTP响应头标
lang="" 指定语言信息
dir="" 指定文本方向
好了，让我们具体看一下一些META特性：
1.搜索引擎相关
许多搜索引擎都通过放出robot/spider搜索来登录网站，这些robot/spider就要用到meta元素的一些特性来决定怎样登录，若你的网页上没有这些meta元素，则不会被登录——非常严重！
定义登录时的关键词：
<META name="keywords" content="你网页的关键词">
登录时的网页简述：
<META name="description" content="你网页的简述">
你还可引导robot/spider是否登录
<META name="robots" content="noindex,nofollow">
上例就让robot/spider不要登录此页，且不要顺着此页的连接往下探找。下面是content=""中所填值的意思：
index - 这是默认值，让robot/spider登录
noindex - 不让robot/spider登录
nofollow - 不让robot/spider顺着此页的连接往下探找
none - 和 "noindex, no follow" 起相同作用
2. 客户端拖曳
见过这样的页面，经过一段时间转到另外某个页面的吗？告诉你，这用到了 "http-equiv" META 元素的一种属性。如下：
<META http-equiv="refresh" content="1; url=另外一个页面的网址">
content=""中的值说明了经过多少秒后转向另外的页面，若将此值设为0，则立即转向。
禁用缓存。如果你不想让你的页面保存在你访问者的缓存中，可这样：
<META HTTP-EQUIV="expires" CONTENT="0">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
为什么要禁用访问者的缓存呢？浏览器访问某个页面时会将它存在缓存中，下次再次访问时就可从缓存中读取，以提高速度。当你希望访问者每次都刷新你广告的图标，或每次都刷新你的计数器，就要禁用缓存了。
Re：[教程]HTML基本语法 基本组合规律 常用标记 属性
调色原理
HTML 的颜色表示可分两种：
以命名方式定义常用的颜色，如 RED。
以 RGB 值表示，如 #FF0000 表示 red。
命名方式涵括的色种不多亦不甚方便，较少采用，以下介绍 RGB 值的原理：
众所皆知颜色是由 "red" "green" "blue" 三原色组合而成的，在 HTML 中对於彩度的定义是 采十六进位的，对於三原色 HTML 分别给予两个十六进位去定义，也就是每个原色可有 256 种彩度，故此三原色可混合成一千六佰多万的颜色。
例如
白色的组成是 red=ff, green=ff, blue=ff, RGB 值即为 ffffff
红色的组成是 red=ff, green=00, blue=00, RGB 值即为 ff0000
绿色的组成是 red=00, green=ff, blue=00, RGB 值即为 00ff00
蓝色的组成是 red=00, green=00, blue=ff, RGB 值即为 0000ff
黑色的组成是 red=00, green=00, blue=00, RGB 值即为 000000
於应用时常在每个 RGB 值之前加上符号 # 以示分别，但不加亦可。
■ HTML 基本架构：
选按不同颜色按键以测试前景颜色效果 (只适合 Internet Explorer)
选按不同颜色按键以测试背景颜色效果
或输入一个 RGB 颜色码或名称
