HTML英语意思是：Hypertext Marked Language，即超文本标记语言,是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台（如UNIX，WINDOWS等）。自1990年以来HTML就一直被用作World Wide Web 的信息表示语言，用于描述Homepage的格式设计和它与WWW上其它Homepage 的连结信息。使用HTML语言描述的文件，需要通过WWW浏览器显示出效果。
标记一览
标记 类型 译名或意义 作 用 备注
文件标记
<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> ● 下标字 下标字
清单标记
<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 中新增的。
调色原理
■ 调色原理：
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 颜色码或名称
■ 16 常用颜色表：
Color value Name Color value Name
#00FFFF aqua #808080 gray
#000080 navy #C0C0C0 silver
#000000 black #008000 green
#808000 olive #008080 teal
#0000FF blue #00FF00 lime
#800080 purple #FFFF00 yellow
#FF00FF fuchsia #800000 maroon
#FF0000 red #FFFFFF white
■ 其它常用颜色表：
Color value Name Color value Name
#F0F8FF aliceblue #A00000 antiquewith
#7FFFD4 aquamarine #F0FFFF azure
#F5F5DC beige #FFE4C4 bisque
#000000 black #FFEBCD blanchedalmond
#0000FF blue #8A2BE2 blueviolet
#A52A2A brown #DEB887 burlywood
#5F9EA0 cadetblue #7FFF00 chartreuse
#D2691E chocolate #FF7F50 coral
#C0F000 cornfloewrblue #FFF8DC cornsilk
#00FFFF cyan #00008B darkblue
#008B8B darkcyan #B8860B darkgoldenrod
#A9A9A9 darkgray #006400 darkgreen
#DA0000 darkhaki #8B008B darkmagenta
#556B2F darkolivegreen #DA000E darkorenge
#9932CC darkorchid #8B0000 darkred
#E9967A darksalmon #8FBC8F darkseagreen
#483D8B darkslateblue #2F4F4F darkslategray
#00CED1 darkturquoise #9400D3 darkviolet
#FF1493 deeppink #00BFFF deepskyblue
#696969 dimgray #1E90FF dodgerblue
#B22222 firebrick #FFFAF0 floralwhite
#228B22 forestgreen #DCDCDC gainsboro
#00000E gostwhite #FFD700 gold
#00E00D golenrod #808080 gray
#008000 green #ADFF2F greenyellow
#F0FFF0 honeydew #FF69B4 hotpink
#CD5C5C indianred #FFFFF0 ivory
#F0E68C khaki #E6E6FA lavender
#FFF0F5 lavenderblush #7CFC00 lawngreen
#FFFACD lemonchiffon #ADD8E6 lightblue
#F08080 lightcoral #E0FFFF lightcyan
#0000E0 lightgodenrod #0000E0 lightgodenrodyellow
#0000A0 lightgray #90EE90 lightgreen
#FFB6C1 lightpink #FFA07A lightsalmon
#20B2AA lightseagreen #87CEFA lightskyblue
#0000EB lightslateblue #778899 lightslategray
#B0C4DE lightsteelblue #FFFFE0 lightyellow
#32CD32 limegreen #FAF0E6 linen
#FF00FF magenta #800000 maroon
#66CDAA mediumaquamarine #0000CD mediumblue
#BA55D3 mediumorchid #ED0000 mediumpurpul
#3CB371 mediumseagreen #7B68EE mediumslateblue
#00FA9A mediumspringgreen #48D1CC mediumturquoise
#C71585 mediumvioletred #191970 midnightblue
#F5FFFA mintcream #FFE4E1 mistyrose
#FFE4B5 moccasin #FFDEAD navajowhite
#000080 navy #A0B0E0 navyblue
#FDF5E6 oldlace #6B8E23 olivedrab
#FFA500 orange #0E0EED orengered
#DA70D6 orchid #A00D00 palegodenrod
#98FB98 palegreen #AFEEEE paleturquoise
#DB7093 palevioletred #FFEFD5 papayawhip
#FFDAB9 peachpuff #CD853F peru
#FFC0CB pink #DDA0DD plum
#B0E0E6 powderblue #800080 purple
#FF0000 red #BC8F8F rosybrown
#4169E1 royalblue #8B4513 saddlebrown
#FA8072 salmon #F4A460 sandybrown
#2E8B57 seagreen #FFF5EE seashell
#A0522D sienna #87CEEB skyblue
#6A5ACD slateblue #708090 slategray
#FFFAFA snow #00FF7F springgreen
#4682B4 steelblue #D2B48C tan
#D8BFD8 thistle #FF6347 tomato
#40E0D0 turquoise #EE82EE violet
#00E0ED violetred #F5DEB3 wheat
#000E00 hite #F5F5F5 whitesmoke
#FFFF00 yellow #9ACD32 yellowgreen
连接标记
■ 本节主要介绍的标记：
<A>
<BASE>
欲明白本篇【HTML剖析】之标记分类请看 【标记一览】。
亦请先明白围堵标记与空标记的分别请看 【HTML概念】。
■ <A> ：
▲Top
<A> 称连结标记，由 <A> 与 </A> 所围的文字、图片等等可以成为一个连结。
<A> 的一般参数设定：
例如 <a href="index.html" name="hello" target="_top">
href="index.html"
这参数不能与另一参数 name 同时使用，使用这参数才能造成可按的连结。
当作为一外部连结时： href 所设定的是该连结所要连到的文件名称，若 该文件与此 html 档不是同在一目录请加上适当的路径，相对绝对皆可。相 对路径与绝对路径的分别、内部连结与外部连结的分别务必请看 Composer 教室的【连结进阶】。
当作为一内部连结时： href 所设定的是该连结所要连到的同文件内参考 点或指定文件之参考点，且不需要包围任何字画只需加上结束标示 </a>便 可以，例如 <a href="#there"></a> 、 <a href="index.html#there"></a> 及 <a href="http://www.school.net.hk/~chris55/index.html#there"></a> 其中 there 便 是参考点，并需於其前加上符号 # 以作识别，参考点由下一个参数 name 事先於文件中埋下。
name="hello"
这参数是为文件埋下参考点，作为被连结，不会被显示。所以说造成一个内部连 结需要使用两次 <A> 连结标记。一个使用参数 name 事先於文件中埋下一参考 点，另一个使用参数 href 连到这个参考点。
target="_top"
设定连结被按後之结果所要显示的视窗。可选值为： _blank, _parent, _self, _top, 框 窗名称。
target="框窗名称"
这只运用於框架中，若被设定则连结结果将显示於该“框窗名称”之框窗 中，框窗名称是事先由框架标记所命名。
target="_blank" 或 target="new"
将连结的画面内容，开在新的浏览视窗中。
target="_parent"
将连结的画面内容，当成文件的上一个画面。
target="_self"
将连结的画面内容，显示在目前的视窗中。(内定值)
target="_top"
将框架中连结的画面内容，显示在没有框架的视窗中。（即除去了框架)
例子一：（外部连结）
原始码
<a href="../promote/engines.html">四百五十个寻找引擎</a>
<p><a href="http://www.hkseek.com/icq";>
<img src="link_image.gif" width=99 height=44 border=1 alt="ICQ Garden"></a>
<p><a href="http://www.hkseek.com/icq";>
<img src="link_image.gif" width=99 height=44 border=0 alt="ICQ Garden"></a>
显示结果 四百五十个寻找引擎
例子二（内部连结）：请到 PenPal Garden 的 FAQ Page 刻体验一下何为内部连结。
原始码 <a name="test"></a>
<a href="#test">本页的内部连结</a>
<br><a href="http://www.school.net.hk/~chi/faq.html#14">跳到 PenPal Garden 的 FAQ 部分</a>
显示结果
本页的内部连结
跳到 PenPal Garden 的 FAQ 部分
■ <BASE> ：
▲Top
<BASE> 是一个连结基准标记，用以改变文件中所有连结标记的参数内定值。它只能应用 於文件的开头部分，即标记 <HEAD> 与 </HEAD> 之间。
<BASE> 的一般参数设定：
例如 <base href="http://www.microsoft.com/"; target="_top">
href="http://www.microsoft.com/";
设定该页网页中所有 HTTP 文件及图形（包括相对路径连结及 <IMG> 图形标记 等）的内定路径，其他如 ftp:// 及 gopher:// 等则不受影响。这参数只可填入一个相 对或绝对的路径，不必填入档案名称。一般相对路径连结及 <IMG> 图形标记等是 内定以该页网页所在的目录作为起点，若依这例子，该文件中所有连结将会以 http://www.microsoft.com/ 作为起点，若其中有连结如 <a href="index.html">Back _fcksavedurl=""index.html">Back" to Main Page</a> ，那末它不会连到自已目录下的 index.html，它将会连到 Microsoft 的 首页，这是因为相对路径己给 <BASE> 转成绝对的了。
target="_top"
设定该页网页中所有连结被按後之结果所要显示的视窗，免得分别为所有连结加 上 target 参数，常应用於框架中。其设定与 <A> 连结标记中 target 参数相同。
例子容後再写，你可亲自尝试或到一些以框架制作的网页去体验一下
图形标记
■ 本节主要介绍的标记：
<IMG>
欲明白本篇【HTML剖析】之标记分类请看 【标记一览】。
亦请先明白围堵标记与空标记的分别请看 【HTML概念】。
■ <IMG> ：
<IMG> 称图形标记，主要用以插入图片於网页中，至於其它用处如配合影片档案等的播 放及影像地图（Image Map 或称一图多连结）则於不会在这节提及，请看【影像地图】及 【其他标记】。
<IMG> 的一般参数设定：
例如 <img src="logo.gif" width=100 height=100 hspace=5 vspace=5 border=2 align="top" alt="Logo of PenPals Garden" lowsrc="pre_logo.gif">
src="logo.gif"
图片来源，接受 .gif, .jpg 及 .png 格式，前两者通行己久，後者由 96 年开始发展， 於未来取代前两者。若图片档与该 html 档同处一目录则只需写上档案名称，否则 必须加上正确的途径，相对及绝对皆可。两者的分别请看 Composer 教室之【连结 进阶】。
width=100 height=100
设定图片大小，此宽度、及高度一般采用 pixels 作单位。通常只设为图片的真实 大小以免失真，若需要改变图片大小最好事先使用图像编辑工具。
hspace=5 vspace=5
设定图片边沿空白，以免文字或其它图片过於贴近。hspace 是设定图片左右的空 间，vspace 则是设定图片上下的空间，高度采用 pixels 作单位。
border=2
图片边框厚度。
align="top"
调整图片旁边文字的位置，你可以控制文字出现在图片的偏上方、中间、底端、 左右等，可选值：top, middle, bottom, left, right，内定为 botom。Netscape 还支援 texttop, baseline, absmiddle, absbottom，
texttop 表示图片和文字依顶线对齐，
baseline 表示图片对齐到目前文字行底线值，
absmiddle 表示图片对齐到目前文字行绝对中央，
absbottom 表示图片对齐到目前文字行绝对底部，（绝对底部意指它考虑到比方 y 、g、q 等字的下缘）。
alt="Logo of PenPal Garden"
这是用以描述该图形的文字，若用者使用文字浏览器，由於不支援图片，这些文 字更会代替图片而被显示。若於支援图片显示的浏览器，当鼠标移至图片上该些 文字亦会显示。
lowsrc="pre_logo.gif"
设定先显示低解像图片，若所加入的是一张很大的图片，下载需时很长，这张低 解像图片会先被显示以免浏览失却兴趣，通当是原图片灰阶版本。
例子一：
原始码 <img src="girl.gif" width=100 height=112 border=0 alt="beautiful girl"> 普通插入
显示结果 普通插入
例子二：
原始码 <img src="girl.gif" width=100 height=112 border=0 alt="beautiful" hspace=10 vspace=20"> 设定上下左右空白位置
显示结果 设定上下左右空白位置
例子叁：
原始码 <img src="girl.gif" width=100 height=112 border=4 alt="beautiful" hspace=10 vspace=20"> 设定上下左右空白位置
显示结果 设定字画中间对齐，边框厚度为 4。
例子四：
原始码 <img src="girl.gif" width=100 height=112 alt="beautiful lady" align="right" border=0> 设定图片*右。
显示结果 设定图片*右。
例子五：
原始码 <img src="girl.gif" width=200 height=220 alt="I'm not beautiful right now" border=0> 放大了的图片
显示结果 放大了的图片
其他标记
■ 本节主要介绍的标记：
<MARQUEE>
<BLINK>
<ISINDEX>
<META>
<LINK>
欲明白本篇【HTML剖析】之标记分类请看 【标记一览】。
亦请先明白围堵标记与空标记的分别请看 【HTML概念】。
■ <MARQUEE>：
<MARQUEE> 只适用於 IE ，台湾译为「跑马灯」如 Status Bar 的那种，意指走动或卷动的 文字，其参数设定颇多。我先举些例子，然後再列出各参数。
例子一：
原始码 <marquee width=150>I'm a small MARQUEE</marquee>
显示结果 I'm a small MARQUEE
例子二：
原始码 <marquee behavior=slide>This is a slide effect</marquee>
显示结果 This is a slide effect
例子叁：
原始码 <marquee behavior=alternate>撞来撞去，啊！我昏啦</marquee>
显示结果 撞来撞去，啊！我昏啦
例子四：
原始码 <marquee scrolldelay=5 scrollamount=50>哗！！太快了，我又昏啦</marquee>
显示结果 哗！！太快了，我又昏啦
<marquee behavior="SCROLL" direction="LEFT" bgcolor="#0000FF" height="30" width="150" hspace="0" vspace="0" loop="INFINITE" scrollamount="30" scrolldelay="500">Hello</marquee>
behavior="SCROLL"
决定文字的卷动方式，可选值为：
SCROLL 一般卷动，是内定值。
SLIDE 如幻灯片，一格格的，效果是文字一接触左边便全部消失。
ALTERNATE 文字向左右两边撞来撞去。
direction="LEFT"
设定文字的卷动方向，LEFT 表示向左，是内定值，RIGHT 表示向右。
bgcolor="#0000FF"
设定文字卷动范围的背景颜色，颜色值可参考【调色原理】。
height="30" width="150"
>设定文字卷动范围，可采用相对或绝对，如 30% 或 30 等，单位为像素。
hspace="0" vspace="0"
设定文字的水平及垂直空白位置。
loop="INFINITE"
设定文字卷动次数，其值可以是正整数或 INFINITE，INFINITE 是内定值，表示无 限次。
scrollamount="30"
每「格」文字之间的间隔，单位是像素。
scrolldelay="500"
文字卷动的停顿时间，单位是毫秒。
■ <BLINK> ：
▲Top
<BLINK> 是令文字闪烁，只适用於 NC，用法直接，没有参数。看看例子便知：
例子：
原始码 <blink>我是天上星，闪又闪</blink>
显示结果 我是天上星，闪又闪
■ <ISINDEX> ：
▲Top
<ISINDEX> 可让某些 Web Server 找寻网页内的关键字，假如你的 Web Server 提供这样的 找寻功能，使用者的浏览器也支援这些找寻功能，那麽，载入网页时就会看到一个简单的 找寻方块。其用法直接，没有参数，本来是要放於 <HEAD> 标记内的，但把它放在 <BODY> 标记内亦不见有问题，请记住，3W 以反对此标记。
例子：
原始码 <isindex>
显示结果
--------------------------------------------------------------------------------
可以搜索该索引。请键入要搜索的关键字:
--------------------------------------------------------------------------------
■ <META> ：
▲Top
<META> 是放於 <HEAD> 与 </HEAD>之间的标记，功用与变化等对，所以我公式化地介 绍。
<meta name="Description" content="This is Chris's Home Page">
该网页的描述，作用於寻找引擎的登录，其详细用法请参加考【登录技巧】
<meta name="Keywords" content="Chris, Web, Music, photo">
该网页的关键字，作用於寻找引擎的登录，其详细用法请参加考【登录技巧】
<meta http-equiv="Expires" content="Tue, 09 Dec 1997 00:00:00 GMT">
<meta http-equiv="Pragma" content="no-cache">
以上行功能相同，都是要浏览器重新载入该页，不要使用快取档案，当然可以修 改该 Expire 时间。
<meta http-equiv="Content-Type" content="text/html; charset=big5">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
设定这是 HTML 文件及其编码语系，中文网页请使用 big5 那行，或者不设编码亦 可，纯英文网页建议使用 iso-8859-1。
<meta name="GENERATOR" content="Mozilla/4.04 [en] (Win95; I) [Netscape]">
<meta name="GENERATOR" content="Microsoft FrontPage 3.0">
这只表示该网页由甚麽编辑器写成。
<meta http-equiv="refresh" content="10; url=http://www.hkiwc.com">
这一行较为实用，能於预定秒数内自动转到指定的网址。原始码中 10 表示 10秒。
■ <LINK> ：
▲Top
<LINK> 用来将目前文件与其它 URL 作连结，但不会有连结按钮，用於 <HEAD> 标记间， 格式如下：
<link href="URL" rel="relationship">
<link href="URL" rev="relationship">
扫一扫
9769
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
