html学习.doc

什么是 HTML 文件？ HTML 指超文本标签语言。 HTML 文件是包含一些标签的文本文件。 这些标签告诉 WEB 浏览器如何显示页面。 HTML 文件必须使用 htm 或者 html 作为文件扩展名。 HTML 文件可以通过简单的文本编辑器来创建。 做个实验如何？第一步：如果您使用 Windows，请启动记事本。如果您使用 Mac，请启动 SimpleText。（在 OSX 中请使用 TextEdit，并设置一下参数：在参数设置中选择 Plain text 字体替代 Rich text 字体，然后选择“在 HTML 文件中忽略 rich text 命令”。这一点很重要，因为不这样的话，HTML 代码也许不能正常工作。）第二步：键入以下文本：页面的标题这是我的第一个页面。这是粗体文本。第三步：将这个文件存为 mypage.html。第四步：启动您的浏览器。在浏览器的文件菜单中选择“打开”或者“打开页面”。这时会弹出一个对话框。单击“浏览”或者“选择文件”，找到您刚才创建的文件 - mypage.html，选定它然后打开，现在您会看到对话框中有一行地址，比如：D:mypage.html。单击确定按钮，浏览器就会显示这个页面。例子解释：HTML 文件中的第一个标签是 。这个标签告诉浏览器这个 HTML 文件的开始点。文件中最后一个标签是 。这个标签告诉您的浏览器，这是 HTML 文件的结束点。位于 标签和 标签之间的文本是头信息。头信息不会显示在浏览器窗口中。 标签中的文本是文件的标题。标题会显示在浏览器的标题栏。 标签中的文本是将被浏览器显示出来的文本。 和 标签中的文本将以粗体显示。为什么我们要使用小写的标签？我们刚才讲到：HTML 标签对大小写是不敏感的： 和 的作用的相同的。当您在网上冲浪时，您会发现大多数教程在他们的例子中都使用大写的 HTML 标签。而我们总是使用小写。原因何在呢？如果您希望为使用下一代 HTML 而做好准备，您就应该使用小写标签。万维网联盟 (W3C) 的标准是：建议在 HTML 4 中使用小写标签，而在 XHTML（下一代 HTML）中，必须使用小写标签。HTM 还是 HTML 扩展名？当您将一个 HTML 文件存盘时，您即可以使用 HTM 也可以使用 HTML 作为扩展名。我们刚才使用了 .htm 作为上面那个例子的扩展名。不过这样做也许是一个坏习惯，习惯于这样做的人也许是因为使用某些过时的软件而养成了这个坏习惯，这些软件只允许三个字母作为扩展名。如果您使用新近的软件，我们认为使用 .html 是相当安全的做法。关于 HTML 编辑器的注意事项:您可以使用所见即所得的编辑器而不是纯文本编辑器，这样会更轻松的编辑 HTML 文件。比方说 FrontPage, Claris Home Page, 或者 Adobe PageMill，甚至更高阶的 Dreamweaver。但是，如果您希望成为一名熟练的开发人员，我们强烈推荐您使用纯文本编辑器来学习我们的HTML 基础教程。常见问题（FAQ）Q：我已经编辑了一个 HTML 文件，但是浏览器无法显示出结果。为什么？A：首先确定您使用了正确的文件名和扩展名存盘，比如说 c:mypage.htm。然后看一下是否在浏览器中使用了同样的文件名来打开这个文件。Q：我重新编辑了 HTML 文件，但是浏览器的显示没有任何变化。为什么？A：为了不重复读取同一个页面，浏览器要对您的页面进行缓存。浏览器不会意识到您已经修改了页面。通过使用刷新或者重载按钮，您可以使浏览器读取编辑后的页面。Q：我应该使用何种浏览器？A：您可以使用任何一款通用浏览器进行训练，例如 Internet Explorer, Mozilla, Netscape,或者 Opera。不过，我们的高级课程中的某些例子需要最新版本的浏览器的支持。Q：我的电脑必须运行 Windows 吗？使用 Mac 机可以吗？A：您可以在非 Windows 系统上进行所有的训练，比如 Mac。HTML 文档是由 HTML 元素构成的文本文件。HTML 元素是通过使用 HTML 标签进行定义的。HTML 标签 HTML 标签是用来标记 HTML 元素的。 HTML 标签被 符号包围。 这些包围的符号叫作尖括号。 HTML 标签是成对出现的。例如 和 。 位于起始标签和终止标签之间的文本是元素的内容。 HTML 标签对大小写不敏感， 和 的作用的相同的。 HTML 元素还记得上一节中的那个例子吗：页面的标题这是我的第一个页面。此文本是粗体的。这就是一个 HTML 元素：此文本是粗体的。这个 HTML 元素由起始标签 开始。这个元素的内容是：“此文本是粗体的。”。这个 HTML 元素由终止标签 结尾。 标签的作用是定义一个显示为粗体的 HTML 元素。这也是一个 HTML 元素：这是我的第一个页面。此文本是粗体的。这个 HTML 元素开始于 标签，结束于 标签。 标签的作用是定义 HTML 文件中的容纳 body 的 HTML 元素。为什么我们要使用小写的标签？我们刚才讲到：HTML 标签对大小写是不敏感的： 和 的作用的相同的。当您在网上冲浪时，您会发现大多数教程在他们的例子中都使用大写的HTML标签。而我们总是使用小写。原因何在呢？如果您希望为使用下一代HTML而做好准备，您就应该使用小写标签。万维网协会 (W3C) 的标准是：建议在 HTML 4 中使用小写标签，而在 XHTML（下一代 HTML）中，必须使用小写标签。基本的 HTML 标签TML 中最重要的标签是定义标题、段落和换行的标签。学习 HTML 最好的方式就是边学边做实验。我们为您准备了很好的 HTML 编辑器。使用这个编辑器，您可以任意编辑一段 HTML 源码，然后单击 TIY 按钮来查看结果。实例一个简单的 HTML 文件 这个例子是一个很简单的 HTML 文件，使用了尽可能少的 HTML 标签。它向您演示了 body 元素中的内容是如何被浏览器显示的。 简单的段落 此例演示：段落元素中的文字如何被浏览器显示。 （您可以在页面的底部找到更多实例）标题标题使用 至 标签进行定义。 定义最大的标题。 定义最小的标题。This is a headingThis is a headingThis is a headingThis is a headingThis is a headingThis is a headingHTML 会自动在标题前后添加一个额外的折行。段落段落使用 标签进行定义。This is a paragraphThis is another paragraphHTML 会自动在段落前后添加一个额外的空行。不要忘记关闭标签您可能注意到了，在编写段落时可以不带有 标签：This is a paragraphThis is another paragraph上面的例子在大多数浏览器中都可以工作，但是不要依赖这种做法。HTML 未来的版本不允许省略任何结束标签。通过结束标签来关闭 HTML 是一种经得起未来考验的 HTML 编写方法。清楚地标记某个元素在何处开始，并在何处结束，不论对您还是对浏览器来说，都会使代码更容易理解。换行符当你打算结束一行，而又不想开始一个新段落时， 标签就派上用场了。无论你将它置于何处， 标签都会产生一个强制的换行。This is a paragraph with line breaks 标签是空白标签，由于关闭标签没有任何意义，因此它没有类似 的终止标签。 还是 您会越来越多地发现 与 很相似。由于 没有结束标签，它也就违反了未来的 HTML 的规则之一，即所有的元素都必须关闭。把这个标签写为 是经得起未来考验的做法，XHTML 和 XML 都接受在打开的标签内部来关闭标签的做法。HTML 注释注释标签用于在 HTML 源码中插入注释。注释会被浏览器忽略。您可以使用注释对您的代码进行解释，这么做在以后的日子里会对您的代码编辑产生帮助。注意：左括号后需要写一个惊叹号，右括号前就不需要了。对 HTML 元素的重新认识 每个 HTML 元素都有一个元素名（比如 body、h1、p、br） 开始标签是被括号包围的元素名 结束标签是被括号包围的斜杠和元素名 元素内容位于开始标签和结束标签之间 某些 HTML 元素没有内容 某些 HTML 元素没有结束标签 基本的注意事项 - 有益的提示当您写 HTML 文本的时候，你永远也没法确定这些文本在另一台显示器上是如何显示的。一些人使用大显示器，而另一些使用小的。当用户调整视窗的分辨率时，这些文本就会被重新格式化。所以不要通过在文本中添加空行和空格的办法在你的编辑器中格式化文本。HTML 会裁掉文本中所有的空格。任何数量的空格都被按一个空格计数。另外，在 HTML 中，一个空行也被当作一个空格。使用空的段落标记 去插入一个空行是个坏习惯。用 标签代替它！（但是不要用 标签去创建列表。不要着急，您将在稍后的篇幅学习到 HTML 列表。）您也许已经注意到了，在没有结束标签 的情况下， 标签依然可以正常工作。不过不要这样做！下一个版本的 HTML 将不允许忽略任何的结束标签。HTML 会自动地在某些元素前后添加一个额外的空行，比如段落、标题元素前后。使用水平线 ( 标签) 来分隔文章中的小节是一个办法（但并不是唯一的办法）。更多实例更多的段落 本例演示段落元素的某些缺省的行为。 “诗歌”问题 本例演示 HTML 格式化的某些问题。 折行 本例演示在 HTML 文档中折行的使用。 标题 本例演示在 HTML 文档中显示标题的标签。 水平线 本例演示如何插入水平线。 隐藏的注释 本例演示如何在 HTML 源代码中插入隐藏的注释。 基本的 HTML 标签标签描述定义 HTML 文档。定义文档的主体。 to 定义标题 1 至标题 6。定义段落。插入折行。定义水平线。定义注释。HTML 属性属性为 HTML 元素提供附加信息。HTML 标签的属性HTML 标签拥有属性。属性为 HTML 元素提供附加信息。属性总是以名称/值对的形式出现，比如：name=value属性总是在 HTML 元素的开始标签中规定。属性例子 1: 定义标题的开始。 拥有关于对齐方式的附加信息。TIY : 居中排列标题属性例子 2: 定义 HTML 文档的主体。 拥有关于背景颜色的附加信息。TIY : 背景颜色属性例子 3: 定义 HTML 表格。（您将在稍后的章节学习到更多有关 HTML 表格的内容） 拥有关于表格边框的附加信息。使用小写属性属性和属性值对大小写不敏感。不过，万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值，而 XHTML 要求使用小写属性/属性值。始终为属性值加引号属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：name=John ShotGun Nelson HTML 文本格式化HTML 可定义很多供格式化输出的元素，比如粗体和斜体字。下面有很多例子，您可以亲自试试：HTML 文本格式化实例文本格式化 此例演示如何在一个 HTML 文件中对文本进行格式化 预格式文本 此例演示如何使用 pre 标签对空行和空格进行控制。 “计算机输出”标签 此例演示不同的“计算机输出”标签的显示效果。 地址 此例演示如何在 HTML 文件中写地址。 缩写和首字母缩写 此例演示如何实现缩写或首字母缩写。 文字方向 此例演示如何改变文字的方向。 块引用 此例演示如何实现长短不一的引用语。 删除字效果和插入字效果 此例演示如何标记删除文本和插入文本。 如何查看 HTML 源码您是否有过这样的经历，当你看到一个很棒的站点，你会很想知道开发人员是如何将它实现的？你有没有看过一些网页，并且想知道它是如何做出来的呢？要揭示一个网站的技术秘密，其实很简单。单击浏览器的“查看”菜单，选择“查看源文件”即可。随后你会看到一个弹出的窗口，窗口内就是实际的 HTML 代码。文本格式化标签标签描述定义粗体文本。定义大号字。定义着重文字。定义斜体字。定义小号字。定义加重语气。定义下标字。定义上标字。定义插入字。定义删除字。不赞成使用。使用 代替。不赞成使用。使用 代替。不赞成使用。使用样式（style）代替。“计算机输出”标签标签描述定义计算机代码。定义键盘码。定义计算机代码样本。定义打字机代码。定义变量。定义预格式文本。不赞成使用。使用 代替。不赞成使用。使用 代替。不赞成使用。使用 代替。引用、引用和术语定义标签描述定义缩写。定义首字母缩写。定义地址。定义文字方向。定义长的引用。定义短的引用语。定义引用、引证。定义一个定义项目。HTML 字符实体诸如 “” 之类的符号在HTML中拥有特殊的含义，所以在文本中使用它们。为了在 HTML 中显示小于号 ()，我们需要使用字符实体。字符实体一些字符在 HTML 中拥有特殊的含义，比如小于号 () 用于定义 HTML 标签的开始。如果我们希望浏览器正确地显示这些字符，我们必须在 HTML 源码中插入字符实体。字符实体有三部分：一个和号 (&)，一个实体名称，或者 # 和一个实体编号，以及一个分号 (;)。要在 HTML 文档中显示小于号，我们需要这样写：< 或者 使用实体名称而不是实体编号的好处在于，名称相对来说更容易记忆。而这么做的坏处是，并不是所有的浏览器都支持最新的实体名称，然而几乎所有的浏览器对实体编号的支持都很好。注意：实体对大小写敏感。亲手实验一下字符实体。（仅支持IE）空格空格是 HTML 中最普通的字符实体。通常情况下，HTML 会裁掉文档中的空格。假如你在文档中连续输入 10 个空格，那么 HTML 会去掉其中的9个。如果使用  ，就可以在文档中增加空格。最常用的字符实体显示结果描述实体名称实体编号空格 大于号>&和号&引号"撇号' (IE不支持)其他一些常用的字符实体显示结果描述实体名称实体编号分¢镑£日圆¥节§版权©注册商标®乘号×除号÷HTML 链接HTML 使用超级链接与网络上的另一个文档相连。实例创建超级链接 本例演示如何在 HTML 文档中创建链接。 将图像作为链接 本例演示如何使用图像作为链接。 （可以在本页底端找到更多实例。）锚标签和 Href 属性HTML 使用 （锚）标签来创建连接另一个文档的链接。锚可以指向网络上的任何资源：一张 HTML 页面，一幅图像，一个声音或视频文件等等。创建锚的语法：Text to be displayed 用来创建锚。href 属性用于定位需要链接的文档，锚的开始标签和结束标签之间的文字被作为超级链接来显示。这个锚定义了指向 w3school 的链接：Visit W3School!上面的这行在浏览器中显示为这样：Visit W3School!Target 属性使用 Target 属性，你可以定义被链接的文档在何处显示。下面的这行会在新窗口打开文档：Visit W3School!锚标签和 Name 属性Name 属性用于创建被命名的锚（named anchors）。当使用命名锚（named anchors）时，我们可以创建直接跳至页面中某个节的链接，这样使用者就无需不停的滚动页面来寻找他们需要的信息。以下是命名锚的语法：Text to be displayedname 属性用于创建命名锚。锚的名称可以是任何你喜欢的名字。下面这行定义了命名锚：Useful Tips Section你会注意到，命名锚会以特殊的方式来显示。将 # 符号和锚名称添加到 URL 的末端，就可以直接链接到 tips 这个节，就像这样：Jump to the Useful Tips Section从文件 html_links.asp 内部链接到 Useful Tips 节的超级链接是这样的：跳转到 有用的提示 部分 基本的注意事项 - 有用的提示：总是将正斜杠添加到子文件夹。假如你这样书写链接的话：href=/html，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href=/html/ 命名锚经常被用在长的文档中创建目录。可以为每个章节赋予一个命名锚，然后连接到这些锚的链接被置于文档的上部。假如浏览器找不到已定义的命名锚，那么就会定位到文档的顶端。不会有错误发生。更多实例在新的浏览器窗口打开链接 本例演示如何在新窗口打开一个页面，这样的话访问者就无需离开你的站点了。 链接到同一个页面的不同位置 本例演示如何使用链接跳转至文档的另一个部分 跳出框架 本例演示如何跳出框架，假如你的页面被固定在框架之内。 创建电子邮件链接 本例演示如何如何链接到一个邮件。（本例在安装邮件客户端程序后才能工作。） 创建电子邮件链接 2 本例演示更加复杂的邮件链接。 链接标签标签描述定义锚。HTML 框架通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。实例垂直框架 本例演示：如何使用三份不同的文档制作一个垂直框架。 水平框架 本例演示：如何使用三份不同的文档制作一个水平框架。 （可以在本页底端找到更多实例。）框架通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。使用框架的坏处：开发人员必须同时跟踪更多的HTML文档 很难打印整张页面 框架结构标签（） 框架结构标签（）定义如何将窗口分割为框架 每个 frameset 定义了一系列行或列 rows/columns 的值规定了每行或每列占据屏幕的面积 编者注：frameset 标签也被某些文章和书籍译为框架集。框架标签（Frame）Frame 标签定义了放置在每个框架中的 HTML 文档。在下面的这个例子中，我们设置了一个两列的框架集。第一列被设置为占据浏览器窗口的 25%。第二列被设置为占据浏览器窗口的 75%。HTML 文档 frame_a.htm 被置于第一个列中，而 HTML 文档 frame_b.htm 被置于第二个列中： 基本的注意事项 - 有用的提示：假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在 标签中加入：noresize=noresize。为不支持框架的浏览器添加 标签。重要提示：不能将 标签与 标签同时使用！不过，假如你添加包含一段文本的 标签，就必须将这段文字嵌套于 标签内。（在下面的第一个实例中，可以查看它是如何实现的。）更多实例如何使用 标签 本例演示：如何使用 标签。 混合框架结构 本例演示如何制作含有三份文档的框架结构，同时将他们混合置于行和列之中。 含有 noresize=noresize 属性的框架结构 本例演示 noresize 属性。在本例中，框架是不可调整尺寸的。在框架间的边框上拖动鼠标，你会发现边框是无法移动的。 导航框架 本例演示如何制作导航框架。导航框架包含一个将第二个框架作为目标的链接列表。名为 contents.htm 的文件包含三个链接。 内联框架 本例演示如何创建内联框架（HTML 页中的框架）。 跳转至框架内的一个指定的节 本例演示两个框架。其中的一个框架设置了指向另一个文件内指定的节的链接。这个link.htm文件内指定的节使用 进行标识。 使用框架导航跳转至指定的节 本例演示两个框架。左侧的导航框架包含了一个链接列表，这些链接将第二个框架作为目标。第二个框架显示被链接的文档。导航框架其中的链接指向目标文件中指定的节。 HTML 表格你可以使用 HTML 创建表格。实例表格 这个例子演示如何在 HTML 文档中创建表格。 表格边框 本例演示各种类型的表格边框。 （可以在本页底端找到更多实例。）表格表格由 标签来定义。每个表格均有若干行（由 标签定义），每行被分割为若干单元格（由 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。row 1, cell 1row 1, cell 2row 2, cell 1row 2, cell 2在浏览器显示如下：row 1, cell 1row 1, cell 2row 2, cell 1row 2, cell 2表格和边框属性如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。使用边框属性来显示一个带有边框的表格Row 1, cell 1Row 1, cell 2表格的表头表格的表头使用 标签进行定义。HeadingAnother Headingrow 1, cell 1row 1, cell 2row 2, cell 1row 2, cell 2在浏览器显示如下：HeadingAnother Headingrow 1, cell 1row 1, cell 2row 2, cell 1row 2, cell 2表格中的空单元格在大多数浏览器中，没有内容的表格单元显示得不太好。row 1, cell 1row 1, cell 2row 2, cell 1在浏览器显示如下：row 1, cell 1row 1, cell 2row 2, cell 1注意：这个空的单元格的边框没有被显示出来。（不过 Mozilla Firefox 可以将整个边框显示出来。）为了避免这种情况，在空单元格中添加一个空格占位符，就可以将边框显示出来。row 1, cell 1row 1, cell 2row 2, cell 1 在浏览器中显示如下：row 1, cell 1row 1, cell 2row 2, cell 1基本的注意事项 - 有用的提示：, 和 很少被用到，这是由于浏览器对它们的支持不太好。希望这种情况在未来版本的 XHTML 中会有所改观。如果你使用 IE5.0 或者更新的版本，可以查看在我们的XML教程中的具体例子。更多实例没有边框的表格 本例演示一个没有边框的表格。 表格中的表头(Heading) 本例演示如何显示表格表头。 空单元格 本例展示如何使用   处理没有内容的单元格。 带有标题的表格 本例演示一个带标题 (caption) 的表格 跨行或跨列的表格单元格 本例演示如何定义跨行或跨列的表格单元格。 表格内的标签 本例演示如何显示在不同的元素内显示元素。 单元格边距(Cell padding) 本例演示如何使用 Cell padding 来创建单元格内容与其边框之间的空白。 单元格间距(Cell spacing) 本例演示如何使用 Cell spacing 增加单元格之间的距离。 向表格添加背景颜色或背景图像 本例演示如何向表格添加背景。 向表格单元添加背景颜色或者背景图像 本例演示如何向一个或者更多表格单元添加背景。 在表格单元中排列内容 本例演示如何使用 align 属性排列单元格内容,以便创建一个美观的表格。 框架(frame)属性 本例演示如何使用 frame 属性来控制围绕表格的边框。 表格标签表格描述定义表格定义表格标题。定义表格的表头。定义表格的行。定义表格单元。定义表格的页眉。定义表格的主体。定义表格的页脚。定义用于表格列的属性。定义表格列的组。 HTML 列表 HTML 支持有序、无序和定义列表实例无序列表 本例演示无序列表。 有序列表 本例演示有序列表。 （可以在本页底端找到更多实例。）无序列表无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表始于 标签。每个列表项始于 。CoffeeMilk浏览器显示如下： Coffee Milk 列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。有序列表同样，有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于 标签。每个列表项始于 标签。CoffeeMilk浏览器显示如下：1. Coffee 2. Milk 列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。定义列表自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以 标签开始。每个自定义列表项以 开始。每个自定义列表项的定义以 开始。CoffeeBlack hot drinkMilkWhite cold drink浏览器显示如下：Coffee Black hot drink Milk White cold drink 定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。更多实例不同类型的无序列表 本例演示一个无序列表。 不同类型的有序列表 本例演示不同类型的有序列表。 嵌套列表 本例演示如何嵌套列表。 嵌套列表 2 本例演示更复杂的嵌套列表。 定义列表 本例演示一个定义列表。 列表标签标签描述定义有序列表。定义无序列表。定义列表项。定义定义列表。定义定义项目。定义定义的描述。已废弃。使用 代替它。已废弃。使用 代替它。 HTML 表单和输入 HTML 表单用于搜集不同类型的用户输入。实例文本域(Text fields) 本例演示如何在 HTML 页面创建文本域。用户可以在文本域中写入文本。 密码域 本例演示如何创建 HTML 的密码域。 （可以在本页底端找到更多实例。）表单表单是一个包含表单元素的区域。表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。表单使用表单标签（）定义。 输入多数情况下被用到的表单标签是输入标签（）。输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：文本域（Text Fields）当用户要在表单中键入字母、数字等内容时，就会用到文本域。First name: Last name: 浏览器显示如下：窗体顶端First name: Last name: 窗体底端注意，表单本身并不可见。同时，在大多数浏览器中，文本域的缺省宽度是20个字符。单选按钮（Radio Buttons）当用户从若干给定的的选择中选取其一时，就会用到单选框。 Male Female浏览器显示如下：窗体顶端Male Female 窗体底端注意，只能从中选取其一。复选框（Checkboxes）当用户需要从若干给定的选择中选取一个或若干选项时，就会用到复选框。I have a bikeI have a car浏览器显示如下：窗体顶端I have a bike I have a car 窗体底端表单的动作属性（Action）和确认按钮当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。Username: 浏览器显示如下：窗体顶端Username: 窗体底端假如你再上面的文本框内键入几个字母，并且点击确认按钮，那么输入数据会被传送到名为html_form_action.asp的页面。那一页将显示出输入的结果。更多实例复选框 本例演示如何在 HTML 页中创建复选框。用户可以选中或取消选取复选框。 单选按钮 本例演示如何在 HTML 中创建单选按钮。 简单的下拉列表 本例演示如何在 HTML 页面中创建简单的下拉列表框。下拉列表框是一个可选列表。 另一个下拉列表 本例演示如何创建一个简单的带有预选值的下拉列表。（译者注：预选值指预先指定的首选项。） 文本域(Textarea) 本例演示如何创建一个文本域（多行文本输入控件）。用户可以在文本域中写入文本。在文本域中，可写入的字符字数不受限制。 创建按钮 本例演示如何创建按钮。你可以对按钮上的文字进行自定义。 Fieldset around data 本例演示如何在数据周围绘制一个带标题的框。 表单实例带有输入框和确认按钮的表单 本例演示如何向页面添加表单。此表单包含两个输入框和一个确认按钮。 带有复选框的表单 此表单包含两个复选框和一个确认按钮。 带有单选按钮的表单 此表单包含两个单选框和一个确认按钮。 从表单发送电子邮件 此例演示如何从表单发送电子邮件。 表单标签标签描述定义供用户输入的表单定义输入域定义文本域 (一个多行的输入控件)定义一个控制的标签定义域定义域的标题定义一个选择列表定义选项组定义下拉列表中的选项定义一个按钮已废弃。有代替。 HTML 图像通过使用 HTML，可以在文档中显示图像。实例插入图像 本例演示如何在网页中显示图像。 从不同的位置插入图片 本例演示如何将其他文件夹或服务器的图片显示到网页中。 （可以在本页底端找到更多实例。）图像标签（）和源属性（Src）在 HTML 中，图像由 标签定义。 是空标签，意思是说，它只包含属性，并且没有闭合标签。要在页面上显示图像，你需要使用源属性（src）。src 指 source。源属性的值是图像的 URL 地址。定义图像的语法是：URL 指存储图像的位置。如果名为 boat.gif 的图像位于 的 images 目录中，那么其 URL 为 /images/boat.gif。浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。替换文本属性（Alt）alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。基本的注意事项 - 有用的提示：假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件。加载图片是需要时间的，所以我们的建议是：慎用图片。更多实例背景图片 本例演示如何向 HTML 页面添加背景图片。 排列图片 本例演示如何在文字中排列图像。 浮动图像 本例演示如何使图片浮动至段落的左边或右边。 调整图像尺寸 本例演示如何将图片调整到不同的尺寸。 为图片显示替换文本 本例演示如何为图片显示替换文本。在浏览器无法载入图像时，替换文本属性告诉读者们失去的信息。为页面上的图像都加上替换文本属性是个好习惯。 制作图像链接 本例演示如何将图像作为一个链接使用。 创建图像映射 本例显示如何创建带有可供点击区域的图像地图。其中的每个区域都是一个超级链接。 把图像转换为图像映射 本例显示如何把一幅普通的图像设置为图像映射。 图像标签标签描述定义图像。定义图像地图。定义图像地图中的可点击区域。 HTML 背景好的背景使站点看上去特别棒。实例搭配良好的背景和颜色 一个背景颜色和文字颜色搭配良好的例子，使页面中的文字易于阅读。 搭配得不好的背景和颜色 一个背景颜色和文字颜色搭配得不好的例子，使页面中的文字难于阅读。 （可以在本页底端找到更多实例。）背景（Backgrounds） 拥有两个配置背景的标签。背景可以使颜色或者图像。背景颜色（Bgcolor）背景颜色属性将背景设置为某种颜色。属性值可以是十六进制数、RGB 值或颜色名。以上的代码均将背景颜色设置为黑色。背景（Background）背景属性将背景设置为图像。属性值为图像的URL。如果图像尺寸小于浏览器窗口，那么图像将在整个浏览器窗口进行复制。URL可以是相对地址，如第一行代码。也可以使绝对地址，如第二行代码。提示：如果你打算使用背景图片，你需要紧记一下几点： 背景图像是否增加了页面的加载时间。小贴士：图像文件不应超过 10k。 背景图像是否与页面中的其他图象搭配良好。 背景图像是否与页面中的文字颜色搭配良好。 图像在页面中平铺后，看上去还可以吗？ 对文字的注意力被背景图像喧宾夺主了吗？ 基本的注意事项 - 有用的提示： 标签中的背景颜色（bgcolor）、背景（background）和文本（text）属性在最新的 HTML 标准（HTML4 和 XHTML）中已被废弃。W3C 在他们的