XHTML与CSS入门经典从零开始系列教程！

qpyangwu · 发表于 2007-8-25 17:32:55

1、简介及入门 ──一开始你所需要做的和创作你的第一个HTML文件
2、标签、属性和元素──构成HTML的要素
3、title文档标题 ──页面的标题
4、段落──用段落构建你的内容
5、标题h1~h6 ──6个等级的标题
6、列表──定义有序或无序的列表
7、链接──把东西链接起来
8、图象──添加一点不是文本的东西
9、表格table ──使用表格式的数据
10、表单form ──文本框和其他由用户输入的构件
11、综合应用__把上面所有的要素堆积起来

qpyangwu · 发表于 2007-8-25 17:33:18

1、简介及入门 ──一开始你所需要做的和创作你的第一个HTML文件

这份HTML初级教程假设你没有任何HTML和CSS的知识背景。

学习基本的HTML十分容易，只要你能从头到尾按照每一步骤来实践。最后我们会将每一步综合起来，以便我们继续学习CSS初级指南。

需要记住的是，HTML和CSS是关于内容(HTML)和表现(CSS)的一切。HTML不过是有精美结构的内容罢了，是我们将要在下一步学习的CSS则是用来格式化内容的。

或许你已经留神过其他的HTML的教程，你可能会发现它们提及一些HTMLDog没有的东西。这是因为许多方法已经过时，不符合标准或者只是平白的坏实践。从一开始就在脑海中形成“走对的路”的思想最终可以帮助你掌握得更好。

绝大部分的HTML要素并不比你电脑上的其他要素要难——只不过是一大堆归类的文件放置在一大堆的文件夹里面而已。

HTML文件与简单的文本文件无异，所以开始编辑HTML你只需要一个简单的文本编辑器。记事本就是一个例子（在Windows里可以从程序-〉附件的菜单中找到，如果你使用的是Linux，恭喜你，无论是控制台或者桌面环境，你都有更多更好的选择，比如控制台的vi以及各种vi变种，GNOME的Gedit，KDE的kate等等——译者注）。

[ 本帖最后由 qpyangwu 于 2007-8-25 17:34 编辑 ]

qpyangwu · 发表于 2007-8-25 17:35:07

2、标签、属性和元素──构成HTML的要素

尽管HTML的基础是纯文本，但我们还是需要多一些东西才能使纯文本文件变成合法的HTML文件。

标签

HTML基本的构成包含标签，标签围绕着内容，赋予内容某些意义。

按照下面改进你的文件：

Example Source Code [www.cn-webmaster.cn]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<body>
这是我的第一个网页
</body>
</html>

保存文件，回到浏览器界面和选择“玩新”（这会重新装载网页）。

网页的外观没有任何改变，HTML的目的是表达内容，而不是表达表现，这个例子现在已经定义了网页一定的基本元素。

第一行以<!DOCTYPE..开始是为了让浏览器知道你到底要做什么。你可能还不知道自己在做什么，但接受它很重要。如果你不这样做，浏览器将用“quirks”（奇怪的）模式来表现你的网页。现在还不必担心，当然你需要了解或者学习的话可以看看 HTML高级教成的进一步学习“文档类型”。当前，只需要记住把这一行放在文件的顶端就可以了。

言归正传，<html>是隔开其他内容的起始标签，它告诉浏览器，位于自己与闭合标签</html>之间的就是是HTML文档。在<body>和</body>之间的是这个文档展示在浏览器上的主要内容。

闭合标签

</body>和</html>关闭他们各自的标签。所有的HTML标签都要关闭。尽管老版本的HTML允许某些标签不关闭，但最新的标准要求所有的标签都要关闭。无论如何，闭合标签是一个好习惯。

并不是所有的标签都像<html></html>一样关闭，有的标签不用绕在内容外面，它们是自关闭的。比如断行的的标签是这样的：<br />。呆会我们还有这方面的例子。你所需要记住的是，所有的标签都必须关闭，以及，大部分的内容都在标签之间，他们的格式是这样的：起始标签 - 内容 - 闭合标签。

属性

标签可以有属性，包含额外的信息。属性一般出现在开放标签中，它们的值总是在引号中。就像这样：<tag attribute="value">Margarine</tag>。呆会我们会讲解带属性的标签。

元素

除了标记元素的开始与结束，标签不愿再多做些什么。元素是构建网页的bits。你可能会说，比如，在<body>和</body>之间的是主体元素，又如，<title>和</title>是标签，而<title>Rumple Stiltskin</title>则是标题元素。

qpyangwu · 发表于 2007-8-25 17:35:42

3、title文档标题 ──页面的标题

所有的HTML网页都应该有文档标题。

给你的文档增加一个标题，按照下面改变你的代码：

Example Source Code [www.cn-webmaster.cn]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>我的第一个网页</title>
</head>
<body>
我的第一个网页
</body>
</html>

你可以看到，我们已经增加从<head>标签和<title>标签开始的两个新元素（看看他们是怎么关闭的）。

头元素（从起始标签<head>到闭合标签</head>之间的内容）出现在主体元素（从起始标签<body>到闭合标签</body>之间的内容）之前，包含将在主体元素信息之前装载的信息。这些信息不会出现在浏览器窗口中。

随着我们进一步学习，你会看到更多能够插入头元素的其它元素，但最重要的还是标题元素。

如果你从浏览器查看这个网页（像前面一样已经保存和玩新），你可以看到“这是我的第一个网页”出现在浏览器窗口的标题栏。你键入的位于标题（title）标签的文本已经变成了这个文档的标题，惊奇吧？假设把这个网页增添到你的收藏夹或者书签，你会看到标题也会出现在这里

qpyangwu · 发表于 2007-8-25 17:36:06

4、段落──用段落构建你的内容

现在你的HTML文档已经有了基本的框架，你可以来“胡搞”一阵子其他内容了

回到记事本，按照下面增加新行：

Example Source Code [www.cn-webmaster.cn]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>我的第一个网页</title>
</head>
<body>
这是我的第一个网页多令人激动
</body>
</html>

接着用浏览器查看一下。

你可能期望你的页面展示出像所你键入得一样格式，分为两行，但是你会看到：

Example Source Code [www.cn-webmaster.cn]
这是我的第一个网页多令人激动

这是因为浏览器不会关注你的代码是怎么写的，也丝毫不关心空格（就算你键入“这是我的第一个网页多令人激动”，结果还是是一样的）。

要文本以不同的行来显示，你必须明确地指出。

按照下面改进你的代码：

Example Source Code [www.cn-webmaster.cn]
<p>这是我的第一个网页</p>
<p>多令人激动</p>

p标签代表paragraph，即段落。

查看结果，这两行终究以两行来显示。cn-webmaster.cn

HTML文档的内容应该跟书籍或者文章一样，在适当的地方应该划分段落。

强调

在段落中你可以用em标签和strong标签来强调突出文本。它们都做几乎相同的事，尽管传统上浏览器会以斜体来显示em，以粗体来显示strong。

Example Source Code [www.cn-webmaster.cn]
<p>是的，那个 <em>就是</em> 我要说的。 <strong>多</strong>令人激动</p>

换行

换行标签可以用来打断成两行，像下面：

Example Source Code [www.cn-webmaster.cn]
这是我的第一个网页<br /> 多令人激动

但是，这个方法已经严重被滥用来划分段落，它不应该使用在预计分段的两段文本中。（是什么结构，该用什么标签就用什么标签，不是为断行而分段或者为分段而断行——译者注）

（因为没有任何东西在换行标签之间，所以没有闭合标签，它是用“/”在br后自闭合的。）

qpyangwu · 发表于 2007-8-25 17:36:28

5、标题h1~h6 ──6个等级的标题

段落标签是格式化文本的开始。

HTML标签有专门的标签处理你页面上的标题。

它们是h1，h2，h3，h4，h5和h6，象封建社会一样，h1就是万能的君主而h6就是最底层的百姓。

按照下面改进你的代码：

Example Source Code [www.cn-webmaster.cn]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>我的第一个网页</title>
</head>
<body>
<h1>我的第一个网页</h1>
<h2>这是什么</h2>
<p>用HTML组合起来的简单网页</p>
<h2>目的</h2>
<p>学习HTML</p>
</body>
</html>

注意，h1标签在一个页面只能使用一次——假定它是这个页面的主标题，是不应该使用多次的（相当于一篇文章的题目，你可以有一个副题目，但你不会使用两个并列的题目吧？——译者注）。

但是，h2到h6可以如你所需任意使用多次，但它们应依设计意图，该按顺序使用。比如，h4应该是h3的子标题，h3应该是h2的子标题，以此类推

qpyangwu · 发表于 2007-8-25 17:36:51

6、列表──定义有序或无序的列表

有三种类型的列表：无序、有序和定义列表。首先我们来学习前两种，在HTML中级指南中学习定义列表。

为你的代码增加以下东西：

Example Source Code [www.cn-webmaster.cn]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>我的第一个网页</title>
</head>
<body>
<h1>我的第一个网页</h1>
<h2>这是什么</h2>
<p>用HTML组合起来的简单网页</p>
<h2>目的</h2>
<ul>
<li>学习HTML</li>
<li>显摆，炫耀</li>
<li>因为我已经爱上了我的电脑，我想给她点HTML爱情调料。</li>
</ul>
</body>
</html>

在浏览器中查看，你会看到有项目符号（比如方块）的列表。把ul改成ol后项目符号会变成编号，字母的或者数字的。

列表里当然可以包含列表，形成有等级层次的嵌套列表。

用下面的代码代替：

Example Source Code [www.cn-webmaster.cn]
<ul>
<li>学习HTML</li>
<li> 显摆，炫耀
<ol>
<li>向老板</li>
<li>向朋友</li>
<li>向我的小猫</li>
<li>给我脑中多嘴的小鸭子</li>
</ol></li>
<li>因为我已经爱上了我的电脑，我想给她点HTML爱情调料。</li>
</ul>

Ay vwah lah。列表里面包含着列表。你可以在这里包含更多的列表，还可以在那里包含更多的列表，等等等等.

qpyangwu · 发表于 2007-8-25 17:37:14

7、链接──把东西链接起来

现在你已经创建了一个独立的网页，所有的都显得不错。使因特网显得特别的，是因为它把所有东西都连接起来了。

HTML中的H和T代表HyperText，即超文本，表示着一个由连接文本所构成的系统。

锚标签a用来定义一个连接，但是还是需要为锚标签增添其他的东西──连接目标。

为你的代码增加以下东西：

Example Source Code [www.cn-webmaster.cn]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>我的第一个网页</title>
</head>
<body>
<h1>我的第一个网页</h1>
<h2>这是什么</h2>
<p>用HTML组合起来的简单网页</p>
<h2>目的</h2>
<p>学习HTML</p>
<h2>在哪里寻找教程</h2>
<p><a href="http://www.google.com">Google</a></p>
</body>
</html>

连接的目标用href属性来定义。连接可以是绝对的，比如http://www.htmldog.com，也可以是相对的，相对于当前页面来说。

所以，假设你有另外一个HTML文档“flyingmoss.html”，其中一行代码可以写成<a href="flyingmoss.html">The miracle of moss in flight</a> ，诸如此类。

连接不仅可以连接到其他的HTML文档，也可以连接到页面上的其他文件。

连接还可以转到页面的其他部分。你可以给几乎所有的标签增加id属性，比如<h2 id="moss">Moss</h2>，然后连接到它，像是这样做：<a href="#moss">Go to moss</a>，点击这个连接会直接滚动到带有这个id的元素。

注意

Example Source Code [www.cn-webmaster.cn]
a标签允许你为连接打开新窗口，而不是取代当前窗口，初听起来似乎是一个不错的主意，因为它不会让用户离开你的页面。

但是，有很多理由证明，你不应该这样做。

从易用性的观点来看，这种方法破坏导航。最常用的导航玩具是浏览器上的“后退”，打开新窗口使这个功能失去了作用。

更广泛地，还是从易用的观点来看，用户不需要到处都是弹出的新窗口。如果用户需要打开新窗口，他们有权利（是的，有权利。不要强行干涉别人意志，不是很好吗？在一般情况下，建议你尽量不要使用新窗口——译者注）让自己来控制。

qpyangwu · 发表于 2007-8-25 17:37:36

8、图象──添加一点不是文本的东西

都是文本的话看起来让人感到乏味和无聊，自然，网页不应该仅仅是文本而已（呵呵，对于一些技术性的文档，我想，文本就已经严重足够了——译者注），它是多媒体的，最常见的形式就是图像。

图像标签img用来为HTML添加图像，像下面这样改进你的代码：

Example Source Code [www.cn-webmaster.cn]
<img src="http://www.yourdomain.com/logo.gif" width="88" height="31" alt="mysite logo" />

src属性告诉浏览器图像的地址。就像a标签一样，它可以是绝对的，如示范所示，但更多时候它是相对的。比如，你拥有自己的图像且已经另存为alienpie.jpg放置在images文件夹下，代码可以这样写<img src="images/alienpie.jpg"...

长度属性width和高度属性height是必需的（Zeldman的“恶名昭著”的《Designing with Web Standards》（中文版《网站重构——应用Web标准进行设计》已经出版，推荐翻译者之一的著名设计师ajie的网站网页设计师，你要是没有访问过，赶紧去，保准你收获不小！）中说，width和height不是必须的，这可以节省带宽。平时做网页我也不喜欢用这两个属性。——译者注），因为浏览器在下载过程中能够计算出图像占据的空间，否则浏览器可能会产生一个页面的跳跃，因为事先并不知道图像要占用多少空间，以致于破坏页面布局。

alt属性表示可替代的描述。这是为不能或者不选择图像显示的客户端着想（比如终端浏览器lynx，不能显示图片，但可显示alt中的文本。最坏的情况是，你写错了图片的文件名或者路径，即使在图形浏览器中图片显示不出，但仍可显示出alt中的文本，不会让访问者造成不必要的误解。什么情况下我们都推荐你，一定记得使用alt。——译者注）。在最新版本的HTML版本中，这是不可缺少的属性。

注意

Example Source Code [www.cn-webmaster.cn]
给网页创做图像虽然不是本站的主题，但我们还是有一些对你有用的东西要说。
经常被用到的图像格式是GIF和JPEG。他们都是压缩过的格式，有各自十分不同的用途。
GIF图像不超过256色，但可以保持原有图像的色彩。色数越低，图像文件就越小。
GIF应该用在有纯质颜色的图像上。
JPEG使用十分精确的算法来压缩图像，对原图像有些微的改变。压缩程度越低，图像文件越大，从而图像更清晰。
JPEG应该使用在要逼真描绘的诸如摄影的图像上。
网页设计初学者需要处理的文件可能就是图像文件了，忽视图像过大是初学者常犯的错误。网页下载应该尽可能快，想想看，一个使用少于7kb每秒的Modem联网的人要用多少时间来下载你的整个页面。
你必须在图像质量和图像文件大小之间作出选择。许多现代的图像处理软件允许用最佳方式压缩图像，但同样是一个冒险，或者产生错误。
译者有话说：显然，现在还没有谁推荐PNG格式的图像，可能只因为IE对其糟糕的支持。GIF到目前为止还没有解决专利问题，使用它还是得冒侵权之危险。PNG很有潜力，同样也具有透明能力，色数也不止GIF的可怜的256色而已，却具有JPEG的高清晰、高保真度，这也是我，以个人的立场向你推荐的原因。
请参考GIF还是PNG.

qpyangwu · 发表于 2007-8-25 17:38:11

9、表格table ──使用表格式的数据

漫步万维网世界，有多少HTML表格被用来布局页面，还一度被滥用。我们会在 CSS高级教程中学习怎样不用表格布局页面。表格的正确用处应该是，展示表格式的数据。

有很多标签可以用在表格中，在初级指南中教授表格是如何工作的确实是一件比较困难的事情，没有关系，我们一步一步来，先来看一个例子。例子什么时候都是学习的好方法。

把下面的代码拷贝到你文档的主体(<body>与</body>中），我们就可以明细每个标签是任何工作的了。

Example Source Code [www.cn-webmaster.cn]
<table>
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
<td>Row 1, cell 3</td>
</tr>
<tr>
<td>Row 2, cell 1</td>
<td>Row 2, cell 2</td>
<td>Row 2, cell 3</td>
</tr>
<tr>
<td>Row 3, cell 1</td>
<td>Row 3, cell 2</td>
<td>Row 3, cell 3</td>
</tr>
<tr>
<td>Row 4, cell 1</td>
<td>Row 4, cell 2</td>
<td>Row 4, cell 3</td>
</tr>
</table>

table元素定义标签；tr元素定义表格中的一行；td元素定义数据单元格，这必须包含在tr标签内，如上所示。

假设一个3x4的表格，包含12个单元，这就需要4个tr元素来定义行数和3个td元素在各行，总共有12个td元素。

qpyangwu · 发表于 2007-8-25 17:38:38

10、表单form ──文本框和其他由用户输入的构件

表单可以用来在网页中发送数据，特别是经常被用在联系表单——用户输入信息然后发送到Email中。

表单本身是没有什么用的。这需要编一个程序来处理输入表单中的数据。这也超出了本站指南的范围。如果使用网络服务器来放置HTML，你能够自助地找到一些简单的教程，开发一个服务器端的程序使一个发送到Email的表单工作。

实际用在HTML中的标签有form、 input、 textarea、 select和option。

表单标签form定义的表单里头，必须有行为属性action，它告诉表单当提交的时候将内容发往何处。

可选的方法属性method告诉表单数据将怎样发送，有get（默认的）和post两个值。常用到的是设置post值，它可以隐藏信息（get的信息会暴露在URL中）。

所以一个表单元素看起来是这样子的：

Example Source Code [www.cn-webmaster.cn]
<form action="processingscript.php" method="post"> </form>

input标签是表单世界中的“老大”。有10种形式，概括如下：

■　<input type="text" />是标准的文本框。它可以有一个值属性value，用来设置文本框里的默认文本。
■　<input type="password" /> 像文本框一样，但是会以星号代替用户所输入的实际字符。
■　<input type="checkbox" />是复选框，用户可以快速的选择或者不选一个条目。它可以有一个预选属性checked，像这样的格式<input type="checkbox" checked="checked" />.
■　<input type="radio" /> 与复选框相似，但是用户只可在一个组中选择一个单选按钮。它也有一个预选属性checked，使用方法跟复选框一样。
■　<input type="file" /> 是展示你电脑上的文件的一个区域，就像你在一个软件中打开或者保存一个文档一样。
■　<input type="submit" /> 是一个被点击后提交表单的按钮。你可以用值属性value来控制按钮上显示的文本（下面的button和reset类型也可以这样，稍后介绍），如下： <input type="submit" value="Ooo. Look. Text on a button. Wow" />.
■　<input type="image" />以图像代替按钮文本，src属性是必须的，像img标签一样。
■　<input type="button" />是一个如果没有其他代码的话什么都不做的按钮。
■　<input type="reset" /> 是一个点击后会重置表单内容的按钮。
■　<input type="hidden" /> 不会显示任何东西，它用来传输诸如用户正在用的页面的名字或者Email地址等表单必须传输的东西。
注意输入标签input也是用“/>”自关闭的。

多行文本输入框标签textarea基本上就是一个比较大的文本框。它必须有行属性rows和列属性cols，用法像这样：

Example Source Code [www.cn-webmaster.cn]
<textarea rows="5" cols="20">A big load of text here</textarea>

选定标签select与选项标签option一起可以制作一个下拉选框。是这样工作的：

Example Source Code [www.52css.com]
<select>
<option value="first option">Option 1</option>
<option value="second option">Option 2</option>
<option value="third option">Option 3</option>
</select>

当表单被提交时，被选中选项的值将被发送。

与复选框和单选按钮的预选属性checked一样，选项标签option也有一个预选属性selected，它可以用在这样的格式中：<option value="mouse" selected="selected">Rodent</option>。

上述的标签中在网页中看起来都不错，但是，如果你有一个程序来处理这个表单，这些标签都不起作用。这是因为，表单字段需要名称。所以所有的字段中都需要增加名称属性name，比如 <input type="text" name="talkingsponge" />。

一个表单看起来应该像下面这样（注意：这个表单不会工作，除非有一个用来提交数据的“contactus.php”的文件，它位于表单标签form的行为属性action中。）

Example Source Code [www.cn-webmaster.cn]
<form action="contactus.php" method="post">
<p>Name:</p>
<p><input type="text" name="name" value="Your name" /></p>
<p>Comments: </p>
<p><textarea name="comments" rows="5" cols="20">Your comments</textarea></p>
<p>Are you:</p>
<p><input type="radio" name="areyou" value="male" /> Male</p>
<p><input type="radio" name="areyou" value="female" /> Female</p>
<p><input type="radio" name="areyou" value="hermaphrodite" /> An hermaphrodite</p>
<p><input type="radio" name="areyou" value="asexual" checked="checked" /> Asexual</p>
<p><input type="submit" /></p> <p><input type="reset" /></p>
</form>

在HTML高级教程中还有更复杂的高阶水平教程等着你，如果你想进一步了解和学习.

qpyangwu · 发表于 2007-8-25 17:39:15

11、综合应用__把上面所有的要素堆积起来

如果你业已全部浏览HTML初级指南的全部页面，学习完毕初级指南，你事实上已经是一个能干的HTMLer了。

实际上，基于许多人编写HTML都相当差劲的事实，你应该做得比他们更好。

下面的代码把前面所教授的综合在一起了：

Example Source Code [www.cn-webmaster.cn]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>我的第一个网页</title>

</head>
<body>
<h1>我的第一个网页</h1>
<h2>这是什么</h2>
<p>用HTML组合起来的简单网页。 <strong>A用HTML组合起来的简单网页。</strong> 用HTML组合起来的简单网页。用HTML组合起来的简单网页。用HTML组合起来的简单网页。用HTML组合起来的简单网页。用HTML组合起来的简单网页。用HTML组合起来的简单网页。用HTML组合起来的简单网页。用HTML组合起来的简单网页。</p>
<h2>目的</h2>
<ul>
<li>学习HTML</li>
<li> 显摆，炫耀
<ol>
<li>向老板</li>
<li>向朋友</li>
<li>向我的小猫</li>
<li>给我脑中多嘴的小鸭子</li>
</ol></li>
<li>因为我已经爱上了我的电脑，我想给她点HTML爱情调料。</li>
</ul>
<h2>在哪里可以找到教程</h2>
<p><a href="http://www.google.com"><img src="http://www.google.com/intl/zh-CN_ALL/images/logo.gif" width="88" height="31" alt="Neo1 logo" /></a></p>
<h2>一些随意的表单</h2>
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
<td>Row 1, cell 3</td>
</tr>
<tr>
<td>Row 2, cell 1</td>
<td>Row 2, cell 2</td>
<td>Row 2, cell 3</td>
</tr>
<tr>
<td>Row 3, cell 1</td>
<td>Row 3, cell 2</td>
<td>Row 3, cell 3</td>
</tr>
<tr>
<td>Row 4, cell 1</td>
<td>Row 4, cell 2</td>
<td>Row 4, cell 3</td>
</tr>
</table>
<h2>一些随意的表单</h2>
<p><strong>注意：</strong> 看起来似乎很重要的部分，但实际上什么都不做</p>
<form action="somescript.php" method="post">
<p>名字：</p>
<p><input type="text" name="name" value="你的名字" /></p>
<p>评论：</p>
<p><textarea rows="10" cols="20" name="comments">在这里写下你的评论</textarea></p>
<p>你是：</p>
<p><input type="radio" name="areyou" value="male" /> 男性</p>
<p><input type="radio" name="areyou" value="female" /> 女性</p>
<p><input type="radio" name="areyou" value="hermaphrodite" /> 双性</p>
<p><input type="radio" name="areyou" value="asexual" checked="checked" /> 无性</p>
<p><input type="submit" /></p> <p><input type="reset" /></p>
</form>
</body>
</html>

就这样。保存文件，然后在浏览器中查看──这是理解所有工作原理的最好方法。继续吧！

感到满意的话，你可以继续学习CSS中级教程了。

whykiss · 发表于 2007-8-28 01:39:23

XHTML与CSS入门经典 从零开始系列教程！

评分

XHTML与CSS入门经典从零开始系列教程！