转载于http://www.w3school.com.cn/html/
HTML 标题
HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>HTML 段落
HTML 段落是通过 <p> 标签进行定义的。
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>HTML 链接
HTML 链接是通过 <a> 标签进行定义的。
<a href="http://www.w3school.com.cn">This is a link</a>HTML 图像
HTML 图像是通过 <img> 标签进行定义的。
<img src="w3school.jpg" width="104" height="142" />HTML 元素
HTML 文档是由 HTML 元素定义的。
HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。
| 开始标签 | 元素内容 | 结束标签 |
|---|---|---|
| <p> | This is a paragraph | </p> |
| <a href="default.htm" > | This is a link | </a> |
| <br /> | | |
注释：开始标签常被称为开放标签（opening tag），结束标签常称为闭合标签（closing tag）。
HTML 元素语法
- HTML 元素以开始标签起始
- HTML 元素以结束标签终止
- 元素的内容是开始标签与结束标签之间的内容
- 某些 HTML 元素具有空内容（empty content）
- 空元素在开始标签中进行关闭（以开始标签的结束而结束）
- 大多数 HTML 元素可拥有属性
嵌套的 HTML 元素
大多数 HTML 元素可以嵌套（可以包含其他 HTML 元素）。
HTML 文档由嵌套的 HTML 元素构成。
HTML 文档实例
<html>
<body>
<p>This is my first paragraph.</p>
</body>
</html>
上面的例子包含三个 HTML 元素。
HTML 实例解释
<p> 元素：
<p>This is my first paragraph.</p>
这个 <p> 元素定义了 HTML 文档中的一个段落。
这个元素拥有一个开始标签 <p>，以及一个结束标签 </p>。
元素内容是：This is my first paragraph。
<body> 元素：
<body>
<p>This is my first paragraph.</p>
</body>
<body> 元素定义了 HTML 文档的主体。
这个元素拥有一个开始标签 <body>，以及一个结束标签 </body>。
元素内容是另一个 HTML 元素（p 元素）。
<html> 元素：
<html>
<body>
<p>This is my first paragraph.</p>
</body>
</html>
<html> 元素定义了整个 HTML 文档。
这个元素拥有一个开始标签 <html>，以及一个结束标签 </html>。
元素内容是另一个 HTML 元素（body 元素）。
不要忘记结束标签
即使您忘记了使用结束标签，大多数浏览器也会正确地显示 HTML：
<p>This is a paragraph
<p>This is a paragraph
上面的例子在大多数浏览器中都没问题，但不要依赖这种做法。忘记使用结束标签会产生不可预料的结果或错误。
注释：未来的 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 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
属性总是以名称/值对的形式出现，比如：name="value"。
属性总是在 HTML 元素的开始标签中规定。
属性实例
HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定：
<a href="http://www.w3school.com.cn">This is a link</a>
更多 HTML 属性实例
属性例子 1:
<h1> 定义标题的开始。
<h1 align="center"> 拥有关于对齐方式的附加信息。
属性例子 2:
<body> 定义 HTML 文档的主体。
<body bgcolor="yellow"> 拥有关于背景颜色的附加信息。
属性例子 3:
<table> 定义 HTML 表格。（您将在稍后的章节学习到更多有关 HTML 表格的内容）
<table border="1"> 拥有关于表格边框的附加信息。
HTML 提示：使用小写属性
属性和属性值对大小写不敏感。
不过，万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。
而新版本的 (X)HTML 要求使用小写属性。
始终为属性值加引号
属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。
在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：
name='Bill "HelloWorld" Gates'
HTML 属性参考手册
我们的完整的 HTML 参考手册提供了每个 HTML 元素可使用的合法属性的完整列表：
下面列出了适用于大多数 HTML 元素的属性：
| 属性 | 值 | 描述 |
|---|---|---|
| class | classname | 规定元素的类名（classname） |
| id | id | 规定元素的唯一 id |
| style | style_definition | 规定元素的行内样式（inline style） |
| title | text | 规定元素的额外信息（可在工具提示中显示） |
HTML 标题
HTML 标题
标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。
<h1> 定义最大的标题。<h6> 定义最小的标题。
实例
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
HTML 水平线
<hr /> 标签在 HTML 页面中创建水平线。
hr 元素可用于分隔内容。
实例
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
HTML 注释
可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。
注释是这样写的：
实例
<!-- This is a comment -->
HTML 标签参考手册
W3School 的标签参考手册提供了有关这些标题及其属性的更多信息。
您将在本教程下面的章节中学到更多有关 HTML 标签和属性的知识。
| 标签 | 描述 |
|---|---|
| <html> | 定义 HTML 文档。 |
| <body> | 定义文档的主体。 |
| <h1> to <h6> | 定义 HTML 标题 |
| <hr> | 定义水平线。 |
| <!--> | 定义注释。 |
HTML 段落
段落是通过 <p> 标签定义的。
实例
<p>This is a paragraph</p>
<p>This is another paragraph</p>
HTML 折行
如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br /> 标签：
<p>This is<br />a para<br />graph with line breaks</p>
<br> 还是 <br />
您也许发现 <br> 与 <br /> 很相似。
在 XHTML、XML 以及未来的 HTML 版本中，不允许使用没有结束标签（闭合标签）的 HTML 元素。
即使 <br> 在所有浏览器中的显示都没有问题，使用 <br /> 也是更长远的保障。
HTML 标签参考手册
W3School 的标签参考手册提供了有关 HTML 元素及其属性的更多信息。
| 标签 | 描述 |
|---|---|
| <p> | 定义段落。 |
| <br /> | 插入单个折行（换行） |
HTML 文本格式化
文本格式化标签
| 标签 | 描述 |
| 定义粗体文本。 | |
| 定义大号字。 | |
| 定义着重文字。 | |
| 定义斜体字。 | |
| 定义小号字。 | |
| 定义加重语气。 | |
| 定义下标字。 | |
| 定义上标字。 | |
| 定义插入字。 | |
| 定义删除字。 | |
| 不赞成使用。使用 <del> 代替。 | |
| 不赞成使用。使用 <del> 代替。 | |
| 不赞成使用。使用样式（style）代替。 |
“计算机输出”标签
| 标签 | 描述 |
| 定义计算机代码。 | |
| 定义键盘码。 | |
| 定义计算机代码样本。 | |
| 定义打字机代码。 | |
| 定义变量。 | |
| 定义预格式文本。 | |
| <listing> | 不赞成使用。使用 <pre> 代替。 |
| <plaintext> | 不赞成使用。使用 <pre> 代替。 |
| <xmp> | 不赞成使用。使用 <pre> 代替。 |
引用、引用和术语定义
| 标签 | 描述 |
| 定义缩写。 | |
| 定义首字母缩写。 | |
| 定义地址。 | |
| 定义文字方向。 | |
| 定义长的引用。 | |
| 定义短的引用语。 | |
| 定义引用、引证。 | |
| 定义一个定义项目。 |
HTML编辑器
使用 Notepad 或 TextEdit 来编写 HTML
可以使用专业的HTML 编辑器来编辑HTML：
· Adobe Dreamweaver
· Microsoft Expression Web
· CoffeeCup HTML Editor
不过，我们同时推荐使用文本编辑器来学习 HTML，比如 Notepad (PC) 或 TextEdit (Mac)。我们相信，使用一款简单的文本编辑器是学习 HTML 的好方法。
通过记事本，依照以下四步来创建您的第一张网页。
步骤一：启动记事本
如何启动记事本：
开始
所有程序
附件
记事本
步骤二：用记事本来编辑 HTML
在记事本中键入HTML 代码：
步骤三：保存 HTML
在记事本的文件菜单选择“另存为”。
当您保存HTML 文件时，既可以使用.htm 也可以使用.html 扩展名。两者没有区别，完全根据您的喜好。
在一个容易记忆的文件夹中保存这个文件，比如 w3school。
步骤四：在浏览器中运行这个 HTML 文件
启动您的浏览器，然后选择“文件”菜单的“打开文件”命令，或者直接在文件夹中双击您的 HTML 文件。
结果应该类似这样：
HTMLCSS
如何使用样式
当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表：
外部样式表
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。
<head>
<link rel="stylesheet"type="text/css" href="mystyle.css">
</head>
内部样式表
当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
内联样式
当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。
<p style="color: red;margin-left: 20px">
This is a paragraph
</p>
| 标签 | 描述 |
| 定义样式定义。 | |
| 定义资源引用。 | |
| 定义文档中的节或区域（块级）。 | |
| 定义文档中的行内的小块或区域。 | |
| 规定文本的字体、字体尺寸、字体颜色。不赞成使用。请使用样式。 | |
| 定义基准字体。不赞成使用。请使用样式。 | |
| 对文本进行水平居中。不赞成使用。请使用样式。 |
HTML链接
HTML 使用超级链接与网络上的另一个文档相连。
几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。
<html>
<body>
<p>
<a href="/index.html">本文本</a> 是一个指向本网站中的一个页面的链接。</p>
<p><ahref="http://www.microsoft.com/">本文本</a> 是一个指向万维网上的页面的链接。</p>
</body>
</html>
HTML 超链接（链接）
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。
我们通过使用<a> 标签在HTML 中创建链接。
有两种使用<a> 标签的方式：
1. 通过使用 href 属性 - 创建指向另一个文档的链接
2. 通过使用 name 属性 - 创建文档内的书签
HTML 链接语法
链接的HTML 代码很简单。它类似这样：
<a href="url">Linktext</a>
href 属性规定链接的目标。
开始标签和结束标签之间的文字被作为超级链接来显示。
实例
<a href="http://www.w3school.com.cn/">VisitW3School</a>
HTML 链接 - target 属性
使用Target 属性，你可以定义被链接的文档在何处显示。
下面的这行会在新窗口打开文档：
<ahref="http://www.w3school.com.cn/"target="_blank">VisitW3School!</a>
HTML 链接 - name 属性
name 属性规定锚（anchor）的名称。
您可以使用name 属性创建HTML 页面中的书签。
书签不会以任何特殊方式显示，它对读者是不可见的。
当使用命名锚（namedanchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。
命名锚的语法：
<a name="label">锚（显示在页面上的文本）</a>
实例
首先，我们在HTML 文档中对锚进行命名（创建一个书签）：
<a name="tips">基本的注意事项 - 有用的提示</a>
然后，我们在同一个文档中创建指向该锚的链接：
<a href="#tips">有用的提示</a>
您也可以在其他页面中创建指向该锚的链接：
<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>
基本的注意事项 - 有用的提示：
注释：请始终将正斜杠添加到子文件夹。假如这样书写链接：href="http://www.w3school.com.cn/html"，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href="http://www.w3school.com.cn/html/"。
提示：命名锚经常用于在大型文档开始位置上创建目录。可以为每个章节赋予一个命名锚，然后把链接到这些锚的链接放到文档的上部。如果您经常访问百度百科，您会发现其中几乎每个词条都采用这样的导航方式。
提示：假如浏览器找不到已定义的命名锚，那么就会定位到文档的顶端。不会有错误发生。
HTML图像
通过使用 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表格
你可以使用 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 |
表格和边框属性
如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。
使用边框属性来显示一个带有边框的表格：
<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></td>
<td>row 2, cell 2</td>
</tr>
</table>
浏览器可能会这样显示：
注意：这个空的单元格的边框没有被显示出来。为了避免这种情况，在空单元格中添加一个空格占位符，就可以将边框显示出来。
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td> </td>
<td>row 2, cell 2</td>
</tr>
</table>
在浏览器中显示如下：
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 2 |
表格标签
| 表格 | 描述 |
| 定义表格 | |
| 定义表格标题。 | |
| 定义表格的表头。 | |
| 定义表格的行。 | |
| 定义表格单元。 | |
| 定义表格的页眉。 | |
| 定义表格的主体。 | |
| 定义表格的页脚。 | |
| 定义用于表格列的属性。 | |
| 定义表格列的组。 |
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
定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
列表标签
| 标签 | 描述 |
| 定义有序列表。 | |
| 定义无序列表。 | |
| 定义列表项。 | |
| 定义定义列表。 | |
| 定义定义项目。 | |
| 定义定义的描述。 | |
| 已废弃。使用 <ul> 代替它。 | |
| 已废弃。使用 <ul> 代替它。 |
HTML<div> 和 <span>
可以通过 <div> 和 <span> 将 HTML 元素组合起来。
HTML 块元素
大多数HTML 元素被定义为块级元素或内联元素。
编者注：“块级元素”译为 block level element，“内联元素”译为 inline element。
块级元素在浏览器显示时，通常会以新行来开始（和结束）。
例子：<h1>,<p>, <ul>, <table>
HTML 内联元素
内联元素在显示时通常不会以新行开始。
例子：<b>,<td>, <a>, <img>
HTML <div> 元素
HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。
<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。
如果与CSS 一同使用，<div>元素可用于对大的内容块设置样式属性。
<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。
HTML <span> 元素
HTML <span> 元素是内联元素，可用作文本的容器。
<span> 元素也没有特定的含义。
当与CSS 一同使用时，<span>元素可用于为部分文本设置样式属性。
HTML 分组标签
| 标签 | 描述 |
| 定义文档中的分区或节（division/section）。 | |
| 定义 span，用来组合文档中的行内元素。 |
HTML布局
网页布局对改善网站的外观非常重要。
请慎重设计您的网页布局。
网站布局
大多数网站会把内容安排到多个列中（就像杂志或报纸那样）。
可以使用<div> 或者<table> 元素来创建多列。CSS用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。
提示：即使可以使用 HTML 表格来创建漂亮的布局，但设计表格的目的是呈现表格化数据 - 表格不是布局工具！
HTML 布局 - 使用 <div> 元素
div 元素是用于分组 HTML 元素的块级元素。
下面的例子使用五个div 元素来创建多列布局：
实例
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div#container{width:500px}
div#header {background-color:#99bbbb;}
div#menu {background-color:#ffff99;height:200px; width:100px; float:left;}
div#content {background-color:#EEEEEE;height:200px; width:400px; float:left;}
div#footer {background-color:#99bbbb;clear:both; text-align:center;}
h1 {margin-bottom:0;}
h2 {margin-bottom:0; font-size:14px;}
ul {margin:0;}
li {list-style:none;}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>Main Title of WebPage</h1>
</div>
<div id="menu">
<h2>Menu</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
<divid="content">Content goes here</div>
<divid="footer">Copyright W3School.com.cn</div>
</div>
</body>
</html>
上面的HTML 代码会产生如下结果：
HTML 布局 - 使用表格
使用HTML <table> 标签是创建布局的一种简单的方式。
可以使用<div> 或者<table> 元素来创建多列。CSS用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。
提示：即使可以使用 HTML 表格来创建漂亮的布局，但设计表格的目的是呈现表格化数据 - 表格不是布局工具！
下面的例子使用三行两列的表格- 第一和最后一行使用colspan 属性来横跨两列：
实例
<!DOCTYPE html>
<html>
<body>
<table width="500"border="0">
<tr>
<td colspan="2"style="background-color:#99bbbb;">
<h1>Main Title of WebPage</h1>
</td>
</tr>
<tr valign="top">
<tdstyle="background-color:#ffff99;width:100px;text-align:top;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript
</td>
<tdstyle="background-color:#EEEEEE;height:200px;width:400px;text-align:top;">
Content goes here</td>
</tr>
<tr>
<td colspan="2"style="background-color:#99bbbb;text-align:center;">
Copyright W3School.com.cn</td>
</tr>
</table>
</body>
</html>
上面的HTML 代码会产生以下结果：
HTML 布局 - 有用的提示
提示：使用 CSS最大的好处是，如果把CSS 代码存放到外部样式表中，那么站点会更易于维护。通过编辑单一的文件，就可以改变所有页面的布局。
提示：由于创建高级的布局非常耗时，使用模板是一个快速的选项。通过搜索引擎可以找到很多免费的网站模板（您可以使用这些预先构建好的网站布局，并优化它们）。
HTML表单和输入
HTML 表单用于搜集不同类型的用户输入。
表单
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。
表单使用表单标签（<form>）定义。
<form>
...
input 元素
...
</form>
输入
多数情况下被用到的表单标签是输入标签（<input>）。输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：
文本域（TextFields）
当用户要在表单中键入字母、数字等内容时，就会用到文本域。
<form>
First name:
<input type="text"name="firstname" />
<br />
Last name:
<input type="text"name="lastname" />
</form>
浏览器显示如下：
窗体顶端
First name:
Last name:
窗体底端
注意，表单本身并不可见。同时，在大多数浏览器中，文本域的缺省宽度是20个字符。
单选按钮（RadioButtons）
当用户从若干给定的的选择中选取其一时，就会用到单选框。
<form>
<input type="radio"name="sex" value="male" /> Male
<br />
<input type="radio"name="sex" value="female" /> Female
</form>
浏览器显示如下：
窗体顶端
Male
Female
窗体底端
注意，只能从中选取其一。
复选框（Checkboxes）
当用户需要从若干给定的选择中选取一个或若干选项时，就会用到复选框。
<form>
<input type="checkbox"name="bike" />
I have a bike
<br />
<input type="checkbox"name="car" />
I have a car
</form>
浏览器显示如下：
窗体顶端
Ihave a bike
I have a car
窗体底端
表单的动作属性（Action）和确认按钮
当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。
<form name="input"action="html_form_action.asp"method="get">
Username:
<input type="text"name="user" />
<input type="submit"value="Submit" />
</form>
浏览器显示如下：
窗体顶端
Username:
窗体底端
假如您在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 "html_form_action.asp" 的页面。该页面将显示出输入的结果。
表单标签
| 标签 | 描述 |
| 定义供用户输入的表单 | |
| 定义输入域 | |
| 定义文本域 (一个多行的输入控件) | |
| 定义一个控制的标签 | |
| 定义域 | |
| 定义域的标题 | |
| 定义一个选择列表 | |
| 定义选项组 | |
| 定义下拉列表中的选项 | |
| 定义一个按钮 | |
| <isindex> | 已废弃。由 <input> 代替。 |
HTML框架
通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。
框架
通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。
使用框架的坏处：
· 开发人员必须同时跟踪更多的HTML文档
· 很难打印整张页面
框架结构标签（<frameset>）
· 框架结构标签（<frameset>）定义如何将窗口分割为框架
· 每个 frameset 定义了一系列行或列
· rows/columns 的值规定了每行或每列占据屏幕的面积
编者注：frameset标签也被某些文章和书籍译为框架集。
框架标签（Frame）
Frame 标签定义了放置在每个框架中的 HTML 文档。
在下面的这个例子中，我们设置了一个两列的框架集。第一列被设置为占据浏览器窗口的 25%。第二列被设置为占据浏览器窗口的 75%。HTML文档 "frame_a.htm" 被置于第一个列中，而 HTML 文档 "frame_b.htm" 被置于第二个列中：
<framesetcols="25%,75%">
<framesrc="frame_a.htm">
<framesrc="frame_b.htm">
</frameset>
基本的注意事项 - 有用的提示：
假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在 <frame> 标签中加入：noresize="noresize"。
为不支持框架的浏览器添加<noframes> 标签。
重要提示：不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用！不过，假如你添加包含一段文本的 <noframes> 标签，就必须将这段文字嵌套于 <body></body> 标签内。
添加 iframe 的语法
<iframe src="URL"></iframe>
frame - 设置高度和宽度
height 和width 属性用于规定iframe 的高度和宽度。
属性值的默认单位是像素，但也可以用百分比来设定（比如 "80%"）。
实例
<iframesrc="demo_iframe.htm" width="200"height="200"></iframe>
Iframe - 删除边框
frameborder 属性规定是否显示 iframe 周围的边框。
设置属性值为"0" 就可以移除边框：
实例
<iframesrc="demo_iframe.htm" frameborder="0"></iframe>
使用 iframe 作为链接的目标
iframe 可用作链接的目标（target）。
链接的target 属性必须引用iframe 的name 属性：
实例
<iframesrc="demo_iframe.htm"name="iframe_a"></iframe>
<p><ahref="http://www.w3school.com.cn"target="iframe_a">W3School.com.cn</a></p>
HTML iframe 标签
| 标签 | 描述 |
| 定义内联的子窗口（框架） |
HTML背景
背景（Backgrounds）
<body> 拥有两个配置背景的标签。背景可以是颜色或者图像。
背景颜色（Bgcolor）
背景颜色属性将背景设置为某种颜色。属性值可以是十六进制数、RGB 值或颜色名。
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">
以上的代码均将背景颜色设置为黑色。
背景（Background）
背景属性将背景设置为图像。属性值为图像的URL。如果图像尺寸小于浏览器窗口，那么图像将在整个浏览器窗口进行复制。
<body background="clouds.gif">
<body background="http://www.w3school.com.cn/clouds.gif">
URL可以是相对地址，如第一行代码。也可以使绝对地址，如第二行代码。
提示：如果你打算使用背景图片，你需要紧记一下几点：
· 背景图像是否增加了页面的加载时间。小贴士：图像文件不应超过 10k。
· 背景图像是否与页面中的其他图象搭配良好。
· 背景图像是否与页面中的文字颜色搭配良好。
· 图像在页面中平铺后，看上去还可以吗？
· 对文字的注意力被背景图像喧宾夺主了吗？
基本的注意事项 - 有用的提示：
<body> 标签中的背景颜色（bgcolor）、背景（background）和文本（text）属性在最新的 HTML 标准（HTML4 和XHTML）中已被废弃。W3C在他们的推荐标准中已删除这些属性。
应该使用层叠样式表（CSS）来定义 HTML 元素的布局和显示属性。
HTML颜色
颜色由红色、绿色、蓝色混合而成。
颜色值
颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。
每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）。
这个表格给出了由三种颜色混合而成的具体效果：
|
| ||
| Color | Color HEX | Color RGB |
|---|---|---|
| #000000 | rgb(0,0,0) | |
| #FF0000 | rgb(255,0,0) | |
| #00FF00 | rgb(0,255,0) | |
| #0000FF | rgb(0,0,255) | |
| #FFFF00 | rgb(255,255,0) | |
| #00FFFF | rgb(0,255,255) | |
| #FF00FF | rgb(255,0,255) | |
| #C0C0C0 | rgb(192,192,192) | |
| #FFFFFF | rgb(255,255,255) | |
|
|
颜色名
大多数的浏览器都支持颜色名集合。
提示：仅仅有 16 种颜色名被 W3C 的HTML4.0 标准所支持。它们是：aqua,black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red,silver, teal, white, yellow。
如果需要使用其它的颜色，需要使用十六进制的颜色值。
|
|
| Color | Color HEX | Color Name |
|---|---|---|
| #F0F8FF | AliceBlue | |
| #FAEBD7 | AntiqueWhite | |
| #7FFFD4 | Aquamarine | |
| #000000 | Black | |
| #0000FF | Blue | |
| #8A2BE2 | BlueViolet | |
| #A52A2A | Brown |
Web安全色
数年以前，当大多数计算机仅支持256 种颜色的时候，一系列216 种Web 安全色作为Web 标准被建议使用。其中的原因是，微软和 Mac 操作系统使用了 40 种不同的保留的固定系统颜色（双方大约各使用 20 种）。
我们不确定如今这么做的意义有多大，因为越来越多的计算机有能力处理数百万种颜色，不过做选择还是你自己。
216 跨平台色
最初，216跨平台 web 安全色被用来确保：当计算机使用 256 色调色板时，所有的计算机能够正确地显示所有的颜色。
| 000000 | 000033 | 000066 | 000099 | 0000CC | 0000FF |
| 003300 | 003333 | 003366 | 003399 | 0033CC | 0033FF |
| 006600 | 006633 | 006666 | 006699 | 0066CC | 0066FF |
| 009900 | 009933 | 009966 | 009999 | 0099CC | 0099FF |
| 00CC00 | 00CC33 | 00CC66 | 00CC99 | 00CCCC | 00CCFF |
| 00FF00 | 00FF33 | 00FF66 | 00FF99 | 00FFCC | 00FFFF |
| 330000 | 330033 | 330066 | 330099 | 3300CC | 3300FF |
| 333300 | 333333 | 333366 | 333399 | 3333CC | 3333FF |
| 336600 | 336633 | 336666 | 336699 | 3366CC | 3366FF |
| 339900 | 339933 | 339966 | 339999 | 3399CC | 3399FF |
| 33CC00 | 33CC33 | 33CC66 | 33CC99 | 33CCCC | 33CCFF |
| 33FF00 | 33FF33 | 33FF66 | 33FF99 | 33FFCC | 33FFFF |
| 660000 | 660033 | 660066 | 660099 | 6600CC | 6600FF |
| 663300 | 663333 | 663366 | 663399 | 6633CC | 6633FF |
| 666600 | 666633 | 666666 | 666699 | 6666CC | 6666FF |
| 669900 | 669933 | 669966 | 669999 | 6699CC | 6699FF |
| 66CC00 | 66CC33 | 66CC66 | 66CC99 | 66CCCC | 66CCFF |
| 66FF00 | 66FF33 | 66FF66 | 66FF99 | 66FFCC | 66FFFF |
| 990000 | 990033 | 990066 | 990099 | 9900CC | 9900FF |
| 993300 | 993333 | 993366 | 993399 | 9933CC | 9933FF |
| 996600 | 996633 | 996666 | 996699 | 9966CC | 9966FF |
| 999900 | 999933 | 999966 | 999999 | 9999CC | 9999FF |
| 99CC00 | 99CC33 | 99CC66 | 99CC99 | 99CCCC | 99CCFF |
| 99FF00 | 99FF33 | 99FF66 | 99FF99 | 99FFCC | 99FFFF |
| CC0000 | CC0033 | CC0066 | CC0099 | CC00CC | CC00FF |
| CC3300 | CC3333 | CC3366 | CC3399 | CC33CC | CC33FF |
| CC6600 | CC6633 | CC6666 | CC6699 | CC66CC | CC66FF |
| CC9900 | CC9933 | CC9966 | CC9999 | CC99CC | CC99FF |
| CCCC00 | CCCC33 | CCCC66 | CCCC99 | CCCCCC | CCCCFF |
| CCFF00 | CCFF33 | CCFF66 | CCFF99 | CCFFCC | CCFFFF |
| FF0000 | FF0033 | FF0066 | FF0099 | FF00CC | FF00FF |
| FF3300 | FF3333 | FF3366 | FF3399 | FF33CC | FF33FF |
| FF6600 | FF6633 | FF6666 | FF6699 | FF66CC | FF66FF |
| FF9900 | FF9933 | FF9966 | FF9999 | FF99CC | FF99FF |
| FFCC00 | FFCC33 | FFCC66 | FFCC99 | FFCCCC | FFCCFF |
| FFFF00 | FFFF33 | FFFF66 | FFFF99 | FFFFCC | FFFFFF |
HTML颜色名
颜色名列表
单击一个颜色名或者16 进制值，就可以查看与不同文字颜色搭配的背景颜色。
1245
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
