<![CDATA[CSS网页设计 CSS Web Design]]> http://www.566586.com/ zh-cn PBlog2 v2.4 CSS网页设计 CSS Web Design http://www.566586.com/images/logos.gif http://www.566586.com/ CSS网页设计 CSS Web Design http://www.566586.com/default.asp?id=53 <![CDATA[新手必读之HTML初级教程]]> 7332918@qq.com(Mr.yan) Wed,14 May 2008 10:02:11 +0800 http://www.566586.com/default.asp?id=53 HTML初级教程

1、简介及入门 ──一开始你所需要做的和创作你的第一个HTML文件
http://www.566586.com/article.asp?id=42

2、标签、属性和元素──构成HTML的要素
http://www.566586.com/article.asp?id=43

3、title文档标题 ──页面的标题
http://www.566586.com/article.asp?id=44

4、段落──用段落构建你的内容
http://www.566586.com/article.asp?id=45

5、标题h1~h6 ──6个等级的标题
http://www.566586.com/article.asp?id=46

6、列表──定义有序或无序的列表
http://www.566586.com/article.asp?id=47

7、链接──把东西链接起来
http://www.566586.com/article.asp?id=48

8、图象──添加一点不是文本的东西
http://www.566586.com/article.asp?id=49

9、表格table ──使用表格式的数据
http://www.566586.com/article.asp?id=50

10、表单form ──文本框和其他由用户输入的构件
http://www.566586.com/article.asp?id=51

11、综合应用 ──把上面所有的要素堆积起来
http://www.566586.com/article.asp?id=52]]> http://www.566586.com/default.asp?id=52 <![CDATA[HTML初级教程 综合应用]]> 7332918@qq.com(Mr.yan) Wed,14 May 2008 09:56:55 +0800 http://www.566586.com/default.asp?id=52
实际上，基于许多人编写HTML都相当差劲的事实，你应该做得比他们更好。

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

程序代码 程序代码
<!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>


HTML代码


[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

就这样。保存文件，然后在浏览器中查看──这是理解所有工作原理的最好方法。继续吧！]]> http://www.566586.com/default.asp?id=51 <![CDATA[HTML初级教程 表单form]]> 7332918@qq.com(Mr.yan) Wed,14 May 2008 09:53:51 +0800 http://www.566586.com/default.asp?id=51
表单本身是没有什么用的。这需要编一个程序来处理输入表单中的数据。这也超出了本站指南的范围。如果使用网络服务器来放置HTML，你能够自助地找到一些简单的教程，开发一个服务器端的程序使一个发送到Email的表单工作。

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

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

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

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

程序代码 程序代码
<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，用法像这样：

程序代码 程序代码
<textarea rows="5" cols="20">A big load of text here</textarea>

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

程序代码 程序代码
<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中。）

程序代码 程序代码
<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高级教程中还有更复杂的高阶水平教程等着你，如果你想进一步了解和学习。]]> http://www.566586.com/default.asp?id=50 <![CDATA[HTML初级教程 表格table]]> 7332918@qq.com(Mr.yan) Wed,14 May 2008 09:52:22 +0800 http://www.566586.com/default.asp?id=50
有很多标签可以用在表格中，在初级指南中教授表格是如何工作的确实是一件比较困难的事情，没有关系，我们一步一步来，先来看一个例子。例子什么时候都是学习的好方法。

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

程序代码 程序代码
<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元素。]]> http://www.566586.com/default.asp?id=49 <![CDATA[HTML初级教程 图像]]> 7332918@qq.com(Mr.yan) Wed,14 May 2008 09:50:28 +0800 http://www.566586.com/default.asp?id=49
图像标签img用来为HTML添加图像，像下面这样改进你的代码：

程序代码 程序代码
<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版本中，这是不可缺少的属性。

注意

给网页创做图像虽然不是本站的主题，但我们还是有一些对你有用的东西要说。
经常被用到的图像格式是GIF和JPEG。他们都是压缩过的格式，有各自十分不同的用途。
GIF图像不超过256色，但可以保持原有图像的色彩。色数越低，图像文件就越小。
GIF应该用在有纯质颜色的图像上。
JPEG使用十分精确的算法来压缩图像，对原图像有些微的改变。压缩程度越低，图像文件越大，从而图像更清晰。
JPEG应该使用在要逼真描绘的诸如摄影的图像上。
网页设计初学者需要处理的文件可能就是图像文件了，忽视图像过大是初学者常犯的错误。网页下载应该尽可能快，想想看，一个使用少于7kb每秒的Modem联网的人要用多少时间来下载你的整个页面。
你必须在图像质量和图像文件大小之间作出选择。许多现代的图像处理软件允许用最佳方式压缩图像，但同样是一个冒险，或者产生错误。
译者有话说：显然，现在还没有谁推荐PNG格式的图像，可能只因为IE对其糟糕的支持。GIF到目前为止还没有解决专利问题，使用它还是得冒侵权之危险。PNG很有潜力，同样也具有透明能力，色数也不止GIF的可怜的256色而已，却具有JPEG的高清晰、高保真度，这也是我，以个人的立场向你推荐的原因。
请参考GIF还是PNG。]]> http://www.566586.com/default.asp?id=48 <![CDATA[HTML初级教程 链接]]> 7332918@qq.com(Mr.yan) Wed,14 May 2008 09:48:32 +0800 http://www.566586.com/default.asp?id=48
HTML中的H和T代表HyperText，即超文本，表示着一个由连接文本所构成的系统。

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

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

程序代码 程序代码
<!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的元素。

注意

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

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

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

更广泛地，还是从易用的观点来看，用户不需要到处都是弹出的新窗口。如果用户需要打开新窗口，他们有权利（是的，有权利。不要强行干涉别人意志，不是很好吗？在一般情况下，建议你尽量不要使用新窗口——译者注）让自己来控制。]]> http://www.566586.com/default.asp?id=47 <![CDATA[HTML初级教程 列表]]> 7332918@qq.com(Mr.yan) Wed,14 May 2008 09:46:08 +0800 http://www.566586.com/default.asp?id=47
为你的代码增加以下东西：

程序代码 程序代码
<!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后项目符号会变成编号，字母的或者数字的。

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

用下面的代码代替：

程序代码 程序代码
<ul>
<li>学习HTML</li>
<li> 显摆，炫耀
<ol>
    <li>向老板</li>
    <li>向朋友</li>
    <li>向我的小猫</li>
    <li>给我脑中多嘴的小鸭子</li>
</ol></li>
<li>因为我已经爱上了我的电脑，我想给她点HTML爱情调料。</li>
</ul>

Ay vwah lah。列表里面包含着列表。你可以在这里包含更多的列表，还可以在那里包含更多的列表，等等等。]]> http://www.566586.com/default.asp?id=46 <![CDATA[HTML初级教程 标题h1~h6]]> 7332918@qq.com(Mr.yan) Wed,14 May 2008 09:44:34 +0800 http://www.566586.com/default.asp?id=46 标签是格式化文本的开始。

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

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

按照下面改进你的代码：

程序代码 程序代码
<!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的子标题，以此类推。]]> http://www.566586.com/default.asp?id=45 <![CDATA[HTML初级教程 段落]]> 7332918@qq.com(Mr.yan) Wed,14 May 2008 09:43:15 +0800 http://www.566586.com/default.asp?id=45
回到记事本，按照下面增加新行：

程序代码 程序代码
<!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>

接着用浏览器查看一下。

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

程序代码 程序代码
这是我的第一个网页多令人激动

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

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

按照下面改进你的代码：

程序代码 程序代码
<p>这是我的第一个网页</p>
<p>多令人激动</p>

p标签代表paragraph，即段落。

查看结果，这两行终究以两行来显示。

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

强调

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

程序代码 程序代码
<p>是的， 那个 <em>就是</em> 我要说的。 <strong>多</strong>令人激动</p>

换行

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

程序代码 程序代码
这是我的第一个网页<br /> 多令人激动

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

（因为没有任何东西在换行标签之间，所以没有闭合标签，它是用“/”在br后自闭合的。）]]> http://www.566586.com/default.asp?id=44 <![CDATA[HTML初级教程 title文档标题]]> 7332918@qq.com(Mr.yan) Wed,14 May 2008 09:40:23 +0800 http://www.566586.com/default.asp?id=44
给你的文档增加一个标题，按照下面改变你的代码：

程序代码 程序代码
<!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）标签的文本已经变成了这个文档的标题，惊奇吧？假设把这个网页增添到你的收藏夹或者书签，你会看到标题也会出现在这里。]]>