html入门教程适合初学者
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
希望可以帮到大家
一、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用<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文件里换行。
<html>
<body>
<p>
要<br>在一段<br>里<br>换行<br>请使用<br>br这个Tag。
</p>
</body>
</html>
正文标题
这个示例教会你如何在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文中加条横线。
<html>
<body>
<p>用hr这个Tag可以在HTML文件里加一条横线。
</p>
<hr>
<p>村妇想像皇宫的生活：皇后得用金扁担挑水吧。
</p>
<hr>
<p>问：谁是世界上最可怜的人？答：炮兵连炊事班战士！问：为什么？答：戴绿帽背黑锅看别人打炮。
</p>
<hr>
<p>初中某数学老师讲方程式变换，在讲台上袖子一挽大声喝道：同学们注意！我要变形了！……
</p>
</body>
</html>
代码注释
这个示例演示如何在HTML代码中加上代码注释，这些注释只显示在HTML源代码中，而源代码最终形成的网页里是看不到这些注释的。
<html>
<body>
<!--这是代码注释-->
<p>代码注释是不会显示在网页里的。
</p>
</body>
</html>
背景颜色
这个示例演示如何改变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常用的格式Tag
这个示例用了上述Tag，你可以对比一下HTML的显示结果。
<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
© 版权© ©
® 注册商标® ®
×乘号× ×
÷除号÷ ÷
ISO Latin-1字符集（见附件1）
五、HTML的超链接
先看两个示例
建立一个超链接
这个示例演示了如何在HTML文件里创建超链接。
<html>
<body>
<p>
<a href="../asdocs/html_tutorials/humor02.html">这是一个链接</a>
</p>
<p>
<a href="/html" target=_blank>站长网站长学院站点链接
</a>
</p>
</body>
</html>
将一个图片作为一个超链接
这个示例演示了如何将一个图片作为一个超链接，即点击一个图片，可以连接到其它文件。
<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属性则表示这个链接文件的路径。
比如链接到/html站点首页，就可以这样表示：
<a href="/html">站长网站长学院/html首页
</a>
target属性
使用target属性，可以在一个新窗口里打开链接文件。
<a href="/html" target=_blank>站长网站长学院
/html首页</a>
实例：
<html>
<body>
<a href="../asdocs/html_tutorials/humor01.html" target="_blank">一则笑话
</a>
<p>
如果你将target的属性值设成_blank，你点击这个链接的时候，网页就会在一个新窗口出现。
</p>
</body>
</html>
title属性
使用 title 属性，可以让鼠标悬停在超链接上的时候，显示该超链接的文字注释。
<a href="/html" title = "站长网站长学院网页教程与代码的
中文站点">站长网站长学院网站</a>
实例：
<html>
<body>
<p>
<a href="/html" title = "站长网站长学院网页教程与代码的
中文站点">站长网站长学院网站</a>
</p>
<p>
<a href="/html" title = "站长网站长学院 网页教程与
代码的中文站点">站长网站长学院网站</a>
</p>
</body>
</html>
name属性
使用name属性，可以跳转到一个文件的指定部位。
实例：
<html>
<body>
<p>
<a href="#C9">参见第六章</a>
</p><p>
<a name="C1"><h2>第1章</h2></a>
<p>这是站长网站长学院/html- 网页教程与代码的中文站点。
</p>
<a name="C2"><h2>第2章</h2></a>
<p>这是站长网站长学院/html- 网页教程与代码的中文站点。
</p>
<a name="C3"><h2>第3章</h2></a>
<p>这是站长网站长学院/html- 网页教程与代码的中文站点。
</p>
<a name="C4"><h2>第4章</h2></a>
<p>这是站长网站长学院/html- 网页教程与代码的中文站点。
</p>
<a name="C5"><h2>第5章</h2></a>
<p>这是站长网站长学院/html- 网页教程与代码的中文站点。
</p>
<a name="C6"><h2>第6章</h2></a>
<p>这是站长网站长学院/html- 网页教程与代码的中文站点。
</p>
<a name="C7"><h2>第7章</h2></a>
<p>这是站长网站长学院/html- 网页教程与代码的中文站点。
</p>
<a name="C8"><h2>第8章</h2></a>
<p>这是站长网站长学院/html- 网页教程与代码的中文站点。
</p>
<a name="C9"><h2>第9章</h2></a>
<p>这是站长网站长学院/html- 网页教程与代码的中文站点。
</p>
</body>
</html>
name属性通常用于创建一个大文件的章节目录(table of contents)。
每个章节都建立一个链接，放在文件的开始处，每个章节的开头都设置Name属性。
当用户点击某个章节的链接时，这个章节的内容就显示在最上面。
如果浏览器不能找到Name指定的部分，则显示文章开头，不报错
链接到email地址
在网站中，你经常会看到“联系我们”的链接，一点击这个链接，就会触发你的邮件客户端，比如Outlook Express，然后显示一个新建mail的窗口。
用<a>可以实现这样的功能。
<ahref="mailto:*************">联系新浪</a>
实例：
<html>
<body>
<p>
这是一个最简单的邮箱地址的链接：
<ahref="mailto:*************">给新浪网站发信</a>
</p>
<p>
这个邮箱地址的链接写了subject内容：
<ahref="mailto:*************?subject=Hello">给新浪网站发信</a>
</p>
<p>
这个邮箱地址链接写了to, cc, bcc, subject, body的内容：
<a
href="mailto:*************?cc=******************.com&bcc=************** &subject=I%20like%20your%20site&body=真是个好站点！">写信给新浪</a>
</p>
<p>
<b>注:</b>空格请用%20表示。
</p>
</body>
</html>
六、HTML相对路径(Relative Path)和绝对路径(Absolute Path) HTML初学者会经常遇到这样一个问题，如何正确引用一个文件。
比如，怎样在一个HTML 网页中引用另外一个HTML网页作为超链接(hyperlink)？怎样在一个网页中插入一张图片？如果你在引用文件时(如加入超链接，或者插入图片等)，使用了错误的文件路径，就会导致引用失效(无法浏览链接文件，或无法显示插入的图片等)。
为了避免这些错误，正确地引用文件，我们需要学习一下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)指带域名的文件的完整路径。
假设你注册了域名/html，并申请了虚拟主机，你的虚拟主机提供商会给你一个目录，比如www，这个www就是你网站的根目录。
假设你在www根目录下放了一个文件index.html，这个文件的绝对路径就是：
/html。
假设你在www根目录下建了一个目录叫html_tutorials，然后在该目录下放了一个文件index.html，这个文件的绝对路径就是
/html/html_tutorials/index.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>
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>
更多示例
有标题的表格
这个示例演示如何用<caption>在一个表格上加上标题。
<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>
包含多列或多行的单元格
这个示例演示如何用colspan，rowspan设置多列或者多行的单元格。
<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>
单元格里的内容
这个例子演示单元格<td></td>里面的内容。
单元格的内容可以是文字，图片，超链接，Form，表格等。
<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>
单元格内容与单元格边界之间的距离
这个示例教你如何用cellpadding这个属性设置单元格内容与单元格边界之间的距离。
<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>
单元格之间的距离
这个示例教你如何用cellspacing这个属性设置单元格之间的距离
<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>。