HTML学习笔记

摘自：http://www.w3school.com.cn/html/

HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

   1:  <html>
   2:  <body>
   3:   
   4:  <h1>My First Heading</h1>
   5:   
   6:  <p>My first paragraph.</p>
   7:   
   8:  </body>
   9:  </html>
例子解释
  • <html> 与 </html> 之间的文本描述网页
  • <body> 与 </body> 之间的文本是可见的页面内容
  • <h1> 与 </h1> 之间的文本被显示为标题
  • <p> 与 </p> 之间的文本被显示为段落

HTML 标题

HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。<h1> 定义最大的标题。<h6> 定义最小的标题。

   1:  <html>
   2:   
   3:  <body>
   4:   
   5:  <h1>This is heading 1</h1>
   6:  <h2>This is heading 2</h2>
   7:  <h3>This is heading 3</h3>
   8:  <h4>This is heading 4</h4>
   9:  <h5>This is heading 5</h5>
  10:  <h6>This is heading 6</h6>
  11:   
  12:  <p>请仅仅把标题标签用于标题文本。不要仅仅为了产生粗体文本而使用它们。请使用其它标签或 CSS 代替。</p>
  13:   
  14:  </body>
  15:  </html>

HTML 段落

HTML 段落是通过 <p> 标签进行定义的。

注释：浏览器会自动地在段落的前后添加空行。（<p> 是块级元素）

提示：使用空的段落标记 <p></p> 去插入一个空行是个坏习惯。用 <br /> 标签代替它！（但是不要用 <br /> 标签去创建列表。不要着急，您将在稍后的篇幅学习到 HTML 列表。）

   1:  <html>
   2:  <body>
   3:   
   4:  <p>这是段落。</p>
   5:  <p>这是段落。</p>
   6:  <p>这是段落。</p>
   7:   
   8:  <p>段落元素由 p 标签定义。</p> 
   9:   
  10:  </body>
  11:  </html>

HTML 链接

HTML 链接是通过 <a> 标签进行定义的。

   1:  <html>
   2:  <body>
   3:   
   4:  <a href="http://www.w3school.com.cn">
   5:  This is a link</a>
   6:   
   7:  </body>
   8:  </html>

注释：在 href 属性中指定链接的地址。

HTML 图像

HTML 图像是通过 <img> 标签进行定义的。

   1:  <html>
   2:  <body>
   3:   
   4:  <img src="/i/eg_w3school.gif" width="300" height="120" />
   5:   
   6:  </body>
   7:  </html>

注释：图像的名称和尺寸是以属性的形式提供的。

HTML 元素语法

  • HTML 元素以开始标签起始
  • HTML 元素以结束标签终止
  • 元素的内容是开始标签与结束标签之间的内容
  • 某些 HTML 元素具有空内容（empty content）
  • 空元素在开始标签中进行关闭（以开始标签的结束而结束）
  • 大多数 HTML 元素可拥有属性

空的 HTML 元素

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。

<br> 就是没有关闭标签的空元素（<br> 标签定义换行）。

在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。

在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。

即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。

HTML 提示：使用小写标签

HTML 标签对大小写不敏感：<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。

W3School 使用的是小写标签，因为万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写。

HTML 属性

HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。

属性总是以名称/值对的形式出现，比如：name="value"。

属性总是在 HTML 元素的开始标签中规定。

属性例子 1:

<h1> 定义标题的开始。

<h1 align="center"> 拥有关于对齐方式的附加信息。

   1:  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   2:  "http://www.w3.org/TR/html4/loose.dtd">
   3:   
   4:  <html>
   5:   
   6:  <body>
   7:   
   8:  <h1 align="center">This is heading 1</h1>
   9:   
  10:  <p>上面的标题在页面中进行了居中排列。上面的标题在页面中进行了居中排列。上面的标题在页面中进行了居中排列。</p>
  11:   
  12:  </body>
  13:  </html>
属性例子 2:

<body> 定义 HTML 文档的主体。

<body bgcolor="yellow"> 拥有关于背景颜色的附加信息。

   1:  <html>
   2:  <head>
   3:  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
   4:  <meta http-equiv="Content-Language" content="zh-cn" />
   5:  </head>
   6:   
   7:  <body bgcolor="yellow">
   8:  <h2>请看: 改变了颜色的背景。</h2>
   9:  </body>
  10:   
  11:  </html>
属性例子 3:

<table> 定义 HTML 表格。（您将在稍后的章节学习到更多有关 HTML 表格的内容）

<table border="1"> 拥有关于表格边框的附加信息。

始终为属性值加引号

属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。

在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：

   1:  name='Bill "HelloWorld" Gates'

HTML 水平线

<hr /> 标签在 HTML 页面中创建水平线。

hr 元素可用于分隔内容。

   1:  <html>
   2:   
   3:  <body>
   4:  <p>hr 标签定义水平线：</p>
   5:  <hr />
   6:  <p>这是段落。</p>
   7:  <hr />
   8:  <p>这是段落。</p>
   9:  <hr />
  10:  <p>这是段落。</p>
  11:  </body>
  12:  </html>

提示：使用水平线 (<hr> 标签) 来分隔文章中的小节是一个办法（但并不是唯一的办法）。

HTML 注释

   1:  <html>
   2:   
   3:  <body>
   4:   
   5:  <!--这是一段注释。注释不会在浏览器中显示。-->
   6:   
   7:  <p>这是一段普通的段落。</p>
   8:   
   9:  </body>
  10:  </html>

HTML 折行

如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br /> 标签。

<br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。

   1:  <html>
   2:   
   3:  <body>
   4:   
   5:  <p>
   6:  To break<br />lines<br />in a<br />paragraph,<br />use the br tag.
   7:  </p>
   8:   
   9:  </body>
  10:  </html>

HTML 输出 - 有用的提示

我们无法确定 HTML 被显示的确切效果。屏幕的大小，以及对窗口的调整都可能导致不同的结果。

对于 HTML，您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。

当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。

<html>
 
<body>
 
<h1>春晓</h1>
 
<p>
    春眠不觉晓，
      处处闻啼鸟。
        夜来风雨声，
          花落知多少。
</p>
 
<p>注意，浏览器忽略了源代码中的排版（省略了多余的空格和换行）。</p>
 
</body>
 
</html>

HTML 文本格式化实例

文本格式化

此例演示如何在一个 HTML 文件中对文本进行格式化

<html>
 
<body>
 
<b>This text is bold</b>
 
<br />
 
<strong>This text is strong</strong>
 
<br />
 
<big>This text is big</big>
 
<br />
 
<em>This text is emphasized</em>
 
<br />
 
<i>This text is italic</i>
 
<br />
 
<small>This text is small</small>
 
<br />
 
This text contains
<sub>subscript</sub>
 
<br />
 
This text contains
<sup>superscript</sup>
 
</body>
</html>
预格式文本
此例演示如何使用 pre 标签对空行和空格进行控制。 
<html>

<body>

<pre>
这是
预格式文本。
它保留了      空格
和换行。
</pre>

<p>pre 标签很适合显示计算机代码：</p>

<pre>
for i = 1 to 10
     print i
next i
</pre>

</body>
</html>
“计算机输出”标签
此例演示不同的“计算机输出”标签的显示效果。 
<html>

<body>

<code>Computer code</code>
<br />
<kbd>Keyboard input</kbd>
<br />
<tt>Teletype text</tt>
<br />
<samp>Sample text</samp>
<br />
<var>Computer variable</var>
<br />

<p>
<b>注释：</b>这些标签常用于显示计算机/编程代码。
</p>

</body>
</html>
地址
此例演示如何在 HTML 文件中写地址。 
<!DOCTYPE html>
<html>
<body>

<address>
Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.<br> 
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

</body>
</html>
缩写和首字母缩写
此例演示如何实现缩写或首字母缩写。 
   1:  <html>
   2:   
   3:  <body>
   4:   
   5:  <abbr title="etcetera">etc.</abbr>
   6:  <br />
   7:  <acronym title="World Wide Web">WWW</acronym>
   8:   
   9:  <p>在某些浏览器中，当您把鼠标移至缩略词语上时，title 可用于展示表达的完整版本。</p>
  10:   
  11:  <p>仅对于 IE 5 中的 acronym 元素有效。</p>
  12:   
  13:  <p>对于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。</p>
  14:   
  15:  </body>
  16:  </html>

文字方向
此例演示如何改变文字的方向。 
   1:  <html>
   2:   
   3:  <body>
   4:   
   5:  <p>
   6:  如果您的浏览器支持 bi-directional override (bdo)，下一行会从右向左输出 (rtl)；
   7:  </p>
   8:   
   9:  <bdo dir="rtl">
  10:  Here is some Hebrew text
  11:  </bdo>
  12:   
  13:  </body>
  14:  </html>
块引用
此例演示如何实现长短不一的引用语。 
   1:  <html>
   2:   
   3:  <body>
   4:   
   5:  这是长的引用：
   6:  <blockquote>
   7:  这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。
   8:  </blockquote>
   9:   
  10:  这是短的引用：
  11:  <q>
  12:  这是短的引用。
  13:  </q>
  14:   
  15:  <p>
  16:  使用 blockquote 元素的话，浏览器会插入换行和外边距，而 q 元素不会有任何特殊的呈现。
  17:  </p>
  18:   
  19:  </body>
  20:  </html>
 
删除字效果和插入字效果
此例演示如何标记删除文本和插入文本。 
   1:  <html>
   2:   
   3:  <body>
   4:   
   5:  <p>一打有 <del>二十</del> <ins>十二</ins> 件。</p>
   6:   
   7:  <p>大多数浏览器会改写为删除文本和下划线文本。</p>
   8:   
   9:  <p>一些老式的浏览器会把删除文本和下划线文本显示为普通文本。</p>
  10:   
  11:  </body>
  12:  </html>

文本格式化标签

   1:  标签                        描述
   2:  <b>                   定义粗体文本。
   3:  <big>                 定义大号字。
   4:  <em>                 定义着重文字。
   5:  <i>                     定义斜体字。
   6:  <small>              定义小号字。
   7:  <strong>            定义加重语气。
   8:  <sub>                定义下标字。
   9:  <sup>                定义上标字。
  10:  <ins>                 定义插入字。
  11:  <del>                 定义删除字。
  12:  <s>                   不赞成使用。使用 <del> 代替。
  13:  <strike>              不赞成使用。使用 <del> 代替。
  14:  <u>                    不赞成使用。使用样式（style）代替。

“计算机输出”标签

   1:  标签                   描述
   2:  <code>             定义计算机代码。
   3:  <kbd>             定义键盘码。
   4:  <samp>             定义计算机代码样本。
   5:  <tt>             定义打字机代码。
   6:  <var>             定义变量。
   7:  <pre>             定义预格式文本。
   8:  <listing>            不赞成使用。使用 <pre> 代替。
   9:  <plaintext>     不赞成使用。使用 <pre> 代替。
  10:  <xmp>             不赞成使用。使用 <pre> 代替。

引用、引用和术语定义

   1:  标签                      描述
   2:  <abbr>                  定义缩写。
   3:  <acronym>           定义首字母缩写。
   4:  <address>           定义地址。
   5:  <bdo>               定义文字方向。
   6:  <blockquote>       定义长的引用。
   7:  <q>                   定义短的引用语。
   8:  <cite>               定义引用、引证。
   9:  <dfn>               定义一个定义项目。

HTML CSS

实例

HTML中的样式
本例演示如何使用添加到 <head> 部分的样式信息对 HTML 进行格式化。 
   1:  <html>
   2:   
   3:  <head>
   4:  <style type="text/css">
   5:  h1 {color: red}
   6:  p {color: blue}
   7:  </style>
   8:  </head>
   9:   
  10:  <body>
  11:  <h1>header 1</h1>
  12:  <p>A paragraph.</p>
  13:  </body>
  14:   
  15:  </html>
没有下划线的链接
本例演示如何使用样式属性做一个没有下划线的链接。
   1:  <html>
   2:  <head>
   3:  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
   4:  <meta http-equiv="Content-Language" content="zh-cn" />
   5:  </head>
   6:   
   7:  <body>
   8:   
   9:  <a href="/example/html/lastpage.html" style="text-decoration:none">
  10:  这是一个链接！
  11:  </a>
  12:   
  13:  </body>
  14:  </html>
链接到一个外部样式表
本例演示如何 <link> 标签链接到一个外部样式表。
   1:  <html>
   2:   
   3:  <head>
   4:  <link rel="stylesheet" type="text/css" href="/html/csstest1.css" >
   5:  </head>
   6:   
   7:  <body>
   8:  <h1>我通过外部样式表进行格式化。</h1>
   9:  <p>我也一样！</p>
  10:  </body>
  11:   
  12:  </html>

如何使用样式

当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表：

外部样式表

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。 

   1:  <head>
   2:  <link rel="stylesheet" type="text/css" href="mystyle.css">
   3:  </head>
内部样式表

当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。 

   1:  <head>
   2:  <style type="text/css">
   3:  body {background-color: red}
   4:  p {margin-left: 20px}
   5:  </style>
   6:  </head>
内联样式

当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。 

   1:  <p style="color: red; margin-left: 20px">
   2:  This is a paragraph
   3:  </p>
 
标签                         描述
<style>                 定义样式定义。
<link>                 定义资源引用。
<div>                 定义文档中的节或区域（块级）。
<span>                 定义文档中的行内的小块或区域。
<font>                 规定文本的字体、字体尺寸、字体颜色。不赞成使用。请使用样式。
<basefont>             定义基准字体。不赞成使用。请使用样式。
<center>             对文本进行水平居中。不赞成使用。请使用样式。

 

HTML 链接

HTML 使用超级链接与网络上的另一个文档相连。

几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。

实例

创建超级链接
本例演示如何在 HTML 文档中创建链接。 
   1:  <html>
   2:   
   3:  <body>
   4:   
   5:  <p>
   6:  <a href="/index.html">本文本</a> 是一个指向本网站中的一个页面的链接。</p>
   7:   
   8:  <p><a href="http://www.microsoft.com/">本文本</a> 是一个指向万维网上的页面的链接。</p>
   9:   
  10:  </body>
  11:  </html>
 
将图像作为链接
本例演示如何使用图像作为链接。
   1:  <html>
   2:   
   3:  <body>
   4:  <p>
   5:  您也可以使用图像来作链接：
   6:  <a href="/example/html/lastpage.html">
   7:  <img border="0" src="/i/eg_buttonnext.gif" />
   8:  </a>
   9:  </p>
  10:   
  11:  </body>
  12:  </html>

在新的浏览器窗口打开链接
本例演示如何在新窗口打开一个页面，这样的话访问者就无需离开你的站点了。 
   1:  <html>
   2:   
   3:  <body>
   4:   
   5:  <a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>
   6:   
   7:  <p>如果把链接的 target 属性设置为 "_blank"，该链接会在新窗口中打开。</p>
   8:   
   9:  </body>
  10:   
  11:  </html>
 
链接到同一个页面的不同位置
本例演示如何使用链接跳转至文档的另一个部分 
   1:  <html>
   2:   
   3:  <body>
   4:   
   5:  <p>
   6:  <a href="#C4">查看 Chapter 4。</a>
   7:  </p>
   8:   
   9:  <h2>Chapter 1</h2>
  10:  <p>This chapter explains ba bla bla</p>
  11:   
  12:  <h2>Chapter 2</h2>
  13:  <p>This chapter explains ba bla bla</p>
  14:   
  15:  <h2>Chapter 3</h2>
  16:  <p>This chapter explains ba bla bla</p>
  17:   
  18:  <h2><a name="C4">Chapter 4</a></h2>
  19:  <p>This chapter explains ba bla bla</p>
  20:   
  21:  <h2>Chapter 5</h2>
  22:  <p>This chapter explains ba bla bla</p>
  23:   
  24:  <h2>Chapter 6</h2>
  25:  <p>This chapter explains ba bla bla</p>
  26:   
  27:  <h2>Chapter 7</h2>
  28:  <p>This chapter explains ba bla bla</p>
  29:   
  30:  <h2>Chapter 8</h2>
  31:  <p>This chapter explains ba bla bla</p>
  32:   
  33:  <h2>Chapter 9</h2>
  34:  <p>This chapter explains ba bla bla</p>
  35:   
  36:  <h2>Chapter 10</h2>
  37:  <p>This chapter explains ba bla bla</p>
  38:   
  39:  <h2>Chapter 11</h2>
  40:  <p>This chapter explains ba bla bla</p>
  41:   
  42:  <h2>Chapter 12</h2>
  43:  <p>This chapter explains ba bla bla</p>
  44:   
  45:  <h2>Chapter 13</h2>
  46:  <p>This chapter explains ba bla bla</p>
  47:   
  48:  <h2>Chapter 14</h2>
  49:  <p>This chapter explains ba bla bla</p>
  50:   
  51:  <h2>Chapter 15</h2>
  52:  <p>This chapter explains ba bla bla</p>
  53:   
  54:  <h2>Chapter 16</h2>
  55:  <p>This chapter explains ba bla bla</p>
  56:   
  57:  <h2>Chapter 17</h2>
  58:  <p>This chapter explains ba bla bla</p>
  59:   
  60:  </body>
  61:  </html>
跳出框架
本例演示如何跳出框架，假如你的页面被固定在框架之内。  
   1:  <html>
   2:   
   3:  <body>
   4:   
   5:  <p>被锁在框架中了吗？</p> 
   6:   
   7:  <a href="/index.html"
   8:  target="_top">请点击这里！</a> 
   9:   
  10:  </body>
  11:  </html>
 
创建电子邮件链接
本例演示如何链接到一个邮件。（本例在安装邮件客户端程序后才能工作。） 
   1:  <html>
   2:   
   3:  <body>
   4:   
   5:  <p>
   6:  这是邮件链接：
   7:  <a href="mailto:someone@microsoft.com?subject=Hello%20again">发送邮件</a>
   8:  </p>
   9:   
  10:  <p>
  11:  <b>注意：</b>应该使用 %20 来替换单词之间的空格，这样浏览器就可以正确地显示文本了。
  12:  </p>
  13:   
  14:  </body>
  15:  </html>
 
创建电子邮件链接 2
本例演示更加复杂的邮件链接。 
   1:  <html>
   2:   
   3:  <body>
   4:   
   5:  <p>
   6:  这是另一个 mailto 链接：
   7:  <a href="mailto:someone@microsoft.com?cc=someoneelse@microsoft.com&bcc=andsomeoneelse2@microsoft.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!">发送邮件！</a>
   8:  </p>
   9:   
  10:  <p>
  11:  <b>注意：</b>应该使用 %20 来替换单词之间的空格，这样浏览器就可以正确地显示文本了。
  12:  </p>
  13:   
  14:  </body>
  15:  </html>

HTML 链接标签

标签              描述
  <a>            定义锚。

HTML 超链接（链接）

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

我们通过使用 <a> 标签在 HTML 中创建链接。

有两种使用 <a> 标签的方式：

  1. 通过使用 href 属性 - 创建指向另一个文档的链接
  2. 通过使用 name 属性 - 创建文档内的书签

HTML 链接语法

链接的 HTML 代码很简单。它类似这样：

<a href="url">Link text</a>

href 属性规定链接的目标。

开始标签和结束标签之间的文字被作为超级链接来显示。

<a href="http://www.w3school.com.cn/">Visit W3School</a>

提示："链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。

HTML 链接 - target 属性

使用 Target 属性，你可以定义被链接的文档在何处显示。

下面的这行会在新窗口打开文档： 

   1:  <html>
   2:   
   3:  <body>
   4:   
   5:  <a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>
   6:   
   7:  <p>如果把链接的 target 属性设置为 "_blank"，该链接会在新窗口中打开。</p>
   8:   
   9:  </body>
  10:   
  11:  </html>

HTML 链接 - name 属性

name 属性规定锚（anchor）的名称。

您可以使用 name 属性创建 HTML 页面中的书签。

书签不会以任何特殊方式显示，它对读者是不可见的。

当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。

命名锚的语法：
<a name="label">锚（显示在页面上的文本）</a>

提示：锚的名称可以是任何你喜欢的名字。

提示：您可以使用 id 属性来替代 name 属性，命名锚同样有效。

实例

首先，我们在 HTML 文档中对锚进行命名（创建一个书签）：

<a name="tips">基本的注意事项 - 有用的提示</a>

然后，我们在同一个文档中创建指向该锚的链接：

<a href="#tips">有用的提示</a>

您也可以在其他页面中创建指向该锚的链接：

<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>

在上面的代码中，我们将 # 符号和锚名称添加到 URL 的末端，就可以直接链接到 tips 这个命名锚了。

基本的注意事项 - 有用的提示：

注释：请始终将正斜杠添加到子文件夹。假如这样书写链接：href="http://www.w3school.com.cn/html"，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href="http://www.w3school.com.cn/html/"。

提示：命名锚经常用于在大型文档开始位置上创建目录。可以为每个章节赋予一个命名锚，然后把链接到这些锚的链接放到文档的上部。如果您经常访问百度百科，您会发现其中几乎每个词条都采用这样的导航方式。

提示：假如浏览器找不到已定义的命名锚，那么就会定位到文档的顶端。不会有错误发生。

HTML 图像

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

实例

插入图像
本例演示如何在网页中显示图像。 
   1:  <!DOCTYPE HTML>
   2:  <html>
   3:   
   4:  <body>
   5:   
   6:  <p>
   7:  一幅图像：
   8:  <img src="/i/eg_mouse.jpg" width="128" height="128" />
   9:  </p>
  10:   
  11:  <p>
  12:  一幅动画图像：
  13:  <img src="/i/eg_cute.gif" width="50" height="50" />
  14:  </p>
  15:   
  16:  <p>请注意，插入动画图像的语法与插入普通图像的语法没有区别。</p>
  17:   
  18:  </body>
  19:  </html>
从不同的位置插入图片
本例演示如何将其他文件夹或服务器的图片显示到网页中。
   1:  <html>
   2:   
   3:  <body>
   4:   
   5:  <p>
   6:  来自另一个文件夹的图像：
   7:  <img src="/i/ct_netscape.jpg" />
   8:  </p>
   9:   
  10:  <p>
  11:  来自 W3School.com.cn 的图像：
  12:  <img src="http://www.w3school.com.cn/i/w3school_logo_white.gif" />
  13:  </p>
  14:   
  15:  </body>
  16:  </html>

图像标签（<img>）和源属性（Src）

在 HTML 中，图像由 <img> 标签定义。

<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。

要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。

定义图像的语法是：

<img src="url" />

URL 指存储图像的位置。如果名为 "boat.gif" 的图像位于 www.w3school.com.cn 的 images 目录中，那么其 URL 为 http://www.w3school.com.cn/images/boat.gif。

浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。

替换文本属性（Alt）

alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。

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

在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

基本的注意事项 - 有用的提示：

假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件。加载图片是需要时间的，所以我们的建议是：慎用图片。

更多实例

背景图片
本例演示如何向 HTML 页面添加背景图片。 
   1:  <html>
   2:   
   3:  <body background="/i/eg_background.jpg">
   4:   
   5:  <h3>图像背景</h3>
   6:   
   7:  <p>gif 和 jpg 文件均可用作 HTML 背景。</p>
   8:   
   9:  <p>如果图像小于页面，图像会进行重复。</p>
  10:   
  11:  </body>
  12:  </html>
排列图片
本例演示如何在文字中排列图像。 
   1:  <html>
   2:   
   3:  <body>
   4:   
   5:  <h2>未设置对齐方式的图像：</h2>
   6:   
   7:  <p>图像 <img src ="/i/eg_cute.gif"> 在文本中</p>
   8:   
   9:  <h2>已设置对齐方式的图像：</h2>
  10:   
  11:  <p>图像 <img src="/i/eg_cute.gif" align="bottom"> 在文本中</p>
  12:   
  13:  <p>图像 <img src ="/i/eg_cute.gif" align="middle"> 在文本中</p>
  14:   
  15:  <p>图像 <img src ="/i/eg_cute.gif" align="top"> 在文本中</p>
  16:   
  17:  <p>请注意，bottom 对齐方式是默认的对齐方式。</p>
  18:   
  19:  </body>
  20:  </html>
浮动图像
本例演示如何使图片浮动至段落的左边或右边。 
   1:  <html>
   2:   
   3:  <body>
   4:   
   5:  <p>
   6:  <img src ="/i/eg_cute.gif" align ="left"> 
   7:  带有图像的一个段落。图像的 align 属性设置为 "left"。图像将浮动到文本的左侧。                                                  
   8:  </p>
   9:   
  10:  <p>
  11:  <img src ="/i/eg_cute.gif" align ="right"> 
  12:  带有图像的一个段落。图像的 align 属性设置为 "right"。图像将浮动到文本的右侧。
  13:  </p>
  14:   
  15:  </body>
  16:  </html>
调整图像尺寸
本例演示如何将图片调整到不同的尺寸。 
   1:  <html>
   2:   
   3:  <body>
   4:   
   5:  <img src="/i/eg_mouse.jpg" width="50" height="50">
   6:   
   7:  <br />
   8:   
   9:  <img src="/i/eg_mouse.jpg" width="100" height="100">
  10:   
  11:  <br />
  12:   
  13:  <img src="/i/eg_mouse.jpg" width="200" height="200">
  14:   
  15:  <p>通过改变 img 标签的 "height" 和 "width" 属性的值，您可以放大或缩小图像。</p>
  16:   
  17:  </body>
  18:  </html>
为图片显示替换文本
本例演示如何为图片显示替换文本。在浏览器无法载入图像时，替换文本属性告诉读者们失去的信息。为页面上的图像都加上替换文本属性是个好习惯。 
   1:  <html>
   2:   
   3:  <body>
   4:   
   5:   
   6:  <p>仅支持文本的浏览器无法显示图像，仅仅能够显示在图像的 "alt" 属性中指定的文本。在这里，"alt" 的文本是“向左转”。</p>
   7:   
   8:  <p>请注意，如果您把鼠标指针移动到图像上，大多数浏览器会显示 "alt" 文本。</p>
   9:   
  10:  <img src="/i/eg_goleft.gif" alt="向左转" />
  11:   
  12:  <p>如果无法显示图像，将显示 "alt" 属性中的文本：</p>
  13:   
  14:  <img src="/i/eg_goleft123.gif" alt="向左转" />
  15:   
  16:  </body>
  17:  </html>
制作图像链接
本例演示如何将图像作为一个链接使用。 
   1:  <html>
   2:   
   3:  <body>
   4:  <p>
   5:  您也可以把图像作为链接来使用：
   6:  <a href="/example/html/lastpage.html">
   7:  <img border="0" src="/i/eg_buttonnext.gif" />
   8:  </a>
   9:  </p>
  10:   
  11:  </body>
  12:  </html>
创建图像映射
本例显示如何创建带有可供点击区域的图像地图。其中的每个区域都是一个超级链接。 
   1:  <html>
   2:  <body>
   3:   
   4:  <p>请点击图像上的星球，把它们放大。</p>
   5:   
   6:  <img
   7:  src="/i/eg_planets.jpg"
   8:  border="0" usemap="#planetmap"
   9:  alt="Planets" />
  10:   
  11:  <map name="planetmap" id="planetmap">
  12:   
  13:  <area
  14:  shape="circle"
  15:  coords="180,139,14"
  16:  href ="/example/html/venus.html"
  17:  target ="_blank"
  18:  alt="Venus" />
  19:   
  20:  <area
  21:  shape="circle"
  22:  coords="129,161,10"
  23:  href ="/example/html/mercur.html"
  24:  target ="_blank"
  25:  alt="Mercury" />
  26:   
  27:  <area
  28:  shape="rect"
  29:  coords="0,0,110,260"
  30:  href ="/example/html/sun.html"
  31:  target ="_blank"
  32:  alt="Sun" />
  33:   
  34:  </map>
  35:   
  36:  <p><b>注释：</b>img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器），所以我们同时向 map 元素添加了 "id" 和 "name" 属性。</p>
  37:   
  38:  </body>
  39:  </html>
把图像转换为图像映射
本例显示如何把一幅普通的图像设置为图像映射。
   1:  <!DOCTYPE html>
   2:  <html>
   3:   
   4:  <body>
   5:   
   6:  <p>请把鼠标移动到图像上，看一下状态栏的坐标如何变化。</p>
   7:   
   8:  <a href="/example/html/html_ismap.html">
   9:  <img src="/i/eg_planets.jpg" ismap />
  10:  </a>
  11:   
  12:  </body>
  13:  </html>

图像标签

标签           描述
   <img>        定义图像。
   <map>        定义图像地图。
   <area>       定义图像地图中的可点击区域。

HTML 表格

实例

表格
这个例子演示如何在 HTML 文档中创建表格。 
   1:  <html>
   2:   
   3:  <body>
   4:   
   5:  <p>每个表格由 table 标签开始。</p>
   6:  <p>每个表格行由 tr 标签开始。</p>
   7:  <p>每个表格数据由 td 标签开始。</p>
   8:   
   9:  <h4>一列：</h4>
  10:  <table border="1">
  11:  <tr>
  12:    <td>100</td>
  13:  </tr>
  14:  </table>
  15:   
  16:  <h4>一行三列：</h4>
  17:  <table border="1">
  18:  <tr>
  19:    <td>100</td>
  20:    <td>200</td>
  21:    <td>300</td>
  22:  </tr>
  23:  </table>
  24:   
  25:  <h4>两行三列：</h4>
  26:  <table border="1">
  27:  <tr>
  28:    <td>100</td>
  29:    <td>200</td>
  30:    <td>300</td>
  31:  </tr>
  32:  <tr>
  33:    <td>400</td>
  34:    <td>500</td>
  35:    <td>600</td>
  36:  </tr>
  37:  </table>
  38:   
  39:  </body>
  40:  </html>
表格边框
本例演示各种类型的表格边框 
   1:  <html>
   2:   
   3:  <body>
   4:   
   5:  <h4>带有普通的边框：</h4>  
   6:  <table border="1">
   7:  <tr>
   8:    <td>First</td>
   9:    <td>Row</td>
  10:  </tr>   
  11:  <tr>
  12:    <td>Second</td>
  13:    <td>Row</td>
  14:  </tr>
  15:  </table>
  16:   
  17:  <h4>带有粗的边框：</h4>  
  18:  <table border="8">
  19:  <tr>
  20:    <td>First</td>
  21:    <td>Row</td>
  22:  </tr>   
  23:  <tr>
  24:    <td>Second</td>
  25:    <td>Row</td>
  26:  </tr>
  27:  </table>
  28:   
  29:  <h4>带有很粗的边框：</h4>  
  30:  <table border="15">
  31:  <tr>
  32:    <td>First</td>
  33:    <td>Row</td>
  34:  </tr>   
  35:  <tr>
  36:    <td>Second</td>
  37:    <td>Row</td>
  38:  </tr>
  39:  </table>
  40:   
  41:  </body>
  42:  </html>

表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

   1:  <table border="1">
   2:  <tr>
   3:  <td>row 1, cell 1</td>
   4:  <td>row 1, cell 2</td>
   5:  </tr>
   6:  <tr>
   7:  <td>row 2, cell 1</td>
   8:  <td>row 2, cell 2</td>
   9:  </tr>
  10:  </table>

在浏览器显示如下：

image

表格和边框属性

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

使用边框属性来显示一个带有边框的表格：

   1:  <table border="1">
   2:  <tr>
   3:  <td>Row 1, cell 1</td>
   4:  <td>Row 1, cell 2</td>
   5:  </tr>
   6:  </table>

表格的表头

表格的表头使用 <th> 标签进行定义。

大多数浏览器会把表头显示为粗体居中的文本：

   1:  <table border="1">
   2:  <tr>
   3:  <th>Heading</th>
   4:  <th>Another Heading</th>
   5:  </tr>
   6:  <tr>
   7:  <td>row 1, cell 1</td>
   8:  <td>row 1, cell 2</td>
   9:  </tr>
  10:  <tr>
  11:  <td>row 2, cell 1</td>
  12:  <td>row 2, cell 2</td>
  13:  </tr>
  14:  </table>

在浏览器显示如下：

image

表格中的空单元格

在一些浏览器中，没有内容的表格单元显示得不太好。如果某个单元格是空的（没有内容），浏览器可能无法显示出这个单元格的边框。

   1:  <table border="1">
   2:  <tr>
   3:  <td>row 1, cell 1</td>
   4:  <td>row 1, cell 2</td>
   5:  </tr>
   6:  <tr>
   7:  <td></td>
   8:  <td>row 2, cell 2</td>
   9:  </tr>
  10:  </table>

浏览器可能会这样显示：

image

注意：这个空的单元格的边框没有被显示出来。为了避免这种情况，在空单元格中添加一个空格占位符，就可以将边框显示出来。

   1:  <table border="1">
   2:  <tr>
   3:  <td>row 1, cell 1</td>
   4:  <td>row 1, cell 2</td>
   5:  </tr>
   6:  <tr>
   7:  <td>&nbsp;</td>
   8:  <td>row 2, cell 2</td>
   9:  </tr>
  10:  </table>

在浏览器中显示如下：

image

没有边框的表格

本例演示一个没有边框的表格。 
   1:  <html>
   2:   
   3:  <body>
   4:   
   5:  <h4>这个表格没有边框：</h4>
   6:  <table>
   7:  <tr>
   8:    <td>100</td>
   9:    <td>200</td>
  10:    <td>300</td>
  11:  </tr>
  12:  <tr>
  13:    <td>400</td>
  14:    <td>500</td>
  15:    <td>600</td>
  16:  </tr>
  17:  </table>
  18:   
  19:  <h4>这个表格也没有边框：</h4>
  20:  <table border="0">
  21:  <tr>
  22:    <td>100</td>
  23:    <td>200</td>
  24:    <td>300</td>
  25:  </tr>
  26:  <tr>
  27:    <td>400</td>
  28:    <td>500</td>
  29:    <td>600</td>
  30:  </tr>
  31:  </table>
  32:   
  33:  </body>
  34:  </html>
表格中的表头(Heading)
本例演示如何显示表格表头。 
   1:  <html>
   2:   
   3:  <body>
   4:   
   5:  <h4>表头：</h4>
   6:  <table border="1">
   7:  <tr>
   8:    <th>姓名</th>
   9:    <th>电话</th>
  10:    <th>电话</th>
  11:  </tr>
  12:  <tr>
  13:    <td>Bill Gates</td>
  14:    <td>555 77 854</td>
  15:    <td>555 77 855</td>
  16:  </tr>
  17:  </table>
  18:   
  19:  <h4>垂直的表头：</h4>
  20:  <table border="1">
  21:  <tr>
  22:    <th>姓名</th>
  23:    <td>Bill Gates</td>
  24:  </tr>
  25:  <tr>
  26:    <th>电话</th>
  27:    <td>555 77 854</td>
  28:  </tr>
  29:  <tr>
  30:    <th>电话</th>
  31:    <td>555 77 855</td>
  32:  </tr>
  33:  </table>
  34:   
  35:  </body>
  36:  </html>
空单元格
本例展示如何使用 "&nbsp;" 处理没有内容的单元格。 
   1:  <html>
   2:   
   3:  <body>
   4:   
   5:  <table border="1">
   6:  <tr>
   7:    <td>Some text</td>
   8:    <td>Some text</td>
   9:  </tr>
  10:  <tr>
  11:    <td></td>
  12:    <td>Some text</td>
  13:  </tr>
  14:  </table>
  15:   
  16:  <p>正如您看到的，其中一个单元没有边框。这是因为它是空的。在该单元中插入一个空格后，仍然没有边框。</p>
  17:   
  18:  <p>我们的技巧是在单元中插入一个 no-breaking 空格。</p>
  19:   
  20:  <p>no-breaking 空格是一个字符实体。如果您不清楚什么是字符实体，请阅读关于字符实体的章节。</p>
  21:   
  22:  <p>no-breaking 空格由和号开始 ("&")，然后是字符"nbsp"，并以分号结尾(";")。</p>
  23:   
  24:  </body>
  25:  </html>
带有标题的表格
本例演示一个带标题 (caption) 的表格 
   1:  <html>
   2:   
   3:  <body>
   4:   
   5:  <h4>这个表格有一个标题，以及粗边框：</h4>
   6:   
   7:  <table border="6">
   8:  <caption>我的标题</caption>
   9:  <tr>
  10:    <td>100</td>
  11:    <td>200</td>
  12:    <td>300</td>
  13:  </tr>
  14:  <tr>
  15:    <td>400</td>
  16:    <td>500</td>
  17:    <td>600</td>
  18:  </tr>
  19:  </table>
  20:   
  21:  </body>
跨行或跨列的表格单元格
本例演示如何定义跨行或跨列的表格单元格。 
   1:  <html>
   2:   
   3:  <body>
   4:   
   5:  <h4>横跨两列的单元格：</h4>
   6:  <table border="1">
   7:  <tr>
   8:    <th>姓名</th>
   9:    <th colspan="2">电话</th>
  10:  </tr>
  11:  <tr>
  12:    <td>Bill Gates</td>
  13:    <td>555 77 854</td>
  14:    <td>555 77 855</td>
  15:  </tr>
  16:  </table>
  17:   
  18:  <h4>横跨两行的单元格：</h4>
  19:  <table border="1">
  20:  <tr>
  21:    <th>姓名</th>
  22:    <td>Bill Gates</td>
  23:  </tr>
  24:  <tr>
  25:    <th rowspan="2">电话</th>
  26:    <td>555 77 854</td>
  27:  </tr>
  28:  <tr>
  29:    <td>555 77 855</td>
  30:  </tr>
  31:  </table>
  32:   
  33:  </body>
  34:  </html>
表格内的标签
本例演示如何显示在不同的元素内显示元素。 
   1:  <html>
   2:   
   3:  <body>
   4:   
   5:  <table border="1">
   6:  <tr>
   7:    <td>
   8:     <p>这是一个段落。</p>
   9:     <p>这是另一个段落。</p>
  10:    </td>
  11:    <td>这个单元包含一个表格：
  12:     <table border="1">
  13:     <tr>
  14:       <td>A</td>
  15:       <td>B</td>
  16:     </tr>
  17:     <tr>
  18:       <td>C</td>
  19:       <td>D</td>
  20:     </tr>
  21:     </table>
  22:    </td>
  23:  </tr>
  24:  <tr>
  25:    <td>这个单元包含一个列表：
  26:     <ul>
  27:      <li>苹果</li>
  28:      <li>香蕉</li>
  29:      <li>菠萝</li>
  30:     </ul>
  31:    </td>
  32:    <td>HELLO</td>
  33:  </tr>
  34:  </table>
  35:   
  36:  </body>
  37:  </html>
单元格边距(Cell padding)
本例演示如何使用 Cell padding 来创建单元格内容与其边框之间的空白。 
   1:  <html>
   2:   
   3:  <body>
   4:   
   5:  <h4>没有 cellpadding：</h4>
   6:  <table border="1">
   7:  <tr>
   8:    <td>First</td>
   9:    <td>Row</td>
  10:  </tr>   
  11:  <tr>
  12:    <td>Second</td>
  13:    <td>Row</td>
  14:  </tr>
  15:  </table>
  16:   
  17:  <h4>带有 cellpadding：</h4>
  18:  <table border="1" 
  19:  cellpadding="10">
  20:  <tr>
  21:    <td>First</td>
  22:    <td>Row</td>
  23:  </tr>   
  24:  <tr>
  25:    <td>Second</td>
  26:    <td>Row</td>
  27:  </tr>
  28:  </table>
  29:   
  30:  </body>
  31:  </html>
单元格间距(Cell spacing)
本例演示如何使用 Cell spacing 增加单元格之间的距离。 
   1:  <html>
   2:   
   3:  <body>
   4:   
   5:  <h4>没有 cellspacing：</h4>
   6:  <table border="1">
   7:  <tr>
   8:    <td>First</td>
   9:    <td>Row</td>
  10:  </tr>   
  11:  <tr>
  12:    <td>Second</td>
  13:    <td>Row</td>
  14:  </tr>
  15:  </table>
  16:   
  17:  <h4>带有 cellspacing：</h4>
  18:  <table border="1" 
  19:  cellspacing="10">
  20:  <tr>
  21:    <td>First</td>
  22:    <td>Row</td>
  23:  </tr>   
  24:  <tr>
  25:    <td>Second</td>
  26:    <td>Row</td>
  27:  </tr>
  28:  </table>
  29:   
  30:  </body>
  31:  </html>
向表格添加背景颜色或背景图像
本例演示如何向表格添加背景。 
   1:  <html>
   2:   
   3:  <body>
   4:   
   5:  <h4>背景颜色：</h4>
   6:  <table border="1" 
   7:  bgcolor="red">
   8:  <tr>
   9:    <td>First</td>
  10:    <td>Row</td>
  11:  </tr>   
  12:  <tr>
  13:    <td>Second</td>
  14:    <td>Row</td>
  15:  </tr>
  16:  </table>
  17:   
  18:  <h4>背景图像：</h4>
  19:  <table border="1" 
  20:  background="/i/eg_bg_07.gif">
  21:  <tr>
  22:    <td>First</td>
  23:    <td>Row</td>
  24:  </tr>   
  25:  <tr>
  26:    <td>Second</td>
  27:    <td>Row</td>
  28:  </tr>
  29:  </table>
  30:   
  31:  </body>
  32:  </html>
向表格单元添加背景颜色或者背景图像
本例演示如何向一个或者更多表格单元添加背景。 
   1:  <html>
   2:   
   3:  <body>
   4:   
   5:  <h4>单元背景：</h4>  
   6:  <table border="1">
   7:  <tr>
   8:    <td bgcolor="red">First</td>
   9:    <td>Row</td>
  10:  </tr>   
  11:  <tr>
  12:    <td 
  13:    background="/i/eg_bg_07.gif">
  14:    Second</td>
  15:    <td>Row</td>
  16:  </tr>
  17:  </table>
  18:   
  19:  </body>
  20:  </html>
在表格单元中排列内容
本例演示如何使用 "align" 属性排列单元格内容,以便创建一个美观的表格。 
   1:  <html>
   2:   
   3:  <body>
   4:   
   5:  <table width="400" border="1">
   6:   <tr>
   7:    <th align="left">消费项目....</th>
   8:    <th align="right">一月</th>
   9:    <th align="right">二月</th>
  10:   </tr>
  11:   <tr>
  12:    <td align="left">衣服</td>
  13:    <td align="right">$241.10</td>
  14:    <td align="right">$50.20</td>
  15:   </tr>
  16:   <tr>
  17:    <td align="left">化妆品</td>
  18:    <td align="right">$30.00</td>
  19:    <td align="right">$44.45</td>
  20:   </tr>
  21:   <tr>
  22:    <td align="left">食物</td>
  23:    <td align="right">$730.40</td>
  24:    <td align="right">$650.00</td>
  25:   </tr>
  26:   <tr>
  27:    <th align="left">总计</th>
  28:    <th align="right">$1001.50</th>
  29:    <th align="right">$744.65</th>
  30:   </tr>
  31:  </table>
  32:   
  33:  </body>
  34:  </html>
框架(frame)属性
本例演示如何使用 "frame" 属性来控制围绕表格的边框。
   1:  <html>
   2:  <body>
   3:   
   4:  <p><b>注释：</b>frame 属性无法在 Internet Explorer 中正确地显示。</p>
   5:   
   6:  <p>Table with frame="box":</p>
   7:  <table frame="box">
   8:    <tr>
   9:      <th>Month</th>
  10:      <th>Savings</th>
  11:    </tr>
  12:    <tr>
  13:      <td>January</td>
  14:      <td>$100</td>
  15:    </tr>
  16:  </table>
  17:   
  18:  <p>Table with frame="above":</p>
  19:  <table frame="above">
  20:    <tr>
  21:      <th>Month</th>
  22:      <th>Savings</th>
  23:    </tr>
  24:    <tr>
  25:      <td>January</td>
  26:      <td>$100</td>
  27:    </tr>
  28:  </table>
  29:   
  30:  <p>Table with frame="below":</p>
  31:  <table frame="below">
  32:    <tr>
  33:      <th>Month</th>
  34:      <th>Savings</th>
  35:    </tr>
  36:    <tr>
  37:      <td>January</td>
  38:      <td>$100</td>
  39:    </tr>
  40:  </table>
  41:   
  42:  <p>Table with frame="hsides":</p>
  43:  <table frame="hsides">
  44:    <tr>
  45:      <th>Month</th>
  46:      <th>Savings</th>
  47:    </tr>
  48:    <tr>
  49:      <td>January</td>
  50:      <td>$100</td>
  51:    </tr>
  52:  </table>
  53:   
  54:  <p>Table with frame="vsides":</p>
  55:  <table frame="vsides">
  56:    <tr>
  57:      <th>Month</th>
  58:      <th>Savings</th>
  59:    </tr>
  60:    <tr>
  61:      <td>January</td>
  62:      <td>$100</td>
  63:    </tr>
  64:  </table>
  65:   
  66:  </body>
  67:  </html>

表格标签

表格                   描述
<table>                定义表格
<caption>            定义表格标题。
<th>                定义表格的表头。
<tr>                定义表格的行。
<td>                定义表格单元。
<thead>                定义表格的页眉。
<tbody>                定义表格的主体。
<tfoot>                定义表格的页脚。
<col>                定义用于表格列的属性。
<colgroup>            定义表格列的组

 

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/pengdonglin137/p/3505771.html