HTML基本概念
HTML基础Tag
HTML常用格式
HTML特殊字符
HTML超链接(Hyperlinks)
HTML相对和绝对路径
HTML表格(Tables)
HTML框架(Frames)
HTML列表(Lists)
HTML表单(Forms)
HTML图片(Images)
HTML字体(Fonts)
HTML背景颜色和图片
HTML头部信息(Head)
HTML基本概念
什么是HTML文件？
• HTML的英文全称是Hypertext Marked Language，中文叫做“超文本标记语言”。
• 和一般文本的不同的是，一个HTML文件不仅包含文本内容，还包含一些Tag，中文称“标记”。
• 一个HTML文件的后缀名是.htm或者是.html。
• 用文本编辑器就可以编写HTML文件。
这就试写一个HTML文件吧！
打开你的Notepad，新建一个文件，然后拷贝以下代码到这个新文件，然后将这个文件存成first.html。
<html>
<head>
<title>Title of page</title>
</head>
<body>
This is my first homepage. <b>This text is bold</b>
</body>
</html>
要浏览这个first.html文件，双击它。或者打开浏览器，在File菜单选择Open，然后选择这个文件就行了。
示例解释
这个文件的第一个Tag是<html>，这个Tag告诉你的浏览器这是HTML文件的头。文件的最后一个Tag是</html>，表示HTML文件到此结束。
在<head>和</head>之间的内容，是Head信息。Head信息是不显示出来的，你在浏览器里看不到。但是这并不表示这些信息没有用处。比如你可以在Head信息里加上一些关键词，有助于搜索引擎能够搜索到你的网页。
在<title>和</title>之间的内容，是这个文件的标题。你可以在浏览器最顶端的标题栏看到这个标题。
在<body>和</body>之间的信息，是正文。
在<b>和</b>之间的文字，用粗体表示。<b>顾名思义，就是bold的意思。
HTML文件看上去和一般文本类似，但是它比一般文本多了Tag，比如<html>，<b>等，通过这些Tag，可以告诉浏览器如何显示这个文件。
HTML元素(HTML Elements)
• HTML元素(HTML Element)用来标记文本，表示文本的内容。比如body, p, title就是HTML元素。
• HTML元素用Tag表示，Tag以<开始，以>结束。
• Tag通常是成对出现的，比如<body></body>。起始的叫做Opening Tag，结尾的就叫做Closing Tag。
• 目前HTML的Tag不区分大小写的。比如，<HTML>和<html>其实是相同的。
HTML元素(HTML Elements)的属性
HTML元素可以拥有属性。属性可以扩展HTML元素的能力。
比如你可以使用一个bgcolor属性，使得页面的背景色成为红色，就像这样：
<body bgcolor="red">
再比如，你可以使用border这个属性，将一个表格设成一个无边框的表格。如下：
<table border="0">
属性通常由属性名和值成对出现，就像这样：name="value"。上面例子中的bgcolor, border就是name，red和0就是value。属性值一般用双引号标记起来。
属性通常是附加给HTML的Opening Tag，而不是Closing Tag。
一些基础的HTML Tag
HTML里，比较基础的Tag主要用于标题，段落和分行。
学习HTML最好的方法，就是跟着示例学。为了各位学习的方便，我们准备了一个简单的HTML编辑器，你可以在左边写HTML代码，然后点击上面的按钮，查看HTML的显示结果。
示例：一个非常简单的HTML文件
这个示例算是一个最简单的HTML文件，只包含了最基本的能构成一个HTML文件的Tag。通过这个例子，你可以看到浏览器是如何显示这个文件的，以此对HTML文件有个最初的认识。
示例：简单的段落
<html>
<body>
<p>这是第一段。</p>
<p>这是第二段。</p>
<p>这是第三段。</p>
<p>在HTML里，用p来定义段落。</p>
</body>
</html>
正文标题
这个示例告诉你如何在HTML文件里定义正文标题。
HTML用<h1>到<h6>这几个Tag来定义正文标题，从大到小。每个正文标题自成一段。
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>
段落划分
在HTML里用<p>和</p>划分段落。
<p>This is a paragraph</p>
<p>This is another paragraph</p>
换行
通过使用<br>这个Tag，可以在不新建段落的情况下换行。<br>没有Closing Tag。
用<p>换行是个坏习惯，正确的是使用<br>。
<p>This <br> is a para<br>graph with line breaks</p>
HTML注释
在HTML文件里，你可以写代码注释，解释说明你的代码，这样有助于你和他人日后能够更好地理解你的代码。
注释可以写在<!--和-->之间。浏览器是忽略注释的，你不会在HTML正文中看到你的注释。
<!-- This is a comment -->
一些小建议
HTML文件会自动截去多余的空格。不管你加多少空格，都被看做一个空格。 一个空行也被看做一个空格。
有些Tag能够将文本自成一段，而不需要使用<p></p>来分段。比如<h1></h1>之类的标题Tag。
更多示例
<html>
<body>
<p>
这一段
在源代码里
包含很多分行，
但是浏览器忽略
这些分行。
</p>
<p>
这一段 在浏览器里
包含 很多 空格，
但是 浏览器忽略多余空格。
</p>
<p>
你使用的浏览器的窗口大小决定了段落的行数。如果你改编浏览器窗口的大小，段落的行数会因此改变。
</p>
</body>
</html>
换行
<html>
<body>
<p>
要<br>在一段<br>里<br>换行<br>请使用<br>br这个Tag。
</p>
</body>
</html>
正文标题
<html>
<body>
<h1>这是1号标题</h1>
<h2>这是2号标题</h2>
<h3>这是3号标题</h3>
<h4>这是4号标题</h4>
<h5>这是5号标题</h5>
<h6>这是6号标题</h6>
</body>
</html>
居中的正文标题
<html>
<body>
<h1 align="center">这是标题</h1>
<p>上面的标题是居中显示的。</p>
</body>
</html>
加条横线
<html>
<body>
<p>用hr这个Tag可以在HTML文件里加一条横线。</p>
<hr>
<p>村妇想像皇宫的生活：皇后得用金扁担挑水吧。</p>
<hr>
<p>初中某数学老师讲方程式变换，在讲台上袖子一挽大声喝道：同学们注意！我要变形了！……</p>
</body>
</html>
代码注释
<html>
<body>
<!--这是代码注释-->
<p>代码注释是不会显示在网页里的。</p>
</body>
</html>
背景颜色
<html>
<body bgcolor="yellow">
<h2>看，这个页面是黄色的。</h2>
</body>
</html>
HTML常用格式
HTML定义了一些文本格式的Tag，比如利用Tag，可以将字体变成粗体或者斜体。从下面的示例，你可以了解各种文本格式Tag如何改变HTML文本的显示。
常用文本格式Tag
Tag Tag说明
<b> 粗体bold
<i> 斜体italic
<del> 文字当中划线表示删除
<ins> 文字下划线表示插入
<sub> 下标
<sup> 上标
<blockquote> 缩进表示引用
<pre> 保留空格和换行
<code> 表示计算机代码，等宽字体
示例
<html>
<body>
<p><b>粗体用b表示。</b></p>
<p><i>斜体用i表示。</i></p>
<p><del>芙蓉姐姐</del>这个词当中划线表示删除。</p>
<p><ins>想唱就唱</ins>这个词下划线插入。</p>
<p>X<sub>2</sub>其中的2是下标</p>
<p>X<sup>2</sup>其中的2是上标</p>
<p><blockquote>好好学习，天天向上。这句话缩进表示引用</blockquote></p>
<pre>
这是
预设(preformatted)文本.
在pre这个tag里的文本 保留
空格和
分行。
</pre>
<code>call getOrders</code>
<p>用code显示计算机代码，code里显示的字符是等宽字符。</p>
</body>
</html>
如何看HTML的源代码
在浏览器看到的HTML网页，是浏览器解释HTML源代码后产生的结果。
要查看这个HTML的源代码，有两种方法。一是点击鼠标右键，点击View Source(查看源文件)命令；二是选择浏览器菜单View(查看)中的Source(源文件)命令。
利用View Source得到网页的源代码，你可以由此借鉴一下别人写得好的地方。不过在你对HTML知识尚少的情况下，看别人复杂的HTML源代码，只会让你头晕。建议你还是再等等，先掌握一些基础再说。
HTML特殊字符显示
HTML字符实体(Character Entities)
有些字符在HTML里有特别的含义，比如小于号<就表示HTML Tag的开始，这个小于号是不显示在我们最终看到的网页里的。那如果我们希望在网页中显示一个小于号，该怎么办呢？
这就要说到HTML字符实体(HTML Character Entities)了。
一个字符实体(Character Entity)分成三部分：第一部分是一个&符号，英文叫ampersand；第二部分是实体(Entity)名字或者是#加上实体(Entity)编号；第三部分是一个分号。
比如，要显示小于号，就可以写<或者<。
用实体(Entity)名字的好处是比较好理解，一看lt，大概就猜出是less than的意思，但是其劣势在于并不是所有的浏览器都支持最新的Entity名字。而实体(Entity)编号，各种浏览器都能处理。
注意：Entity是区分大小写的。
如何显示空格
通常情况下，HTML会自动截去多余的空格。不管你加多少空格，都被看做一个空格。比如你在两个字之间加了10个空格，HTML会截去9个空格，只保留一个。为了在网页中增加空格，你可以使用 表示空格。
最常用的字符实体(Character Entities)
显示结果 说明 Entity Name Entity Number
显示一个空格
< 小于 < <
> 大于 > >
& &符号 & &
" 双引号 " "
其他常用的字符实体(Character Entities)
显示结果 说明 Entity Name Entity Number
© 版权 © ©
® 注册商标 ® ®
× 乘号 × ×
÷ 除号 ÷ ÷
更多字符实体(Character Entities)
更多字符实体(Character Entities)请参见ISO Latin-1字符集。
ISO Latin-1字符集
字符 十进制字符编号 实体名字 说明
--- --- 未使用Unused
--- --- 未使用Unused
--- --- 未使用Unused
--- --- 未使用Unused
--- --- 未使用Unused
--- --- 未使用Unused
--- --- 未使用Unused
--- --- 未使用Unused
--- --- 未使用Unused
--- --- 制表符Horizontal tab
--- --- 换行Line feed
--- --- 未使用Unused
--- --- 未使用Unused
--- --- 回车Carriage Return
--- --- 未使用Unused
--- --- 未使用Unused
--- --- 未使用Unused
--- --- 未使用Unused
--- --- 未使用Unused
--- --- 未使用Unused
--- --- 未使用Unused
--- --- 未使用Unused
--- --- 未使用Unused
--- --- 未使用Unused
--- --- 未使用Unused
--- --- 未使用Unused
--- --- 未使用Unused
--- --- 未使用Unused
--- --- 未使用Unused
--- --- 未使用Unused
--- --- 未使用Unused
--- --- 未使用Unused
--- Space
! ! --- 惊叹号Exclamation mark
" " " 双引号Quotation mark
# # --- 数字标志Number sign
$ $ --- 美元标志Dollar sign
% % --- 百分号Percent sign
& & & Ampersand
' ' --- 单引号Apostrophe
( ( --- 小括号左边部分Left parenthesis
) ) --- 小括号右边部分Right parenthesis
* * --- 星号Asterisk
+ + --- 加号Plus sign
, , --- 逗号Comma
- - --- 连字号Hyphen
. . --- 句号Period (fullstop)
/ / --- 斜杠Solidus (slash)
0 0 --- 数字0 Digit 0
1 1 --- 数字1 Digit 1
2 2 --- 数字2 Digit 2
3 3 --- 数字3 Digit 3
4 4 --- 数字4 Digit 4
5 5 --- 数字5 Digit 5
6 6 --- 数字6 Digit 6
7 7 --- 数字7 Digit 7
8 8 --- 数字8 Digit 8
9 9 --- 数字9 Digit 9
: : --- 冒号Colon
; ; --- 分号Semicolon
< < < 小于号Less than
= = --- 等于符号Equals sign
> > > 大于号Greater than
? ? --- 问号Question mark
@ @ --- Commercial at
A A --- 大写A Capital A
B B --- 大写B Capital B
C C --- 大写C Capital C
D D --- 大写D Capital D
E E --- 大写E Capital E
F F --- 大写F Capital F
G G --- 大写G Capital G
H H --- 大写H Capital H
I I --- 大写J Capital I
J J --- 大写K Capital J
K K --- 大写L Capital K
L L --- 大写K Capital L
M M --- 大写M Capital M
N N --- 大写N Capital N
O O --- 大写O Capital O
P P --- 大写P Capital P
Q Q --- 大写Q Capital Q
R R --- 大写R Capital R
S S --- 大写S Capital S
T T --- 大写T Capital T
U U --- 大写U Capital U
V V --- 大写V Capital V
W W --- 大写W Capital W
X X --- 大写X Capital X
Y Y --- 大写Y Capital Y
Z Z --- 大写Z Capital Z
[ [ --- 中括号左边部分Left square bracket
\ \ --- 反斜杠Reverse solidus (backslash)
] ] --- 中括号右边部分Right square bracket
^ ^ --- Caret
_ _ --- 下划线Horizontal bar (underscore)
` ` --- 尖重音符Acute accent
a a --- 小写a Small a
b b --- 小写b Small b
c c --- 小写c Small c
d d --- 小写d Small d
e e --- 小写e Small e
f f --- 小写f Small f
g g --- 小写g Small g
h h --- 小写h Small h
i i --- 小写i Small i
j j --- 小写j Small j
k k --- 小写k Small k
l l --- 小写l Small l
m m --- 小写m Small m
n n --- 小写n Small n
o o --- 小写o Small o
p p --- 小写p Small p
q q --- 小写q Small q
r r --- 小写r Small r
s s --- 小写s Small s
t t --- 小写t Small t
u u --- 小写u Small u
v v --- 小写v Small v
w w --- 小写w Small w
x x --- 小写x Small x
y y --- 小写y Small y
z z --- 小写z Small z
{ { --- 大括号左边部分Left curly brace
| | --- 竖线Vertical bar
} } --- 大括号右边部分Right curly brace
~ ~ --- Tilde
--- --- 未使用Unused
空格Nonbreaking space
¡ ¡ ¡ Inverted exclamation
¢ ¢ ¢ 货币分标志Cent sign
£ £ £ 英镑标志Pound sterling
¤ ¤ ¤ 通用货币标志General currency sign
¥ ¥ ¥ 日元标志Yen sign
¦ ¦ ¦ or &brkbar; 断竖线Broken vertical bar
§ § § 分节号Section sign
¨ ¨ ¨ or ¨ 变音符号Umlaut
© © © 版权标志Copyright
ª ª ª Feminine ordinal
« « « Left angle quote, guillemet left
¬ ¬ ¬ Not sign
¬ Soft hyphen
® ® ® 注册商标标志Registered trademark
¯ ¯ ¯ or &hibar; 长音符号Macron accent
° ° ° 度数标志Degree sign
± ± ± 加或减Plus or minus
² ² ² 上标2 Superscript two
³ ³ ³ 上标3 Superscript three
´ ´ ´ 尖重音符Acute accent
µ µ µ Micro sign
¶ ¶ ¶ Paragraph sign
• · · Middle dot
¸ ¸ ¸ Cedilla
¹ ¹ ¹ 上标1 Superscript one
º º º Masculine ordinal
» » » Right angle quote, guillemet right
¼ ¼ ¼ 四分之一Fraction one-fourth
½ ½ ½ 二分之一Fraction one-half
¾ ¾ ¾ 四分之三Fraction three-fourths
¿ ¿ ¿ Inverted question mark
À À À Capital A, grave accent
Á Á Á Capital A, acute accent
   Capital A, circumflex
à à à Capital A, tilde
Ä Ä Ä Capital A, di?esis / umlaut
Å Å Å Capital A, ring
Æ Æ Æ Capital AE ligature
Ç Ç Ç Capital C, cedilla
È È È Capital E, grave accent
É É É Capital E, acute accent
Ê Ê Ê Capital E, circumflex
Ë Ë Ë Capital E, di?esis / umlaut
Ì Ì Ì Capital I, grave accent
Í Í Í Capital I, acute accent
Î Î Î Capital I, circumflex
Ï Ï Ï Capital I, di?esis / umlaut
Ð Ð Ð Capital Eth, Icelandic
Ñ Ñ Ñ Capital N, tilde
Ò Ò Ò Capital O, grave accent
Ó Ó Ó Capital O, acute accent
Ô Ô Ô Capital O, circumflex
Õ Õ Õ Capital O, tilde
Ö Ö Ö Capital O, di?esis / umlaut
× × × 乘号Multiply sign
Ø Ø Ø Capital O, slash
Ù Ù Ù Capital U, grave accent
Ú Ú Ú Capital U, acute accent
Û Û Û Capital U, circumflex
Ü Ü Ü Capital U, di?esis / umlaut
Ý Ý Ý Capital Y, acute accent
Þ Þ Þ Capital Thorn, Icelandic
ß ß ß Small sharp s, German sz
à à à Small a, grave accent
á á á Small a, acute accent
â â â Small a, circumflex
ã ã ã Small a, tilde
ä ä ä Small a, di?esis / umlaut
å å å Small a, ring
æ æ æ Small ae ligature
ç ç ç Small c, cedilla
è è è Small e, grave accent
é é é Small e, acute accent
ê ê ê Small e, circumflex
ë ë ë Small e, di?esis / umlaut
ì ì ì Small i, grave accent
í í í Small i, acute accent
î î î Small i, circumflex
ï ï ï Small i, di?esis / umlaut
ð ð ð Small eth, Icelandic
ñ ñ ñ Small n, tilde
ò ò ò Small o, grave accent
ó ó ó Small o, acute accent
ô ô ô Small o, circumflex
õ õ õ Small o, tilde
ö ö ö Small o, di?esis / umlaut
÷ ÷ ÷ 除号Division sign
ø ø ø Small o, slash
ù ù ù Small u, grave accent
ú ú ú Small u, acute accent
û û û Small u, circumflex
ü ü ü Small u, di?esis / umlaut
ý ý ý Small y, acute accent
þ þ þ Small thorn, Icelandic
ÿ ÿ ÿ Small y, umlaut
HTML利用超链接打开链接文件
示例1
<html>
<body>
<p>
<a href="../asdocs/html_tutorials/humor02.html">这是一个链接</a>
</p>
<p>
<a href="http://www.admin5.com/html" target=_blank>站长网 站长学院站点链接</a>
</p>
</body>
</html>
示例2
将一个图片作为一个超链接
<html>
<body>
<p>
你可以将一张图片作为一个链接，点击这个图片。
<a href="../asdocs/html_tutorials/humor03.html"><img src="../images/html_tutorials/smile.jpg" ></a>
</p>
</body>
</html>
这个示例演示了如何将一个图片作为一个超链接，即点击一个图片，可以连接到其它文件。
a和href属性
HTML用<a>来表示超链接，英文叫anchor。
<a>可以指向任何一个文件源：一个HTML网页，一个图片，一个影视文件等。用法如下：
<a href="url">链接的显示文字</a>
点击<a></a>当中的内容，即可打开一个链接文件，href属性则表示这个链接文件的路径。
比如链接到admin5.com/html站点首页，就可以这样表示：
<a href="http://www.admin5.com/html">站长网 站长学院admin5.com/html首页</a>
target属性
使用target属性，可以在一个新窗口里打开链接文件。
<a href="http://www.admin5.com/html" target=_blank>站长网 站长学院admin5.com/html首页</a>
<html>
<body>
<a href="../asdocs/html_tutorials/humor01.html" target="_blank">一则笑话</a>
<p>
如果你将target的属性值设成_blank，你点击这个链接的时候，网页就会在一个新窗口出现。
</p>
</body>
</html>
title属性
使用 title 属性，可以让鼠标悬停在超链接上的时候，显示该超链接的文字注释。
<a href="http://www.admin5.com/html" title = "站长网 站长学院网页教程与代码的中文站点">站长网 站长学院网站</a>
如果希望注释多行显示，可以使用 作为换行符。
<a href="http://www.admin5.com/html" title = "站长网 站长学院 网页教程与代码的中文站点">站长网 站长学院网站</a>
<html>
<body>
<p>
<a href="http://www.admin5.com/html" title = "站长网 站长学院网页教程与代码的中文站点">站长网 站长学院网站</a>
</p>
<p>
<a href="http://www.admin5.com/html" title = "站长网 站长学院 网页教程与代码的中文站点">站长网 站长学院网站</a>
</p>
</body>
</html>
name属性
使用name属性，可以跳转到一个文件的指定部位。
使用name属性，要设置一对。一是设定name的名称，二是设定一个href指向这个name：
<a href="#C1">参见第一章</a>
<a name="C1">第一章</a>
<html>
<body>
<p>
<a href="#C6">
参见第六章
</a>
</p>
<p>
<a name="C1"><h2>第1章</h2></a>
<p>这是站长网 站长学院admin5.com/html- 网页教程与代码的中文站点。</p>
<a name="C2"><h2>第2章</h2></a>
<p>这是站长网 站长学院admin5.com/html- 网页教程与代码的中文站点。</p>
<a name="C3"><h2>第3章</h2></a>
<p>这是站长网 站长学院admin5.com/html- 网页教程与代码的中文站点。</p>
<a name="C4"><h2>第4章</h2></a>
<p>这是站长网 站长学院admin5.com/html- 网页教程与代码的中文站点。</p>
<a name="C5"><h2>第5章</h2></a>
<p>这是站长网 站长学院admin5.com/html- 网页教程与代码的中文站点。</p>
<a name="C6"><h2>第6章</h2></a>
<p>这是站长网 站长学院admin5.com/html- 网页教程与代码的中文站点。</p>
<a name="C7"><h2>第7章</h2></a>
<p>这是站长网 站长学院admin5.com/html- 网页教程与代码的中文站点。</p>
<a name="C8"><h2>第8章</h2></a>
<p>这是站长网 站长学院admin5.com/html- 网页教程与代码的中文站点。</p>
<a name="C9"><h2>第9章</h2></a>
<p>这是站长网 站长学院admin5.com/html- 网页教程与代码的中文站点。</p>
<a name="C10"><h2>第10章</h2></a>
<p>这是站长网 站长学院admin5.com/html- 网页教程与代码的中文站点。</p>
<a name="C11"><h2>第11章</h2></a>
<p>这是站长网 站长学院admin5.com/html- 网页教程与代码的中文站点。</p>
<a name="C12"><h2>第12章</h2></a>
<p>这是站长网 站长学院admin5.com/html- 网页教程与代码的中文站点。</p>
<a name="C13"><h2>第13章</h2></a>
<p>这是站长网 站长学院admin5.com/html- 网页教程与代码的中文站点。</p>
<a name="C14"><h2>第14章</h2></a>
<p>这是站长网 站长学院admin5.com/html- 网页教程与代码的中文站点。</p>
<a name="C15"><h2>第15章</h2></a>
<p>这是站长网 站长学院admin5.com/html- 网页教程与代码的中文站点。</p>
<a name="C16"><h2>第16章</h2></a>
<p>这是站长网 站长学院admin5.com/html- 网页教程与代码的中文站点。</p>
<a name="C17"><h2>第17章</h2></a>
<p>这是站长网 站长学院admin5.com/html- 网页教程与代码的中文站点。</p>
</body>
</html>
name属性通常用于创建一个大文件的章节目录(table of contents)。每个章节都建立一个链接，放在文件的开始处，每个章节的开头都设置Name属性。当用户点击某个章节的链接时，这个章节的内容就显示在最上面。
如果浏览器不能找到Name指定的部分，则显示文章开头，不报错。
链接到email地址
在网站中，你经常会看到“联系我们”的链接，一点击这个链接，就会触发你的邮件客户端，比如Outlook Express，然后显示一个新建mail的窗口。用<a>可以实现这样的功能。
<a href = "mailto:info@sina.com">联系新浪</a>
<html>
<body>
<p>
这是一个最简单的邮箱地址的链接：
<a href="mailto:info@sina.com">给新浪网站发信</a>
</p>
<p>
这个邮箱地址的链接写了subject内容：
<a href="mailto:info@sina.com?subject=Hello">给新浪网站发信</a>
</p>
<p>
这个邮箱地址链接写了to, cc, bcc, subject, body的内容：
<a href="mailto:info@sina.com?cc=webmaster@vip.sina.com&bcc=media@sina.com&subject=I%20like%20your%20site&body=真是个好站点！">写信给新浪</a>
</p>
<p>
<b>注:</b>空格请用%20表示。
</p>
</body>
</html>
如何创建HTML表格
HTML表格用<table>表示。一个表格可以分成很多行(row)，用<tr>表示；每行又可以分成很多单元格(cell)，用<td>表示。
这三个Tag是创建表格最常用的Tag。
示例
<html>
<body>
<p>
表格所用到的Tag：整个表格开始要用table；每一行开始要用tr；每一单元格开始要用td。
</p>
<h4>只有一行(Row)一列(Column)的表格</h4>
<table border="1">
<tr>
<td>100</td>
</tr>
</table>
<h4>一行三列的表格</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
<h4>两行三列的表格</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
表格所用到的Tag：整个表格开始要用table；每一行开始要用tr；每一单元格开始要用td。
只有一行(Row)一列(Column)的表格
100
一行三列的表格
100 200 300
两行三列的表格
100 200 300
400 500 600
border属性
在缺省情况下，如果不设置表格的边界，表格是不显示边界的。
示例：不显示边界的表格
<html>
<body>
<h4>缺省情况下，表格没有边界。</h4>
<table>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
<h4>表格Border设为0，也不显示边界：</h4>
<table border="0">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
要显示表格的边界，可使用border这个属性。
示例：显示边界的表格
<html>
<body>
<h4>表格的边界值设为1：</h4>
<table border="1">
<tr>
<td>第一</td>
<td>行</td>
</tr>
<tr>
<td>第二</td>
<td>行</td>
</tr>
</table>
<h4>表格的边界值设为8，边界更粗：</h4>
<table border="8">
<tr>
<td>第一</td>
<td>行</td>
</tr>
<tr>
<td>第二</td>
<td>行</td>
</tr>
</table>
<h4>表格的边界值设为15，边界更粗：</h4>
<table border="15">
<tr>
<td>第一</td>
<td>行</td>
</tr>
<tr>
<td>第二</td>
<td>行</td></tr>
</table>
</body>
</html>
表格的表头
用<th>来表示表格的表头，表头的字是粗体显示的。
示例： 有表头的表格
<html>
<body>
<h4>有表头的表格：</h4>
<table border="1">
<tr>
<th>姓名</th>
<th>电话</th>
<th>传真</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>竖直方向的表头：</h4>
<table border="1">
<tr>
<th>姓名</th>
<td>Bill Gates</td>
</tr>
<tr>
<th>电话</th>
<td>555 77 854</td>
</tr>
<tr>
<th>传真</th>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
空的单元格
如果表格的单元格<td></td>之间没有内容，那么这个单元格的边界是不会被显示出来的，尽管整个表格已设置边界值。要显示这个单元格的边界，可以插入一个 空格符。
示例
<html>
<body>
<table border="1">
<tr>
<td>Some text</td>
<td>Some text</td>
</tr>
<tr>
<td></td>
<td>Some text</td>
</tr>
</table>
<p>上面的表格中，有一个单元格里是没有任何内容的，这个空的单元格没有显示边界，虽然整个表格设了边界值。</p>
<table border="1">
<tr>
<td>Some text</td>
<td>Some text</td>
</tr>
<tr>
<td> </td>
<td>Some text</td>
</tr>
</table>
<p>
上面的例子，你可以看到，给这个单元格加上一个空格符号之后，单元格的边界就显示出来了。</p>
<p>注意：空格符要用&bsp;表示。 是一个HTML特别字符，参见HTML特别字符(HTML Character Entities)。
</p>
</body>
</html>
更多示例
有标题的表格
<html>
<body>
<h4>
这个表格有标题：
</h4>
<table border="6">
<caption>表格标题</caption>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
这个示例演示如何用<caption>在一个表格上加上标题。
包含多列或多行的单元格
<html>
<body>
<h4>用colpsan属性，设置包含多列的单元格：</h4>
<table border="1">
<tr>
<th>姓名</th>
<th colspan="2">联系方式</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>用rowspan这个属性，设置包含多行的单元格：</h4>
<table border="1">
<tr>
<th>姓名</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">联系方式</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
这个示例演示如何用colspan，rowspan设置多列或者多行的单元格。
单元格里的内容
<html>
<body>
<table border="1">
<tr>
<td>
<p>这是一段</p>
<p>这是另外一段。</p>
</td>
<td>这个单元格里包含了一个表格：
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>这个单元格里包含了一个图片：
<img src = "../images/html_tutorials/mail.gif">
</td>
<td>HELLO</td>
</tr>
</table>
</body>
</html>
这个例子演示单元格<td></td>里面的内容。单元格的内容可以是文字，图片，超链接，Form，表格等。
单元格内容与单元格边界之间的距离
<html>
<body>
<h4>没有cellpadding的表格：</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<p>设置cellpadding属性，可以改变单元格内容和单元格边界之间的距离。</p>
<h4>以下是设置了cellpadding属性的表格：</h4>
<table border="1" cellpadding="10">
<tr>
<td>第一</td>
<td>行</td>
</tr>
<tr>
<td>第二</td>
<td>行</td>
</tr>
</table>
<h4>cellpadding属性值设置为30的表格：</h4>
<table border="1" cellpadding="30">
<tr>
<td>第一</td>
<td>行</td>
</tr>
<tr>
<td>第二</td>
<td>行</td>
</tr>
</table>
</body>
</html>
这个示例教你如何用cellpadding这个属性设置单元格内容与单元格边界之间的距离。
单元格之间的距离
<html>
<body>
<p>Cellspacing属性表示单元格之间的距离。</p>
<h4>如果表格里没有设置cellspacing属性，缺省情况下，cellspacing值为1。</h4>
<table border="1">
<tr>
<td>第一</td>
<td>行</td>
</tr>
<tr>
<td>第二</td>
<td>行</td>
</tr>
</table>
<h4>Cellspacing属性值设为0的表格：</h4>
<table border="1" cellspacing="0">
<tr>
<td>第一</td>
<td>行</td>
</tr>
<tr>
<td>第二</td>
<td>行</td>
</tr>
</table>
<h4>Cellspacing属性值设为20的表格：</h4>
<table border="1" cellspacing="20">
<tr>
<td>第一</td>
<td>行</td>
</tr>
<tr>
<td>第二</td>
<td>行</td>
</tr>
</table>
</body>
</html>
这个示例教你如何用cellspacing这个属性设置单元格之间的距离
设置表格的背景颜色和背景图片
<html>
<body>
<h4>给表格设置背景颜色：</h4>
<table border="1" bgcolor="red">
<tr>
<td>第一</td>
<td>行</td>
</tr>
<tr>
<td>第二</td>
<td>行</td>
</tr>
</table>
<h4>给表格加背景图片：</h4>
<table border="1" background="../images/html_tutorials/background.gif">
<tr>
<td>第一</td>
<td>行</td>
</tr>
<tr>
<td>第二</td>
<td>行</td>
</tr>
</table>
</body>
</html>
这个示例演示如何用bgcolor属性设置表格的背景颜色，如何用background属性为表格添加背景图片。
设置单元格的背景颜色和背景图片
这个示例演示如何用bgcolor属性设置单元格的背景颜色，如何用background属性为单元格添加背景图片。
单元格内容的对齐方式
这个示例教你如何用align属性设置单元格的对齐方式。
HTML相对路径(Relative Path)和绝对路径(Absolute Path)
HTML初学者会经常遇到这样一个问题，如何正确引用一个文件。比如，怎样在一个HTML网页中引用另外一个HTML网页作为超链接(hyperlink)？怎样在一个网页中插入一张图片？......(相关教程：HTML超链接；HTML图片)
如果你在引用文件时(如加入超链接，或者插入图片等)，使用了错误的文件路径，就会导致引用失效(无法浏览链接文件，或无法显示插入的图片等)。
为了避免这些错误，正确地引用文件，我们需要学习一下HTML路径。
HTML有2种路径的写法：相对路径和绝对路径。
HTML相对路径(Relative Path)
同一个目录的文件引用
如果源文件和引用文件在同一个目录里，直接写引用文件名即可。
我们现在建一个源文件info.html，在info.html里要引用index.html文件作为超链接。
假设info.html路径是：c:\Inetpub\wwwroot\sites\blabla\info.html
假设index.html路径是：c:\Inetpub\wwwroot\sites\blabla\index.html
在info.html加入index.html超链接的代码应该这样写：
<a href = "index.html">index.html</a>
如何表示上级目录
../表示源文件所在目录的上一级目录，../../表示源文件所在目录的上上级目录，以此类推。
假设info.html路径是：c:\Inetpub\wwwroot\sites\blabla\info.html
假设index.html路径是：c:\Inetpub\wwwroot\sites\index.html
在info.html加入index.html超链接的代码应该这样写：
<a href = "../index.html">index.html</a>
假设info.html路径是：c:\Inetpub\wwwroot\sites\blabla\info.html
假设index.html路径是：c:\Inetpub\wwwroot\index.html
在info.html加入index.html超链接的代码应该这样写：
<a href = "../../index.html">index.html</a>
假设info.html路径是：c:\Inetpub\wwwroot\sites\blabla\info.html
假设index.html路径是：c:\Inetpub\wwwroot\sites\wowstory\index.html
在info.html加入index.html超链接的代码应该这样写：
<a href = "../wowstory/index.html">index.html</a>
如何表示下级目录
引用下级目录的文件，直接写下级目录文件的路径即可。
假设info.html路径是：c:\Inetpub\wwwroot\sites\blabla\info.html
假设index.html路径是：c:\Inetpub\wwwroot\sites\blabla\html\index.html
在info.html加入index.html超链接的代码应该这样写：
<a href = "html/index.html">index.html</a>
假设info.html路径是：c:\Inetpub\wwwroot\sites\blabla\info.html
假设index.html路径是：c:\Inetpub\wwwroot\sites\blabla\html\tutorials\index.html
在info.html加入index.html超链接的代码应该这样写：
<a href = "html/tutorials/index.html">index.html</a>
HTML绝对路径(Absolute Path)
HTML绝对路径(absolute path)指带域名的文件的完整路径。
假设你注册了域名www.admin5.com/html，并申请了虚拟主机，你的虚拟主机提供商会给你一个目录，比如www，这个www就是你网站的根目录。
假设你在www根目录下放了一个文件index.html，这个文件的绝对路径就是： http://www.admin5.com/html。
假设你在www根目录下建了一个目录叫html_tutorials，然后在该目录下放了一个文件index.html，这个文件的绝对路径就是http://www.admin5.com/html/html_tutorials/index.html。
2009-1-4
宋其帅
新国际
如何创建HTML表格
HTML表格用<table>表示。一个表格可以分成很多行(row)，用<tr>表示；每行又可以分成很多单元格(cell)，用<td>表示。
这三个Tag是创建表格最常用的Tag。
<html>
<body>
<p>
表格所用到的Tag：整个表格开始要用table；每一行开始要用tr；每一单元格开始要用td。
</p>
<h4>只有一行(Row)一列(Column)的表格</h4>
<table border="1">
<tr>
<td>100</td>
</tr>
</table>
<h4>一行三列的表格</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
<h4>两行三列的表格</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
border属性
在缺省情况下，如果不设置表格的边界，表格是不显示边界的。
示例：不显示边界的表格
<html>
<body>
<h4>缺省情况下，表格没有边界。</h4>
<table>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
<h4>表格Border设为0，也不显示边界：</h4>
<table border="0">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
要显示表格的边界，可使用border这个属性。
HTML基础Tag
HTML常用格式
HTML特殊字符
HTML超链接(Hyperlinks)
HTML相对和绝对路径
HTML表格(Tables)
HTML框架(Frames)
HTML列表(Lists)
HTML表单(Forms)
HTML图片(Images)
HTML字体(Fonts)
HTML背景颜色和图片
HTML头部信息(Head)
HTML基本概念
什么是HTML文件？
• HTML的英文全称是Hypertext Marked Language，中文叫做“超文本标记语言”。
• 和一般文本的不同的是，一个HTML文件不仅包含文本内容，还包含一些Tag，中文称“标记”。
• 一个HTML文件的后缀名是.htm或者是.html。
• 用文本编辑器就可以编写HTML文件。
这就试写一个HTML文件吧！
打开你的Notepad，新建一个文件，然后拷贝以下代码到这个新文件，然后将这个文件存成first.html。
<html>
<head>
<title>Title of page</title>
</head>
<body>
This is my first homepage. <b>This text is bold</b>
</body>
</html>
要浏览这个first.html文件，双击它。或者打开浏览器，在File菜单选择Open，然后选择这个文件就行了。
示例解释
这个文件的第一个Tag是<html>，这个Tag告诉你的浏览器这是HTML文件的头。文件的最后一个Tag是</html>，表示HTML文件到此结束。
在<head>和</head>之间的内容，是Head信息。Head信息是不显示出来的，你在浏览器里看不到。但是这并不表示这些信息没有用处。比如你可以在Head信息里加上一些关键词，有助于搜索引擎能够搜索到你的网页。
在<title>和</title>之间的内容，是这个文件的标题。你可以在浏览器最顶端的标题栏看到这个标题。
在<body>和</body>之间的信息，是正文。
在<b>和</b>之间的文字，用粗体表示。<b>顾名思义，就是bold的意思。
HTML文件看上去和一般文本类似，但是它比一般文本多了Tag，比如<html>，<b>等，通过这些Tag，可以告诉浏览器如何显示这个文件。
HTML元素(HTML Elements)
• HTML元素(HTML Element)用来标记文本，表示文本的内容。比如body, p, title就是HTML元素。
• HTML元素用Tag表示，Tag以<开始，以>结束。
• Tag通常是成对出现的，比如<body></body>。起始的叫做Opening Tag，结尾的就叫做Closing Tag。
• 目前HTML的Tag不区分大小写的。比如，<HTML>和<html>其实是相同的。
HTML元素(HTML Elements)的属性
HTML元素可以拥有属性。属性可以扩展HTML元素的能力。
比如你可以使用一个bgcolor属性，使得页面的背景色成为红色，就像这样：
<body bgcolor="red">
再比如，你可以使用border这个属性，将一个表格设成一个无边框的表格。如下：
<table border="0">
属性通常由属性名和值成对出现，就像这样：name="value"。上面例子中的bgcolor, border就是name，red和0就是value。属性值一般用双引号标记起来。
属性通常是附加给HTML的Opening Tag，而不是Closing Tag。
一些基础的HTML Tag
HTML里，比较基础的Tag主要用于标题，段落和分行。
学习HTML最好的方法，就是跟着示例学。为了各位学习的方便，我们准备了一个简单的HTML编辑器，你可以在左边写HTML代码，然后点击上面的按钮，查看HTML的显示结果。
示例：一个非常简单的HTML文件
这个示例算是一个最简单的HTML文件，只包含了最基本的能构成一个HTML文件的Tag。通过这个例子，你可以看到浏览器是如何显示这个文件的，以此对HTML文件有个最初的认识。
示例：简单的段落
<html>
<body>
<p>这是第一段。</p>
<p>这是第二段。</p>
<p>这是第三段。</p>
<p>在HTML里，用p来定义段落。</p>
</body>
</html>
正文标题
这个示例告诉你如何在HTML文件里定义正文标题。
HTML用<h1>到<h6>这几个Tag来定义正文标题，从大到小。每个正文标题自成一段。
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>
段落划分
在HTML里用<p>和</p>划分段落。
<p>This is a paragraph</p>
<p>This is another paragraph</p>
换行
通过使用<br>这个Tag，可以在不新建段落的情况下换行。<br>没有Closing Tag。
用<p>换行是个坏习惯，正确的是使用<br>。
<p>This <br> is a para<br>graph with line breaks</p>
HTML注释
在HTML文件里，你可以写代码注释，解释说明你的代码，这样有助于你和他人日后能够更好地理解你的代码。
注释可以写在<!--和-->之间。浏览器是忽略注释的，你不会在HTML正文中看到你的注释。
<!-- This is a comment -->
一些小建议
HTML文件会自动截去多余的空格。不管你加多少空格，都被看做一个空格。 一个空行也被看做一个空格。
有些Tag能够将文本自成一段，而不需要使用<p></p>来分段。比如<h1></h1>之类的标题Tag。
更多示例
<html>
<body>
<p>
这一段
在源代码里
包含很多分行，
但是浏览器忽略
这些分行。
</p>
<p>
这一段 在浏览器里
包含 很多 空格，
但是 浏览器忽略多余空格。
</p>
<p>
你使用的浏览器的窗口大小决定了段落的行数。如果你改编浏览器窗口的大小，段落的行数会因此改变。
</p>
</body>
</html>
换行
<html>
<body>
<p>
要<br>在一段<br>里<br>换行<br>请使用<br>br这个Tag。
</p>
</body>
</html>
正文标题
<html>
<body>
<h1>这是1号标题</h1>
<h2>这是2号标题</h2>
<h3>这是3号标题</h3>
<h4>这是4号标题</h4>
<h5>这是5号标题</h5>
<h6>这是6号标题</h6>
</body>
</html>
居中的正文标题
<html>
<body>
<h1 align="center">这是标题</h1>
<p>上面的标题是居中显示的。</p>
</body>
</html>
加条横线
<html>
<body>
<p>用hr这个Tag可以在HTML文件里加一条横线。</p>
<hr>
<p>村妇想像皇宫的生活：皇后得用金扁担挑水吧。</p>
<hr>
<p>初中某数学老师讲方程式变换，在讲台上袖子一挽大声喝道：同学们注意！我要变形了！……</p>
</body>
</html>
代码注释
<html>
<body>
<!--这是代码注释-->
<p>代码注释是不会显示在网页里的。</p>
</body>
</html>
背景颜色
<html>
<body bgcolor="yellow">
<h2>看，这个页面是黄色的。</h2>
</body>
</html>
HTML常用格式
HTML定义了一些文本格式的Tag，比如利用Tag，可以将字体变成粗体或者斜体。从下面的示例，你可以了解各种文本格式Tag如何改变HTML文本的显示。
常用文本格式Tag
Tag Tag说明
<b> 粗体bold
<i> 斜体italic
<del> 文字当中划线表示删除
<ins> 文字下划线表示插入
<sub> 下标
<sup> 上标
<blockquote> 缩进表示引用
<pre> 保留空格和换行
<code> 表示计算机代码，等宽字体
示例
<html>
<body>
<p><b>粗体用b表示。</b></p>
<p><i>斜体用i表示。</i></p>
<p><del>芙蓉姐姐</del>这个词当中划线表示删除。</p>
<p><ins>想唱就唱</ins>这个词下划线插入。</p>
<p>X<sub>2</sub>其中的2是下标</p>
<p>X<sup>2</sup>其中的2是上标</p>
<p><blockquote>好好学习，天天向上。这句话缩进表示引用</blockquote></p>
<pre>
这是
预设(preformatted)文本.
在pre这个tag里的文本 保留
空格和
分行。
</pre>
<code>call getOrders</code>
<p>用code显示计算机代码，code里显示的字符是等宽字符。</p>
</body>
</html>
如何看HTML的源代码
在浏览器看到的HTML网页，是浏览器解释HTML源代码后产生的结果。
要查看这个HTML的源代码，有两种方法。一是点击鼠标右键，点击View Source(查看源文件)命令；二是选择浏览器菜单View(查看)中的Source(源文件)命令。
利用View Source得到网页的源代码，你可以由此借鉴一下别人写得好的地方。不过在你对HTML知识尚少的情况下，看别人复杂的HTML源代码，只会让你头晕。建议你还是再等等，先掌握一些基础再说。
HTML特殊字符显示
HTML字符实体(Character Entities)
有些字符在HTML里有特别的含义，比如小于号<就表示HTML Tag的开始，这个小于号是不显示在我们最终看到的网页里的。那如果我们希望在网页中显示一个小于号，该怎么办呢？
这就要说到HTML字符实体(HTML Character Entities)了。
一个字符实体(Character Entity)分成三部分：第一部分是一个&符号，英文叫ampersand；第二部分是实体(Entity)名字或者是#加上实体(Entity)编号；第三部分是一个分号。
比如，要显示小于号，就可以写<或者<。
用实体(Entity)名字的好处是比较好理解，一看lt，大概就猜出是less than的意思，但是其劣势在于并不是所有的浏览器都支持最新的Entity名字。而实体(Entity)编号，各种浏览器都能处理。
注意：Entity是区分大小写的。
如何显示空格
通常情况下，HTML会自动截去多余的空格。不管你加多少空格，都被看做一个空格。比如你在两个字之间加了10个空格，HTML会截去9个空格，只保留一个。为了在网页中增加空格，你可以使用 表示空格。
最常用的字符实体(Character Entities)
显示结果 说明 Entity Name Entity Number
显示一个空格
< 小于 < <
> 大于 > >
& &符号 & &
" 双引号 " "
其他常用的字符实体(Character Entities)
显示结果 说明 Entity Name Entity Number
© 版权 © ©
® 注册商标 ® ®
× 乘号 × ×
÷ 除号 ÷ ÷
更多字符实体(Character Entities)
更多字符实体(Character Entities)请参见ISO Latin-1字符集。
ISO Latin-1字符集
字符 十进制字符编号 实体名字 说明
--- --- 未使用Unused
--- --- 未使用Unused
--- --- 未使用Unused
--- --- 未使用Unused
--- --- 未使用Unused
--- --- 未使用Unused
--- --- 未使用Unused
--- --- 未使用Unused
--- --- 未使用Unused
--- --- 制表符Horizontal tab
--- --- 换行Line feed
--- --- 未使用Unused
--- --- 未使用Unused
--- --- 回车Carriage Return
--- --- 未使用Unused
--- --- 未使用Unused
--- --- 未使用Unused
--- --- 未使用Unused
--- --- 未使用Unused
--- --- 未使用Unused
--- --- 未使用Unused
--- --- 未使用Unused
--- --- 未使用Unused
--- --- 未使用Unused
--- --- 未使用Unused
--- --- 未使用Unused
--- --- 未使用Unused
--- --- 未使用Unused
--- --- 未使用Unused
--- --- 未使用Unused
--- --- 未使用Unused
--- --- 未使用Unused
--- Space
! ! --- 惊叹号Exclamation mark
" " " 双引号Quotation mark
# # --- 数字标志Number sign
$ $ --- 美元标志Dollar sign
% % --- 百分号Percent sign
& & & Ampersand
' ' --- 单引号Apostrophe
( ( --- 小括号左边部分Left parenthesis
) ) --- 小括号右边部分Right parenthesis
* * --- 星号Asterisk
+ + --- 加号Plus sign
, , --- 逗号Comma
- - --- 连字号Hyphen
. . --- 句号Period (fullstop)
/ / --- 斜杠Solidus (slash)
0 0 --- 数字0 Digit 0
1 1 --- 数字1 Digit 1
2 2 --- 数字2 Digit 2
3 3 --- 数字3 Digit 3
4 4 --- 数字4 Digit 4
5 5 --- 数字5 Digit 5
6 6 --- 数字6 Digit 6
7 7 --- 数字7 Digit 7
8 8 --- 数字8 Digit 8
9 9 --- 数字9 Digit 9
: : --- 冒号Colon
; ; --- 分号Semicolon
< < < 小于号Less than
= = --- 等于符号Equals sign
> > > 大于号Greater than
? ? --- 问号Question mark
@ @ --- Commercial at
A A --- 大写A Capital A
B B --- 大写B Capital B
C C --- 大写C Capital C
D D --- 大写D Capital D
E E --- 大写E Capital E
F F --- 大写F Capital F
G G --- 大写G Capital G
H H --- 大写H Capital H
I I --- 大写J Capital I
J J --- 大写K Capital J
K K --- 大写L Capital K
L L --- 大写K Capital L
M M --- 大写M Capital M
N N --- 大写N Capital N
O O --- 大写O Capital O
P P --- 大写P Capital P
Q Q --- 大写Q Capital Q
R R --- 大写R Capital R
S S --- 大写S Capital S
T T --- 大写T Capital T
U U --- 大写U Capital U
V V --- 大写V Capital V
W W --- 大写W Capital W
X X --- 大写X Capital X
Y Y --- 大写Y Capital Y
Z Z --- 大写Z Capital Z
[ [ --- 中括号左边部分Left square bracket
\ \ --- 反斜杠Reverse solidus (backslash)
] ] --- 中括号右边部分Right square bracket
^ ^ --- Caret
_ _ --- 下划线Horizontal bar (underscore)
` ` --- 尖重音符Acute accent
a a --- 小写a Small a
b b --- 小写b Small b
c c --- 小写c Small c
d d --- 小写d Small d
e e --- 小写e Small e
f f --- 小写f Small f
g g --- 小写g Small g
h h --- 小写h Small h
i i --- 小写i Small i
j j --- 小写j Small j
k k --- 小写k Small k
l l --- 小写l Small l
m m --- 小写m Small m
n n --- 小写n Small n
o o --- 小写o Small o
p p --- 小写p Small p
q q --- 小写q Small q
r r --- 小写r Small r
s s --- 小写s Small s
t t --- 小写t Small t
u u --- 小写u Small u
v v --- 小写v Small v
w w --- 小写w Small w
x x --- 小写x Small x
y y --- 小写y Small y
z z --- 小写z Small z
{ { --- 大括号左边部分Left curly brace
| | --- 竖线Vertical bar
} } --- 大括号右边部分Right curly brace
~ ~ --- Tilde
--- --- 未使用Unused
空格Nonbreaking space
¡ ¡ ¡ Inverted exclamation
¢ ¢ ¢ 货币分标志Cent sign
£ £ £ 英镑标志Pound sterling
¤ ¤ ¤ 通用货币标志General currency sign
¥ ¥ ¥ 日元标志Yen sign
¦ ¦ ¦ or &brkbar; 断竖线Broken vertical bar
§ § § 分节号Section sign
¨ ¨ ¨ or ¨ 变音符号Umlaut
© © © 版权标志Copyright
ª ª ª Feminine ordinal
« « « Left angle quote, guillemet left
¬ ¬ ¬ Not sign
¬ Soft hyphen
® ® ® 注册商标标志Registered trademark
¯ ¯ ¯ or &hibar; 长音符号Macron accent
° ° ° 度数标志Degree sign
± ± ± 加或减Plus or minus
² ² ² 上标2 Superscript two
³ ³ ³ 上标3 Superscript three
´ ´ ´ 尖重音符Acute accent
µ µ µ Micro sign
¶ ¶ ¶ Paragraph sign
• · · Middle dot
¸ ¸ ¸ Cedilla
¹ ¹ ¹ 上标1 Superscript one
º º º Masculine ordinal
» » » Right angle quote, guillemet right
¼ ¼ ¼ 四分之一Fraction one-fourth
½ ½ ½ 二分之一Fraction one-half
¾ ¾ ¾ 四分之三Fraction three-fourths
¿ ¿ ¿ Inverted question mark
À À À Capital A, grave accent
Á Á Á Capital A, acute accent
   Capital A, circumflex
à à à Capital A, tilde
Ä Ä Ä Capital A, di?esis / umlaut
Å Å Å Capital A, ring
Æ Æ Æ Capital AE ligature
Ç Ç Ç Capital C, cedilla
È È È Capital E, grave accent
É É É Capital E, acute accent
Ê Ê Ê Capital E, circumflex
Ë Ë Ë Capital E, di?esis / umlaut
Ì Ì Ì Capital I, grave accent
Í Í Í Capital I, acute accent
Î Î Î Capital I, circumflex
Ï Ï Ï Capital I, di?esis / umlaut
Ð Ð Ð Capital Eth, Icelandic
Ñ Ñ Ñ Capital N, tilde
Ò Ò Ò Capital O, grave accent
Ó Ó Ó Capital O, acute accent
Ô Ô Ô Capital O, circumflex
Õ Õ Õ Capital O, tilde
Ö Ö Ö Capital O, di?esis / umlaut
× × × 乘号Multiply sign
Ø Ø Ø Capital O, slash
Ù Ù Ù Capital U, grave accent
Ú Ú Ú Capital U, acute accent
Û Û Û Capital U, circumflex
Ü Ü Ü Capital U, di?esis / umlaut
Ý Ý Ý Capital Y, acute accent
Þ Þ Þ Capital Thorn, Icelandic
ß ß ß Small sharp s, German sz
à à à Small a, grave accent
á á á Small a, acute accent
â â â Small a, circumflex
ã ã ã Small a, tilde
ä ä ä Small a, di?esis / umlaut
å å å Small a, ring
æ æ æ Small ae ligature
ç ç ç Small c, cedilla
è è è Small e, grave accent
é é é Small e, acute accent
ê ê ê Small e, circumflex
ë ë ë Small e, di?esis / umlaut
ì ì ì Small i, grave accent
í í í Small i, acute accent
î î î Small i, circumflex
ï ï ï Small i, di?esis / umlaut
ð ð ð Small eth, Icelandic
ñ ñ ñ Small n, tilde
ò ò ò Small o, grave accent
ó ó ó Small o, acute accent
ô ô ô Small o, circumflex
õ õ õ Small o, tilde
ö ö ö Small o, di?esis / umlaut
÷ ÷ ÷ 除号Division sign
ø ø ø Small o, slash
ù ù ù Small u, grave accent
ú ú ú Small u, acute accent
û û û Small u, circumflex
ü ü ü Small u, di?esis / umlaut
ý ý ý Small y, acute accent
þ þ þ Small thorn, Icelandic
ÿ ÿ ÿ Small y, umlaut
HTML利用超链接打开链接文件
示例1
<html>
<body>
<p>
<a href="../asdocs/html_tutorials/humor02.html">这是一个链接</a>
</p>
<p>
<a href="http://www.admin5.com/html" target=_blank>站长网 站长学院站点链接</a>
</p>
</body>
</html>
示例2
将一个图片作为一个超链接
<html>
<body>
<p>
你可以将一张图片作为一个链接，点击这个图片。
<a href="../asdocs/html_tutorials/humor03.html"><img src="../images/html_tutorials/smile.jpg" ></a>
</p>
</body>
</html>
这个示例演示了如何将一个图片作为一个超链接，即点击一个图片，可以连接到其它文件。
a和href属性
HTML用<a>来表示超链接，英文叫anchor。
<a>可以指向任何一个文件源：一个HTML网页，一个图片，一个影视文件等。用法如下：
<a href="url">链接的显示文字</a>
点击<a></a>当中的内容，即可打开一个链接文件，href属性则表示这个链接文件的路径。
比如链接到admin5.com/html站点首页，就可以这样表示：
<a href="http://www.admin5.com/html">站长网 站长学院admin5.com/html首页</a>
target属性
使用target属性，可以在一个新窗口里打开链接文件。
<a href="http://www.admin5.com/html" target=_blank>站长网 站长学院admin5.com/html首页</a>
<html>
<body>
<a href="../asdocs/html_tutorials/humor01.html" target="_blank">一则笑话</a>
<p>
如果你将target的属性值设成_blank，你点击这个链接的时候，网页就会在一个新窗口出现。
</p>
</body>
</html>
title属性
使用 title 属性，可以让鼠标悬停在超链接上的时候，显示该超链接的文字注释。
<a href="http://www.admin5.com/html" title = "站长网 站长学院网页教程与代码的中文站点">站长网 站长学院网站</a>
如果希望注释多行显示，可以使用 作为换行符。
<a href="http://www.admin5.com/html" title = "站长网 站长学院 网页教程与代码的中文站点">站长网 站长学院网站</a>
<html>
<body>
<p>
<a href="http://www.admin5.com/html" title = "站长网 站长学院网页教程与代码的中文站点">站长网 站长学院网站</a>
</p>
<p>
<a href="http://www.admin5.com/html" title = "站长网 站长学院 网页教程与代码的中文站点">站长网 站长学院网站</a>
</p>
</body>
</html>
name属性
使用name属性，可以跳转到一个文件的指定部位。
使用name属性，要设置一对。一是设定name的名称，二是设定一个href指向这个name：
<a href="#C1">参见第一章</a>
<a name="C1">第一章</a>
<html>
<body>
<p>
<a href="#C6">
参见第六章
</a>
</p>
<p>
<a name="C1"><h2>第1章</h2></a>
<p>这是站长网 站长学院admin5.com/html- 网页教程与代码的中文站点。</p>
<a name="C2"><h2>第2章</h2></a>
<p>这是站长网 站长学院admin5.com/html- 网页教程与代码的中文站点。</p>
<a name="C3"><h2>第3章</h2></a>
<p>这是站长网 站长学院admin5.com/html- 网页教程与代码的中文站点。</p>
<a name="C4"><h2>第4章</h2></a>
<p>这是站长网 站长学院admin5.com/html- 网页教程与代码的中文站点。</p>
<a name="C5"><h2>第5章</h2></a>
<p>这是站长网 站长学院admin5.com/html- 网页教程与代码的中文站点。</p>
<a name="C6"><h2>第6章</h2></a>
<p>这是站长网 站长学院admin5.com/html- 网页教程与代码的中文站点。</p>
<a name="C7"><h2>第7章</h2></a>
<p>这是站长网 站长学院admin5.com/html- 网页教程与代码的中文站点。</p>
<a name="C8"><h2>第8章</h2></a>
<p>这是站长网 站长学院admin5.com/html- 网页教程与代码的中文站点。</p>
<a name="C9"><h2>第9章</h2></a>
<p>这是站长网 站长学院admin5.com/html- 网页教程与代码的中文站点。</p>
<a name="C10"><h2>第10章</h2></a>
<p>这是站长网 站长学院admin5.com/html- 网页教程与代码的中文站点。</p>
<a name="C11"><h2>第11章</h2></a>
<p>这是站长网 站长学院admin5.com/html- 网页教程与代码的中文站点。</p>
<a name="C12"><h2>第12章</h2></a>
<p>这是站长网 站长学院admin5.com/html- 网页教程与代码的中文站点。</p>
<a name="C13"><h2>第13章</h2></a>
<p>这是站长网 站长学院admin5.com/html- 网页教程与代码的中文站点。</p>
<a name="C14"><h2>第14章</h2></a>
<p>这是站长网 站长学院admin5.com/html- 网页教程与代码的中文站点。</p>
<a name="C15"><h2>第15章</h2></a>
<p>这是站长网 站长学院admin5.com/html- 网页教程与代码的中文站点。</p>
<a name="C16"><h2>第16章</h2></a>
<p>这是站长网 站长学院admin5.com/html- 网页教程与代码的中文站点。</p>
<a name="C17"><h2>第17章</h2></a>
<p>这是站长网 站长学院admin5.com/html- 网页教程与代码的中文站点。</p>
</body>
</html>
name属性通常用于创建一个大文件的章节目录(table of contents)。每个章节都建立一个链接，放在文件的开始处，每个章节的开头都设置Name属性。当用户点击某个章节的链接时，这个章节的内容就显示在最上面。
如果浏览器不能找到Name指定的部分，则显示文章开头，不报错。
链接到email地址
在网站中，你经常会看到“联系我们”的链接，一点击这个链接，就会触发你的邮件客户端，比如Outlook Express，然后显示一个新建mail的窗口。用<a>可以实现这样的功能。
<a href = "mailto:info@sina.com">联系新浪</a>
<html>
<body>
<p>
这是一个最简单的邮箱地址的链接：
<a href="mailto:info@sina.com">给新浪网站发信</a>
</p>
<p>
这个邮箱地址的链接写了subject内容：
<a href="mailto:info@sina.com?subject=Hello">给新浪网站发信</a>
</p>
<p>
这个邮箱地址链接写了to, cc, bcc, subject, body的内容：
<a href="mailto:info@sina.com?cc=webmaster@vip.sina.com&bcc=media@sina.com&subject=I%20like%20your%20site&body=真是个好站点！">写信给新浪</a>
</p>
<p>
<b>注:</b>空格请用%20表示。
</p>
</body>
</html>
如何创建HTML表格
HTML表格用<table>表示。一个表格可以分成很多行(row)，用<tr>表示；每行又可以分成很多单元格(cell)，用<td>表示。
这三个Tag是创建表格最常用的Tag。
示例
<html>
<body>
<p>
表格所用到的Tag：整个表格开始要用table；每一行开始要用tr；每一单元格开始要用td。
</p>
<h4>只有一行(Row)一列(Column)的表格</h4>
<table border="1">
<tr>
<td>100</td>
</tr>
</table>
<h4>一行三列的表格</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
<h4>两行三列的表格</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
表格所用到的Tag：整个表格开始要用table；每一行开始要用tr；每一单元格开始要用td。
只有一行(Row)一列(Column)的表格
100
一行三列的表格
100 200 300
两行三列的表格
100 200 300
400 500 600
border属性
在缺省情况下，如果不设置表格的边界，表格是不显示边界的。
示例：不显示边界的表格
<html>
<body>
<h4>缺省情况下，表格没有边界。</h4>
<table>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
<h4>表格Border设为0，也不显示边界：</h4>
<table border="0">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
要显示表格的边界，可使用border这个属性。
示例：显示边界的表格
<html>
<body>
<h4>表格的边界值设为1：</h4>
<table border="1">
<tr>
<td>第一</td>
<td>行</td>
</tr>
<tr>
<td>第二</td>
<td>行</td>
</tr>
</table>
<h4>表格的边界值设为8，边界更粗：</h4>
<table border="8">
<tr>
<td>第一</td>
<td>行</td>
</tr>
<tr>
<td>第二</td>
<td>行</td>
</tr>
</table>
<h4>表格的边界值设为15，边界更粗：</h4>
<table border="15">
<tr>
<td>第一</td>
<td>行</td>
</tr>
<tr>
<td>第二</td>
<td>行</td></tr>
</table>
</body>
</html>
表格的表头
用<th>来表示表格的表头，表头的字是粗体显示的。
示例： 有表头的表格
<html>
<body>
<h4>有表头的表格：</h4>
<table border="1">
<tr>
<th>姓名</th>
<th>电话</th>
<th>传真</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>竖直方向的表头：</h4>
<table border="1">
<tr>
<th>姓名</th>
<td>Bill Gates</td>
</tr>
<tr>
<th>电话</th>
<td>555 77 854</td>
</tr>
<tr>
<th>传真</th>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
空的单元格
如果表格的单元格<td></td>之间没有内容，那么这个单元格的边界是不会被显示出来的，尽管整个表格已设置边界值。要显示这个单元格的边界，可以插入一个 空格符。
示例
<html>
<body>
<table border="1">
<tr>
<td>Some text</td>
<td>Some text</td>
</tr>
<tr>
<td></td>
<td>Some text</td>
</tr>
</table>
<p>上面的表格中，有一个单元格里是没有任何内容的，这个空的单元格没有显示边界，虽然整个表格设了边界值。</p>
<table border="1">
<tr>
<td>Some text</td>
<td>Some text</td>
</tr>
<tr>
<td> </td>
<td>Some text</td>
</tr>
</table>
<p>
上面的例子，你可以看到，给这个单元格加上一个空格符号之后，单元格的边界就显示出来了。</p>
<p>注意：空格符要用&bsp;表示。 是一个HTML特别字符，参见HTML特别字符(HTML Character Entities)。
</p>
</body>
</html>
更多示例
有标题的表格
<html>
<body>
<h4>
这个表格有标题：
</h4>
<table border="6">
<caption>表格标题</caption>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
这个示例演示如何用<caption>在一个表格上加上标题。
包含多列或多行的单元格
<html>
<body>
<h4>用colpsan属性，设置包含多列的单元格：</h4>
<table border="1">
<tr>
<th>姓名</th>
<th colspan="2">联系方式</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>用rowspan这个属性，设置包含多行的单元格：</h4>
<table border="1">
<tr>
<th>姓名</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">联系方式</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
这个示例演示如何用colspan，rowspan设置多列或者多行的单元格。
单元格里的内容
<html>
<body>
<table border="1">
<tr>
<td>
<p>这是一段</p>
<p>这是另外一段。</p>
</td>
<td>这个单元格里包含了一个表格：
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>这个单元格里包含了一个图片：
<img src = "../images/html_tutorials/mail.gif">
</td>
<td>HELLO</td>
</tr>
</table>
</body>
</html>
这个例子演示单元格<td></td>里面的内容。单元格的内容可以是文字，图片，超链接，Form，表格等。
单元格内容与单元格边界之间的距离
<html>
<body>
<h4>没有cellpadding的表格：</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<p>设置cellpadding属性，可以改变单元格内容和单元格边界之间的距离。</p>
<h4>以下是设置了cellpadding属性的表格：</h4>
<table border="1" cellpadding="10">
<tr>
<td>第一</td>
<td>行</td>
</tr>
<tr>
<td>第二</td>
<td>行</td>
</tr>
</table>
<h4>cellpadding属性值设置为30的表格：</h4>
<table border="1" cellpadding="30">
<tr>
<td>第一</td>
<td>行</td>
</tr>
<tr>
<td>第二</td>
<td>行</td>
</tr>
</table>
</body>
</html>
这个示例教你如何用cellpadding这个属性设置单元格内容与单元格边界之间的距离。
单元格之间的距离
<html>
<body>
<p>Cellspacing属性表示单元格之间的距离。</p>
<h4>如果表格里没有设置cellspacing属性，缺省情况下，cellspacing值为1。</h4>
<table border="1">
<tr>
<td>第一</td>
<td>行</td>
</tr>
<tr>
<td>第二</td>
<td>行</td>
</tr>
</table>
<h4>Cellspacing属性值设为0的表格：</h4>
<table border="1" cellspacing="0">
<tr>
<td>第一</td>
<td>行</td>
</tr>
<tr>
<td>第二</td>
<td>行</td>
</tr>
</table>
<h4>Cellspacing属性值设为20的表格：</h4>
<table border="1" cellspacing="20">
<tr>
<td>第一</td>
<td>行</td>
</tr>
<tr>
<td>第二</td>
<td>行</td>
</tr>
</table>
</body>
</html>
这个示例教你如何用cellspacing这个属性设置单元格之间的距离
设置表格的背景颜色和背景图片
<html>
<body>
<h4>给表格设置背景颜色：</h4>
<table border="1" bgcolor="red">
<tr>
<td>第一</td>
<td>行</td>
</tr>
<tr>
<td>第二</td>
<td>行</td>
</tr>
</table>
<h4>给表格加背景图片：</h4>
<table border="1" background="../images/html_tutorials/background.gif">
<tr>
<td>第一</td>
<td>行</td>
</tr>
<tr>
<td>第二</td>
<td>行</td>
</tr>
</table>
</body>
</html>
这个示例演示如何用bgcolor属性设置表格的背景颜色，如何用background属性为表格添加背景图片。
设置单元格的背景颜色和背景图片
这个示例演示如何用bgcolor属性设置单元格的背景颜色，如何用background属性为单元格添加背景图片。
单元格内容的对齐方式
这个示例教你如何用align属性设置单元格的对齐方式。
HTML相对路径(Relative Path)和绝对路径(Absolute Path)
HTML初学者会经常遇到这样一个问题，如何正确引用一个文件。比如，怎样在一个HTML网页中引用另外一个HTML网页作为超链接(hyperlink)？怎样在一个网页中插入一张图片？......(相关教程：HTML超链接；HTML图片)
如果你在引用文件时(如加入超链接，或者插入图片等)，使用了错误的文件路径，就会导致引用失效(无法浏览链接文件，或无法显示插入的图片等)。
为了避免这些错误，正确地引用文件，我们需要学习一下HTML路径。
HTML有2种路径的写法：相对路径和绝对路径。
HTML相对路径(Relative Path)
同一个目录的文件引用
如果源文件和引用文件在同一个目录里，直接写引用文件名即可。
我们现在建一个源文件info.html，在info.html里要引用index.html文件作为超链接。
假设info.html路径是：c:\Inetpub\wwwroot\sites\blabla\info.html
假设index.html路径是：c:\Inetpub\wwwroot\sites\blabla\index.html
在info.html加入index.html超链接的代码应该这样写：
<a href = "index.html">index.html</a>
如何表示上级目录
../表示源文件所在目录的上一级目录，../../表示源文件所在目录的上上级目录，以此类推。
假设info.html路径是：c:\Inetpub\wwwroot\sites\blabla\info.html
假设index.html路径是：c:\Inetpub\wwwroot\sites\index.html
在info.html加入index.html超链接的代码应该这样写：
<a href = "../index.html">index.html</a>
假设info.html路径是：c:\Inetpub\wwwroot\sites\blabla\info.html
假设index.html路径是：c:\Inetpub\wwwroot\index.html
在info.html加入index.html超链接的代码应该这样写：
<a href = "../../index.html">index.html</a>
假设info.html路径是：c:\Inetpub\wwwroot\sites\blabla\info.html
假设index.html路径是：c:\Inetpub\wwwroot\sites\wowstory\index.html
在info.html加入index.html超链接的代码应该这样写：
<a href = "../wowstory/index.html">index.html</a>
如何表示下级目录
引用下级目录的文件，直接写下级目录文件的路径即可。
假设info.html路径是：c:\Inetpub\wwwroot\sites\blabla\info.html
假设index.html路径是：c:\Inetpub\wwwroot\sites\blabla\html\index.html
在info.html加入index.html超链接的代码应该这样写：
<a href = "html/index.html">index.html</a>
假设info.html路径是：c:\Inetpub\wwwroot\sites\blabla\info.html
假设index.html路径是：c:\Inetpub\wwwroot\sites\blabla\html\tutorials\index.html
在info.html加入index.html超链接的代码应该这样写：
<a href = "html/tutorials/index.html">index.html</a>
HTML绝对路径(Absolute Path)
HTML绝对路径(absolute path)指带域名的文件的完整路径。
假设你注册了域名www.admin5.com/html，并申请了虚拟主机，你的虚拟主机提供商会给你一个目录，比如www，这个www就是你网站的根目录。
假设你在www根目录下放了一个文件index.html，这个文件的绝对路径就是： http://www.admin5.com/html。
假设你在www根目录下建了一个目录叫html_tutorials，然后在该目录下放了一个文件index.html，这个文件的绝对路径就是http://www.admin5.com/html/html_tutorials/index.html。
2009-1-4
宋其帅
新国际
如何创建HTML表格
HTML表格用<table>表示。一个表格可以分成很多行(row)，用<tr>表示；每行又可以分成很多单元格(cell)，用<td>表示。
这三个Tag是创建表格最常用的Tag。
<html>
<body>
<p>
表格所用到的Tag：整个表格开始要用table；每一行开始要用tr；每一单元格开始要用td。
</p>
<h4>只有一行(Row)一列(Column)的表格</h4>
<table border="1">
<tr>
<td>100</td>
</tr>
</table>
<h4>一行三列的表格</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
<h4>两行三列的表格</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
border属性
在缺省情况下，如果不设置表格的边界，表格是不显示边界的。
示例：不显示边界的表格
<html>
<body>
<h4>缺省情况下，表格没有边界。</h4>
<table>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
<h4>表格Border设为0，也不显示边界：</h4>
<table border="0">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
要显示表格的边界，可使用border这个属性。
扫一扫
1056
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
