HTML语言剖析

 

 

 

HTML语言剖析
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>
  • 标记字母大小写皆可。
■ 围堵标记与空标记：
标记按型态分为围堵标记与空标记
  1. 围堵标记
    顾名思义，它以起始标记及终结标记将文字围住，令其达到预期显示效果。
例如 HTML Source ： <b>Creation of Webpage</b> is my favourite.
显示成： Creation of Webpage is my favourite.
其中 <b></b> 便称为围堵标记。
它以起始标记<b>及终结标记</b>标示文字 Creation of webpage ，令它显示成粗体，两者失其一都会发生错误显示。
  1. 空标记
    是指标记单独出现，只有起始标记没有终结标记。
例如 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 没有影响。

HTML语言剖析▲Top
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>
●
上标字
指数（平方、立方等）
 
<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语言剖析▲Top
文件标记
<HTML> ； <HEAD> ； <TITLE> ； <BODY>
■ 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 剖析】介绍。

HTML语言剖析▲Top
排版标记
<!--注解-->； <P> ； <BR> ； <HR> ； <CENTER> ； <PRE> ； <DIV> ； <NOBR> ； <WBR> ；
像很多电脑语言一样，HTML 文件亦提供注解功能。浏览器会忽略此标记中的文字（可以 是很多行）而不作显示，一般使用目的：
  • 为文中不同部份加上说明，方便日后修改。
    这对较复杂或非私人网页尤其重要，它不单是提醒自已，亦提醒你的同事这部分 做什么、那部分做什么。
    例子：
    <!--由这处开始是产品订购表格-->
  • 用作版权声明。
    假如你不希望别人使用或复制你的网页，可加上警告字眼。
    例子：
    <!--本文版权为 1998, Creation of Webpage 所拥有，未经许，请勿抄摘-->
<P>称为段落标记。作用：为字、画、表格等之间留一空白行。
本来<P>是一围堵标记，标于一段落的头尾，但从 HTML 2.0 开始己不需要</P>作结尾。
<P> 的常用参数： 如：<p align="center">
  • align="center"
    可选值：right, left, center。
    内定值： align="left"
例子：
原始码
Here is the text for my paragraph. It does't matter how long it is,
how many space are between the words or when I decide to hit the return key.
It will create a new paragraph only when I begin the tag with another one.
<P>Here's the next paragraph.
显示结果
Here is the text for my paragraph. It does't matter how long it is, how many space are between the words or when I decide to hit the return key. It will create a new paragraph only when I begin the tag with another one.
Here's the next paragraph.
<BR>称为换行标记。作用：令字、画、表格等显示于下一行。
由于浏览器会自动忽略原始码中空白和换行的部分，这令到<BR>成为最常用的标记之 一。因为无论你在原始码中编好了多漂亮的文章，若不适当地加上换行标记或段落标记， 浏览器只会将它显示成一大段。
错误示范：（邮局可不会接受一行过的地址）
原始码
566 E Boston Post RD
Mamaroneck NY 10543-9982
United States of America
结果
566 E Boston Post RD Mamaroneck NY 10543-9982 United States of America
正确例子：
原始码
566 E Boston Post RD
<BR>Mamaroneck NY 10543-9982
<BR>United States of America
结果
566 E Boston Post RD
Mamaroneck NY 10543-9982
United States of America
<HR>称为水平线。作用：插入一条水平线。
<HR> 之参数修改：
以： <HR align="LEFT" size="2" width="70%" color="#0000FF" noshade> 为例。
  • align="LEFT"
    设定线条置放位置，可选择：left；right；center 三种设定值。
  • size="2"
    设定线条厚度，以像素作单位，内定为 2。
  • width="70%"
    设定线条长度，可以是绝对值（以像素作单位）或相对值，内定为 100%。
  • color="#0000FF" 『只适用于IE』
    设定线条颜色，内定为黑色。 #0000FF 代表蓝色，亦可以采用颜色的名称，即 text="blue" 。
  • noshade
    设定线条为平面显示，若删去则具阴影或立体，这是内定值。
例子：
原始码
<HR>
<HR align="LEFT" size="4">
<HR align="LEFT" size="2" width="70%" color="#0000FF" noshade>
<HR align="LEFT" size="4" width="70" color="#008000">
显示结果
<CENTER>称为居中标记。作用：令字、画、表格等显示于中间。
这标记原先是 Netscape 所定义，后来其它浏览器都支持它，但你会发现很多标记已有 align="CENTER" 的参数，<CENTER>似乎多馀了，事实上它还是常用的标记之一，其简单 易用，常用于文字上，对于己加有 align="CENTER" 参数的 <TABLE> 标记亦要不厌其烦 地加上居中标记，因有狻多浏览器不支持<TABLE> 标记中的 align="CENTER" 参数。
例子：
原始码
<CENTER>Chris's First Homepage</CENTER>
<CENTER>What's new</CENTER>
<CENTER>My profile</CENTER>
结果
Chris's First Homepage
What's new
My profile
<PRE>称为预设格式标记。作用：令文件按照原始码的排列方式显示。
这标记允许保留你于原始码中输入的空白及 Return。细看以下例子你便可体会到此标记的 威力。除了运用一大堆表格标记之外你只有采用这标记才能有此效果。
能以<PRE>标记产生对　效果，或产生多于一行的空白才算上乘！
例子：
原始码
        <pre>   Creation of Webpage Log Analysis I
 
        Composer Learning 459 407 480 522 547 586 673
        HTML Advanced      200 268 296 358 385 453 506</pre>
显示结果
               Creation of Webpage Log Analysis I   
 
        Composer Learning 459 407 480 522 547 586 673
        HTML Advanced      200 268 296 358 385 453 506
<DIV>称为区隔标记。作用：设定字、画、表格等的摆放位置。
<DIV>应用于 Style Sheet（式样表）方面会更显威力，它最终目的是给设计者另一种组织 能力，有 Class ; Style ; title ; ID 等属性，将会于【Style Sheet】一节才作详述，这处只介绍 一个属性设定。
以 <DIV align="center"> 为例：
  • align="center"
    可选值：center ; left ; right 。决定字、画、表格等居中、靠左或靠右。
    <DIV align="center"> 的作用和居中标记 <CENTER>一样，前者是由 HTML3.0 开始 的标准，后者是通用己久的标示法。
例子：
原始码
<DIV align="center">Chris's First Homepage
<br>What's new
<br>My profile</DIV>
结果
Chris's First Homepage
What's new
My profile
<NOBR>称为不折行标记。作用：令某些文字不因太长而绕行，一　显示于同一行或下一 行。它对住址、数学算式、一行数字、程式码等尤为有用。
例子：（其中 Chris's Creation of Webpage 将不被分开而显示于同一行。）
码
If you want to know how to create you own homepage quickly, don't miss <NOBR>Chris's Creation of Webpage</NOBR> which will help you a lot.
结果
If you want to know how to create you own homepage quickly, don't miss Chris's Creation of Webpage which will help you a lot.
<WBR>称为建议折行标记。作用：预设折行部位。
它没有侵犯到 <BR> 的责任，只是作建议而已，若观者的系统解像度够高的话，那么它是 不会折行的。
例子：（若不加<WBR>标记，整个网址会显示于下一行。）
原始码
Please visit my other homepage which locate at http://www.geocities.com/SiliconValley/<WBR>Sector/8234/index.html There are many softwares for download. I think you will really love that place.
结果
Please visit my other homepage which locate at http://www.geocities.com/SiliconValley/Sector/8234/index.html There are many softwares for download. I think you will really love that place.

HTML语言剖析▲Top
字体标记
■实体标记与逻辑标记 ：
这一节【字体标记】你必须先明白实体标记与逻辑标记的分别，否则你会迷惑于为何不同 的标记却有相同的效果。两者分别有以下两处：
  1. 实体标记有固定的显示效果，逻辑标记则依不同浏览器而不同。
    例如逻辑标记的 <EM> 由于浏览器的不同它所标示的文字不一定出现斜体效果， 它可能是加底线、粗体或反白等，所以这一节是以它们在 IE 和 NC 中的效果作介 绍。
  2. 多个实体标记亦可有效标示同一字句，逻辑标记则通常于旧浏览器不能有效显示多 重的标示。
    例如两个逻辑标记 <EM> 及 <STRONG> 同时标示一字句于旧浏览器常失去作用。
  • 实体标记有：
    <I> <B> <U>
  • 逻辑标记有：
    <STRONG> <EM> <VAR> <CITE> <DFN> <ADDRESS> <CODE> <KBO> <SAMP> <TT>
若要求真确的效果当然以实体标记为佳。
■<STRONG> <B> ：
两者皆能产生字体加粗的效果，但必须注意的是当文件被设为 gb2312 Encoding 时，两者所 标示的中文字不会于 Netscape Netvigator 显示粗体效果。
例子： （第一行是没有任何字体标记的，作对照之用）
HTML Source Code （原始码）
浏览器显示结果
Creation of Webpage
<br><STRONG>Creation of Webpage</STRONG>
<br><B>Creation of Webpage</B>
Creation of Webpage
Creation of Webpage
Creation of Webpage
■<I> <EM> <VAR> <CITE> <DFN> <ADDRESS>：
这些标记于 Internet Explorer 都产生斜体效果，而只有 </DFN> 于 Netscape Netvigator 失去作 用。这些标记中只有 <ADDRESS> 较为特别，因它包括换行效果所以不必在它前面加上 <BR> 标记。
例子：
HTML Source Code （原始码）
浏览器显示结果
<I>Creation of Webpage</I>
<br><EM>Creation of Webpage</EM>
<br><VAR>Creation of Webpage</VAR>
<br><CITE>Creation of Webpage</CITE>
<br><DFN>Creation of Webpage</DFN>
<ADDRESS>Creation of Webpage</ADDRESS>
Creation of Webpage
Creation of Webpage
Creation of Webpage
Creation of Webpage
Creation of Webpage
Creation of Webpage
■<TT> <SAMP> <CODE> <KBD> <U> <STRIKE> <BIG> <SMALL> <SUP> <SUB>
为方便对照及记认，所以把十个标记于在一起介绍。
  • <TT> <SAMP> <CODE> <KBD> 可令每字母有相等宽度且每字母之间的距离稍为加 宽。但于 NC 不见得如此。
  • <U> 是加底线的标记，一些特别的浏览器并不支援，因顾虑到与连结混淆。
  • <STRIKE> 加上删除线的标记。
  • <BIG> 令字体加大。
  • <SMALL> 令字体变细。
  • <SUB> 为下标字， <SUP> 则为上标字，仅剩的数学标记。
例子： （第一行是没有任何字体标记的，作对照之用）
HTML Source Code （原始码）
浏览器显示结果
Creation of Webpage
<br><TT>Creation of Webpage</TT>
<br><SAMP>Creation of Webpage</SAMP>
<br><CODE>Creation of Webpage</CODE>
<br><KBD>Creation of Webpage</KBD>
<br><U>Creation of Webpage</U>
<br><STRIKE>Creation of Webpage</STRIKE>
<br><BIG>Creation of Webpage</BIG>
<br><SMALL>Creation of Webpage</SMALL>
<br>12345<SUB>7</SUB> 6789<SUP>9</SUP>
Creation of Webpage
Creation of Webpage
Creation of Webpage
Creation of Webpage
Creation of Webpage
Creation of Webpage
Creation of Webpage
Creation of Webpage
Creation of Webpage
123457 67899
■<H1> <H2> <H3> <H4> <H5> <H6>：
这些是标题标记，由 <H1> 至 <H6> 变粗变大加宽的程度逐渐减小。每个标题标记所标示 的字句将独占一行且上下留一空白行。
例子：
原始码
0
 

posted on 2008-05-24 17:49  bingjie  阅读(368)  评论(0)  编辑  收藏  举报

导航