html语言剖析

目 录

一、html简介 二、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 ，令它显示成粗体，两者失其一都会发生错误显示。

  2. 空标记
    是指标记单独出现，只有起始标记没有终结标记。

    例如 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概念】。

■ 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>称为段落标记。作用：为字、画、表格等之间留一空白行。

本来<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>称为换行标记。作用：令字、画、表格等显示于下一行。

由于浏览器会自动忽略原始码中空白和换行的部分，这令到<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> 之参数修改：
以： <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> ：
<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> ：
<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>称为区隔标记。作用：设定字、画、表格等的摆放位置。

<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> ：
<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> ：
<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

字体标记
<strong> <b>
<i> <em> <var> <cite> <dfn> <address>
<tt> <samp> <code> <kbd> <u> <strike> <big> <small> <sup> <sub>
<h1> <h2> <h3> <h4> <h5> <h6>
<font> <basefont>
■实体标记与逻辑标记 ：
这一节【字体标记】你必须先明白实体标记与逻辑标记的分别，否则你会迷惑于为何不同 的标记却有相同的效果。两者分别有以下两处：
  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> 变粗变大加宽的程度逐渐减小。每个标题标记所标示 的字句将独占一行且上下留一空白行。

例子：
原始码 <h1>header level 1</h1>
<h2>header level 2</h2>
<h3>header level 3</h3>
<h4>header level 4</h4>
<h5>header level 5</h5>
<h6>header level 6</h6>
显示结果

header level 1

header level 2

header level 3

header level 4

header level 5
header level 6

■<font> <basefont>：
这一节只有这两个标记具参数设定，且两者的参数设定是一样的，都是负责设定文字的大 小、字形及颜色，但各有用处，且看以下比较：
  • <basefont> 可以用于文件的开头部分，即 <head> 与 </head> 之间的位置，将 影响全文字句，是一个空标记，用以改变字体显示的内定值。
    <font> 是应用于文件的内文部分，即 <body> 与 </body> 之间的位置，只影响 所标示的字句，是一个围堵标记。
  • 两标记可同时存在，唯没被 <font> 所标示的字句才直接受 <basefont> 所影 响，而 <font> 本身亦受 <basefont> 的影响。

<font>的参数设定：
例子： <font face="arial" size="+2" color="#008000">creation of webpage</font>

  • face="arial"
    设定文字的字形。arial 是常用的一种，请不要使用 window 内建字 形以外的字形。于没有设定为 gb2312 encoding 的中文网页，netscape netvigator 不会显示此标记 所指明的任何中文字形。
  • size="+2"
    设定文字的大小。其值可以是绝对或相对，
    绝对的意思便是标记自己决定文字的大小，不受 <basefont> 的影响，如
    size="5" 表示其大小便是 5， 而html内定值为 3，即 size="3"和没有设定是一样的。
    相对的意思便是在内定值 3 的基础上增加或减少大小级数，如 size="+2" 便等同绝 对表示法的 size="5"，但若已设定 <basefont size="n"> 则其实际大小便是 n+2 不 再是 3+2 了。<basefont>只有绝对表示法。
  • color="#008000"
    设定文字的颜色。#008000 表示绿色

例子：
原始码 <font size="+1">i love creation of webpage</font>
<br><font size="+2" color="#800080">i love creation of webpage</font>
<br><font face="times new roman" size="5" color="#008000">i love creation of webpage</font>
显示结果 i love creation of webpage
i love creation of webpage
i love creation of webpage


html语言剖析▲top

清单标记
<ol> <li>
<ul>
<menu> <dir>
<dl> <dt> <dd>
■ <ol> <li> :
<ol>称为顺序清单标记。<li>则用以标示清单项目。
所谓顺序清单就是在每一项前面加上 1,2,3... 等数目，又称编号清单。

<ol> 的参数设定（常用）：
例如： <ol type="i" start="4"></ol>

  • type="i"
    设定数目款式，其值有五种，请参考 右表，内定为 type="1"。
  • start="4"
    设定开始数目，不论设定了哪一数 目款式，其值只能是 1,2,3.. 等整 数，内定为 start="1"。
type numbering style
1 arabic numbers 1, 2, 3, ...
a lower alpha a, b, c, ...
a upper alpha a, b, c, ...
i lower roman i, ii, iii, ...
i upper roman i, ii, iii, ...

<li> 的参数设定（常用）：
例如： <li type="square" value="4">

  • type="square"
    只适用于非顺序清单，设定符号款式，其值有三种，如下，内定为 type="disc"：
    符号 是当 type="disc" 时的列项符号。
    符号 if" width=10 height=10 border=0> 是当 type="circle" 时的列项符号。
    符号 是当 type="square" 时的列项符号。
  • value="4"
    只适用于顺序清单，设定该一项的数目，其後各项将以此作为起始数目而递增， 但前面各项则不受影响，其值只能是 1,2,3.. 等整数，没有内定值。

例子：
html source code （原始码） 浏览器显示结果
my best friends:
<ol>
<li>michelle wei
<li>michael wan
<li>gloria lam
</ol> 		my best friends:
  1. michelle wei
  2. michael wan
  3. gloria lam

■ <ul> ：
<ul>称为无序清单标记。
所谓无序清单就是在每一项前面加上 、、 等符号，故又称符号清单。

<ul> 的参数设定（常用）：
例如： <ul type="square">

  • type="square"
    设定符号款式，其值有三种，如下，内定为 type="disc"：
    符号 是当 type="disc" 时的列项符号。
    符号 是当 type="circle" 时的列项符号。
    符号 是当 type="square" 时的列项符号。

注意：由于 <ul> 及 <li> 都有 type 这个参数，两者尽可能选用其一。

例子：
html source code （原始码） 浏览器显示结果
my homepages:
<ul>
<li>penpals garden
<li>icq garden
<li>software city
<li>creation of webpage
</ul> 		my homepages:
  • penpals garden
  • icq garden
  • software city
  • creation of webpage

■ <menu> <dir> ：
这两个标记都不为 w3c 所赞同，希望用者能以 <ul> 及 <ol> 代之。
<menu> 及 <dir>，基本上它和 <ul> 是一样的，在一些特别的浏览器可能表现出 <ol> 的 效果，于旧版的 ie 或 nc 标记 <dir> 不显示符号或数目。两标记的用法与 <ul> 完全一 样。

例子：
html source code （原始码） 浏览器显示结果
my homepages:
<dir>
<li>penpals garden
<li>icq garden
<li>software city
<li>creation of webpage
</dir> 		my homepages:
  • penpals garden
  • icq garden
  • software city
  • creation of webpage

    • ■ <dl> <dt> <dd> :
    <dl>称为定义清单标记。 <dt> 用以标示定义条目，<dd> 则用以标示定义内容。
    所谓定义清单就是一种分二层的项目清单，其不故符号及数目。

    三个标记都没有常用的参数。而 <dt> <dd> 可以独立使用，只是一些旧的浏览器并不支 援，如 ie 3.0。常用的如 <dd> 标记可用以制造段落第一个字前面的空白。

    例子：
    原始码 <dl>
    <dt>how to use definition list
    <dd>first, you should not place paragraph tag right after or before a list structure or between the items of a list. in cerntain contexts, use of extra paragraph tags should always be avoided, when you realize this concept, it is quit easy to write a html.
    <dt>other things to know
    <dd>we usually put only one definition tag following the definition term tag, more than one dd tag is not recommanded. besides, unlike definition list is a nonempty tag, both definition term and definition description are empty tags.
    </dl>
    显示结果
    how to use definition list
    first, you should not place paragraph tag right after or before a list structure or between the items of a list. in cerntain contexts, use of extra paragraph tags should always be avoided, when you realize this concept, it is quit easy to write a html.
    other things to know
    we usually put only one definition tag following the definition term tag, more than one dd tag is not recommanded. besides, unlike definition list is a nonempty tag, both definition term and definition description are empty tags.


    html语言剖析▲top

    表格标记
    <table> <tr> <td>
    <th>
    <caption>
    ■ <table> <tr> <td> ：
    这三个标记是定义表格的最重要的标记，可以说只学这三个己足够。
    <table>是一个容器标记，意思是说它用以声明这是表格而且其他表格标记只能在他的 范围内才适用，属容器标记的还有其他。
    <tr>用以标示表格列（row）
    <td>用以标示储存格（cell）

    <table> 的参数设定（常用）：
    例如： <table width="400" border="1" cellspacing="2" cellpadding="2" align="center" valign="top" background="myweb.gif" bgcolor="#0000ff" bordercolor="#ff00ff" bordercolorlight="#00ff00" bordercolordark="#00ffff" cols="2">

    • width="400"
      表格宽度，接受绝对值（如 80）及相对值（如 80%）。

    • border="1"
      表格边框厚度，不同浏览器有不同的内定值，故请指明。

    • cellspacing="2"
      表格格线厚度，请看例子三，那是加厚到 5 的格线。

    • cellpadding="2"
      文字与格线的距离，请看例子四，那是加至 10 的 padding。

    • align="center"
      表格的摆放位置（水平），可选值为： left, right, center，请看例子五或六，那表格 是放于中间的，为怕一些浏览器不支援，故特加上居中标记<center>，只是多 层保证而己，当然只用<center>亦可。

    • valign="top".
      表格内字画等的摆放贴　位置（垂直），可选值为： top, middle, bottom。

    • background="myweb.gif"
      表格　纸，与 bgcolor 不要同用。

    • bgcolor="#0000ff"
      表格底色，与 background 不要同用，请看例子六。

    • bordercolor="#ff00ff"
      表格边框颜色，nc 与 ie 有不同的效果，请看例子六。

    • bordercolorlight="#00ff00"
      表格边框向光部分的颜色，请看例子二。『只适用于 ie』

    • bordercolordark="#00ffff"
      表格边框背光部分的颜色，请看例子二，使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。『只适用于 ie』

    • cols="2"
      表格栏位数目，只是让浏览器在下载表格是先画出整个表格而己。

    <tr> 的参数设定（常用）：
    例如：<tr align="right" valign="middle" bgcolor="#0000ff" bordercolor="#ff00ff" bordercolorlight="#808080" bordercolordark="#ff0000">

    • align="right"
      该一列内字画等的摆放贴　位置（水平），可选值为： left, center, right。

    • valign="middle"
      该一列内字画等的摆放贴　位置（垂直），可选值为： top, middle, bottom。

    • bgcolor="#0000ff"
      该一列底色，请看例子五。

    • bordercolor="#ff00ff"
      该一列边框颜色，请看例子三。『只适用于 ie』

    • bordercolorlight="#808080"
      该一列边框向光部分的颜色，请看例子三。『只适用于 ie』

    • bordercolordark="#ff0000"
      该一列边框背光部分的颜色，请看例子三，使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。『只适用于 ie』

    <td> 的参数设定（常用）：
    例如：<td width="48%" height="400" colspan="5" rowspan="4" align="right" valign="bottom" bgcolor="#ff00ff" bordercolor="#808080" bordercolorlight="#ff0000" bordercolordark="#00ff00" background="myweb.gif">

    • width="48%"
      该一储存格宽度，接受绝对值（如 80）及相对值（如 80%）。

    • height="400"
      该一储存格高度。

    • colspan="5"
      该一储存格向右打通的栏数。请看例子六

    • rowspan="4"
      该一储存格向下打通的列数。请看例子六

    • align="right"
      该一储存格内字画等的摆放贴　位置（水平），可选值为： left, center, right。

    • valign="bottom"
      该一储存格内字画等的摆放贴　位置（垂直），可选值为： top, middle, bottom。

    • bgcolor="#ff00ff"
      该一储存格底色，请看例子四。

    • bordercolor="#808080"
      该一储存格边框颜色，请看例子三。『只适用于 ie』

    • bordercolorlight="#ff0000"
      该一储存格边框向光部分的颜色，请看例子三。『只适用于 ie』

    • bordercolordark="#00ff00"
      该一储存格边框背光部分的颜色，请看例子三，使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。『只适用于 ie』

    • background="myweb.gif"
      该一储存格　纸，与 bgcolor 任用其一。

    例子一：
    原始码 <table width="60%" border="1">
    <tr><td>只有一个储存格（cell）的表格</td></tr>
    </table>
    显示结果

     
    只有一个储存格（cell）的表格

    例子二：
    原始码 <table width="60%" border="5" bordercolorlight="#ff00ff" bordercolordark="#ff0000">
    <tr><td>第一列第一栏</td><td>第一列第二栏</td></tr>
    </table>
    显示结果

     
    第一列第一栏 第一列第二栏

    例子三：
    原始码 <table width="60%" border="1" cellspacing="5">
         <tr bordercolor="#0000ff">
    <td>第一列第一栏</td>
    <td>第一列第二栏</td>
         </tr>
         <tr bordercolorlight="#ff00ff" bordercolordark="#00ff00">
    <td>第二列第一栏</td>
    <td>第二列第二栏</td>
         </tr>
    </table>
    显示结果

     
    第一列第一栏 第一列第二栏
    第二列第一栏 第二列第二栏

    例子四：
    原始码 <table width="60%" border="1" cellpadding="10">
         <tr>
    <td bgcolor="#ffcce6">第一列第一栏</td>
    <td bgcolor="#ffffc6">第一列第二栏</td>
         </tr>
         <tr>
    <td bgcolor="#ffd9ff">第二列第一栏</td>
    <td bgcolor="#dab4b4">第二列第二栏</td>
         </tr>
    </table>
    显示结果

     
    第一列第一栏 第一列第二栏
    第二列第一栏 第二列第二栏

    例子五：
    原始码 <center>
    <table width="60%" cellspacing="0" cellpadding="2" align="center">
         <tr>
    <td bgcolor="#ffd2e9">第一列第一栏</td>
    <td bgcolor="#ffdab5">第一列第二栏</td>
    <td bgcolor="#ffffb5">第一列第三栏</td>
         </tr>
         <tr bgcolor="#c0c0c0">
    <td>第二列第一栏</td>
    <td>第二列第二栏</td>
    <td>第二列第三栏</td>
         </tr>
    </table>
    </center>
    显示结果

     

    第一列第一栏 第一列第二栏 第一列第三栏
    第二列第一栏 第二列第二栏 第二列第三栏

    例子六
    原始码 <center>
    <table width="350" border="1" cellspacing="0" cellpadding="2" align="center" bgcolor="#ffc4e1" bordercolor="#0000ff">
         <tr>
    <td>第一列第一栏</td>
    <td colspan="2">第一列 之 第二栏及第三栏</td>
         </tr>
         <tr>
    <td rowspan="2">第二列及第三列 之 第一栏</td>
    <td>第二列第二栏</td>
    <td>第二列第三栏</td>
         </tr>
         <tr>
    <td>第三列第二栏</td>
    <td>第三列第三栏</td>
         </tr>
    </table>
    </center>
    显示结果

     

    第一列第一栏 第一列 之 第二栏及第三栏
    第二列及第三列 之 第一栏 第二列第二栏 第二列第三栏
    第三列第二栏 第三列第三栏

    ■ <th> ：
    <th>与<td>同样是标示一个储存格，唯一不同的是<th>所标示的储存格中的文字是以粗 体出现，通常用于表格第一列以标示栏目。它的用法是取代<td>的位置便可以，其参数 设定请参考<td>。
    当然若为<td>所标示的储存格中的文字加上粗体标记<b>便等如<th>的效果。

    例子：
    原始码 <center>
    <table width="350" border="1" cellspacing="0" cellpadding="2" align="center">
         <tr align="center">
    <th>month</th><th>% of ie visitor</th><th>% of nc visitor</th>
         </tr>
         <tr align="center">
    <td>august</td><td>61%</td><td>39%</td>
         </tr>
         <tr align="center">
    <td>july</td><td>54%</td><td>46%</td>
         </tr>
         <tr align="center">
    <td>june</td><td>52%</td><td>48%</td>
         </tr>
    </table>
    </center>
    显示结果

     

    month % of ie visitor % of nc visitor
    august 61% 39%
    july 54% 46%
    june 52% 48%

    ■ <caption> ：
    <caption> 的作用是为表格标示一个标题列，有如在表格上方加上一没格线的打通列�