HTML基础课程
什么是HTML文件？[list][*]HTML的英文全称是Hypertext Marked Language，中文叫做“超文本标记语言”。[*]和一般文本的不同的是，一个HTML文件不仅包含文本内容，还包含一些Tag，中文称“标记”。[*]一个HTML文件的后缀名是.htm或者是.html。[*]用文本编辑器就可以编写HTML文件。[/list]这就试写一个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)[list][*]HTML元素(HTML Element)用来标记文本，表示文本的内容。比如body, p, title就是HTML元素。[*]HTML元素用Tag表示，Tag以<开始，以>结束。[*]Tag通常是成对出现的，比如<body></body>。起始的叫做Opening Tag，结尾的就叫做Closing Tag。[*]目前HTML的Tag不区分大小写的。比如，<HTML>和<html>其实是相同的。[/list]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的显示结果。
试试看吧！[url=http://www.admin5.com/html/html_examples/001_a_very_simple_html.html][color=#0000ff]示例：一个非常简单的HTML文件[/color][/url]
这个示例算是一个最简单的HTML文件，只包含了最基本的能构成一个HTML文件的Tag。通过这个例子，你可以看到浏览器是如何显示这个文件的，以此对HTML文件有个最初的认识。
[url=http://www.admin5.com/html/html_examples/002_simple_paragraphs.html][color=#0000ff]示例：简单的段落[/color][/url]
这个示例显示在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。
更多示例[url=http://www.admin5.com/html/html_examples/003_more_paragraphs.html][color=#0000ff]更多段落[/color][/url]
这个示例显示了段落的特性。
[url=http://www.admin5.com/html/html_examples/004_how_to_use_line_break_br.html][color=#0000ff]换行[/color][/url]
这个示例告诉你如何在HTML文件里换行。
[url=http://www.admin5.com/html/html_examples/005_html_heading.html][color=#0000ff]正文标题[/color][/url]
这个示例教会你如何在HTML文件里显示正文标题。
[url=http://www.admin5.com/html/html_examples/006_html_heading_align_center.html][color=#0000ff]居中的正文标题[/color][/url]
这个示例告诉你如何将正文标题居中显示。
[url=http://www.admin5.com/html/html_examples/007_horizontal_rule.html][color=#0000ff]加条横线[/color][/url]
这个示例演示了如何在HTML文中加条横线。
[url=http://www.admin5.com/html/html_examples/008_html_comment.html][color=#0000ff]代码注释[/color][/url]
这个示例演示如何在HTML代码中加上代码注释，这些注释只显示在HTML源代码中，而源代码最终形成的网页里是看不到这些注释的。
[url=http://www.admin5.com/html/html_examples/009_bgcolor.html][color=#0000ff]背景颜色[/color][/url]
这个示例演示如何改变HTML文件的背景色。
HTML常用格式
HTML定义了一些文本格式的Tag，比如利用Tag，可以将字体变成粗体或者斜体。从下面的示例，你可以了解各种文本格式Tag如何改变HTML文本的显示。常用文本格式Tag[table][tr][td]Tag[/td][td]Tag说明[/td][/tr][tr][td]<b>[/td][td]粗体bold[/td][/tr][tr][td]<i>[/td][td]斜体italic[/td][/tr][tr][td]<del>[/td][td]文字当中划线表示删除[/td][/tr][tr][td]<ins>[/td][td]文字下划线表示插入[/td][/tr][tr][td]<sub>[/td][td]下标[/td][/tr][tr][td]<sup>[/td][td]上标[/td][/tr][tr][td]<blockquote> [/td][td]缩进表示引用[/td][/tr][tr][td]<pre>[/td][td]保留空格和换行[/td][/tr][tr][td]<code>[/td][td]表示计算机代码，等宽字体[/td][/tr][/table]
示例[url=http://www.admin5.com/html/html_examples/010_freq_used_format_tags.html][color=#0000ff]HTML常用的格式Tag[/color][/url]
这个示例用了上述Tag，你可以对比一下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)[table][tr][td]显示结果[/td][td]说明[/td][td]Entity Name[/td][td]Entity Number[/td][/tr][tr][td][/td][td]显示一个空格[/td][td] [/td][td] [/td][/tr][tr][td]<[/td][td]小于[/td][td]<[/td][td]<[/td][/tr][tr][td]>[/td][td]大于[/td][td]>[/td][td]>[/td][/tr][tr][td]&[/td][td]&符号[/td][td]&[/td][td]&[/td][/tr][tr][td]"[/td][td]双引号[/td][td]"[/td][td]"[/td][/tr][/table]
其他常用的字符实体(Character Entities)[table][tr][td]显示结果[/td][td]说明[/td][td]Entity Name[/td][td]Entity Number[/td][/tr][tr][td]©[/td][td]版权[/td][td]©[/td][td]©[/td][/tr][tr][td]®[/td][td]注册商标[/td][td]®[/td][td]®[/td][/tr][tr][td]×[/td][td]乘号[/td][td]×[/td][td]×[/td][/tr][tr][td]÷[/td][td]除号[/td][td]÷[/td][td]÷[/td][/tr][/table]更多字符实体(Character Entities)更多字符实体(Character Entities)请参见[url=http://www.admin5.com/html/ref/iso_latin_1.html][color=#0000ff]ISO Latin-1字符集[/color][/url]。
HTML利用超链接打开链接文件
先看两个示例[url=http://www.admin5.com/html/html_examples/011_create_hyperlinks.html][color=#0000ff]建立一个超链接[/color][/url]这个示例演示了如何在HTML文件里创建超链接。
[url=http://www.admin5.com/html/html_examples/018_set_image_as_hyperlink.html][color=#0000ff]将一个图片作为一个超链接[/color][/url]
这个示例演示了如何将一个图片作为一个超链接，即点击一个图片，可以连接到其它文件。
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> [url=http://www.admin5.com/html/html_examples/020_open_link_in_new_window.html][color=#0000ff]示例[/color][/url]
title属性使用 title 属性，可以让鼠标悬停在超链接上的时候，显示该超链接的文字注释。
<a href="http://www.admin5.com/html" title = "站长网 站长学院网页教程与代码的中文站点">站长网 站长学院网站</a> 如果希望注释多行显示，可以使用 作为换行符。
<a href="http://www.admin5.com/html" title = "站长网 站长学院 网页教程与代码的中文站点">站长网 站长学院网站</a> [url=http://www.admin5.com/html/html_examples/065_hyperlink_title.html][color=#0000ff]示例[/color][/url]
name属性使用name属性，可以跳转到一个文件的指定部位。
使用name属性，要设置一对。一是设定name的名称，二是设定一个href指向这个name：
<a href="#C1">参见第一章</a> <a name="C1">第一章</a> [url=http://www.admin5.com/html/html_examples/019_jumpto_another_part_of_same_page.html][color=#0000ff]示例[/color][/url]
name属性通常用于创建一个大文件的章节目录(table of contents)。每个章节都建立一个链接，放在文件的开始处，每个章节的开头都设置Name属性。当用户点击某个章节的链接时，这个章节的内容就显示在最上面。
如果浏览器不能找到Name指定的部分，则显示文章开头，不报错。
链接到email地址在网站中，你经常会看到“联系我们”的链接，一点击这个链接，就会触发你的邮件客户端，比如Outlook Express，然后显示一个新建mail的窗口。用<a>可以实现这样的功能。
<a href = "mailto:info@sina.com">联系新浪</a>[url=http://www.admin5.com/html/html_examples/021_link_to_mail.html][color=#0000ff]示例[/color][/url]
HTML相对路径(Relative Path)和绝对路径(Absolute Path)
HTML初学者会经常遇到这样一个问题，如何正确引用一个文件。比如，怎样在一个HTML网页中引用另外一个HTML网页作为超链接(hyperlink)？怎样在一个网页中插入一张图片？......(相关教程：[url=http://www.admin5.com/html/html_tutorials/020_HTML_links.html][color=#800080]HTML超链接[/color][/url]；[url=http://www.admin5.com/html/html_tutorials/040_html_image.html][color=#0000ff]HTML图片[/color][/url])如果你在引用文件时(如加入超链接，或者插入图片等)，使用了错误的文件路径，就会导致引用失效(无法浏览链接文件，或无法显示插入的图片等)。
为了避免这些错误，正确地引用文件，我们需要学习一下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)指带域名的文件的完整路径。
假设你注册了域名[url=http://www.admin5.com/html][color=#800080]www.admin5.com/html[/color][/url]，并申请了虚拟主机，你的虚拟主机提供商会给你一个目录，比如www，这个www就是你网站的根目录。
假设你在www根目录下放了一个文件index.html，这个文件的绝对路径就是： [url=http://www.admin5.com/html][color=#800080]http://www.admin5.com/html[/color][/url]。
假设你在www根目录下建了一个目录叫html_tutorials，然后在该目录下放了一个文件index.html，这个文件的绝对路径就是[url=http://www.admin5.com/html/html_tutorials/index.html][color=#0000ff]http://www.admin5.com/html/html_tutorials/index.html[/color][/url]。
如何创建HTML表格
HTML表格用<table>表示。一个表格可以分成很多行(row)，用<tr>表示；每行又可以分成很多单元格(cell)，用<td>表示。这三个Tag是创建表格最常用的Tag。
[url=http://www.admin5.com/html/html_examples/012_simple_tables.html][color=#0000ff]示例[/color][/url]
border属性在缺省情况下，如果不设置表格的边界，表格是不显示边界的。
[url=http://www.admin5.com/html/html_examples/022_table_no_border.html][color=#0000ff]示例：不显示边界的表格[/color][/url]
要显示表格的边界，可使用border这个属性。
[url=http://www.admin5.com/html/html_examples/023_table_with_border.html][color=#0000ff]示例：显示边界的表格[/color][/url]
表格的表头用<th>来表示表格的表头，表头的字是粗体显示的。
[url=http://www.admin5.com/html/html_examples/024_table_heading.html][color=#0000ff]示例： 有表头的表格[/color][/url]
空的单元格如果表格的单元格<td></td>之间没有内容，那么这个单元格的边界是不会被显示出来的，尽管整个表格已设置边界值。要显示这个单元格的边界，可以插入一个 空格符。
[url=http://www.admin5.com/html/html_examples/025_table_empty_cell.html][color=#0000ff]示例[/color][/url]
更多示例[url=http://www.admin5.com/html/html_examples/026_table_caption.html][color=#0000ff]有标题的表格[/color][/url]
这个示例演示如何用<caption>在一个表格上加上标题。
[url=http://www.admin5.com/html/html_examples/027_colspan_rowspan.html][color=#0000ff]包含多列或多行的单元格[/color][/url]
这个示例演示如何用colspan，rowspan设置多列或者多行的单元格。
[url=http://www.admin5.com/html/html_examples/028_table_cell_content.html][color=#0000ff]单元格里的内容[/color][/url]
这个例子演示单元格<td></td>里面的内容。单元格的内容可以是文字，图片，超链接，Form，表格等。
[url=http://www.admin5.com/html/html_examples/029_cellpadding.html][color=#0000ff]单元格内容与单元格边界之间的距离[/color][/url]
这个示例教你如何用cellpadding这个属性设置单元格内容与单元格边界之间的距离。
[url=http://www.admin5.com/html/html_examples/030_cellspacing.html][color=#0000ff]单元格之间的距离[/color][/url]
这个示例教你如何用cellspacing这个属性设置单元格之间的距离
[url=http://www.admin5.com/html/html_examples/031_table_bgcolor_bgimage.html][color=#0000ff]设置表格的背景颜色和背景图片[/color][/url]
这个示例演示如何用bgcolor属性设置表格的背景颜色，如何用background属性为表格添加背景图片。
[url=http://www.admin5.com/html/html_examples/033_cell_bgcolr_bgimage.html][color=#0000ff]设置单元格的背景颜色和背景图片[/color][/url]
这个示例演示如何用bgcolor属性设置单元格的背景颜色，如何用background属性为单元格添加背景图片。
[url=http://www.admin5.com/html/html_examples/032_table_align.html][color=#0000ff]单元格内容的对齐方式[/color][/url]
这个示例教你如何用align属性设置单元格的对齐方式。
HTML框架(Frames)
使用框架(Frame)，你可以在浏览器窗口同时显示多个网页。每个Frame里设定一个网页，每个Frame里的网页相互独立。Frameset<frameset></frameset>决定如何划分Frame。<frameset>有cols属性和rows属性。使用cols属性，表示按列分布Frame；使用rows属性，表示按行分布Frame。
Frame用<frame>这个Tag设定网页。<frame>里有src属性，src值就是网页的路径和文件名。
下面的代码的目的是：将Frameset分成2列，第一列25%，表示第一列的宽度是窗口宽度的25%；第二列75%，表示第一列的宽度是窗口宽度的75%。第一列中显示a.html，第二列中显示b.html。
<frameset cols="25%,75%"> <frame src="../asdocs/html_tutorials/Frame_a.html"> <frame src="../asdocs/html_tutorials/Frame_b.html"></frameset> IframeIframe是Inline Frame的意思，用<iframe></iframe>可以将Frame置于一个HTML文件内。
示例[url=http://www.admin5.com/html/html_examples/034_frame_cols.html][color=#0000ff]列分Frame[/color][/url]
这个例子显示如何在浏览器里同时显示三个网页，三个网页是按列分布的。
[url=http://www.admin5.com/html/html_examples/035_frame_rows.html][color=#0000ff]行分Frame[/color][/url]
这个例子显示如何在浏览器里同时显示三个网页，三个网页是按行分布的。
[url=http://www.admin5.com/html/html_examples/036_frame_cols_rows_mix.html][color=#0000ff]混合Frameset[/color][/url]
这个例子既用到了cols属性，又用到了rows属性，将Frame进行灵活分布。
[url=http://www.admin5.com/html/html_examples/039_frame_noresize.html][color=#0000ff]Frameset中的noresize属性[/color][/url]
使用Noresize属性可以确保Frame的大小。如果不使用noresize属性，你可以用鼠标移动Frame的边界，来改变Frame的大小，如果设置了noresize属性，就不能移动边界了。
[url=http://www.admin5.com/html/html_examples/037_frame_navigation.html][color=#0000ff]Frame用于导航[/color][/url]
这个例子演示如何建立一个用于导航的Frame。这个导航Frame包含一个HTML，这个HTML（代码如下）包含了一个网页列表。点击网页列表中的任何一项，就会在第二个Frame中显示点击中的网页。
<HTML><HEAD><TITLE> humorlist.html </TITLE></HEAD><BODY><p><a href = "../asdocs/html_tutorials/Frame_a.html" target="showframe">笑话一<a></p><p><a href = "../asdocs/html_tutorials/Frame_b.html" target="showframe">笑话二<a></p><p><a href = "../asdocs/html_tutorials/Frame_c.html" target="showframe">笑话三<a></p></BODY></HTML>[url=http://www.admin5.com/html/html_examples/038_iframe.html][color=#0000ff]Iframe的使用[/color][/url]
这个例子显示如何在一个HTML文件里用iframe嵌入一个网页。
HTML列表(Lists)
HTML有三种列表形式：排序列表(Ordered List)；不排序列表(Unordered List)；定义列表(Definition List)。排序列表(Ordered List)
排序列表中，每个列表项前标有数字，表示顺序。
排序列表由<ol>开始，每个列表项由<li>开始。
排序列表示例
不排序列表(Unordered List)
不排序列表不用数字标记每个列表项，而采用一个符号标志每个列表项，比如圆黑点。
不排序列表由<ul>开始，每个列表项由<li>开始。
不排序列表示例
定义列表
定义列表通常用于术语的定义。
定义列表由<dl>开始。术语由<dt>开始，英文意为Definition Term。术语的解释说明，由<dd>开始，<dd></dd>里的文字缩进显示。
定义列表示例
更多示例
不同类型(Type)的排序列表
这个例子显示如何用Type属性设置排序列表项前的符号。
不同类型(Type)的不排序列表
这个例子显示如何用Type属性设置不排序列表项前的符号。
嵌套的列表
列表里可以含有子列表。通常用这种嵌套的列表，反映层次较多的内容。
HTML表单(Forms)
HTML表单(Form)是HTML的一个重要部分，主要用于采集和提交用户输入的信息。举个简单的例子，一个让用户输入姓名的HTML表单(Form)。示例代码如下：
<form action="http://www.admin5.com/html/asdocs/html_tutorials/yourname.asp" method="get">请输入你的姓名：<input type="text" name="yourname"><input type="submit" value="提交"></form>[url=http://www.admin5.com/html/html_examples/053_form_input_text.html][color=#0000ff]演示示例[/color][/url]
学习HTML表单(Form)最关键要掌握的有三个要点：
[list][*]表单控件(Form Controls)[*]Action[*]Method[/list]先说表单控件(Form Controls)，通过HTML表单的各种控件，用户可以输入文字信息，或者从选项中选择，以及做提交的操作。比如上面的例句里，input type= "text"就是一个表单控件，表示一个单行输入框。
用户填入表单的信息总是需要程序来进行处理，表单里的action就指明了处理表单信息的文件。比如上面例句里的[url]http://www.admin5.com/html/asdocs/html_tutorials/yourname.asp[/url]。
至于method，表示了发送表单信息的方式。method有两个值：get和post。get的方式是将表单控件的name/value信息经过编码之后，通过URL发送(你可以在地址栏里看到)。而post则将表单的内容通过http发送，你在地址栏看不到表单的提交信息。那什么时候用get，什么时候用post呢？一般是这样来判断的，如果只是为取得和显示数据，用get；一旦涉及数据的保存和更新，那么建议用post。
HTML表单(Form)常用控件(Controls)HTML表单(Form)常用控件有：
[table][tr][td]表单控件(Form Contros)[/td][td]说明[/td][/tr][tr][td]input type="text"[/td][td]单行文本输入框[/td][/tr][tr][td]input type="submit"[/td][td]将表单(Form)里的信息提交给表单里action所指向的文件[/td][/tr][tr][td]input type="checkbox"[/td][td]复选框[/td][/tr][tr][td]input type="radio"[/td][td]单选框[/td][/tr][tr][td]select[/td][td]下拉框[/td][/tr][tr][td]textArea[/td][td]多行文本输入框[/td][/tr][tr][td]input type="password"[/td][td]密码输入框(输入的文字用*表示)[/td][/tr][/table]
表单控件(Form Control)：单行文本输入框(input type="text")单行文本输入框允许用户输入一些简短的单行信息，比如用户姓名。例句如下：
<input type="text" name="yourname">[url=http://www.admin5.com/html/html_examples/053_form_input_text.html][color=#0000ff]演示示例[/color][/url]
表单控件(Form Control)：复选框(input type="checkbox")复选框允许用户在一组选项里，选择多个。示例代码：
<input type="checkbox" name="fruit" value ="apple">苹果<br><input type="checkbox" name="fruit" value ="orange">桔子<br><input type="checkbox" name="fruit" value ="mango">芒果<br>[url=http://www.admin5.com/html/html_examples/055_form_input_check.html][color=#0000ff]演示示例[/color][/url]
用checked表示缺省已选的选项。
<input type="checkbox" name="fruit" value ="orange" checked>桔子<br>[url=http://www.admin5.com/html/html_examples/056_form_input_check_checked.html][color=#0000ff]演示示例[/color][/url]
表单控件(Form Control)：单选框(input type="radio")使用单选框，让用户在一组选项里只能选择一个。示例代码：
<input type="radio" name="fruit" value = "Apple">苹果<br><input type="radio" name="fruit" value = "Orange">桔子<br><input type="radio" name="fruit" value = "Mango">芒果<br>[url=http://www.admin5.com/html/html_examples/057_form_input_radio.html][color=#0000ff]演示示例[/color][/url]
用checked表示缺省已选的选项。
<input type="radio" name="fruit" value = "Orange" checked>桔子<br>[url=http://www.admin5.com/html/html_examples/058_form_input_radio_checked.html][color=#0000ff]演示示例[/color][/url]
表单控件(Form Control)：下拉框(select)下拉框(Select)既可以用做单选，也可以用做复选。单选例句如下：
<select name="fruit" > <option value="apple">苹果 <option value="orange">桔子 <option value="mango">芒果</select>[url=http://www.admin5.com/html/html_examples/059_form_select_01.html][color=#0000ff]演示示例[/color][/url]
如果要变成复选，加muiltiple即可。用户用Ctrl来实现多选。例句：
<select name="fruit" multiple>[url=http://www.admin5.com/html/html_examples/060_form_select_multiple.html][color=#0000ff]演示示例[/color][/url]
用户还可以用size属性来改变下拉框(Select)的大小。
[url=http://www.admin5.com/html/html_examples/061_form_select_multiple_size1.html][color=#0000ff]演示示例[/color][/url]
表单控件(Form Control)：多行输入框(textarea)多行输入框(textarea)主要用于输入较长的文本信息。例句如下：
<textarea name="yoursuggest" cols ="50" rows = "3"></textarea>其中cols表示textarea的宽度，rows表示textarea的高度。
[url=http://www.admin5.com/html/html_examples/062_form_textarea.html][color=#0000ff]演示示例[/color][/url]
表单控件(Form Control)：密码输入框(input type="password")密码输入框(input type="password")主要用于一些保密信息的输入，比如密码。因为用户输入的时候，显示的不是输入的内容，而是黑点符号。。例句如下：
<input type="password" name="yourpw">[url=http://www.admin5.com/html/html_examples/054_form_input_text_password.html][color=#0000ff]演示示例[/color][/url]
表单控件(Form Control)：提交(input type="submit")通过提交(input type=submit)可以将表单(Form)里的信息提交给表单里action所指向的文件。例句如下：
<input type="submit" value="提交">[url=http://www.admin5.com/html/html_examples/053_form_input_text.html][color=#0000ff]演示示例[/color][/url]
表单控件(Form Control)：图片提交(input type="image")input type=image 相当于 input type=submit，不同的是，input type=image 以一个图片作为表单的提交按钮，其中 src 属性表示图片的路径。
<input type="image" src ="[url=http://www.admin5.com/html/images/icons/go.gif][color=#0000ff]images/icons/go.gif[/color][/url]" alt = "提交" NAME="imgsubmit">[url=http://www.admin5.com/html/html_examples/064_form_input_image.html][color=#0000ff]演示示例[/color][/url]
[color=#0000ff][/color]
如何编写 ASP 网页获取 HTML 表单的提交信息，请参见教程：[url=http://www.admin5.com/html/asp/010_asp_html_forms.html][color=#0000ff]ASP和HTML表单[/color][/url]。
HTML图片(Images)
用 <img> 这个 Tag 可以在HTML里面插入图片。最基本的语法如下：<img src="url"> url表示图片的路径和文件名。比如 url 可以是 [url=http://www.admin5.com/html/images/logo/blabla_logo01.gif][color=#0000ff]images/logo/blabla_logo01.gif[/color][/url]，也可以是个相对路径 "../images/logo/blabla_logo01.gif"。
[url=http://www.admin5.com/html/html_examples/045_insert_image.html][color=#0000ff]示例[/color][/url]
图片alt属性<img>中有一个alt属性，英文叫alternate text。例句如下：
<img src = "../images/html_tutorials/smile.jpg" alt="smile face">假使浏览器没有载入图片的功能，浏览器就会转而显示Alt属性的值。
其实，现在大多数浏览器都支持图片载入。在此介绍Alt属性，是因为它的另外一个重要功能。目前搜索引擎抓取工具无法识别图像中所含的文字，所以用ALT属性写上图片的说明，便于搜索引擎抓取你网页的内容。
[url=http://www.admin5.com/html/html_examples/048_image_alt.html][color=#0000ff]示例[/color][/url]
图片align属性用align属性，可以改变图片的垂直(居上、居中、居下)对齐方式和水平对齐方式(居左、居中、居右)。
[url=http://www.admin5.com/html/html_examples/046_image_align.html][color=#0000ff]示例[/color][/url]
图片的大小在缺省状况下，图片显示原有的大小。你可以用height和width属性改变图片的大小。不过图片的大小一旦被改变，图片会相应放大或缩小，显示出来的结果可能会很难看。
[url=http://www.admin5.com/html/html_examples/047_image_size.html][color=#0000ff]示例[/color][/url]
建议图片相对文字，所占的字节数较多，比如一个全屏的图片，即使经过压缩，也要占去大约50k字节，这相当于25000字的文本。因此浏览器载入图片比较费时，建议一个HTML文件里不要包含过多的图片，否则会影响你的网页显示速度。
更多示例[url=http://www.admin5.com/html/html_examples/013_add_background_image.html][color=#0000ff]背景图片[/color][/url]
这个示例演示如何将一个图片作为HTML网页的背景图片。
[url=http://www.admin5.com/html/html_examples/018_set_image_as_hyperlink.html][color=#0000ff]将一个图片作为一个超链接[/color][/url]
这个示例演示了如何将一个图片作为一个超链接，即点击一个图片，可以连接到其它文件。
HTML字体(Fonts)
在HTML里，可以用font这个元素及其属性来设定字体的大小，颜色和字体风格。字体大小用字体大小属性(size)来设定字体的大小。示例代码如下：
<p><font size="2">这一段的字体大小的值是2。</font></p>[url=http://www.admin5.com/html/html_examples/050_font_size.html][color=#0000ff]演示示例[/color][/url]
字体风格用face属性来设定字体风格。示例代码如下：
<p><font fac="arial">这一段的字体风格是arial。</font></p>[url=http://www.admin5.com/html/html_examples/052_font_face.html][color=#0000ff]演示示例[/color][/url]
字体颜色用颜色属性(color)来设定字体颜色。
字体颜色代码请参见[url=http://www.admin5.com/html/html_tutorials/050_html_color_ref.html][color=#0000ff]HTML颜色参考(HTML Color Reference)[/color][/url]。
<p><font color="#FF0000">这一段的字体颜色是红色</font></p>[url=http://www.admin5.com/html/html_examples/051_font_color.html][color=#0000ff]演示示例[/color][/url]
注意HTML4的标准中，已经不建议使用font及其属性来设定字体，而是建议用CSS来设定字体的大小，颜色，字体风格等。有关CSS中和文字的相关属性，请参见我们教程中的：
[url=http://www.admin5.com/html/css_tutorials/015_css_text.html][color=#0000ff]CSS常用文本属性[/color][/url]
[url=http://www.admin5.com/html/css_tutorials/010_css_font.html][color=#0000ff]CSS常用字体属性[/color][/url]
HTML背景颜色和背景图片
HTML的 <body> 有两个关于背景的属性，一个是 bgcolor，是设置背景颜色的；另一个是 background，是设置背景图片的。bgcolor属性bgcolor属性用来设置HTML网页的背景颜色。
[url=http://www.admin5.com/html/html_examples/009_bgcolor.html][color=#0000ff]示例[/color][/url]
background属性background属性用来设置HTML网页的背景图片。background属性值就是背景图片的路径和文件名，如：
<body background="../images/html_tutorials/blabla_logo.gif"><body background="http://www.admin5.com/html/gifs/blabla_logo01.gif">如果背景图片小于网页显示窗口，那么这个背景图片会自动重复。
[url=http://www.admin5.com/html/html_examples/013_add_background_image.html][color=#0000ff]示例[/color][/url]
建议bgcolor和background这两个<body>的属性，在新的HTML标准(HTML 4 and XHTML)里已不建议使用，而建议用CSS设置背景颜色和图片。
为保证浏览器载入网页的速度，建议尽量不要使用字节过大的图片作为背景图片。
HTML头部信息(Head)
HTML头部信息(head)里包含关于所在网页的信息。头部信息(head)里的内容，主要是被浏览器所用，不会显示在网页的正文内容里。另外，搜索引擎如google,yahoo,baidu等也会查找你网页中的head信息。为了让搜索引擎能够收录你的网页，你也要填写适当的head信息。(网站被搜索引擎收录，还有其它的方法，比如被其它网站链接，这里不赘述，请浏览搜索引擎网站。)
下面说几个常用的head信息里的html元素，如标题(title)，链接(link)，样式(style)以及关于信息(meta)。
标题(title)标题(title)是最常用的head信息。它不显示在HTML网页正文里，显示在浏览器窗口的标题栏里。见图：
[img]http://www.admin5.com/html/images/html_tutorials/head_title.gif[/img]
示例代码如下：
<head><title>HTML中文教程头部信息(head)之标题(title)说明</title></head>链接(link)用链接(link)可以建立和外部文件的链接。常用的是对CSS外部样式表(external style sheet)的链接。示例代码如下：
<link rel="stylesheet" href="mainstyles.css" type="text/css">有关CSS外部样式表和示例，[url=http://www.admin5.com/html/css_tutorials/001_CSS_Overview.html][color=#0000ff]详见CSS简介[/color][/url]。
样式(style)用样式(style)可以设值网页的内部样式表(internal style sheet)。示例代码如下：
<head><style> body {background-color:white; color:black;} h1 {font: 18pt arial bold;}</style></head>有关CSS内部样式表和示例，[url=http://www.admin5.com/html/css_tutorials/001_CSS_Overview.html][color=#0000ff]详见CSS简介[/color][/url]。
关于网页信息(meta)在计算机语言里，你经常可以看到一个前缀 -- meta，meta就是“关于”(about)的意思。
这meta解释起来比较拗口，比如metadata，意为描述data的data，英文即data about data。还有一个词叫metalanguage，表示一种描述其它语言的语言。再举一个例子，metafile，表示描述其它文件的文件。
在HTML里，meta标记(meta tags)表示用来描述网页的有关信息。示例代码如下：
<meta name="description" c><meta name="keywords" c><meta name="author" c>
利用meta中的Refresh你还可以实现自动跳转页面的功能。示例代码：
<meta http-equiv="Refresh" c>[url=http://www.admin5.com/html/html_examples/063_meta_refresh.html][color=#0000ff]演示示例[/color][/url]
HTML代码示例
HTML文本格式示例[url=http://www.admin5.com/html/html_examples/001_a_very_simple_html.html][color=#800080]一个非常简单的HTML文件[/color][/url][url=http://www.admin5.com/html/html_examples/002_simple_paragraphs.html][color=#0000ff]HTML简单段落[/color][/url]
[url=http://www.admin5.com/html/html_examples/003_more_paragraphs.html][color=#0000ff]在HTML写多个段落[/color][/url]
[url=http://www.admin5.com/html/html_examples/004_how_to_use_line_break_br.html][color=#0000ff]在HTML里如何换行[/color][/url]
[url=http://www.admin5.com/html/html_examples/005_html_heading.html][color=#0000ff]HTML正文标题[/color][/url]
[url=http://www.admin5.com/html/html_examples/006_html_heading_align_center.html][color=#800080]HTML居中显示的标题[/color][/url]
[url=http://www.admin5.com/html/html_examples/007_horizontal_rule.html][color=#0000ff]在HTML文件里加一条横线(horizontal rule)[/color][/url]
[url=http://www.admin5.com/html/html_examples/008_html_comment.html][color=#0000ff]HTML文件的代码注释[/color][/url]
[url=http://www.admin5.com/html/html_examples/010_freq_used_format_tags.html][color=#0000ff]HTML常用格式Tag[/color][/url]
[url=http://www.admin5.com/html/html_examples/014_preformatted_text.html][color=#0000ff]HTML预格式文本(preformatted text)[/color][/url]
[url=http://www.admin5.com/html/html_examples/015_different_computer_output_tags.html][color=#0000ff]HTML不同计算机输出的Tag[/color][/url]
[url=http://www.admin5.com/html/html_examples/016_insert_address.html][color=#0000ff]HTML里加入地址[/color][/url]
[url=http://www.admin5.com/html/html_examples/017_mark_deleted_and_inserted_text.html][color=#0000ff]HTML里表示删除插入的Tag[/color][/url]
HTML超链接示例[url=http://www.admin5.com/html/html_examples/011_create_hyperlinks.html][color=#0000ff]如何创建HTML超链接(hyperlinks)[/color][/url]
[url=http://www.admin5.com/html/html_examples/018_set_image_as_hyperlink.html][color=#0000ff]将图片作为一个超链接[/color][/url]
[url=http://www.admin5.com/html/html_examples/019_jumpto_another_part_of_same_page.html][color=#0000ff]在HTML文件里跳转[/color][/url]
[url=http://www.admin5.com/html/html_examples/020_open_link_in_new_window.html][color=#0000ff]在新窗口打开一个链接[/color][/url]
[url=http://www.admin5.com/html/html_examples/021_link_to_mail.html][color=#0000ff]链接到一个邮箱地址[/color][/url]
HTML表格(Table)示例[url=http://www.admin5.com/html/html_examples/012_simple_tables.html][color=#0000ff]HTML简单表格[/color][/url]
[url=http://www.admin5.com/html/html_examples/022_table_no_border.html][color=#0000ff]没有边界的表格[/color][/url]
[url=http://www.admin5.com/html/html_examples/023_table_with_border.html][color=#0000ff]有边界的表格[/color][/url]
[url=http://www.admin5.com/html/html_examples/024_table_heading.html][color=#0000ff]HTML表格的表头[/color][/url]
[url=http://www.admin5.com/html/html_examples/025_table_empty_cell.html][color=#0000ff]表格空单元格[/color][/url]
[url=http://www.admin5.com/html/html_examples/026_table_caption.html][color=#0000ff]带标题的表格[/color][/url]
[url=http://www.admin5.com/html/html_examples/027_colspan_rowspan.html][color=#0000ff]包含多行或多列的表格单元格[/color][/url]
[url=http://www.admin5.com/html/html_examples/028_table_cell_content.html][color=#0000ff]一个表格单元格里的内容[/color][/url]
[url=http://www.admin5.com/html/html_examples/029_cellpadding.html][color=#0000ff]表格的单元格内容和单元格边界之间的距离(CellPadding)[/color][/url]
[url=http://www.admin5.com/html/html_examples/030_cellspacing.html][color=#0000ff]表格中单元格之间的距离(Cellspacing)[/color][/url]
[url=http://www.admin5.com/html/html_examples/031_table_bgcolor_bgimage.html][color=#0000ff]给表格加背景颜色或者背景图片[/color][/url]
[url=http://www.admin5.com/html/html_examples/032_table_align.html][color=#0000ff]表格单元格对齐方式(align)[/color][/url]
[url=http://www.admin5.com/html/html_examples/033_cell_bgcolr_bgimage.html][color=#0000ff]表格的单元格背景颜色和背景图片[/color][/url]
HTML框架(Frame)示例[url=http://www.admin5.com/html/html_examples/034_frame_cols.html][color=#0000ff]列分的框架(Frame, cols)[/color][/url]
[url=http://www.admin5.com/html/html_examples/035_frame_rows.html][color=#0000ff]行分的框架(Frame, rows)[/color][/url]
[url=http://www.admin5.com/html/html_examples/036_frame_cols_rows_mix.html][color=#0000ff]既有行分又有列分的框架(Frame, rows, cols)[/color][/url]
[url=http://www.admin5.com/html/html_examples/037_frame_navigation.html][color=#0000ff]用框架(Frame)导航[/color][/url]
[url=http://www.admin5.com/html/html_examples/038_iframe.html][color=#0000ff]使用内嵌框架(IFrame)[/color][/url]
[url=http://www.admin5.com/html/html_examples/039_frame_noresize.html][color=#0000ff]如何固定框架(Frame)大小[/color][/url]
HTML列表(List)示例[url=http://www.admin5.com/html/html_examples/040_unordered_list.html][color=#0000ff]不排序列表(Unordered List)[/color][/url]
[url=http://www.admin5.com/html/html_examples/041_ordered_list.html][color=#0000ff]排序列表(ordered list)[/color][/url]
[url=http://www.admin5.com/html/html_examples/042_unordered_list_type.html][color=#800080]不排序列表的类型(Type)设置[/color][/url]
[url=http://www.admin5.com/html/html_examples/043_nested_list.html][color=#0000ff]嵌套的列表(nested list)[/color][/url]
[url=http://www.admin5.com/html/html_examples/044_definition_list.html][color=#0000ff]定义列表(definition list)[/color][/url]
[url=http://www.admin5.com/html/html_examples/049_ordered_list_type.html][color=#0000ff]HTML不同类型(Type)的排序列表[/color][/url]
HTML表单(Form)示例[url=http://www.admin5.com/html/html_examples/053_form_input_text.html][color=#0000ff]HTML表单控件-单行文本输入框[/color][/url]
[url=http://www.admin5.com/html/html_examples/054_form_input_text_password.html][color=#0000ff]HTML表单控件-密码输入框[/color][/url]
[url=http://www.admin5.com/html/html_examples/055_form_input_check.html][color=#0000ff]HTML表单控件-复选框(checkbox)[/color][/url]
[url=http://www.admin5.com/html/html_examples/056_form_input_check_checked.html][color=#0000ff]HTML表单控件-复选框(checkbox)缺省已选(checked)[/color][/url]
[url=http://www.admin5.com/html/html_examples/057_form_input_radio.html][color=#0000ff]HTML表单控件-单选框(radio)[/color][/url]
[url=http://www.admin5.com/html/html_examples/058_form_input_radio_checked.html][color=#0000ff]HTML表单控件-单选框(radio)缺省已选(checked)[/color][/url]
[url=http://www.admin5.com/html/html_examples/059_form_select_01.html][color=#0000ff]HTML表单控件(Form Control)-下拉框(select)单选[/color][/url]
[url=http://www.admin5.com/html/html_examples/060_form_select_multiple.html][color=#0000ff]HTML表单控件-下拉框(select)多选(multiple)[/color][/url]
[url=http://www.admin5.com/html/html_examples/061_form_select_multiple_size1.html][color=#0000ff]HTML表单控件-下拉框多选-下拉框设置(size)[/color][/url]
[url=http://www.admin5.com/html/html_examples/062_form_textarea.html][color=#0000ff]HTML表单控件-多行输入框(textarea)[/color][/url]
[url=http://www.admin5.com/html/html_examples/064_form_input_image.html][color=#0000ff]HTML表单控件-图片提交(input type=image)[/color][/url]
HTML图片(Image)示例[url=http://www.admin5.com/html/html_examples/045_insert_image.html][color=#0000ff]在HTML里插入图片[/color][/url]
[url=http://www.admin5.com/html/html_examples/046_image_align.html][color=#0000ff]HTML里图片的对齐方式(Align)[/color][/url]
[url=http://www.admin5.com/html/html_examples/047_image_size.html][color=#0000ff]HTML的图片大小(Height,Width)[/color][/url]
[url=http://www.admin5.com/html/html_examples/048_image_alt.html][color=#0000ff]HTML图片的说明(Alt属性)[/color][/url]
HTML字体(font)示例[url=http://www.admin5.com/html/html_examples/050_font_size.html][color=#0000ff]HTML字体大小(font size)[/color][/url]
[url=http://www.admin5.com/html/html_examples/051_font_color.html][color=#0000ff]HTML字体颜色(font color)[/color][/url]
[url=http://www.admin5.com/html/html_examples/052_font_face.html][color=#0000ff]HTML字体风格(font face)[/color][/url]
HTML网页背景颜色和背景图片示例[url=http://www.admin5.com/html/html_examples/009_bgcolor.html][color=#0000ff]HTML背景颜色[/color][/url]
[url=http://www.admin5.com/html/html_examples/013_add_background_image.html][color=#0000ff]HTML里加背景图片[/color][/url]
HTML头部信息(Head)示例[url=http://www.admin5.com/html/html_examples/063_meta_refresh.html][color=#0000ff]利用Meta的Refresh自动跳转到指定页面[/color][/url]
HTML元素参考手册 HTML Elements Reference
[b][url=http://www.admin5.com/html/html_tag_ref/a.html][color=#0000ff]a[/color][/url][/b][indent]表示超链接的起始或目的位置。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/acronym.html][color=#0000ff]acronym[/color][/url][/b]
[indent]表示取首字母的缩写词。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/address.html][color=#0000ff]address[/color][/url][/b]
[indent]表示特定信息，如地址、签名、作者、文档信息。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/applet.html][color=#0000ff]applet[/color][/url][/b]
[indent]在页面上放置可执行内容。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/area.html][color=#0000ff]area[/color][/url][/b]
[indent]定义一个客户端图像映射中一个超级链接区域的形状、坐标和关联 URL。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/b.html][color=#0000ff]b[/color][/url][/b]
[indent]指定文本应以粗体显示。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/base.html][color=#0000ff]base[/color][/url][/b]
[indent]指定一个显式 URL 用于解析对于外部源的链接和引用，如图像和样式表。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/basefont.html][color=#0000ff]basefont[/color][/url][/b]
[indent]设置显示文本时作为默认字体的基础字体值。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/bdo.html][color=#0000ff]bdo[/color][/url][/b]
[indent]允许作者为选定文本片断禁用双向法则。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/bgsound.html][color=#0000ff]bgsound[/color][/url][/b]
[indent]使页面能够带有背景声音或配音。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/big.html][color=#0000ff]big[/color][/url][/b]
[indent]指定所含文本要以比当前字体稍大的字体显示。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/blockquote.html][color=#0000ff]blockquote[/color][/url][/b]
[indent]表示文本中的一段引用语。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/body.html][color=#0000ff]body[/color][/url][/b]
[indent]指明文档主体的开始和结束。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/br.html][color=#0000ff]br[/color][/url][/b]
[indent]插入一个换行符。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/button.html][color=#0000ff]button[/color][/url][/b]
[indent]指定一个容器，其中所含的 HTML 会被显示为一个按钮。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/caption.html][color=#0000ff]caption[/color][/url][/b]
[indent]表格的标题，对表格的简单描述。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/center.html][color=#0000ff]center[/color][/url][/b]
[indent]将指定文本和图像居中显示。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/cite.html][color=#0000ff]cite[/color][/url][/b]
[indent]用斜体显示标明引文。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/code.html][color=#0000ff]code[/color][/url][/b]
[indent]表示代码范例。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/col.html][color=#0000ff]col[/color][/url][/b]
[indent]说明基于列的表格缺省属性。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/colgroup.html][color=#0000ff]colgroup[/color][/url][/b]
[indent]说明表格中一列或一组列的缺省属性。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/comment.html][color=#0000ff]comment[/color][/url][/b]
[indent]表示不可见的注释。防止所包含的文本或者HTML源代码被浏览器解析和显示。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/dd.html][color=#0000ff]dd[/color][/url][/b]
[indent]在定义列表中表示定义。定义通常在定义列表中缩进显示。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/del.html][color=#0000ff]del[/color][/url][/b]
[indent]表示文本已经从文档中删除。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/dfn.html][color=#0000ff]dfn[/color][/url][/b]
[indent]表示术语的定义。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/dir.html][color=#0000ff]dir[/color][/url][/b]
[indent]表示目录列表。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/div.html][color=#0000ff]div[/color][/url][/b]
[indent]表示一块可显示 HTML 的区域[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/dl.html][color=#0000ff]dl[/color][/url][/b]
[indent]表示定义列表。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/dt.html][color=#0000ff]dt[/color][/url][/b]
[indent]在定义列表中表示定义术语。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/em.html][color=#0000ff]em[/color][/url][/b]
[indent]强调文本，通常以斜体显示。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/embed.html][color=#0000ff]embed[/color][/url][/b]
[indent]允许嵌入任何类型的文档。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/fieldset.html][color=#0000ff]fieldset[/color][/url][/b]
[indent]在字段集包含的文本和其它元素外面画一个方框。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/font.html][color=#0000ff]font[/color][/url][/b]
[indent]用于说明所包含文本的新字体、大小和颜色。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/form.html][color=#0000ff]form[/color][/url][/b]
[indent]说明所包含的控件是某个表单的组成部分。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/frame.html][color=#0000ff]frame[/color][/url][/b]
[indent]在 FRAMESET 元素内表示单个框架。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/frameset.html][color=#0000ff]frameset[/color][/url][/b]
[indent]表示一个框架集，用于组织多个框架和嵌套框架集。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/head.html][color=#0000ff]head[/color][/url][/b]
[indent]提供了关于文档的无序信息集合。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/hn.html][color=#0000ff]hn[/color][/url][/b]
[indent]以标题样式显示文本。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/hr.html][color=#0000ff]hr[/color][/url][/b]
[indent]画一条横线。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/html.html][color=#0000ff]html[/color][/url][/b]
[indent]表明文档包含 HTML 元素。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/i.html][color=#0000ff]i[/color][/url][/b]
[indent]指定文本应以斜体显示。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/iframe.html][color=#0000ff]iframe[/color][/url][/b]
[indent]创建内嵌漂浮框架。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/img.html][color=#0000ff]img[/color][/url][/b]
[indent]在文档中嵌入图像或视频片断。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/input.html][color=#0000ff]input[/color][/url][/b]
[indent]创建各种表单输入控件。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/input_type_button.html][color=#0000ff]input type=button[/color][/url][/b]
[indent]创建按钮控件。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/input_type_checkbox.html][color=#0000ff]input type=checkbox[/color][/url][/b]
[indent]创建复选框控件。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/input_type_file.html][color=#0000ff]input type=file[/color][/url][/b]
[indent]创建文件上载控件，该控件带有一个文本框和一个浏览按钮。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/input_type_hidden.html][color=#0000ff]input type=hidden[/color][/url][/b]
[indent]传输关于客户/服务器交互的状态信息。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/input_type_image.html][color=#0000ff]input type=image[/color][/url][/b]
[indent]创建一个图像控件，该控件被点击后将导致表单立即被提交。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/input_type_password.html][color=#0000ff]input type=password[/color][/url][/b]
[indent]创建与 INPUT type=text 控件类似的单行文本输入控件，不过并不显示用户输入的内容。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/input_type_radio.html][color=#0000ff]input type=radio[/color][/url][/b]
[indent]创建单选钮控件。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/input_type_reset.html][color=#0000ff]input type=reset[/color][/url][/b]
[indent]创建一个按钮，点击该按钮后，将重置表单控件回其初始值。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/input_type_submit.html][color=#0000ff]input type=submit[/color][/url][/b]
[indent]创建一个按钮，点击该按钮后，即提交表单。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/input_type_text.html][color=#0000ff]input type=text[/color][/url][/b]
[indent]创建一个单行的文本输入控件。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/ins.html][color=#0000ff]ins[/color][/url][/b]
[indent]表示插入到文档中的文本。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/isindex.html][color=#0000ff]isindex[/color][/url][/b]
[indent]使浏览器显示一个对话框，提示用户输入单行文本。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/kbd.html][color=#0000ff]kbd[/color][/url][/b]
[indent]以定宽字体显示文本。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/label.html][color=#0000ff]label[/color][/url][/b]
[indent]为页面上的其它元素指定标签。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/legend.html][color=#0000ff]legend[/color][/url][/b]
[indent]在 fieldSet 对象绘制的方框内插入一个标题。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/li.html][color=#0000ff]li[/color][/url][/b]
[indent]表示列表中的一个项目。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/link.html][color=#0000ff]link[/color][/url][/b]
[indent]允许当前文档和外部文档建立连接。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/listing.html][color=#0000ff]listing[/color][/url][/b]
[indent]以固定宽度的字体显示文本。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/map.html][color=#0000ff]map[/color][/url][/b]
[indent]包含客户端图像映射的坐标数据。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/marqueee.html][color=#0000ff]marqueee[/color][/url][/b]
[indent]创建一个滚动的文本字幕。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/menu.html][color=#0000ff]menu[/color][/url][/b]
[indent]创建一个无序列表。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/meta.html][color=#0000ff]meta[/color][/url][/b]
[indent]向服务器和客户端传达关于文档的隐藏信息。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/nobr.html][color=#0000ff]nobr[/color][/url][/b]
[indent]不换行显示文本。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/noframes.html][color=#0000ff]noframes[/color][/url][/b]
[indent]包含对于那些不支持 FRAMESET 元素的浏览器使用的 HTML。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/noscript.html][color=#0000ff]noscript[/color][/url][/b]
[indent]指定在不支持脚本的浏览器中显示的 HTML。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/object.html][color=#0000ff]object[/color][/url][/b]
[indent]在 HTML 页面中插入对象。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/ol.html][color=#0000ff]ol[/color][/url][/b]
[indent]编制排序列表。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/optgroup.html][color=#0000ff]optgroup[/color][/url][/b]
[indent]允许作者对 select 元素中的选项进行逻辑分组。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/option.html][color=#0000ff]option[/color][/url][/b]
[indent]表示 SELECT 元素中的一个选项。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/p.html][color=#0000ff]p[/color][/url][/b]
[indent]表示一段。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/param.html][color=#0000ff]param[/color][/url][/b]
[indent]设置 APPLET、EMBED 或 OBJECT 元素的属性初始值。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/pre.html][color=#0000ff]pre[/color][/url][/b]
[indent]以固定宽度字体显示文本。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/q.html][color=#0000ff]q[/color][/url][/b]
[indent]分离文本中的引语。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/s.html][color=#0000ff]s[/color][/url][/b]
[indent]带删除线方式显示文本。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/samp.html][color=#0000ff]samp[/color][/url][/b]
[indent]表示代码范例。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/script.html][color=#0000ff]script[/color][/url][/b]
[indent]指定由脚本引擎解释的页面中的脚本。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/select.html][color=#0000ff]select[/color][/url][/b]
[indent]表示一个列表框或者一个下拉框。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/small.html][color=#0000ff]small[/color][/url][/b]
[indent]指定内含文本要以比当前字体稍小的字体显示。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/span.html][color=#0000ff]span[/color][/url][/b]
[indent]指定内嵌文本容器。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/strike.html][color=#0000ff]strike[/color][/url][/b]
[indent]带删除线显示文本。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/strong.html][color=#0000ff]strong[/color][/url][/b]
[indent]以粗体显示文本。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/style.html][color=#0000ff]style[/color][/url][/b]
[indent]指定页面的样式表。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/sub.html][color=#0000ff]sub[/color][/url][/b]
[indent]说明内含文本要以下标的形式显示，比当前字体稍小。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/sup.html][color=#0000ff]sup[/color][/url][/b]
[indent]说明内含文本要以上标的形式显示，比当前字体稍小。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/table.html][color=#0000ff]table[/color][/url][/b]
[indent]说明所含内容组织成含有行和列的表格形式。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/tbody.html][color=#0000ff]tbody[/color][/url][/b]
[indent]指明哪些行作为表格的主体。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/td.html][color=#0000ff]td[/color][/url][/b]
[indent]指定表格中的单元格。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/textarea.html][color=#0000ff]textarea[/color][/url][/b]
[indent]多行文本输入控件。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/tfoot.html][color=#0000ff]tfoot[/color][/url][/b]
[indent]指明哪些行作为表尾。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/th.html][color=#0000ff]th[/color][/url][/b]
[indent]指定标题列。标题列将在单元格中居中并以粗体显示。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/thead.html][color=#0000ff]thead[/color][/url][/b]
[indent]指定哪些行作为表头。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/title.html][color=#0000ff]title[/color][/url][/b]
[indent]文档的标题。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/tr.html][color=#0000ff]tr[/color][/url][/b]
[indent]指定表格中的一行。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/tt.html][color=#0000ff]tt[/color][/url][/b]
[indent]以固定宽度字体显示文本。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/u.html][color=#0000ff]u[/color][/url][/b]
[indent]带下划线显示文本。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/ul.html][color=#0000ff]ul[/color][/url][/b]
[indent]表示不排序的项目列表。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/var.html][color=#0000ff]var[/color][/url][/b]
[indent]定义程序变量，通常以斜体显示。[/indent]
[b][url=http://www.admin5.com/html/html_tag_ref/wbr.html][color=#0000ff]wbr[/color][/url][/b]
[indent]向一块 NOBR 文本中插入软换行。[/indent]
HTML颜色参考
在HTML里，颜色有两种表示方式。一种是用颜色名称表示，比如blue表示蓝色。另外一种是用16进制的数值表示RGB的颜色值。RGB是Red，Green，Blue意思，RGB每个原色的最小值是0，最大值是255，如果换算成16进制表示，就是(#00)，(#FF)。比如白色的RGB(255,255,255)，就用#FFFFFF表示；还有黑色的RGB(0,0,0)，就用#000000表示。注：在W3C制定的HTML 4.0标准中，只有16种颜色可以用颜色名称表示(aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow)，其它的颜色都要用16进制RGB颜色值表示。
当然，现在的浏览器支持更多的颜色名称。不过为保险起见，建议你还是采用16进制RGB颜色值来表示颜色。并且在值前加上#这个符号。
为了方便大家找到合适的颜色，我们在这里列了一些颜色说明，以供大家参考，不妨作为一种速查工具。
Web安全颜色以前，很多电脑显示器最多支持256色，因此出现了216种Web安全颜色，以保证网页的颜色能够正确显示。
那为什么不是256种Web安全颜色呢？因为Microsoft和Mac操作系统有40种不同的系统保留颜色。
以下就是216种Web安全颜色：
[table=98%,gray][tr][td]#000000[/td][td]#000033[/td][td]#000066[/td][td]#000099[/td][td]#0000CC[/td][td]#0000FF[/td][/tr][tr][td]#003300[/td][td]#003333[/td][td]#003366[/td][td]#003399[/td][td]#0033CC[/td][td]#0033FF[/td][/tr][tr][td]#006600[/td][td]#006633[/td][td]#006666[/td][td]#006699[/td][td]#0066CC[/td][td]#0066FF[/td][/tr][tr][td]#009900[/td][td]#009933[/td][td]#009966[/td][td]#009999[/td][td]#0099CC[/td][td]#0099FF[/td][/tr][tr][td]#00CC00[/td][td]#00CC33[/td][td]#00CC66[/td][td]#00CC99[/td][td]#00CCCC[/td][td]#00CCFF[/td][/tr][tr][td]#00FF00[/td][td]#00FF33[/td][td]#00FF66[/td][td]#00FF99[/td][td]#00FFCC[/td][td]#00FFFF[/td][/tr][tr][td]#330000[/td][td]#330033[/td][td]#330066[/td][td]#330099[/td][td]#3300CC[/td][td]#3300FF[/td][/tr][tr][td]#333300[/td][td]#333333[/td][td]#333366[/td][td]#333399[/td][td]#3333CC[/td][td]#3333FF[/td][/tr][tr][td]#336600[/td][td]#336633[/td][td]#336666[/td][td]#336699[/td][td]#3366CC[/td][td]#3366FF[/td][/tr][tr][td]#339900[/td][td]#339933[/td][td]#339966[/td][td]#339999[/td][td]#3399CC[/td][td]#3399FF[/td][/tr][tr][td]#33CC00[/td][td]#33CC33[/td][td]#33CC66[/td][td]#33CC99[/td][td]#33CCCC[/td][td]#33CCFF[/td][/tr][tr][td]#33FF00[/td][td]#33FF33[/td][td]#33FF66[/td][td]#33FF99[/td][td]#33FFCC[/td][td]#33FFFF[/td][/tr][tr][td]#660000[/td][td]#660033[/td][td]#660066[/td][td]#660099[/td][td]#6600CC[/td][td]#6600FF[/td][/tr][tr][td]#663300[/td][td]#663333[/td][td]#663366[/td][td]#663399[/td][td]#6633CC[/td][td]#6633FF[/td][/tr][tr][td]#666600[/td][td]#666633[/td][td]#666666[/td][td]#666699[/td][td]#6666CC[/td][td]#6666FF[/td][/tr][tr][td]#669900[/td][td]#669933[/td][td]#669966[/td][td]#669999[/td][td]#6699CC[/td][td]#6699FF[/td][/tr][tr][td]#66CC00[/td][td]#66CC33[/td][td]#66CC66[/td][td]#66CC99[/td][td]#66CCCC[/td][td]#66CCFF[/td][/tr][tr][td]#66FF00[/td][td]#66FF33[/td][td]#66FF66[/td][td]#66FF99[/td][td]#66FFCC[/td][td]#66FFFF[/td][/tr][tr][td]#990000[/td][td]#990033[/td][td]#990066[/td][td]#990099[/td][td]#9900CC[/td][td]#9900FF[/td][/tr][tr][td]#993300[/td][td]#993333[/td][td]#993366[/td][td]#993399[/td][td]#9933CC[/td][td]#9933FF[/td][/tr][tr][td]#996600[/td][td]#996633[/td][td]#996666[/td][td]#996699[/td][td]#9966CC[/td][td]#9966FF[/td][/tr][tr][td]#999900[/td][td]#999933[/td][td]#999966[/td][td]#999999[/td][td]#9999CC[/td][td]#9999FF[/td][/tr][tr][td]#99CC00[/td][td]#99CC33[/td][td]#99CC66[/td][td]#99CC99[/td][td]#99CCCC[/td][td]#99CCFF[/td][/tr][tr][td]#99FF00[/td][td]#99FF33[/td][td]#99FF66[/td][td]#99FF99[/td][td]#99FFCC[/td][td]#99FFFF[/td][/tr][tr][td]#CC0000[/td][td]#CC0033[/td][td]#CC0066[/td][td]#CC0099[/td][td]#CC00CC[/td][td]#CC00FF[/td][/tr][tr][td]#CC3300[/td][td]#CC3333[/td][td]#CC3366[/td][td]#CC3399[/td][td]#CC33CC[/td][td]#CC33FF[/td][/tr][tr][td]#CC6600[/td][td]#CC6633[/td][td]#CC6666[/td][td]#CC6699[/td][td]#CC66CC[/td][td]#CC66FF[/td][/tr][tr][td]#CC9900[/td][td]#CC9933[/td][td]#CC9966[/td][td]#CC9999[/td][td]#CC99CC[/td][td]#CC99FF[/td][/tr][tr][td]#CCCC00[/td][td]#CCCC33[/td][td]#CCCC66[/td][td]#CCCC99[/td][td]#CCCCCC[/td][td]#CCCCFF[/td][/tr][tr][td]#CCFF00[/td][td]#CCFF33[/td][td]#CCFF66[/td][td]#CCFF99[/td][td]#CCFFCC[/td][td]#CCFFFF[/td][/tr][tr][td]#FF0000[/td][td]#FF0033[/td][td]#FF0066[/td][td]#FF0099[/td][td]#FF00CC[/td][td]#FF00FF[/td][/tr][tr][td]#FF3300[/td][td]#FF3333[/td][td]#FF3366[/td][td]#FF3399[/td][td]#FF33CC[/td][td]#FF33FF[/td][/tr][tr][td]#FF6600[/td][td]#FF6633[/td][td]#FF6666[/td][td]#FF6699[/td][td]#FF66CC[/td][td]#FF66FF[/td][/tr][tr][td]#FF9900[/td][td]#FF9933[/td][td]#FF9966[/td][td]#FF9999[/td][td]#FF99CC[/td][td]#FF99FF[/td][/tr][tr][td]#FFCC00[/td][td]#FFCC33[/td][td]#FFCC66[/td][td]#FFCC99[/td][td]#FFCCCC[/td][td]#FFCCFF[/td][/tr][tr][td]#FFFF00[/td][td]#FFFF33[/td][td]#FFFF66[/td][td]#FFFF99[/td][td]#FFFFCC[/td][td]#FFFFFF[/td][/tr][/table]微软支持的颜色名称下面是微软IE4.0以上都支持的颜色名称：
[table=98%,gray][tr][td]aliceblue
(#F0F8FF)[/td][td]antiquewhite
(#FAEBD7)[/td][td]aqua
(#00FFFF)[/td][td]aquamarine
(#7FFFD4)[/td][/tr][tr][td]azure
(#F0FFFF)[/td][td]beige
(#F5F5DC)[/td][td]bisque
(#FFE4C4)[/td][td]black
(#000000)[/td][/tr][tr][td]blanchedalmond
(#FFEBCD)[/td][td]blue
(#0000FF)[/td][td]blueviolet
(#8A2BE2)[/td][td]brown
(#A52A2A)[/td][/tr][tr][td]burlywood
(#DEB887)[/td][td]cadetblue
(#5F9EA0)[/td][td]chartreuse
(#7FFF00)[/td][td]chocolate
(#D2691E)[/td][/tr][tr][td]coral
(#FF7F50)[/td][td]cornflowerblue
(#6495ED)[/td][td]cornsilk
(#FFF8DC)[/td][td]crimson
(#DC143C)[/td][/tr][tr][td]cyan
(#00FFFF)[/td][td]darkblue
(#00008B)[/td][td]darkcyan
(#008B8B)[/td][td]darkgoldenrod
(#B8860B)[/td][/tr][tr][td]darkgray
(#A9A9A9)[/td][td]darkgreen
(#006400)[/td][td]darkkhaki
(#BDB76B)[/td][td]darkmagenta
(#8B008B)[/td][/tr][tr][td]darkolivegreen
(#556B2F)[/td][td]darkorange
(#FF8C00)[/td][td]darkorchid
(#9932CC)[/td][td]darkred
(#8B0000)[/td][/tr][tr][td]darksalmon
(#E9967A)[/td][td]darkseagreen
(#8FBC8B)[/td][td]darkslateblue
(#483D8B)[/td][td]darkslategray
(#2F4F4F)[/td][/tr][tr][td]darkturquoise
(#00CED1)[/td][td]darkviolet
(#9400D3)[/td][td]deeppink
(#FF1493)[/td][td]deepskyblue
(#00BFFF)[/td][/tr][tr][td]dimgray
(#696969)[/td][td]dodgerblue
(#1E90FF)[/td][td]firebrick
(#B22222)[/td][td]floralwhite
(#FFFAF0)[/td][/tr][tr][td]forestgreen
(#228B22)[/td][td]fuchsia
(#FF00FF)[/td][td]gainsboro
(#DCDCDC)[/td][td]ghostwhite
(#F8F8FF)[/td][/tr][tr][td]gold
(#FFD700)[/td][td]goldenrod
(#DAA520)[/td][td]gray
(#808080)[/td][td]green
(#008000)[/td][/tr][tr][td]greenyellow
(#ADFF2F)[/td][td]honeydew
(#F0FFF0)[/td][td]hotpink
(#FF69B4)[/td][td]indianred
(#CD5C5C)[/td][/tr][tr][td]indigo
(#4B0082)[/td][td]ivory
(#FFFFF0)[/td][td]khaki
(#F0E68C)[/td][td]lavender
(#E6E6FA)[/td][/tr][tr][td]lavenderblush
(#FFF0F5)[/td][td]lawngreen
(#7CFC00)[/td][td]lemonchiffon
(#FFFACD)[/td][td]lightblue
(#ADD8E6)[/td][/tr][tr][td]lightcoral
(#F08080)[/td][td]lightcyan
(#E0FFFF)[/td][td]lightgoldenrodyellow
(#FAFAD2)[/td][td]lightgreen
(#90EE90)[/td][/tr][tr][td]lightgrey
(#D3D3D3)[/td][td]lightpink
(#FFB6C1)[/td][td]lightsalmon
(#FFA07A)[/td][td]lightseagreen
(#20B2AA)[/td][/tr][tr][td]lightskyblue
(#87CEFA)[/td][td]lightslategray
(#778899)[/td][td]lightsteelblue
(#B0C4DE)[/td][td]lightyellow
(#FFFFE0)[/td][/tr][tr][td]lime
(#00FF00)[/td][td]limegreen
(#32CD32)[/td][td]linen
(#FAF0E6)[/td][td]magenta
(#FF00FF)[/td][/tr][tr][td]maroon
(#800000)[/td][td]mediumaquamarine
(#66CDAA)[/td][td]mediumblue
(#0000CD)[/td][td]mediumorchid
(#BA55D3)[/td][/tr][tr][td]mediumpurple
(#9370DB)[/td][td]mediumseagreen
(#3CB371)[/td][td]mediumslateblue
(#7B68EE)[/td][td]mediumspringgreen
(#00FA9A)[/td][/tr][tr][td]mediumturquoise
(#48D1CC)[/td][td]mediumvioletred
(#C71585)[/td][td]midnightblue
(#191970)[/td][td]mintcream
(#F5FFFA)[/td][/tr][tr][td]mistyrose
(#FFE4E1)[/td][td]moccasin
(#FFE4B5)[/td][td]navajowhite
(#FFDEAD)[/td][td]navy
(#000080)[/td][/tr][tr][td]oldlace
(#FDF5E6)[/td][td]olive
(#808000)[/td][td]olivedrab
(#6B8E23)[/td][td]orange
(#FFA500)[/td][/tr][tr][td]orangered
(#FF4500)[/td][td]orchid
(#DA70D6)[/td][td]palegoldenrod
(#EEE8AA)[/td][td]palegreen
(#98FB98)[/td][/tr][tr][td]paleturquoise
(#AFEEEE)[/td][td]palevioletred
(#DB7093)[/td][td]papayawhip
(#FFEFD5)[/td][td]peachpuff
(#FFDAB9)[/td][/tr][tr][td]peru
(#CD853F)[/td][td]pink
(#FFC0CB)[/td][td]plum
(#DDA0DD)[/td][td]powderblue
(#B0E0E6)[/td][/tr][tr][td]purple
(#800080)[/td][td]red
(#FF0000)[/td][td]rosybrown
(#BC8F8F)[/td][td]royalblue
(#4169E1)[/td][/tr][tr][td]saddlebrown
(#8B4513)[/td][td]salmon
(#FA8072)[/td][td]sandybrown
(#F4A460)[/td][td]seagreen
(#2E8B57)[/td][/tr][tr][td]seashell
(#FFF5EE)[/td][td]sienna
(#A0522D)[/td][td]silver
(#C0C0C0)[/td][td]skyblue
(#87CEEB)[/td][/tr][tr][td]slateblue
(#6A5ACD)[/td][td]slategray
(#708090)[/td][td]snow
(#FFFAFA)[/td][td]springgreen
(#00FF7F)[/td][/tr][tr][td]steelblue
(#4682B4)[/td][td]tan
(#D2B48C)[/td][td]teal
(#008080)[/td][td]thistle
(#D8BFD8)[/td][/tr][tr][td]tomato
(#FF6347)[/td][td]turquoise
(#40E0D0)[/td][td]violet
(#EE82EE)[/td][td]wheat
(#F5DEB3)[/td][/tr][tr][td]white
(#FFFFFF)[/td][td]whitesmoke
(#F5F5F5)[/td][td]yellow
(#FFFF00)[/td][td]yellowgreen
(#9ACD32)[/td][/tr][/table]
IE6/IE7和Firefox对Div处理的差异
基本HTML代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head><title>Div Float Sample</title><style type="text/css">div { margin:3px; }.d1 { width:250px; min-height:20px; border:1px solid #00cc00; }.d2 { width:130px; min-height:40px; border:1px solid #0000cc; }.d3 { width:100px; min-height:40px; border:1px solid #cc0000; }</style> </head><body><div class="d1"> <div class="d2"> </div> <div class="d3"> </div></div></body></html>以上代码显示的结果如下，很正常，结果相同。[align=center][img]http://www.admin5.com/html/images/html_tutorials/div_float_01.gif[/img][/align]下面会在这个基础上进行修改，修改的内容都在style中，其他代码就不再重复写了。
请注意，这里的Style中用到了min-height，这个和height是不同的，min-height指定了对象的一个最小高度，当对象的子内容高度超过这个最小高度是，这个对象会自动撑大。这是一个非常牛的style，可惜的是，在这个style和float这个同样牛的style一起使用的时候，就会出现各种问题。
内部一个Div修改成为float:left.d1 { width:250px; min-height:20px; border:1px solid #00cc00; }.d2 { width:130px; min-height:40px; border:1px solid #0000cc; float: left; }.d3 { width:100px; min-height:40px; border:1px solid #cc0000; }显示结果如下。
[align=center][img]http://www.admin5.com/html/images/html_tutorials/div_float_02.gif[/img][/align]这个结果中，Firefox有点离谱了，两个框叠在一起也就罢了，为什么那个红框会变大捏？而且变的大小也很诡异，不知道是按照什么公式计算出来的。IE在这里的显示应当是附和标准的。
内部两个Div都修改成为float:left.d1 { width:250px; min-height:20px; border:1px solid #00cc00; }.d2 { width:130px; min-height:40px; border:1px solid #0000cc; float: left; }.d3 { width:100px; min-height:40px; border:1px solid #cc0000; float: left; }显示结果如下。
[align=center][img]http://www.admin5.com/html/images/html_tutorials/div_float_03.gif[/img][/align]在这种情况下，Firefox的结果尚能解释，可能是float把外层的Div也作为内层float影响的范围，这样内层的就不会将外层的Div撑大了。IE在这里出现了Margin失效的情况，可以解释为内层第二个float造成了影响。
干脆把外层的Div也修改成为float:left.d1 { width:250px; min-height:20px; border:1px solid #00cc00; float: left; }.d2 { width:130px; min-height:40px; border:1px solid #0000cc; float: left; }.d3 { width:100px; min-height:40px; border:1px solid #cc0000; float: left; }显示结果如下，
[align=center][img]http://www.admin5.com/html/images/html_tutorials/div_float_04.gif[/img][/align]这种情况下，Firefox正常了，而IE延续了前面的不正常情况。
外层是float:left，内层最后一个不再float:left.d1 { width:250px; min-height:20px; border:1px solid #00cc00; float: left; }.d2 { width:130px; min-height:40px; border:1px solid #0000cc; float: left; }.d3 { width:100px; min-height:40px; border:1px solid #cc0000; }显示结果如下，
[align=center][img]http://www.admin5.com/html/images/html_tutorials/div_float_02.gif[/img][/align]这和前面第一种加float:left的情况相同。
结论再重申一次，本文讨论的是一个比较高级的话题。如果在style中用height而不是min-height来设定高度，是不会出现以上这些问题的。不过，不用min-height就失去了div自动撑大这一个很有必要的特性。
在min-height和float:left的情况下，没有一种完美的写法让Firefox和IE结果相同。不过仍然可以发现绕开的方法。
进一步试验可以发现，margin遭到的影响在padding上比较好，所以最好是padding和margin都不用，或者只用padding。
两者相同的代码如下，
div { padding:3px; }.d1 { width:250px; min-height:20px; border:1px solid #00cc00; float: left; }.d2 { width:130px; min-height:40px; border:1px solid #0000cc; float: left; }.d3 { width:100px; min-height:40px; border:1px solid #cc0000; float: left; }显示结果如下，
[align=center][img]http://www.admin5.com/html/images/html_tutorials/div_float_05.gif[/img][/align]呵呵，总算是一样了，虽然是凑合着一样了。幸好一样了，否则只好用table了。
当然所有这些情况也许是有合理解释的，说不定增加某一个style的设置，这些问题都迎刃而解了，不过目前我还没有找到这个设置。
关于Doctype以上代码在下面这些Doctype下试验过，结果相同。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
页:
[1]