关于本教程

前言

为什么会有这个教程

我是从1998年开始学习HTML的，当时的感觉就是很好奇，一些简单的语句居然就能做出生动的效果。那时候国内似乎只有清华图书馆翻译的HTML教程，总体感觉很好，在没有参考书的情况下，它教给我很多东西。

后来，随着时间的推移，用HTML的经验越来越多，我周围很多朋友都对HTML表现出很大的兴趣，我推荐他们看的都是这个版本的HTML教程。后来有一次我偶然去了一下W3C school的网站，看到那边的HTML以及其他教程，深深被其打动，那确实是一些十分好的教程，再后来我推荐给朋友看的就是这个网站的教程了。但是有的朋友不喜欢英文，而且总是要上网看也很麻烦，我就打算翻译它，并且整理出来，提供给大家。

在翻译过程中，我去掉了已经被W3C废弃或不提倡的标签、属性，比如（font），同时对版面结构进行了调整，希望整体效果看起来还可以。

由于水平有限，翻译出来的结果自然难免错漏，对这个，还望大家不要见笑。另外，本次翻译并没有得到W3C school网站的同意，因此对此向W3C school表示歉意。

本教程是免费的，并且可以随意传播，转载，但是请不要修改。

我所要感谢的人

首先感谢W3C school网站，没有他们的优秀教程就没有我的翻译，点这里可以访问他们的网站。

在翻译制作本教程的过程中，我得到很多朋友的帮助。在这里，对他们表示衷心感谢。

谨以此教程献给朋友娃娃：P和blueidea论坛、天擎论坛的所有朋友以及其他关心、支持我的人们。

关于作者

本人是东南大学计算机专业090016班的学生，可以通过如下方式联系：

给我发邮件:islandowner@163.com

另外，可以在blueidea或者天擎论坛短消息联系：桃花岛主。


HTML介绍

HTML文件是什么？
  • HTML表示超文本标记语言（Hyper Text Markup Language）。
  • HTML文件是一个包含标记的文本文件。
  • 这些标记保速浏览器怎样显示这个页面。
  • HTML文件必须有htm或者html扩展名。
  • HTML文件可以用一个简单的文本编辑器创建。

想不想尝试一下？

假如你运行的是windows系统，打开记事本，在其中输入以下文本：

<html>
<head>
<title>Title of page</title>
</head>
<body>
This is my first homepage.
<b>This text is bold</b>
</body>
</html>

将此文件保存为“mypage.htm”。

启动浏览器。在文件菜单中选择“打开”（或者“打开页面”），这时将出现一个对话框。选择“浏览”（或者“选择文件”），定位到你刚才创建的HTML文件——“mypage.htm”，选择它，单击“打开”。然后在对话框中，你将看到这个文件的地址，比如说：“C:\MyDocuments\mypage.htm”。单击“确定”，浏览器将显示此页面。

例子解释

HTML文档中，第一个标签是<html>。这个标签告诉浏览器这是HTML文档的开始。HTML文档的最后一个标签是</html>，这个标签告诉浏览器这是HTML文档的终止。

在<head>和</head>标签之间文本的是头信息。在浏览器窗口中，头信息是不被显示的。

在<title>和</title>标签之间的文本是文档标题，它被显示在浏览器窗口的标题栏。

在<body>和</body>标签之间的文本是正文，会被显示在浏览器中。

在<b>和</b>标签之间的文本会以加粗字体显示。

关于HTML编辑器：

用一些所见即所得的编辑器，比如frontpage，dreamwaver，你可以很容易创建一个页面，而不需要在纯文本中编写代码。

但是假如你想成为一名熟练的网络开发者，我们强烈推荐你用纯文本编辑器编写代码，这有助于学习HTML基础。

常见问题

问：我编写完了HTML文件，但是不能在浏览器中看见结果，为什么？
答：请确认你保存了文件，并且使用了正确的文件名和扩展名，例如：“c:\mypage.htm”，并且确认你用浏览器打开时使用同样的文件名。

问：我编辑了HTML文件，但是修改结果并没有在浏览器中显示，为什么？
答：浏览器缓存了你的页面，所以它不需要两次读取同样的页面。你修改了这个页面，浏览器并不知道。请使用“刷新/重载”按钮来强迫浏览器读取编辑过的页面。


HTML元素

HTML文档是由HTML元素组成的文本文件。
HTML元素是预定义的正在使用的HTML标签。

HTML标签

HTML标签用来组成HTML元素。

HTML标签两端有两个包括字符：“<”和“>”,这两个包括字符被称为角括号。

HTML标签通常成对出现，比如<b>和</b>。一对标签的前面一个是开始标签，第二个是结束标签,在开始和结束标签之间的文本是元素内容。

HTML标签是大小写无关的，<b>跟<B>表示的意思是一样的。

HTML元素

回忆一下上一页的HTML例子：

<html>
<head>
<title>Title of page</title>
</head>
<body>
This is my first homepage.
<b>This text is bold</b>
</body>
</html>

下面是一个HTML元素：

<b>This text is bold</b>

此HTML元素以开始标签<b>起始， 内容是：This text is bold，以结束标签</b>中止。<b>标签的目的是定义一个需要被显示成粗体的HTML元素。

下面也是一个HTML元素：

<body>
This is my first homepage.
<b>This text is bold</b>
</body>

此HTML标签以开始标签<body>起始，终止于结束标签</body>。<body>标签的目的是定义一个HTML元素，使其包含HTML文档的主体。

为什么使用小写标签？

我们刚说过，HTML标签是大小写无关的：<B>跟<b>含义相同。当你上网的时候，你会注意到多数教程在示例中使用大写的HTML标签，我们总是使用小写标签。为什么？

假如你想投入到下一代HTML中，你应该开始使用小写标签。W3C在他们的HTML4建议中提倡使用小写标签，XHTML（下一代HTML）也需要小写标签。

标签属性

标签可以拥有属性。属性能够为页面上的HTML元素提供附加信息。

标签<body>定义了HTML页面的主体元素。使用一个附加的bgcolor属性，你可以告诉浏览器：你页面的背景色是红色的，就像这样：

<body bgcolor="red">

标签<table>定义了一个HTML表格。使用一个附加的border属性，你可以告诉浏览器：这个表格是没有边框的，代码是：

<table border="0">

属性通常由属性名和值成对出现，就像这样：name="value"。属性通常是附加给HTML元素的开始标签的。

引号样式

属性值应该被包含在引号中。双引号是最常用的，但是单引号也可以使用。
在很少情况下，比如说属性值本身包含引号，使用单引号就很必要了。
比如：name='John "ShotGun" Nelson'。
注意：中文引号跟英文引号是不一样的。上面所指的引号都是英文状态下的引号。


HTML基本标签

HTML中最重要的标签是定义标题元素，段落和换行的标签。

学习HTML的最好方法是编辑运行示例代码。我们为您创建了一个十分方便的HTML编辑器。在这个编辑器里，您可以编辑HTML源代码，按下“运行代码”按钮后，就可以看见结果。

请自己尝试一下这个例子

一个非常简单的HTML文档：

这个例子是一个非常简单的HTML文档，拥有很少的几个HTML标签。它说明了一个主体元素中的文本是如何在浏览器中显示的。

简单的段落：

这个例子说明了段落元素中的文本是如何在浏览器中显示的。

在这个页面的底部，还有更多例子。

标题元素

标题元素由标签<h1>到<h6>定义。<h1>定义了最大的标题元素，<h6>定义了最小的。

<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>This is another paragraph</p>

HTML自动在一个段落前后各添加一个空行。

换行

当需要结束一行，并且不想开始新段落时，使用<br>标签。<br>标签不管放在什么位置，都能够强制换行。

<p>This <br> is a para<br>graph with line breaks</p>

<br>标签是一个空标签，它没有结束标记。

HTML中的注释

注释标签用来在HTML源文件中插入注释。注释会被浏览器忽略。你可以使用注释来解释你的代码，这可以在你以后编辑代码的时候帮助你。

<!-- This is a comment -->

注意：你需要在左括号“<”后面跟一个感叹号，右括号不用。

基本注意点——有用的技巧

当你写下HTML文本的时候，你不能确知在另外一个浏览器中，这些文本将被如何显示。有人用着大的显示器，有的人用的小一些。每次用户调整窗口大小的时候，文本都将被重新格式化。不要想在编辑器中写一些空行和空格来协助排版。

HTML将截掉你文本中的多余空格。不管多少个空格，处理起来只当一个。一点附加信息：在HTML里面，一个空行也只被当作一个空格来处理。

使用空段落<p>来插入空白行是一个坏习惯，请使用<br>标签来替代。（但是不要用<br>标签来创建列表，我们后面会专门学习HTML列表的。）

你也许注意到了段落可以不写结束标记</p>。别依赖它，HTML的下一个版本将不准你漏掉任何一个结束标签。

HTML自动在某些元素前后增加额外的空行，就像在段落和标题元素的前后一样。

我们使用了水平线（<hr>标签）来分隔我们教程的章节。

更多示例：

多个段落：

这个例子说明了段落的一些默认行为。

换行：

这个例子说明了在HTML文档中换行的使用。

诗歌的问题：

这个例子说明了HTML显示格式的一些问题。

标题元素：

这个例子说明了在HTML中显示标题元素的标签。

居中的标题元素：

这个例子显示了一个居中的标题元素。

水平线：

这个例子说明了如何插入水平线。

隐藏的注释：

这个例子说明了在HTML文档中如何插入隐藏的注释。

背景色：

这个例子说明了如何给页面设置背景色。


HTML格式

HTML定义了很多元素用来格式化输出，比如加粗和倾斜文本。

下面是很多例子，您可以自己尝试。

示例

格式化文字：

这个例子说明了在HTML里面可以怎样格式化文本。

预格式化文本：

这个例子说明了可以怎样用pre标签来控制换行和空格。

“计算机输出”标签：

这个例子说明了“计算机输出”标签在显示上的不同。

地址：

这个例子说明了如何用HTML书写一个地址。

缩写和首字母缩略法：

这个例子说明了如何处理缩写和首字母缩略。

文字方向：

这个例子说明了如何改变文字方向。

块引用：

这个例子说明了如何处理大段引用和小块引用。

删除和插入文字：

这个例子说明了如何标记被删除或者插入的文本。

如何查看HTML源文件

你有没有看过一些网页，并且想知道它是如何做出来的呢？

在浏览器菜单中选择查看——源文件，将弹出一个窗口，这个页面的HTML代码就在其中。


HTML实体

有些字符，比如说“<”字符，在HTML中有特殊的含义，因此不能在文本中使用。

想要在HTML中显示一个小于号“<”，需要用到字符实体。

字符实体

在HTML中，有些字符拥有特殊含义，比如小于号“<”定义为一个HTML标签的开始。假如我们想要浏览器显示这些字符的话，必须在HTML代码中插入字符实体。

一个字符实体拥有三个部分：一个and符号（&），一个实体名或者一个实体号，最后是一个分号（;）

想要在HTML文档中显示一个小于号，我们必须这样写：&lt;或者&#60;

使用名字相对于使用数字的优点是容易记忆，缺点是并非所有的浏览器都支持最新的实体名，但是几乎所有的浏览器都能很好地支持实体号。

注意：实体名是大小写敏感的。

下面这个例子能够让你针对HTML实体实践一下。

不可拆分的空格

在HTML中，最常见的字符实体就是不可拆分空格。

通常，HTML会合并你文档中的空格。假如在你的HTML文本中连续写了10个空格，其中9个会被去掉。想要在HTML中插入空格，可以使用实体：&nbsp;

最常用的字符实体

显示结果 | 描述 | 实体名 | 实体号
 | 不可拆分的空格 | &nbsp; | &#160;
< | 小于 | &lt; | &#60;
> | 大于 | &gt; | &#62;
& | and符号 | &amp; | &#38;
" | 引号 | &quot; | &#34;
' | 单引号 |  | &#39;

其他一些常用的字符实体

显示结果 | 描述 | 实体名 | 实体号
¢ | 分 | &cent; | &#162;
£ | 英镑 | &pound; | &#163;
¥ | 人民币元 | &yen; | &#165;
§ | 章节 | &sect; | &#167;
© | 版权 | &copy; | &#169;
® | 注册 | &reg; | &#174;
× | 乘号 | &times; | &#215;
÷ | 除号 | &divide; | &#247;


HTML链接

HTML使用超级链接来连接到网络上的其他页面。

示例

创建链接：

这个例子说明了在HTML文档中如何创建链接。

图片作为链接：

这个例子说明了在HTML文档中如何用图片作为链接。

锚标签和href属性

HTML使用锚标签（<a>）来创建一个连接到其他文件的链接。锚可以指向网络上的任何资源：HTML页面，图像，声音，影片等等。

创建一个锚的语法：

<a href="url">Text to be displayed</a>

锚可以指向网络上的任何资源：HTML页面，图像，声音，影片等等。

标签<a>被用来创建一个链接指向的锚，href属性用来指定连接到的地址，在锚的起始标签<a>和结束标签</a>中间的部分将被显示为超级链接。

这个锚定义了一个到W3Schools的链接：

<a href="http://www.w3schools.com/">Visit W3Schools!</a>

上面这段代码在浏览器中显示的效果如下：

Visit W3Schools!

target属性

使用target属性，你可以定义从什么地方打开链接地址。

下面这段代码打开一个新的浏览器窗口来打开链接：

<a href="http://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

锚标签和name属性

name属性用来创建一个命名的锚。使用命名锚以后，可以让链接直接跳转到一个页面的某一章节，而不用用户打开那一页，再从上到下慢慢找。

下面是命名锚的语法：

<a name="label">Text to be displayed</a>

你可以为锚随意指定名字，只要你愿意。下面这行代码定义了一个命名锚：

<a name="tips">Useful Tips Section</a>

你应该注意到了：命名锚的显示方式并没有什么与众不同的。

想要直接链接到“tips”章节的话，在URL地址的后面加一个“#”和这个锚的名字，就像这样：

<a name="http://www.w3schools.com/html_links.asp#tips">Jump to the Useful Tips Section</a>

一个链接到本页面中某章节的命名锚是这样写的：

<a name="#tips">Jump to the Useful Tips Section</a>

基本注意点——有用的技巧

尽量在子目录路径后面加一个左斜杠。假如你像下面这样写：href="http://www.w3schools.com/html"，将会产生向服务器产生两个HTTP请求，因为服务器会在后面追加一个左斜杠，产生一个新的请求，就像这样：href="http://www.w3schools.com/html/"。

命名锚通常用来在大型文档的开头创建章节表。这个页面的每个章节被加上一个命名锚，到这些锚的链接被放在页面的顶端。

如果浏览器无法找到指定的命名锚，它将转到这个页面的顶部，而不显示任何错误提示。

更多示例：

在新浏览器窗口中打开链接：

这个例子说明了怎样用打开新窗口的方式来链接到其他页面，这样，访问者不用离开你的页面。

链接到本页面的某个位置：

这个例子说明了如何跳转到一个文档的某部分。

跳出框架：

这个例子说明了假如你的页面在框架中，如何跳出框架。

创建一个邮件链接：

这个例子说明了如何链接到一个邮件信息（只有安装了邮件程序才有效）。

创建一个邮件链接2：

这个例子显示了一个完成度更高的邮件链接。


HTML框架

使用框架，可以在一个浏览器窗口中显示不止一个页面。

示例

垂直分栏：

这个例子说明了如何创建一个有三个页面的垂直分栏。

水平分栏：

这个例子说明了如何创建一个有三个页面的水平分栏。

如何使用<noframes>标签：

这个例子说明了如何使用<noframes>标签。

在这个页面的底部，还有更多例子。

框架

使用框架，可以在一个浏览器窗口中显示不止一个HTML文档。这样的HTML文档被称为框架页面，它们是相互独立的。

使用框架的不利因素有：

  • 网站开发者需要关心更多HTML文档的情况。
  • 打印整个页面变得困难。

frameset标签

  • <frameset>标签定义了如何将窗口拆分成框架。
  • 每个frameset标签定义了一组行和列。
  • 行/列的值指明了每个行/列在屏幕上所占的大小。

frame标签

  • <frame>标签定义了每个框架中放入什么文件。
下面这个例子中，有一个两列的分栏。第一个被设置成窗口宽度的25％，第二个被设置成窗口宽度的75％。页面“frame_a.htm”被放在第一个分栏中，“frame_b.htm”被放在第二个分栏中。

<frameset cols="25%,75%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset>

基本注意点——有用的技巧

假如一个框架有可见边框，用户可以拖动边框来改变它的大小。如果不想让用户改变大小，可以在<frame>标签中加入：noresize="noresize"。

给不支持框架的浏览器写上<noframes>标签。

更多示例：

混合框架：

这个例子说明了怎样把三个页面以行列混合的方式放在框架中。

使用了noresize="noresize"的框架：

这个例子说明了noresize属性。这个框架是不可改变大小的，把鼠标移动到框架边界上，你会发现无法调整大小。

导航框架：

这个例子说明了如何创建一个导航框架。导航框架包含了一系列链接，它们的目标页面在第二个框架中。文件“frame_links.htm”包含了三个链接，链接的代码如下：

<a href ="frame_a.htm" target ="showframe">Frame a</a>
<a href ="frame_b.htm" target ="showframe">Frame b</a>
<a href ="frame_c.htm" target ="showframe">Frame c</a>

第二个框架将显示链接到的页面。

内联框架：

这个例子说明了如何创建一个内联框架（包含在HTML页面里的框架）。

在框架内跳转到指定章节：

这个例子显示了两个框架页。其中一个的源是一个文件的指定章节，该章节在文件“frame_section.htm”中使用代码<a name="C10">指定。

使用导航框架跳转到指定章节：

这个例子显示了两个框架页。左边的导航框架包含了一系列以第二个框架为目标的链接（“frame_linksection.htm”），第二个框架显示链接文件（“frame_section.htm”）。导航框架中的一个链接指向目标文件中的指定章节。文件“frame_link”中的HTML代码是像这样的：

<a href ="frame_section" target ="showframe">没有命名锚的链接</a>
<a href ="frame_section#C10" target ="showframe">有命名锚的链接</a>


HTML表格

使用HTML可以创建表格。

示例

表格：

这个例子说明了如何在HTML页面中创建表格。

表格边框：

这个例子显示了不同的表格边框。

在这个页面的底部，还有更多例子。

表格

表格是用<table>标签定义的。表格被划分为行（使用<tr>标签），每行又被划分为数据单元格（使用<td>标签）。td表示“表格数据”（Table Data），即数据单元格的内容。数据单元格可以包含文本，图像，列表，段落，表单，水平线，表格等等。

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

在浏览器中显示如下：

row 1, cell 1 | row 1, cell 2
row 2, cell 1 | row 2, cell 2

表格和border属性

如果不指定border属性，表格将不显示边框。有时候这很有用，但是多数时候我们希望显示边框。

想要显示一个有边框的表格，需要使用border属性。

<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>

表格头

表格头使用<th>标签指定。

<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

在浏览器中显示如下：

Heading | Another Heading
row 1, cell 1 | row 1, cell 2
row 2, cell 1 | row 2, cell 2

表格中的空单元格

在多数浏览器中，没有内容的单元格显示得不太好。

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td></td>
</tr>
</table>

在浏览器中显示如下：

row 1, cell 1 | row 1, cell 2
row 2, cell 1 |

注意一下空单元格的边框没有显示出来。为了避免这个，可以在空单元格里加入不可分空格来占位，这样边框能正常显示。

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>&nbsp;</td>
</tr>
</table>

在浏览器中显示如下：

row 1, cell 1 | row 1, cell 2
row 2, cell 1 |

基本注意点——有用的技巧

通常很少使用<thead>，<tbody>，<tfoot>标签，因为浏览器对它们的支持不好。希望这个在XHTML的未来版本中得到改变。

更多示例：

没有边框的表格：

这个例子显示了一个没有边框的表格。

表格头：

这个例子说明了如何显示表格头。

空单元格：

这个例子说明了如何使用“&nbsp;”来支撑没有内容的单元格。

有标题的表格：

这个例子说明了如何创建一个有标题的表格。

单元格跨行（列）的表格：

这个例子显示了如何定义跨行或者跨列的单元格。

表格内的其他标签：

这个例子说明了如何在元素中显示其他元素。

cellpadding属性：

这个例子说明了如何使用cellpadding属性在表格内容和边框之间留出更多空白。

cellspacing属性：

这个例子说明了如何使用cellspacing属性来增加单元格间距。

给表格增加背景色或者背景图像：

这个例子说明了如何给表格增加背景。

给表格增加背景色或者背景图像：

这个例子说明了如何给一个或多个单元格增加背景。

给单元格内容设置对齐方式：

这个例子说明了如何使用“align”属性来设置单元格的对齐方式，让表格好看一些。

frame属性：

这个例子说明了如何使用“frame”属性来控制表格周围的边框。


HTML列表

HTML支持有序、无序和自定义列表。

示例

一个无序列表：

这个例子显示了一个无序列表。

有序列表：

这个例子显示了一个有序列表。

在这个页面的底部，还有更多例子。

无序列表

无序列表是一个项目的序列。各项目前加有标记（通常是黑色的实心小圆圈）。

无序列表以<ul>标签开始。每个列表项目以<li>开始。

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

在浏览器中显示如下：

  • Coffee
  • Milk

无序列表的项目中可以加入段落、换行、图像，链接，其他的列表等等。

有序列表

有序列表也是一个项目的序列。各项目前加有数字作标记。

有序列表以<ol>标签开始。每个列表项目以<li>开始。

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

在浏览器中显示如下：

  1. Coffee
  2. Milk

有序列表的项目中可以加入段落、换行、图像，链接，其他的列表等等。

自定义列表

自定义列表不是一个项目的序列，它是一系列条目和它们的解释。

有序列表以<dl>标签开始，自定义列表条目以<dt>开始，自定义列表的定义以<dd>开始。

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

在浏览器中显示如下：

Coffee
Black hot drink
Milk
White cold drink

自定义列表的定义（标签<dd>）中可以加入段落、换行、图像，链接，其他的列表等等。

更多示例：

有序列表的不同类型：

这个例子显示了有序列表的不同类型。

无序列表的不同类型：

这个例子显示了无序列表的不同类型。

嵌套列表：

这个例子说明了可以怎样嵌套列表。

嵌套列表2：

这个例子说明了如何创建一个更复杂化的嵌套列表。

自定义列表：

这个例子说明了如何创建一个自定义列表。


HTML表单

HTML表单用来选择不同种类的用户输入。

示例

文本框：

这个例子说明了在HTML页面中如何创建文本框。在文本框中，用户可以输入文本。

密码框：

这个例子说明了在HTML页面中如何创建密码框。

在这个页面的底部，还有更多例子。

表单

表单是一个能够包含表单元素的区域。

表单元素是能够让用户在表单中输入信息的元素（比如文本框，密码框，下拉菜单，单选框，复选框等等）。

表单是用<form>元素定义的。

<form>
<input>
<input>
</form>

Input

最常用的表单标签是<input>标签。Input的类型用type属性指定。最常用的input类型解释如下：

文本框

在表单中，文本框用来让用户输入字母、数字等等。

<form>
First name:
<input type="text" name="firstname">
<br>
Last name:
<input type="text" name="lastname">
</form>

在浏览器中显示如下：

First name:
Last name:

注意，表单本身并不可见。另外，在多数浏览器中，文本框的宽度默认是20个字符。

单选按钮

当需要用户从有限个选项中选择一个时，使用单选按钮。

<form>
<input type="radio" name="sex" value="male">Male
<br>
<input type="radio" name="sex" value="female">Female
</form>

在浏览器中显示如下：

Male
Female

注意，各选项中只能选取一个。

复选框

当需要用户从有限个选项中选择一个或多个时，使用复选框。

<form>
<input type="checkbox" name="bike">
I have a bike
<br>
<input type="checkbox" name="car">
I have a car
</form>

在浏览器中显示如下：

I have a bike
I have a car

表单的action属性和提交按钮

当用户点击提交按钮的时候，表单的内容会被提交到其他文件。表单的action属性定义了所要提交到的目的文件，该目的文件收到信息后通常进行相关的处理。

<form name="input" action="html_form_action.asp" method="get">
Username:
<input type="text" name="user">
<input type="submit" value="Submit">
</form>

在浏览器中显示如下：

Username:

如果在上面这个文本框中输入一些字符，按下提交按钮以后，输入的字符将被提交到页面“action.asp”。

更多示例：

复选框：

这个例子说明了在HTML页面中如何创建复选框。用户可以选中，也可以取消选择复选框。

单选按钮：

这个例子说明了在HTML页面中如何创建单选按钮。

简单的下拉列表：

这个例子说明了在HTML页面如何创建下拉列表。下拉列表是可以选择的列表。

预选的下拉列表：

这个例子说明了如何创建一个含有预先选定元素的下拉列表。

文本域：

这个例子说明了如何创建文本域（多行文本），用户可以在其中输入文本。在文本域中，字符个数不受限制。

创建按钮：

这个例子说明了如何创建按钮。按钮上的文字可以自己定义。

数据周围的标题边框：

这个例子说明了如何在数据周围画带有标题的边框。

更多示例：

含有文本框和提交按钮的表单：

这个例子说明了在HTML页面中加入表单。这个表单包含了两个文本框和一个提交按钮。

含有复选框的表单：

这个表单包含了两个复选框和一个提交按钮。

含有单选按钮的表单：

这个表单包含了两个单选按钮和一个提交按钮。

从表单发送电子邮件：

这个例子说明了如何从一个表单发送电子邮件。


HTML图像

使用HTML可以在文档中显示图像。

示例

插入图像：

这个例子说明了如何在网页中显示图像。

插入非本地图像：

这个例子说明了如何在网页中显示非本地图像。

在这个页面的底部，还有更多例子。

Img标签和src属性

在HTML里面，图像是由<img>标签定义的。

<img>是空标签，意思是说，它只拥有属性，而没有结束标签。

想要在页面上显示一个图像，需要使用src属性。“src”表示“源”的意思。“src”属性的值是所要显示图像的URL。

插入图像的语法：

<img src="url">

URL指向图像存储的地址。网站“www.w3schools.com”子目录“images”中的图像“boat.gif”的URL如下： “http://www.w3schools.com/images/boat.gif”。

当浏览器在文档中遇到img标签时，就放置一个图像。如果把img标签放在两个段落之间，就会先显示一个段落，然后是这个图像，最后是另外一个段落。

alt属性

alt属性用来给图像显示一个“交互文本”。alt属性的值是由用户定义的。

<img src="boat.gif" alt="Big Boat">

“alt”属性在浏览器装载图像失败的时候告诉用户所丢失的信息，此时，浏览器显示这个“交互文本”来代替图像。给页面上的图像都加上alt属性是一个好习惯，它有助于更好地显示信息，而且，对纯文本浏览器很有用。

基本注意点——有用的技巧

如果一个HTML文档包含10个图像，那么为了正确显示这个页面，需要加载11个文件。加载图像是需要时间的，所以请谨慎使用图像。

更多示例：

背景图像：

这个例子说明了在HTML页面中如何添加背景图像。

对齐图像：

这个例子说明了在文字中如何对齐图像。

浮动图像：

这个例子说明了如何让图像浮动在段落的旁边。

调整图像大小：

这个例子说明了如何改变图像的大小。

图像的交互文本：

这个例子说明了如何为图像创建交互文本。将鼠标放在图像上，将能够看到这个文本。

图像链接：

这个例子说明了如何使用图像作为链接。

图像地图：

这个例子说明了如何创建带有可点击区域的图像地图。每个可点击区域是一个超级链接。

将图像转化为图像地图：

这个例子说明了如何将图像转化为图像地图。将鼠标在图像上移动，状态栏将显示坐标。


HTML背景

好的背景能够让网站变得很美妙。

示例

好的背景和文字颜色：

一个背景色和文字颜色让页面文本更易读的例子。

差的背景和文字颜色：

一个背景色和文字颜色让页面文本不便阅读的例子。

在这个页面的底部，还有更多例子。

背景

<body>标签有两个属性可以指定背景。背景可以是颜色，也可以是图像。

bgcolor

bgcolor属性将背景设置为颜色，它的值可以是一个十六进制数、RGB值或者一种颜色名称。

<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">

上面三条语句都可以把页面背景设置成黑色。

background

background属性将背景设置为图像，它的值是你所要使用图像的URL地址。如果这个图像的大小不及浏览器窗口，它将平铺占满窗口。

<body background="clouds.gif">
<body background="http://www.w3schools.com/clouds.gif">

URL地址可以是相对地址（上面第一条语句），也可以是绝对地址（上面第二条语句）。

注意：如果打算使用背景图像，应该牢记：
  • 这个图像会使页面加载时间过长吗？小技巧：图像文件的容量尽量不要超过10K。
  • 这个图像跟页面上其他图像协调吗？
  • 这个图像跟页面上的文字颜色协调吗？
  • 这个图像平铺了以后看起来还可以吗？
  • 这个图像吸引了文字的注意力，喧宾夺主了吗？

基本注意点——有用的技巧

<body>标签的bgcolor、background和text属性在最新的HTML标准（HTML4和XHTML）中已被废弃。W3C在他们的推荐中已删除这些属性。在HTML的未来版本中，层叠样式表（CSS）将被用来定义HTML元素的布局和显示属性。

一般的网站很少使用背景图像。

最常用的背景颜色是黑色、白色和灰色。

更多示例：

好的背景图像：

一个背景图像和文字颜色让页面文本易于阅读的例子。

好的背景图像2：

另一个背景图像和文字颜色让页面文本易于阅读的例子。

差的背景图像：

一个背景图像和文字颜色让页面文本不便阅读的例子。