Hypertext Markup Language, 中文也就是超文本链接标示语言。HTML（HyperTextMark-upLanguage）即超文本标记语言，是WWW的描述语言。设计HTML语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起，形成有机的整体，人们不用考虑具体信息是在当前电脑上还是在网络的其它电脑上。我们只需使用鼠标在某一文档中点取一个图标，Internet就会马上转到与此图标相关的内容上去，而这些信息可能存放在网络的另一台电脑中。
什么是HTML文件？ HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。另外，HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。
- HTML指超文本标签语言。
- HHTML文件是一个包含一些标签的文本文件。
- 这些标签告诉WEB浏览器如何显示页面。
- HTML文件必须有htm或者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文件中的第一个标签是<html>。这个标签告诉浏览器这个一个HTML文件的开始点。文件中最后一个标签是</html>。这个标签告诉您的浏览器，这是HTML文件的结束点。
位于<head>标签和</head>标签之间的文本是头信息。头信息不会显示于浏览器窗口中。
<title>标签中的文本是文件的标题。标题会显示在浏览器的标题栏。
<body>标签中的文本是将被浏览器显示出来的文本。
<b>和</b>标签中的文本将以粗体显示。
为什么我们要使用小写的标签？
我们刚才讲到：HTML标签对大小写是不敏感的：<b>和<B>的作用的相同的。当您在网上冲浪时，您会发现大多数教程在他们的例子中都使用大写的HTML标签。而我们总是使用小写。原因何在呢？
如果您希望为使用下一代HTML而做好准备，您就应该使用小写标签。万维网协会(W3C)的标准是：建议在HTML 4中使用小写标签，而在XHTML（下一代HTML）中，必须使用小写标签。
HTM还是HTML扩展名？
当您将一个HTML文件存盘时，您即可以使用HTM也可以使用HTML作为扩展名。我们刚才使用的.htm作为上面那个例子的扩展名。不过这样做也许是一个坏习惯，习惯于这样做的人也许是因为使用某些过时的软件而养成了这个坏习惯，这些软件只允许三个字母作为扩展名。
如果您使用新近的软件，我们认为使用.html是相当安全的做法。
常见问题（FAQ）
Q：我已经编辑了一个HTML文件，但是浏览器无法显示出结果。为什么？
A：首先确定您使用了正确的文件名和扩展名存盘，比如说"c:/mypage.htm"。然后看一下是否在浏览器中使用了同样的文件名来打开这个文件。
Q：我重新编辑了HTML文件，但是浏览器的显示没有任何变化。为什么？
A：为了不重复读取同一个页面，浏览器要对您的页面进行缓存。浏览器不会意识到您已经修改了页面。通过使用刷新或者重载按钮，您可以使浏览器读取编辑后的页面。
Q：我应该使用何种浏览器?
A：您可以使用任何一款通用浏览器进行训练，例如Internet Explorer, Mozilla, Netscape,或者Opera。不过，我们的高级课程中的某些例子需要最新版本的浏览器的支持。
Q：我的电脑必须运行Windows吗？使用Mac机可以吗？
A：您可以在非Windows系统上进行所有的训练，比如Mac。不过，我们的高级课程中的某些例子需要的最低版本的Windows系统是Windows 98 或者 Windows
HTML 元素
HTML文档是由HTML元素构成的文本文件。
HTML元素是通过使用HTML标签进行定义的。
-
HTML标签
-
- HTML标签是用来标记HTML元素的。
- HTML标签被<和>符号包围。
- 这些包围的符号叫作。
- HTML标签是成对出现的。例如<b>和</b>。
- 位于起始标签和终止标签之间的文本是元素的内容。
- HTML标签对大小写不敏感，<b>和<B>的作用的相同的。
HTML元素
还记得上一节中的那个例子吗：
<html>
<head>
<title>页面的标题</title>
</head>
<body>
<p>这是我的第一个页面。</p>
<b>此文本是粗体的。</b>
</body>
</html>
这就是一个HTML元素：
<b>此文本是粗体的。</b>
这个HTML元素由起始标签<b>开始。
这个元素的内容是：“此文本是粗体的。”。
这个HTML元素由终止标签</b>结尾。
<b>标签的作用是定义一个显示为粗体的HTML元素。
这也是一个HTML文档：
<body> <p>这是我的第一个页面。</p> <b>此文本是粗体的。</b> </body>
这个HTML元素开始于<body>标签，结束于</body>标签。
<body>标签的作用是定义HTML文件中的容纳body的HTML元素。
标签属性
标签可以有属性。属性可以为您的页面中的HTML元素提供附加的信息。
如前所述，<body>标签用来定义页面的body元素。通过添加一个bgcolor属性，您可以告知浏览器将页面的背景颜色显示为红色，就像这样：<body bgcolor="red">。
<table>用来定义一个HTML表格。通过添加一个border属性，您可以告知浏览器显示一个没有边框的表格：<table border="0">。
属性由属性名和值组成，就像这样：name="value"。
属性应该被添加到HTML元素的起始标签。
单引号还是双引号？
属性值应被置于引号之间。通常情况下应该使用双引号，不过使用单引号也没有问题。
但是在个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：
name='John"ShotGun"Nelson'
基本的HTML标签
HTML中最重要的标签是定义头、段落和换行的标签。
学习HTML最好的方式就是边学边做实验。我们为您准备了很好的HTML editor编辑器。使用这个编辑器，您可以任意编辑一段HTML源码，然后单击test按钮查看结果。
实例
-
一个简单的HTML文件
- 这个例子是一个很简单的HTML文件，使用了尽量少的HTML标签。它向您演示了body元素中的内容是如何被浏览器显示的。 简单的段落
- 此例演示：段落元素中的文字如何被浏览器显示。
标题
标题使用<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 a paragraph</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>的情况下，<p>标签依然可以正常工作。不过不要这样做！下一个版本的HTML将不允许忽略任何的结束标签。
HTML会自动地在某些元素前后添加一个额外的空行，比如段落、标题元素前后。
使用水平线(<hr>标签)来分隔文章中的小节是一个办法（但并不是唯一的办法）。
更多实例
-
更多的段落
- 本例演示段落元素的某些缺省的行为。 “诗歌”问题
- 本例演示HTML格式化的某些问题。 折行
- 本例演示在HTML文档中折行的使用。 标题
- 本例演示在HTML文档中显示标题的标签。 居中排列的标题
- 本例演示一个居中排列的标题。 水平线
- 本例演示如何插入水平线。 隐藏的注释
- 本例演示如何在HTML源代码中插入隐藏的注释。 背景颜色
- 本例演示如何为HTML页面添加背景颜色。
基本的HTML标签
| 标签 | 描述 |
|---|---|
| <html> | 定义HTML文档。 |
| <body> | 定义文档的主体。 |
| <h1> to <h6> | 定义标题1至标题6。 |
| <p> | 定义段落。 |
| <br> | 插入折行。 |
| <hr> | 定义水平线。 |
| <!--> | 定义注释。 |
HTML 文本格式化
HTML可定义很多供格式化输出的元素，比如粗体和斜体字。
下面有很多例子，您可以亲自试试：
HTML 文本格式化实例
如何查看HTML源码
您是否有过这样的经历，当你看到一个很棒的站点，你会很想知道开发人员是如何将它实现的？
你有没有看过一些网页，并且想知道它是如何做出来的呢？
要揭示一个网站的技术秘密，其实很简单。单击浏览器的“查看”菜单，选择“查看源文件”即可。随后你会看到一个弹出的窗口，窗口内就是实际的HTML代码。
文本格式化标签
| 标签 | 描述 |
|---|---|
| <b> | 定义粗体 |
| <big> | 定义大号字 |
| <em> | 定义着重文字 |
| <i> | 定义斜体字 |
| <small> | 定义小号字 |
| <strong> | 定义加重语气 |
| <sub> | 定义下标字 |
| <sup> | 定义上标字 |
| <ins> | 定义插入字 |
| <del> | 定义删除字 |
| <s> | 不赞成使用。使用<del>代替。 |
| <strike> | 不赞成使用。使用<del>代替。 |
| <u> | 不赞成使用。使用样式（style）代替。 |
“计算机输出”标签
| 标签 | 描述 |
|---|---|
| <code> | 定义计算机代码 |
| <kbd> | 定义键盘码 |
| <samp> | 定义计算机代码样本 |
| <tt> | 定义打字机代码 |
| <var> | 定义变量 |
| <pre> | 定义预格式文本 |
| <listing> | 不赞成使用。使用<pre>代替。 |
| <plaintext> | 不赞成使用。使用<pre>代替。 |
| <xmp> | 不赞成使用。使用<pre>代替。 |
引用、引用和术语定义
| 标签 | 描述 |
|---|---|
| <abbr> | 定义缩写。 |
| <acronym> | 定义首字母缩写。 |
| <address> | 定义地址。 |
| <bdo> | 定义文字方向。 |
| <blockquote> | 定义长的引用。 |
| <q> | 定义短的引用语。 |
| <cite> | 定义引用、引证。 |
| <dfn> | 定义一个定义项目。 |
诸如“<”之类的符号在HTML中拥有特殊的含义，所以不能被用于文本之中。
为了在HTML中显示小于号(<)，我们需要使用字符实体。
字符实体
某些字符在HTML中拥有特殊的含义，比如小于号(<)用来定义一个HTML标签的开始。如果我们希望浏览器正确地显示这些字符，我们必须在HTML源码中插入字符
字符实体有三部分：一个和号(&)，一个实体名称，或者#和一个实体编号，以及一个分号(;)。
要在HTML文档中显示小于号，我们需要这样写：<或者<
使用实体名称而不是实体编号的好处在于，名称相对来说更容易记忆。而这么做的坏处是，并不是所有的浏览器都支持最新的实体名称，然而几乎所有的浏览器对实体编号的支持都很好。
注意：实体对大小写敏感。
空格
空格是HTML中最普通的字符实体。
通常情况下，HTML会裁掉文档中的空格。假如你在文档中连续输入10个空格，那么HTML会去掉其中的9个。如果使用 ，就可以在文档中增加空格。
最常用的字符实体
| 显示结果 | 描述 | 实体名称 | 实体编号 |
|---|---|---|---|
| 空格 | |   | |
| < | 小于号 | < | < |
| > | 大于号 | > | > |
| & | 和号 | & | & |
| " | 引号 | " | " |
| ' | 撇号 | ' (IE不支持) | ' |
其他一些常用的字符实体
| 显示结果 | 描述 | 实体名称 | 实体编号 |
|---|---|---|---|
| ￠ | 分 | ¢ | ¢ |
| £ | 镑 | £ | £ |
| ¥ | 日圆 | ¥ | ¥ |
| § | 节 | § | § |
| © | 版权 | © | © |
| ® | 注册商标 | ® | ® |
| × | 乘号 | × | × |
| ÷ | 除号 | ÷ | ÷ |
HTML 链接
HTML使用超级链接与网络上的另一个文档相连。
锚标签和Href属性
HTML使用<a>（锚）标签来创建连接另一个文档的链接。
锚可以指向网络上的任何资源：一张HTML页面，一幅图像，一个声音或视频文件等等。
创建锚的语法：
<a href="url">Text to be displayed</a>
<a>用来创建锚。href属性用来定位需要链接的文档，锚的开始标签和结束标签之间的文字被作为超级链接来显示。
这个锚定义了指向w3school的链接：
<a href="http://www.w3school.com.cn/">Visit W3School!</a>
上面的这行在浏览器被显示为这样：Visit W3School!
Target属性
使用Target属性，你可以定义被链接的文档在何处被显示。
下面的这行会在新窗口打开文档：
<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>
锚标签和Name属性
Name属性被用来创建被命名的锚（named anchors）。当使用命名锚（named anchors）时，我们可以创建直接跳至页面中某个节的链接，这样使用者就无需不停的滚动页面来寻找他们需要的信息。
以下是命名锚的语法：
<a name="label">Text to be displayed</a>
name属性被用来创建命名锚。锚的名称可以是任何你喜欢的名字。
下面这行定义了命名锚：
<a name="tips">Useful Tips Section</a>
你会注意到，命名锚会以特殊的方式来显示。
将#符号和锚名称添加到URL的末端，就可以直接链接到tips这个节，就像这样：
<a href="http://www.w3school.com.cn/html_links.asp#tips"> Jump to the Useful Tips Section </a>
从文件html_links.asp内部链接到Useful Tips节的超级链接是这样的：
基本的注意事项 - 有用的提示：
总是将正斜杠添加到子文件夹。假如你这样书写链接的话：href="http://www.w3school.com.cn/html"，就会向服务器产生两次HTTP请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href="http://www.w3school.com.cn/html/"
命名锚经常被用在长的文档中创建目录。每个章节都可以被赋予一个命名锚，然后连接到这些锚的链接被置于文档的上部。
假如浏览器找不到已被定义的命名锚，那么就会定位到文档的顶端。不会有错误发生。
更多实例
-
在新的浏览器窗口打开链接
- 本例演示如何在新窗口打开一个页面，这样的话访问者就无需离开你的站点了。 链接到同一个页面的不同位置
- 本例演示如何使用链接跳转至文档的另一个部分 跳出框架
- 本例演示如何跳出框架，假如你的页面被固定在框架之内。 创建电子邮件链接
- 本例演示如何如何链接到一个邮件。（本例在安装邮件客户端程序后才能工作。） 创建电子邮件链接 2
- 本例演示更加复杂的邮件链接。
| 标签 | 描述 |
|---|---|
| <a> | 定义锚 |
通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。
框架
通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。
使用框架的坏处：
- 开发人员必须同时跟踪更多的HTML文档。
- 打印整张页面变得困难。
-
框架结构标签（<frameset>）
-
- 框架结构标签（<frameset>）定义如何将窗口分割为框架
- 每个框架定义了一系列行或列
- 行或列的值规定了每行或每列占据屏幕的面积
编者注：frameset标签也被某些文章或书籍译为框架集。
框架标签（Frame）
框架标签定义了被置入每个框架的HTML文档。
在下面的这个例子中，我们设置了一个两列的框架。第一列被设置为占据浏览器窗口的25%。第二列被设置为占据浏览器窗口的75%。HTML文档"frame_a.htm"被置于第一个列中，而HTML文档"frame_b.htm"被置于第二个列中：
<frameset cols="25%,75%"> <frame src="frame_a.htm"> <frame src="frame_b.htm"> </frameset>
基本的注意事项 - 有用的提示：
假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在<frame>标签中加入：noresize="noresize"。
为不支持框架的浏览器添加<noframes>标签。
重要提示：不能将<body></body>标签与<frameset></frameset>标签同时使用！不过，假如你添加包含一段文本的<noframes>标签，就必须将这段文字嵌套于<body></body>标签内。（在下面的第一个实例中，可以查看它是如何实现的。）
更多实例
-
如何使用<noframes>标签
- 本例演示：如何使用<noframes>标签。 混合框架结构
- 本例演示如何制作含有三份文档的框架结构，同时将他们混合置于行和列之中。 含有noresize="noresize"属性的框架结构
- 本例演示noresize属性。在本例中，框架是不可调整尺寸的。在框架间的边框上拖动鼠标，你会发现边框是无法移动的。 导航框架
- 本例演示如何制作导航框架。导航框架包含一个将第二个框架作为目标的链接列表。名为"=contents.htm"的文件包含三个链接。 内联框架
- 本例演示如何创建内联框架（HTML页中的框架）。 跳转至框架内的一个指定的节
- 本例演示两个框架。其中的一个框架设置了指向另一个文件内指定的节的链接。这个"link.htm"文件内指定的节使用进行标识。 使用框架导航跳转至指定的节
- 本利演示两个框架。左侧的导航框架包含了一个链接列表，这些链接将第二个框架作为目标。第二个框架显示被链接的文档。导航框架其中的链接指向目标文件中被指定的节。
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>row 2, cell 1</td>
<td></td>
</tr>
</table>
在浏览器显示如下：
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 |
注意：这个空的单元格的边框没有被显示出来。（不过Mozilla Firefox可以将整个边框显示出来。）为了避免这种情况，在空单元格中添加一个空格占位符，就可以将边框显示出来。
<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 |
基本的注意事项 - 有用的提示：
<thead>,<tbody> and <tfoot>很少被用到，这是由于浏览器对它们的支持不太好。希望这种情况在未来版本的 XHTML 中会有所改观。如果你使用IE5.0或者更新的版本，可以查看在我们的《XML教程》中的具体例子。
更多实例
-
没有边框的表格
- 本例演示一个没有边框的表格。 表格中的标题(Headings)
- 本例演示如何显示表格标题。 空单元格
- 本例展示如何使用" "处理没有内容的单元格。 带有标题的表格
- 本例演示一个带标题(caption)的表格 跨行或跨列的表格单元格
- 本例演示如何定义跨行或跨列的表格单元格。 表格内的标签
- 本例演示如何显示在不同的元素内显示元素。 单元格填充(Cell padding)
- 本例演示如何使用单元格填充来创建单元格内容与其边框之间的空白。 单元格间距(Cell spacing)
- 本例演示如何使用单元格间距增加单元格之间的距离。 向表格添加背景颜色或背景图像
- 本例演示如何向表格添加背景 向表格单元添加背景颜色或者背景图像
- 本例演示如何向一个或者更多表格单元添加背景 在表格单元中排列内容
- 本例演示如何使用"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>
浏览器显示如下：
- Coffee
- 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
定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
更多实例
| 标签 | 描述 |
|---|---|
| <ol> | 定义有序列表 |
| <ul> | 定义无序列表 |
| <li> | 定义列表项 |
| <dl> | 定义定义列表 |
| <dt> | 定义定义项目 |
| <dd> | 定义定义描述 |
| <dir> | 已废弃。使用<ul>代替它。 |
| <menu> | 已废弃。使用<ul>代替它。 |
HTML表单被用来选取不同类型的用户输入。
表单
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。
表单使用表单标签（<form>）定义。
<form> <input> <input> </form>
输入
多数情况下被用到的表单标签是输入标签（<input>）。输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：
文本域（Text Fields）
当用户要在表单中键入字母、数字等内容时，就会用到文本域。
<form> First name:<input type="text" name="firstname"><br> Last name:<input type="text" name="lastname"></form>
浏览器显示如下：
注意，表单本身并不可见。同时，在大多数浏览器中，文本域的缺省宽度是20个字符。
单选按钮（Radio Buttons）
当用户从若干给定的的选择中选取其一时，就会用到单选框。
<form><input type="radio" name="sex" value="male">Male<input type="radio" name="sex" value="female">Female </form>
浏览器显示如下：
注意，只能从中选取其一。
复选框（Checkboxes）
当用户需要从若干给定的选择中选取一个或若干选项时，就会用到复选框。
<form><input type="checkbox" name="bike">I have a bike <br><input type="checkbox" name="car">I have a car </form>
浏览器显示如下：
表单的动作属性（Action）和确认按钮
当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。
<form name="input"action="html_form_action.asp" method="get">Username: <input type="text" name="user"><input type="submit" value="Submit"></form>
浏览器显示如下：
假如你再上面的文本框内键入几个字母，并且点击确认按钮，那么输入数据会被传送到名为"html_form_action.asp"的页面。那一页将显示出输入的结果。
更多实例
-
复选框
- 本例演示如何在HTML页中创建文本框。用户可以选中或取消选取复选框。 单选按钮
- 本例演示如何在HTML中创建单选按钮。 简单的下拉列表
- 本例演示如何在HTML页面中创建简单的下拉列表框。下拉列表框是一个可选列表。 另一个下拉列表
- 本例演示如何创建一个简单的带有预选值的下拉列表。（译者注：预选值指预先指定的首选项。） 文本域(Textarea)
- 本例演示如何创建一个文本域（多行文本输入控制）。用户可以在文本域中写入文本。在文本域中，可写入的字符字数不受限制。 创建按钮
- 本例演示如何创建按钮。你可以对按钮上的文字进行自定义。 Fieldset around data
- 本例演示如何在数据周围绘制一个带标题的框。 带有输入框和确认按钮的表单
- 本例演示如何向页面添加表单。此表单包含两个输入框和一个确认按钮。 带有复选框的表单
- 此表单包含两个复选框和一个确认按钮。 带有单选按钮的表单
- 此表单包含两个单选框和一个确认按钮。 从表单发送电子邮件
- 此例演示如何从表单发送电子邮件。
| 标签 | 描述 |
|---|---|
| <form> | 定义供用户输入的表单 |
| <input> | 定义输入域 |
| <textarea> | 定义文本域 (一个多行的输入控制) |
| <label> | 定义一个控制的标签 |
| <fieldset> | 定义域 |
| <legend> | 定义域的标题 |
| <select> | 定义一个选择列表 |
| <optgroup> | 定义选项组 |
| <option> | 定义下拉列表中的选项 |
| <button> | 定义一个按钮 |
| <isindex> | 已废弃。有<input>代替。 |
通过使用HTML，可以在文档中显示图像。
图像标签（<img>）和源属性（Src）
在HTML中，图像由<img>标签定义。
<img>是空标签，意思是说，它只包含属性，并且没有闭合标签。
要在页面上显示图像，你需要使用源属性（src）。Src指"source"。源属性的值是图像的URL地址。
定义图像的语法是：
<img src="url" />
URL指存储图像的位置。如果命名为"boat.gif"的图像位于www.w3schools.com的images目录中，那么其URL为http://www.w3schools.com/images/boat.gif。
浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。
替换文本属性（Alt）
Alt属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。
<img src="boat.gif" alt="Big Boat">
在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。
基本的注意事项 - 有用的提示：
假如某个HTML文件包含十个图像，那么为了正确显示这个页面，需要加载11个文件。加载图片是需要时间的，所以我们的建议是：慎用图片。
更多实例
好的背景使站点看上去特别棒。
实例
-
搭配良好的背景和颜色
- 一个背景颜色和文字颜色搭配良好的例子，使页面中的文字易于阅读。 搭配得不好的背景和颜色
- 一个背景颜色和文字颜色搭配得不好的例子，使页面中的文字难于阅读。
背景（Backgrounds）
<body>拥有两个配置背景的标签。背景可以使颜色或者图像。
背景颜色（Bgcolor）
背景颜色属性将背景设置为某种颜色。属性值可以是十六进制数、RGB值或颜色名。
<bodybgcolor="#000000"> <bodybgcolor="rgb(0,0,0)"> <bodybgcolor="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元素的属性。
更多实例
-
可用性强的背景图像
- 背景图像和文字颜色使页面文本易于阅读的例子。 可用性强的背景图像 2
- 另一个背景图像和文字颜色使页面文本易于阅读的例子。 可用性差的背景图像
- 背景图像和文字颜色使页面文本不易阅读的例子。
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 颜色值
颜色由红色、绿色、蓝色混合而成。
颜色值
颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）。
关闭红色
如果将红色完全关闭,绿色和蓝色的组合有65536种（256 x 256）。
单击此处查看绿色和蓝色的不同组合。
打开红色
如果将红色设置为最大值,那么仍然存在65536种绿色和蓝色的不同组合。
单击此处查看绿色和蓝色的不同组合。
1600万种不同的颜色
通过计算256 x 256 x 256，从0到255的红色、绿色和蓝色的值一共可以组合出1600万种不同的颜色。
大多数现代的显示器有能力显示出至少16384种不同的颜色。
你可以查看下面的色表，你会看到当绿色和蓝色的值为零时，红色值从0到255时的具体的颜色。
如需查看基于红色从0到255变化时的16384种不同的颜色，请单击下面的十六进制值或者rgb颜色值：
灰阶
当所有颜色取相等的值时，灰色就可以被显示出来。为了使您更容易地选择合适的灰色，我们为您制作了一幅灰阶色表。
| RGB(0,0,0) | #000000 | |
| RGB(8,8,8) | #080808 | |
| RGB(16,16,16) | #101010 | |
| RGB(24,24,24) | #181818 | |
| RGB(32,32,32) | #202020 | |
| RGB(40,40,40) | #282828 | |
| RGB(48,48,48) | #303030 | |
| RGB(56,56,56) | #383838 | |
| RGB(64,64,64) | #404040 | |
| RGB(72,72,72) | #484848 | |
| RGB(80,80,80) | #505050 | |
| RGB(88,88,88) | #585858 | |
| RGB(96,96,96) | #606060 | |
| RGB(104,104,104) | #686868 | |
| RGB(112,112,112) | #707070 | |
| RGB(120,120,120) | #787878 | |
| RGB(128,128,128) | #808080 | |
| RGB(136,136,136) | #888888 | |
| RGB(144,144,144) | #909090 | |
| RGB(152,152,152) | #989898 | |
| RGB(160,160,160) | #A0A0A0 | |
| RGB(168,168,168) | #A8A8A8 | |
| RGB(176,176,176) | #B0B0B0 | |
| RGB(184,184,184) | #B8B8B8 | |
| RGB(192,192,192) | #C0C0C0 | |
| RGB(200,200,200) | #C8C8C8 | |
| RGB(208,208,208) | #D0D0D0 | |
| RGB(216,216,216) | #D8D8D8 | |
| RGB(224,224,224) | #E0E0E0 | |
| RGB(232,232,232) | #E8E8E8 | |
| RGB(240,240,240) | #F0F0F0 | |
| RGB(248,248,248) | #F8F8F8 | |
| RGB(255,255,255) | #FFFFFF |
HTML 颜色名
本页提供了被大多数浏览器支持的颜色名。
提示：仅有16种颜色名被 W3C 的 HTML 4.0 标准支持，它们是：aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、purple、red、silver、teal、white、yellow。如果使用其它颜色的话，就应该使用十六进制的颜色值。
单击一个颜色名或者16进制值,就可以查看与不同文字颜色搭配的背景颜色。
Source : http://www.w3school.com.cn/html/html_quick.asp
扫一扫
4501
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
