拥有关于表格边框的附加信息。
HTML 提示：使用小写属性
属性和属性值对大小写不敏感。
不过，万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。
而新版本的 (X)HTML 要求使用小写属性。
始终为属性值加引号
属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。
在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：
name='Bill "HelloWorld" Gates'
HTML 属性参考手册
我们的完整的 HTML 参考手册提供了每个 HTML 元素可使用的合法属性的完整列表：
完整的 HTML 参考手册
下面列出了适用于大多数 HTML 元素的属性：
属性 值 描述
class classname 规定元素的类名（classname）
id id 规定元素的唯一 id
style style_definition 规定元素的行内样式（inline style）
title text 规定元素的额外信息（可在工具提示中显示）
如需更多关于标准属性的信息，请访问：
HTML 标准属性参考手册】
【5.HTML 标题★
在 HTML 文档中，标题很重要。
HTML 标题
标题（Heading）是通过 - 等标签进行定义的。
定义最大的标题。 定义最小的标题。
实例
This is a heading
This is a heading
This is a heading
亲自试一试
注释：浏览器会自动地在标题的前后添加空行。
注释：默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。
标题很重要
请确保将 HTML heading 标签只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题。
搜索引擎使用标题为您的网页的结构和内容编制索引。
因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。
应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。
HTML 水平线
标签在 HTML 页面中创建水平线。
hr 元素可用于分隔内容。
实例
This is a paragraph
This is a paragraph
This is a paragraph
亲自试一试
提示：使用水平线 (
标签) 来分隔文章中的小节是一个办法（但并不是唯一的办法）。
HTML 注释
可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。
注释是这样写的：
实例
亲自试一试
注释：开始括号之后（左边的括号）需要紧跟一个叹号，结束括号之前（右边的括号）不需要。
提示：合理地使用注释可以对未来的代码编辑工作产生帮助。
HTML 提示 - 如何查看源代码
您一定曾经在看到某个网页时惊叹道 “WOW! 这是如何实现的？”
如果您想找到其中的奥秘，只需要单击右键，然后选择“查看源文件”（IE）或“查看页面源代码”（Firefox），其他浏览器的做法也是类似的。这么做会打开一个包含页面 HTML 代码的窗口。
来自本页的实例
标题
如何在 HTML 文档中显示标题。
隐藏的注释
如何在 HTML 源代码中插入注释。
水平线
如何插入水平线。
HTML 标签参考手册
W3School 的标签参考手册提供了有关这些标题及其属性的更多信息。
您将在本教程下面的章节中学到更多有关 HTML 标签和属性的知识。
标签 描述
定义 HTML 文档。
定义文档的主体。
to 定义 HTML 标题
定义水平线。
定义注释。】
【6.HTML 段落★
段落是通过
标签定义的。
实例
This is a paragraph
This is another paragraph
亲自试一试
注释：浏览器会自动地在段落的前后添加空行。（ 是块级元素）
提示：使用空的段落标记
去插入一个空行是个坏习惯。用
标签代替它！（但是不要用
标签去创建列表。不要着急，您将在稍后的篇幅学习到 HTML 列表。）
不要忘记结束标签
即使忘了使用结束标签，大多数浏览器也会正确地将 HTML 显示出来：
实例
This is a paragraph
This is another paragraph
亲自试一试
上面的例子在大多数浏览器中都没问题，但不要依赖这种做法。忘记使用结束标签会产生意想不到的结果和错误。
注释：在未来的 HTML 版本中，不允许省略结束标签。
提示：通过结束标签来关闭 HTML 是一种经得起未来考验的 HTML 编写方法。清楚地标记某个元素在何处开始，并在何处结束，不论对您还是对浏览器来说，都会使代码更容易理解。
HTML 折行
如果您希望在不产生一个新段落的情况下进行换行（新行），请使用
标签：
This is
a para
graph with line breaks
亲自试一试
元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。
还是
您也许发现
与
很相似。
在 XHTML、XML 以及未来的 HTML 版本中，不允许使用没有结束标签（闭合标签）的 HTML 元素。
即使
在所有浏览器中的显示都没有问题，使用
也是更长远的保障。
HTML 输出 - 有用的提示
我们无法确定 HTML 被显示的确切效果。屏幕的大小，以及对窗口的调整都可能导致不同的结果。
对于 HTML，您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。
当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。
亲自试一试
（这个例子演示了一些 HTML 格式化方面的问题）
来自本页的实例
HTML 段落
如何在浏览器中显示 HTML 段落。
换行
在 HTML 文档中使用换行。
在 HTML 代码中的排版一首唐诗
浏览器在显示 HTML 时，会省略源代码中多余的空白字符（空格或回车等）。
更多实例
更多段落
段落的默认行为。
HTML 标签参考手册
W3School 的标签参考手册提供了有关 HTML 元素及其属性的更多信息。
标签 描述
定义段落。
插入单个折行（换行）。】
【7.HTML 文本格式化实例★
HTML 可定义很多供格式化输出的元素，比如粗体和斜体字。
下面有很多例子，您可以亲自试试：
HTML 文本格式化实例
文本格式化
此例演示如何在一个 HTML 文件中对文本进行格式化
预格式文本
此例演示如何使用 pre 标签对空行和空格进行控制。
“计算机输出”标签
此例演示不同的“计算机输出”标签的显示效果。
地址
此例演示如何在 HTML 文件中写地址。
缩写和首字母缩写
此例演示如何实现缩写或首字母缩写。
文字方向
此例演示如何改变文字的方向。
块引用
此例演示如何实现长短不一的引用语。
删除字效果和插入字效果
此例演示如何标记删除文本和插入文本。
如何查看 HTML 源码
您是否有过这样的经历，当你看到一个很棒的站点，你会很想知道开发人员是如何将它实现的？
你有没有看过一些网页，并且想知道它是如何做出来的呢？
要揭示一个网站的技术秘密，其实很简单。单击浏览器的“查看”菜单，选择“查看源文件”即可。随后你会看到一个弹出的窗口，窗口内就是实际的 HTML 代码。
文本格式化标签
标签 描述
定义粗体文本。
定义大号字。
定义着重文字。
定义斜体字。
定义小号字。
定义加重语气。
定义下标字。
定义上标字。
定义插入字。
定义删除字。
不赞成使用。使用 代替。
不赞成使用。使用 代替。
不赞成使用。使用样式（style）代替。
“计算机输出”标签
标签 描述
定义计算机代码。
定义键盘码。
定义计算机代码样本。
定义打字机代码。
定义变量。
定义预格式文本。
不赞成使用。使用 代替。
<![CDATA[ 不赞成使用。使用 <pre> 代替。
<xmp> 不赞成使用。使用 <pre> 代替。
引用、引用和术语定义
标签 描述
<abbr> 定义缩写。
<acronym> 定义首字母缩写。
<address> 定义地址。
<bdo> 定义文字方向。
<blockquote> 定义长的引用。
<q> 定义短的引用语。
<cite> 定义引用、引证。
<dfn> 定义一个定义项目。
延伸阅读：
改变文本的外观和含义】
【8.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 文件。
ps:具体图片操作询问作者，QQ:2763027322】
【9.HTML CSS★
通过使用 HTML4.0，所有的格式化代码均可移出 HTML 文档，然后移入一个独立的样式表。
实例
HTML中的样式
本例演示如何使用添加到 <head> 部分的样式信息对 HTML 进行格式化。
没有下划线的链接
本例演示如何使用样式属性做一个没有下划线的链接。
链接到一个外部样式表
本例演示如何 <link> 标签链接到一个外部样式表。
如何使用样式
当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表：
外部样式表
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。
<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>
访问我们的 CSS 教程，学习更多有关样式的知识。
标签 描述
<style> 定义样式定义。
<link> 定义资源引用。
<div> 定义文档中的节或区域（块级）。
<span> 定义文档中的行内的小块或区域。
<font> 规定文本的字体、字体尺寸、字体颜色。不赞成使用。请使用样式。
<basefont> 定义基准字体。不赞成使用。请使用样式。
<center> 对文本进行水平居中。不赞成使用。请使用样式。】
【10.HTML链接★
HTML 使用超级链接与网络上的另一个文档相连。
几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。
实例
创建超级链接
本例演示如何在 HTML 文档中创建链接。
将图像作为链接
本例演示如何使用图像作为链接。
（可以在本页底端找到更多实例）
HTML 超链接（链接）
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。
我们通过使用 <a> 标签在 HTML 中创建链接。
有两种使用 <a> 标签的方式：
通过使用 href 属性 - 创建指向另一个文档的链接
通过使用 name 属性 - 创建文档内的书签
延伸阅读：什么是超文本？
HTML 链接语法
链接的 HTML 代码很简单。它类似这样：
<a href="url">Link text</a>
href 属性规定链接的目标。
开始标签和结束标签之间的文字被作为超级链接来显示。
实例
<a href="http://www.w3school.com.cn/">Visit W3School</a>
上面这行代码显示为：Visit W3School
点击这个超链接会把用户带到 W3School 的首页。
提示："链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。
HTML 链接 - target 属性
使用 Target 属性，你可以定义被链接的文档在何处显示。
下面的这行会在新窗口打开文档：
<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>
亲自试一试
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/"。
提示：命名锚经常用于在大型文档开始位置上创建目录。可以为每个章节赋予一个命名锚，然后把链接到这些锚的链接放到文档的上部。如果您经常访问百度百科，您会发现其中几乎每个词条都采用这样的导航方式。
提示：假如浏览器找不到已定义的命名锚，那么就会定位到文档的顶端。不会有错误发生。
更多实例
在新的浏览器窗口打开链接
本例演示如何在新窗口打开一个页面，这样的话访问者就无需离开你的站点了。
链接到同一个页面的不同位置
本例演示如何使用链接跳转至文档的另一个部分
跳出框架
本例演示如何跳出框架，假如你的页面被固定在框架之内。
创建电子邮件链接
本例演示如何链接到一个邮件。（本例在安装邮件客户端程序后才能工作。）
创建电子邮件链接 2
本例演示更加复杂的邮件链接。
HTML 链接标签
标签 描述
<a> 定义锚。】
【11.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 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件。加载图片是需要时间的，所以我们的建议是：慎用图片。
更多实例
背景图片
本例演示如何向 HTML 页面添加背景图片。
排列图片
本例演示如何在文字中排列图像。
浮动图像
本例演示如何使图片浮动至段落的左边或右边。
调整图像尺寸
本例演示如何将图片调整到不同的尺寸。
为图片显示替换文本
本例演示如何为图片显示替换文本。在浏览器无法载入图像时，替换文本属性告诉读者们失去的信息。为页面上的图像都加上替换文本属性是个好习惯。
制作图像链接
本例演示如何将图像作为一个链接使用。
创建图像映射
本例显示如何创建带有可供点击区域的图像地图。其中的每个区域都是一个超级链接。
把图像转换为图像映射
本例显示如何把一幅普通的图像设置为图像映射。
图像标签
标签 描述
<img> 定义图像。
<map> 定义图像地图。
<area> 定义图像地图中的可点击区域。】
【12.HTML 表格★
你可以使用 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
更多实例
没有边框的表格
本例演示一个没有边框的表格。
表格中的表头(Heading)
本例演示如何显示表格表头。
空单元格
本例展示如何使用 " " 处理没有内容的单元格。
带有标题的表格
本例演示一个带标题 (caption) 的表格
跨行或跨列的表格单元格
本例演示如何定义跨行或跨列的表格单元格。
表格内的标签
本例演示如何显示在不同的元素内显示元素。
单元格边距(Cell padding)
本例演示如何使用 Cell padding 来创建单元格内容与其边框之间的空白。
单元格间距(Cell spacing)
本例演示如何使用 Cell spacing 增加单元格之间的距离。
向表格添加背景颜色或背景图像
本例演示如何向表格添加背景。
向表格单元添加背景颜色或者背景图像
本例演示如何向一个或者更多表格单元添加背景。
在表格单元中排列内容
本例演示如何使用 "align" 属性排列单元格内容,以便创建一个美观的表格。
框架(frame)属性
本例演示如何使用 "frame" 属性来控制围绕表格的边框。
表格 描述
<table> 定义表格
<caption> 定义表格标题。
<th> 定义表格的表头。
<tr> 定义表格的行。
<td> 定义表格单元。
<thead> 定义表格的页眉。
<tbody> 定义表格的主体。
<tfoot> 定义表格的页脚。
<col> 定义用于表格列的属性。
<colgroup> 定义表格列的组。】
【13.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
定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
更多实例
不同类型的无序列表
本例演示一个无序列表。
不同类型的有序列表
本例演示不同类型的有序列表。
嵌套列表
本例演示如何嵌套列表。
嵌套列表 2
本例演示更复杂的嵌套列表。
定义列表
本例演示一个定义列表。
列表标签
标签 描述
<ol> 定义有序列表。
<ul> 定义无序列表。
<li> 定义列表项。
<dl> 定义定义列表。
<dt> 定义定义项目。
<dd> 定义定义的描述。
<dir> 已废弃。使用 <ul> 代替它。
<menu> 已废弃。使用 <ul> 代替它。】
【14.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 分组标签
标签 描述
<div> 定义文档中的分区或节（division/section）。
<span> 定义 span，用来组合文档中的行内元素。】
【15.HTML 布局★
网页布局对改善网站的外观非常重要。
请慎重设计您的网页布局。
亲自试一试 - 实例
使用 <div> 元素的网页布局
如何使用 <div> 元素添加布局。
使用 <table> 元素的网页布局
如何使用 <table> 元素添加布局。
网站布局
大多数网站会把内容安排到多个列中（就像杂志或报纸那样）。
可以使用 <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:le&ft;}
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 Web Page</h1>
</div>
<div id="menu">
<h2>Menu</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
<div id="content">Content goes here</div>
<div id="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 Web Page</h1>
</td>
</tr>
<tr valign="top">
<td style="background-color:#ffff99;width:100px;text-align:top;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript
</td>
<td style="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 代码存放到外部样式表中，那么站点会更易于维护。通过编辑单一的文件，就可以改变所有页面的布局。如需学习更多有关 CSS 的知识，请访问我们的 CSS 教程。
提示：由于创建高级的布局非常耗时，使用模板是一个快速的选项。通过搜索引擎可以找到很多免费的网站模板（您可以使用这些预先构建好的网站布局，并优化它们）。
HTML 布局标签
标签 描述
<div> 定义文档中的分区或节（division/section）。
<span> 定义 span，用来组合文档中的行内元素。】
【16.HTML 表单和输入★
实例
文本域 (Text field)
本例演示如何在 HTML 页面创建文本域。用户可以在文本域中写入文本。
密码域
本例演示如何创建 HTML 的密码域。
（可以在本页底端找到更多实例。）
表单
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。
表单使用表单标签（<form>）定义。
<form>
...
input 元素
...
</form>
输入
多数情况下被用到的表单标签是输入标签（<input>）。输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：
文本域（Text Fields）
当用户要在表单中键入字母、数字等内容时，就会用到文本域。
<form>
First name:
<input type="text" name="firstname" />
<br />
Last name:
<input type="text" name="lastname" />
</form>
浏览器显示如下：
First name:
Last name:
注意，表单本身并不可见。同时，在大多数浏览器中，文本域的缺省宽度是20个字符。
单选按钮（Radio Buttons）
当用户从若干给定的的选择中选取其一时，就会用到单选框。
<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>
浏览器显示如下：
I have 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" 的页面。该页面将显示出输入的结果。
更多实例
复选框
本例演示如何在 HTML 页中创建复选框。用户可以选中或取消选取复选框。
单选按钮
本例演示如何在 HTML 中创建单选按钮。
简单的下拉列表
本例演示如何在 HTML 页面中创建简单的下拉列表框。下拉列表框是一个可选列表。
另一个下拉列表
本例演示如何创建一个简单的带有预选值的下拉列表。（编者注：预选值指预先指定的首选项。）
文本域(Textarea)
本例演示如何创建文本域（多行文本输入控件）。用户可在文本域中写入文本。可写入字符的字数不受限制。
创建按钮
本例演示如何创建按钮。你可以对按钮上的文字进行自定义。
Fieldset around data
本例演示如何在数据周围绘制一个带标题的框。
表单实例
带有输入框和确认按钮的表单
本例演示如何向页面添加表单。此表单包含两个输入框和一个确认按钮。
带有复选框的表单
此表单包含两个复选框和一个确认按钮。
带有单选按钮的表单
此表单包含两个单选框和一个确认按钮。
从表单发送电子邮件
此例演示如何从表单发送电子邮件。
表单标签
标签 描述
<form> 定义供用户输入的表单
<input> 定义输入域
<textarea> 定义文本域 (一个多行的输入控件)
<label> 定义一个控制的标签
<fieldset> 定义域
<legend> 定义域的标题
<select> 定义一个选择列表
<optgroup> 定义选项组
<option> 定义下拉列表中的选项
<button> 定义一个按钮
<isindex> 已废弃。由 <input> 代替。】
【17.HTML 框架★
通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。
实例
垂直框架
本例演示：如何使用三份不同的文档制作一个垂直框架。
水平框架
本例演示：如何使用三份不同的文档制作一个水平框架。
（可以在本页底端找到更多实例。）
框架
通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。
使用框架的坏处：
开发人员必须同时跟踪更多的HTML文档
很难打印整张页面
框架结构标签（<frameset>）
框架结构标签（<frameset>）定义如何将窗口分割为框架
每个 frameset 定义了一系列行或列
rows/columns 的值规定了每行或每列占据屏幕的面积
编者注：frameset 标签也被某些文章和书籍译为框架集。
框架标签（Frame）
Frame 标签定义了放置在每个框架中的 HTML 文档。
在下面的这个例子中，我们设置了一个两列的框架集。第一列被设置为占据浏览器窗口的 253第二列被设置为占据浏览器窗口的 753HTML 文档 "frame_a.htm" 被置于第一个列中，而 HTML 文档 "frame_b.htm" 被置于第二个列中：
<frameset cols="25W5
<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"文件内指定的节使用 <a name="C10"> 进行标识。
使用框架导航跳转至指定的节
本例演示两个框架。左侧的导航框架包含了一个链接列表，这些链接将第二个框架作为目标。第二个框架显示被链接的文档。导航框架其中的链接指向目标文件中指定的节。】
【18.HTML Iframe★
iframe 用于在网页内显示网页。
添加 iframe 的语法
<iframe src="URL"></iframe>
URL 指向隔离页面的位置。
Iframe - 设置高度和宽度
height 和 width 属性用于规定 iframe 的高度和宽度。
属性值的默认单位是像素，但也可以用百分比来设定（比如 "80EF。
实例
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
亲自试一试
Iframe - 删除边框
frameborder 属性规定是否显示 iframe 周围的边框。
设置属性值为 "0" 就可以移除边框：
实例
<iframe src="demo_iframe.htm" frameborder="0"></iframe>
亲自试一试
使用 iframe 作为链接的目标
iframe 可用作链接的目标（target）。
链接的 target 属性必须引用 iframe 的 name 属性：
实例
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>
亲自试一试
HTML iframe 标签
标签 描述
<iframe> 定义内联的子窗口（框架）】
【19.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 元素的布局和显示属性。
更多实例
可用性强的背景图像
背景图像和文字颜色使页面文本易于阅读的例子。
可用性强的背景图像 2
另一个背景图像和文字颜色使页面文本易于阅读的例子。
可用性差的背景图像
背景图像和文字颜色使页面文本不易阅读的例子。】
【20.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】
【21.HTML 颜色名★
本页提供了被大多数浏览器支持的颜色名。
提示：仅有 16 种颜色名被 W3C 的 HTML 4.0 标准支持，它们是：aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、purple、red、silver、teal、white、yellow。
如果使用其它颜色的话，就应该使用十六进制的颜色值。
颜色名列表
单击一个颜色名或者 16 进制值，就可以查看与不同文字颜色搭配的背景颜色。
颜色名 十六进制颜色值 颜色
AliceBlue #F0F8FF
AntiqueWhite #FAEBD7
Aqua #00FFFF
Aquamarine #7FFFD4
Azure #F0FFFF
Beige #F5F5DC
Bisque #FFE4C4
Black #000000
BlanchedAlmond #FFEBCD
Blue #0000FF
BlueViolet #8A2BE2
Brown #A52A2A
BurlyWood #DEB887
CadetBlue #5F9EA0
Chartreuse #7FFF00
Chocolate #D2691E
Coral #FF7F50
CornflowerBlue #6495ED
Cornsilk #FFF8DC
Crimson #DC143C
Cyan #00FFFF
DarkBlue #00008B
DarkCyan #008B8B
DarkGoldenRod #B8860B
DarkGray #A9A9A9
DarkGreen #006400
DarkKhaki #BDB76B
DarkMagenta #8B008B
DarkOliveGreen #556B2F
Darkorange #FF8C00
DarkOrchid #9932CC
DarkRed #8B0000
DarkSalmon #E9967A
DarkSeaGreen #8FBC8F
DarkSlateBlue #483D8B
DarkSlateGray #2F4F4F
DarkTurquoise #00CED1
DarkViolet #9400D3
DeepPink #FF1493
DeepSkyBlue #00BFFF
DimGray #696969
DodgerBlue #1E90FF
Feldspar #D19275
FireBrick #B22222
FloralWhite #FFFAF0
ForestGreen #228B22
Fuchsia #FF00FF
Gainsboro #DCDCDC
GhostWhite #F8F8FF
Gold #FFD700
GoldenRod #DAA520
Gray #808080
Green #008000
GreenYellow #ADFF2F
HoneyDew #F0FFF0
HotPink #FF69B4
IndianRed #CD5C5C
Indigo #4B0082
Ivory #FFFFF0
Khaki #F0E68C
Lavender #E6E6FA
LavenderBlush #FFF0F5
LawnGreen #7CFC00
LemonChiffon #FFFACD
LightBlue #ADD8E6
LightCoral #F08080
LightCyan #E0FFFF
LightGoldenRodYellow #FAFAD2
LightGrey #D3D3D3
LightGreen #90EE90
LightPink #FFB6C1
LightSalmon #FFA07A
LightSeaGreen #20B2AA
LightSkyBlue #87CEFA
LightSlateBlue #8470FF
LightSlateGray #778899
LightSteelBlue #B0C4DE
LightYellow #FFFFE0
Lime #00FF00
LimeGreen #32CD32
Linen #FAF0E6
Magenta #FF00FF
Maroon #800000
MediumAquaMarine #66CDAA
MediumBlue #0000CD
MediumOrchid #BA55D3
MediumPurple #9370D8
MediumSeaGreen #3CB371
MediumSlateBlue #7B68EE
MediumSpringGreen #00FA9A
MediumTurquoise #48D1CC
MediumVioletRed #C71585
MidnightBlue #191970
MintCream #F5FFFA
MistyRose #FFE4E1
Moccasin #FFE4B5
NavajoWhite #FFDEAD
Navy #000080
OldLace #FDF5E6
Olive #808000
OliveDrab #6B8E23
Orange #FFA500
OrangeRed #FF4500
Orchid #DA70D6
PaleGoldenRod #EEE8AA
PaleGreen #98FB98
PaleTurquoise #AFEEEE
PaleVioletRed #D87093
PapayaWhip #FFEFD5
PeachPuff #FFDAB9
Peru #CD853F
Pink #FFC0CB
Plum #DDA0DD
PowderBlue #B0E0E6
Purple #800080
Red #FF0000
RosyBrown #BC8F8F
RoyalBlue #4169E1
SaddleBrown #8B4513
Salmon #FA8072
SandyBrown #F4A460
SeaGreen #2E8B57
SeaShell #FFF5EE
Sienna #A0522D
Silver #C0C0C0
SkyBlue #87CEEB
SlateBlue #6A5ACD
SlateGray #708090
Snow #FFFAFA
SpringGreen #00FF7F
SteelBlue #4682B4
Tan #D2B48C
Teal #008080
Thistle #D8BFD8
Tomato #FF6347
Turquoise #40E0D0
Violet #EE82EE
VioletRed #D02090
Wheat #F5DEB3
White #FFFFFF
WhiteSmoke #F5F5F5
Yellow #FFFF00
YellowGreen #9ACD32】
【————HTML高级教程★】
【HTML 声明★
<!DOCTYPE> 声明帮助浏览器正确地显示网页。
<!DOCTYPE> 声明
Web 世界中存在许多不同的文档。只有了解文档的类型，浏览器才能正确地显示文档。
HTML 也有多个不同的版本，只有完全明白页面中使用的确切 HTML 版本，浏览器才能完全正确地显示出 HTML 页面。这就是 <!DOCTYPE> 的用处。
<!DOCTYPE> 不是 HTML 标签。它为浏览器提供一项信息（声明），即 HTML 是用什么版本编写的。
提示：W3School 即将升级为最新的 HTML5 文档类型。
实例
带有 HTML5 DOCTYPE 的 HTML 文档：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>
HTML 版本
从 Web 诞生早期至今，已经发展出多个 HTML 版本：
版本 年份
HTML 1991
HTML 1993
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 1.0 2000
HTML5 2012
XHTML5 2013
常用的声明
HTML5
<!DOCTYPE html>
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">】
【HTML 头部元素★
亲自试一试 - 实例
文档的标题
<title> 标题定义文档的标题。
所有链接一个目标
如何使用 base 标签使页面中的所有标签在新窗口中打开。
文档描述
使用 <meta> 元素来描述文档。
文档关键词
使用 <meta> 元素来定义文档的关键词。
重定向用户
如何把用户重定向到新的网址。
HTML <head> 元素
<head> 元素是所有头部元素的容器。<head> 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。
以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。
HTML <title> 元素
<title> 标签定义文档的标题。
title 元素在所有 HTML/XHTML 文档中都是必需的。
title 元素能够：
定义浏览器工具栏中的标题
提供页面被添加到收藏夹时显示的标题
显示在搜索引擎结果中的页面标题
一个简化的 HTML 文档：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>
HTML <base> 元素
<base> 标签为页面上的所有链接规定默认地址或默认目标（target）：
<head>
<base href="http://www.w3school.com.cn/images/" />
<base target="_blank" />
</head>
HTML <link> 元素
<link> 标签定义文档与外部资源之间的关系。
<link> 标签最常用于连接样式表：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
HTML <style> 元素
<style> 标签用于为 HTML 文档定义样式信息。
您可以在 style 元素内规定 HTML 元素在浏览器中呈现的样式：
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
HTML <meta> 元素
元数据（metadata）是关于数据的信息。
<meta> 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。
典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。
<meta> 标签始终位于 head 元素中。
元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。
针对搜索引擎的关键词
一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面。
下面的 meta 元素定义页面的描述：
<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />
下面的 meta 元素定义页面的关键词：
<meta name="keywords" content="HTML, CSS, XML" />
name 和 content 属性的作用是描述页面的内容。
HTML <script> 元素
<script> 标签用于定义客户端脚本，比如 JavaScript。
我们会在稍后的章节讲解 script 元素。
HTML 头部元素
标签 描述
<head> 定义关于文档的信息。
<title> 定义文档标题。
<base> 定义页面上所有链接的默认地址或默认目标。
<link> 定义文档与外部资源之间的关系。
<meta> 定义关于 HTML 文档的元数据。
<script> 定义客户端脚本。
<style> 定义文档的样式信息。】
【HTML脚本★
JavaScript 使 HTML 页面具有更强的动态和交互性。。
实例
插入一段脚本
如何将脚本插入 HTML 文档。
使用 <noscript> 标签
如何应对不支持脚本或禁用脚本的浏览器。
HTML script 元素
<script> 标签用于定义客户端脚本，比如 JavaScript。
script 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。
必需的 type 属性规定脚本的 MIME 类型。
JavaScript 最常用于图片操作、表单验证以及内容动态更新。
下面的脚本会向浏览器输出“Hello World!”：
<script type="text/javascript">
document.write("Hello World!")
</script>
提示：如果需要学习更多有关在 HTML 中编写脚本的知识，请访问我们的 JavaScript 教程。
<noscript> 标签
<noscript> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。
noscript 元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。
只有在浏览器不支持脚本或者禁用脚本时，才会显示 noscript 元素中的内容：
<script type="text/javascript">
document.write("Hello World!")
</script>
<noscript>Your browser does not support JavaScript!</noscript>
如何应付老式的浏览器
如果浏览器压根没法识别 <script> 标签，那么 <script> 标签所包含的内容将以文本方式显示在页面上。为了避免这种情况发生，你应该将脚本隐藏在注释标签当中。那些老的浏览器（无法识别 <script> 标签的浏览器）将忽略这些注释，所以不会将标签的内容显示到页面上。而那些新的浏览器将读懂这些脚本并执行它们，即使代码被嵌套在注释标签内。
实例
JavaScript:
<script type="text/javascript">
<!--
document.write("Hello World!")
//-->
</script>
VBScript:
<script type="text/vbscript">
<!--
document.write("Hello World!")
'-->
</script>
标签 描述
<script> 定义客户端脚本。
<noscript> 为不支持客户端脚本的浏览器定义替代内容。】
【HTML 实体字符★
HTML 中的预留字符必须被替换为字符实体。
HTML 实体
在 HTML 中，某些字符是预留的。
在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。
字符实体类似这样：
&entity_name;
或者
&#entity_number;
如需显示小于号，我们必须这样写：< 或 <
提示：使用实体名而不是数字的好处是，名称易于记忆。不过坏处是，浏览器也许并不支持所有实体名称（对实体数字的支持却很好）。
不间断空格（non-breaking space）
HTML 中的常用字符实体是不间断空格( )。
浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格，在显示该页面之前，浏览器会删除它们中的 9 个。如需在页面中增加空格的数量，您需要使用 字符实体。
HTML 实例示例
用 HTML 实体符号做实验：亲自试一试
HTML 中有用的字符实体
注释：实体名称对大小写敏感！
显示结果 描述 实体名称 实体编号
空格  
< 小于号 < <
> 大于号 > >
& 和号 & &
" 引号 " "
' 撇号 ' (IE不支持) '
￠ 分 ¢ ¢
? 镑 £ £
? 日圆 ¥ ¥
€ 欧元 € €
小节 § §
? 版权 © ©
? 注册商标 ® ®
? 商标 ™ ™
乘号 × ×
除号 ÷ ÷】
【HTML 统一资源定位器★
URL 也被称为网址。
URL 可以由单词组成，比如 “w3school.com.cn”，或者是因特网协议（IP）地址：192.168.1.253。大多数人在网上冲浪时，会键入网址的域名，因为名称比数字容易记忆。
URL - Uniform Resource Locator
当您点击 HTML 页面中的某个链接时，对应的 <a> 标签指向万维网上的一个地址。
统一资源定位器（URL）用于定位万维网上的文档（或其他数据）。
网址，比如 http://www.w3school.com.cn/html/index.asp，遵守以下的语法规则：
scheme://host.domain:port/path/filename
解释：
scheme - 定义因特网服务的类型。最常见的类型是 http
host - 定义域主机（http 的默认主机是 www）
domain - 定义因特网域名，比如 w3school.com.cn
:port - 定义主机上的端口号（http 的默认端口号是 80）
path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
filename - 定义文档/资源的名称
编者注：URL 的英文全称是 Uniform Resource Locator，中文也译为“统一资源定位符”。
URL Schemes
以下是其中一些最流行的 scheme：
Scheme 访问 用于...
http 超文本传输协议 以 http:// 开头的普通网页。不加密。
https 安全超文本传输协议 安全网页。加密所有信息交换。
ftp 文件传输协议 用于将文件下载或上传至网站。
file 您计算机上的文件。】
【HTML URL 字符编码★
URL 编码会将字符转换为可通过因特网传输的格式。
URL - 统一资源定位器
Web 浏览器通过 URL 从 web 服务器请求页面。
URL 是网页的地址，比如 http://www.w3school.com.cn。
URL 编码
URL 只能使用 ASCII 字符集来通过因特网进行发送。
由于 URL 常常会包含 ASCII 集合之外的字符，URL 必须转换为有效的 ASCII 格式。
URL 编码使用 "其后跟随两位的十六进制数来替换非 ASCII 字符。
URL 不能包含空格。URL 编码通常使用 来替换空格。
亲自试一试
如果您点击下面的“提交”按钮，浏览器会在发送输入之前对其进行 URL 编码。服务器上的页面会显示出接收到的输入。
试着输入一些字符，然后再次点击提交按钮。
URL 编码示例
字符 URL 编码
€
?
?
?
?
?
?
?
?
? 】
【HTML Web Server★
如果希望向世界发布您的网站，那么您必须把它存放在 web 服务器上。
托管自己的网站
在自己的服务器上托管网站始终是一个选项。有几点需要考虑：
硬件支出
如果要运行“真正”的网站，您不得不购买强大的服务器硬件。不要指望低价的 PC 能够应付这些工作。您还需要稳定的（一天 24 小时）高速连接。
软件支出
请记住，服务器授权通常比客户端授权更昂贵。同时请注意，服务器授权也许有用户数量限制。
人工费
不要指望低廉的人工费用。您必须安装自己的硬件和软件。您同时要处理漏洞和病毒，以确保您的服务器时刻正常地运行于一个“任何事都可能发生”的环境中。
使用因特网服务提供商（ISP）
从 ISP 租用服务器也很常见。
大多数小公司会把网站存放到由 ISP 提供的服务器上。其优势有以下几点：
连接速度
大多数 ISP 都拥有连接因特网的高速连接。
强大的硬件
ISP 的 web 服务器通常强大到能够由若干网站分享资源。您还要看一下 ISP 是否提供高效的负载平衡，以及必要的备份服务器。
安全性和可靠性
ISP 是网站托管方面的专家。他们应该提供 99E4上的在线时间，最新的软件补丁，以及最好的病毒防护。
选择 ISP 时的注意事项
24 小时支持
确保 ISP 提供 24 小时支持。不要使自己置于无法解决严重问题的尴尬境地，同时还必须等待第二个工作日。如果您不希望支付长途电话费，那么免费电话服务也是必要的。
每日备份
确保 ISP 会执行每日备份的例行工作，否则您有可能损失有价值的数据。
流量
研究一下 ISP 的流量限制。如果出现由于网站受欢迎而激增的不可预期的访问量，那么您要确保不会因此支付额外费用。
带宽或内容限制
研究一下 ISP 的带宽和内容限制。如果您计划发布图片或播出视频或音频，请确保您有此权限。
E-mail 功能
请确保 ISP 支持您需要的 e-mail 功能。
数据库访问
如果您计划使用网站数据库中的数据，那么请确保您的 ISP 支持您需要的数据库访问。
在您选取一家 ISP 之前，请务必阅读 W3School 的 Web 主机教程。】
【————HTML媒体篇★】
【HTML 多媒体★
Web 上的多媒体指的是音效、音乐、视频和动画。
现代网络浏览器已支持很多多媒体格式。
什么是多媒体？
多媒体来自多种不同的格式。它可以是您听到或看到的任何内容，文字、图片、音乐、音效、录音、电影、动画等等。
在因特网上，您会经常发现嵌入网页中的多媒体元素，现代浏览器已支持多种多媒体格式。
在本教程中，您将了解到不同的多媒体格式，以及如何在您的网页中使用它们。
浏览器支持
第一款因特网浏览器只支持文本，而且即使是对文本的支持也仅限于单一字体和单一颜色。随后诞生了支持颜色、字体和文本样式的浏览器，图片支持也被加入。
不同的浏览器以不同的方式处理对音效、动画和视频的支持。某些元素能够以内联的方式处理，而某些则需要额外的插件。
您将在下面的章节学习更多有关插件的知识。
多媒体格式
多媒体元素（比如视频和音频）存储于媒体文件中。
确定媒体类型的最常用的方法是查看文件扩展名。当浏览器得到文件扩展名 .htm 或 .html 时，它会假定该文件是 HTML 页面。.xml 扩展名指示 XML 文件，而 .css 扩展名指示样式表。图片格式则通过 .gif 或 .jpg 来识别。
多媒体元素元素也拥有带有不同扩展名的文件格式，比如 .swf、.wmv、.mp3 以及 .mp4。
视频格式
MP4 格式是一种新的即将普及的因特网视频格式。HTML5 、Flash 播放器以及优酷等视频网站均支持它。
格式 文件 描述
AVI .avi AVI (Audio Video Interleave) 格式是由微软开发的。所有运行 Windows 的计算机都支持 AVI 格式。它是因特网上很常见的格式，但非 Windows 计算机并不总是能够播放。
WMV .wmv Windows Media 格式是由微软开发的。Windows Media 在因特网上很常见，但是如果未安装额外的（免费）组件，就无法播放 Windows Media 电影。一些后期的 Windows Media 电影在所有非 Windows 计算机上都无法播放，因为没有合适的播放器。
MPEG
.mpg
.mpeg
MPEG (Moving Pictures Expert Group) 格式是因特网上最流行的格式。它是跨平台的，得到了所有最流行的浏览器的支持。
QuickTime .mov QuickTime 格式是由苹果公司开发的。QuickTime 是因特网上常见的格式，但是 QuickTime 电影不能在没有安装额外的（免费）组件的 Windows 计算机上播放。
RealVideo
.rm
.ram
RealVideo 格式是由 Real Media 针对因特网开发的。该格式允许低带宽条件下（在线视频、网络电视）的视频流。由于是低带宽优先的，质量常会降低。
Flash
.swf
.flv
Flash (Shockwave) 格式是由 Macromedia 开发的。Shockwave 格式需要额外的组件来播放。但是该组件会预装到 Firefox 或 IE 之类的浏览器上。
Mpeg-4 .mp4 Mpeg-4 (with H.264 video compression) 是一种针对因特网的新格式。事实上，YouTube 推荐使用 MP4。YouTube 接收多种格式，然后全部转换为 .flv 或 .mp4 以供分发。越来越多的视频发布者转到 MP4，将其作为 Flash 播放器和 HTML5 的因特网共享格式。
声音格式
格式 文件 描述
MIDI
.mid
.midi
MIDI (Musical Instrument Digital Interface) 是一种针对电子音乐设备（比如合成器和声卡）的格式。MIDI 文件不含有声音，但包含可被电子产品（比如声卡）播放的数字音乐指令。
点击这里播放 The Beatles。
因为 MIDI 格式仅包含指令，所以 MIDI 文件极其小巧。上面的例子只有 23k 的大小，但却能播放将近 5 分钟。MIDI 得到了广泛的平台上的大量软件的支持。大多数流行的网络浏览器都支持 MIDI。
RealAudio
.rm
.ram
RealAudio 格式是由 Real Media 针对因特网开发的。该格式也支持视频。该格式允许低带宽条件下的音频流（在线音乐、网络音乐）。由于是低带宽优先的，质量常会降低。
Wave .wav Wave (waveform) 格式是由 IBM 和微软开发的。所有运行 Windows 的计算机和所有网络浏览器（除了 Google Chrome）都支持它。
WMA .wma WMA 格式 (Windows Media Audio)，质量优于 MP3，兼容大多数播放器，除了 iPod。WMA 文件可作为连续的数据流来传输，这使它对于网络电台或在线音乐很实用。
MP3
.mp3
.mpga
MP3 文件实际上是 MPEG 文件的声音部分。MPEG 格式最初是由运动图像专家组开发的。MP3 是其中最受欢迎的针对音乐的声音格式。期待未来的软件系统都支持它。
使用哪种格式？
WAVE 是因特网上最受欢迎的无压缩声音格式，所有流行的浏览器都支持它。如果您需要未经压缩的声音（音乐或演讲），那么您应该使用 WAVE 格式。
MP3 是最新的压缩录制音乐格式。MP3 这个术语已经成为数字音乐的代名词。如果您的网址从事录制音乐，那么 MP3 是一个选项。】
【HTML Object 元素★
<object> 的作用是支持 HTML 助手（插件）。
HTML 助手（插件）
辅助应用程序（helper application）是可由浏览器启动的程序。辅助应用程序也称为插件。
辅助程序可用于播放音频和视频（以及其他）。辅助程序是使用 <object> 标签来加载的。
使用辅助程序播放视频和音频的一个优势是，您能够允许用户来控制部分或全部播放设置。
大多数辅助应用程序允许对音量设置和播放功能（比如后退、暂停、停止和播放）的手工（或程序的）控制。
在 HTML 中播放视频的最好方式？
如需了解在 HTML 中包含音视频的最好方法，请参阅下一章节。
使用 QuickTime 来播放 Wave 音频
实例
<object width="420" height="360"
classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param name="src" value="bird.wav" />
<param name="controller" value="true" />
</object>
亲自试一试
使用 QuickTime 来播放 MP4 视频
实例
<object width="420" height="360"
classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param name="src" value="movie.mp4" />
<param name="controller" value="true" />
</object>
亲自试一试
使用 Flash 来播放 SWF 视频
实例
<object width="400" height="40"
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/
pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0">
<param name="SRC" value="bookmark.swf">
<embed src="bookmark.swf" width="400" height="40"></embed>
</object>
亲自试一试
使用 Windows Media Player 来播放 WMV 影片
下面的例子展示用于播放 Windows 媒体文件的推荐代码：
实例
<object width="100height="100type="video/x-ms-asf" url="3d.wmv" data="3d.wmv"
classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
<param name="url" value="3d.wmv">
<param name="filename" value="3d.wmv">
<param name="autostart" value="1">
<param name="uiMode" value="full" />
<param name="autosize" value="1">
<param name="playcount" value="1">
<embed type="application/x-mplayer2" src="3d.wmv" width="100 height="100autostart="true" showcontrols="true"
pluginspage="http://www.microsoft.com/Windows/MediaPlayer/"></embed>
</object>】
【HTML 音频★
在 HTML 中播放声音的方法有很多种。
问题，问题，以及解决方法
在 HTML 中播放音频并不容易！
您需要谙熟大量技巧，以确保您的音频文件在所有浏览器中（Internet Explorer, Chrome, Firefox, Safari, Opera）和所有硬件上（PC, Mac , iPad, iPhone）都能够播放。
在本章，W3School 为您总结了问题和解决方法。
使用插件
浏览器插件是一种扩展浏览器标准功能的小型计算机程序。
插件有很多用途：播放音乐、显示地图、验证银行账号，控制输入等等。
可使用 <object> 或 <embed> 标签来将插件添加到 HTML 页面。
这些标签定义资源（通常非 HTML 资源）的容器，根据类型，它们即会由浏览器显示，也会由外部插件显示。
使用 <embed> 元素
<embed> 标签定义外部（非 HTML）内容的容器。（这是一个 HTML5 标签，在 HTML4 中是非法的，但是所有浏览器中都有效）。
下面的代码片段能够显示嵌入网页中的 MP3 文件：
实例
<embed height="100" width="100" src="song.mp3" />
亲自试一试
问题：
<embed> 标签在 HTML 4 中是无效的。页面无法通过 HTML 4 验证。
不同的浏览器对音频格式的支持也不同。
如果浏览器不支持该文件格式，没有插件的话就无法播放该音频。
如果用户的计算机未安装插件，无法播放音频。
如果把该文件转换为其他格式，仍然无法在所有浏览器中播放。
注释：使用 <!DOCTYPE html> (HTML5) 解决验证问题。
使用 <object> 元素
<object tag> 标签也可以定义外部（非 HTML）内容的容器。
下面的代码片段能够显示嵌入网页中的 MP3 文件：
实例
<object height="100" width="100" data="song.mp3"></object>
亲自试一试
问题：
不同的浏览器对音频格式的支持也不同。
如果浏览器不支持该文件格式，没有插件的话就无法播放该音频。
如果用户的计算机未安装插件，无法播放音频。
如果把该文件转换为其他格式，仍然无法在所有浏览器中播放。
使用 HTML5 <audio> 元素
<audio> 元素是一个 HTML5 元素，在 HTML 4 中是非法的，但在所有浏览器中都有效。
实例
<audio controls="controls">
<source src="song.mp3" type="audio/mp3" />
<source src="song.ogg" type="audio/ogg" />
Your browser does not support this audio format.
</audio>
亲自试一试
上面的例子使用了一个 mp3 文件，这样它在 Internet Explorer、Chrome 以及 Safari 中是有效的。
为了使这段音频在 Firefox 和 Opera 中同样有效，添加了一个 ogg 类型的文件。如果失败，会显示错误消息。
问题：
<audio> 标签在 HTML 4 中是无效的。您的页面无法通过 HTML 4 验证。
您必须把音频文件转换为不同的格式。
<audio> 元素在老式浏览器中不起作用。
注释：使用 <!DOCTYPE html> (HTML5) 解决验证问题。
最好的 HTML 解决方法
实例
<audio controls="controls" height="100" width="100">
<source src="song.mp3" type="audio/mp3" />
<source src="song.ogg" type="audio/ogg" />
<embed height="100" width="100" src="song.mp3" />
</audio>
亲自试一试
上面的例子使用了两个不同的音频格式。HTML5 <audio> 元素会尝试以 mp3 或 ogg 来播放音频。如果失败，代码将回退尝试 <embed> 元素。
问题：
您必须把音频转换为不同的格式。
<audio> 元素无法通过 HTML 4 和 XHTML 验证。
<embed> 元素无法通过 HTML 4 和 XHTML 验证。
<embed> 元素无法回退来显示错误消息。
注释：使用 <!DOCTYPE html> (HTML5) 解决验证问题。
向网站添加音频的最简单方法
向网页添加音频的最简单的方法是什么？
雅虎的媒体播放器绝对算其中之一。
使用雅虎媒体播放器是一个不同的途径。您只需简单地让雅虎来完成歌曲播放的工作就好了。
它能播放 mp3 以及一系列其他格式。通过一行简单的代码，您就可以把它添加到网页中，轻松地将 HTML 页面转变为专业的播放列表。
雅虎媒体播放器
实例
<a href="song.mp3">Play Sound</a>
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js">
</script>
亲自试一试
使用雅虎播放器是免费的。如需使用它，您需要把这段 JavaScript 插入网页底部：
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>
然后只需简单地把 MP3 文件链接到您的 HTML 中，JavaScript 会自动地为每首歌创建播放按钮：
<a href="song1.mp3">Play Song 1</a>
<a href="song2.mp3">Play Song 2</a>
...
...
...
雅虎媒体播放器为您的用户提供的是一个小型的播放按钮，而不是完整的播放器。不过，当您点击该按钮，会弹出完整的播放器。
请注意，这个播放器始终停靠在窗框底部。只需点击它，就可将其滑出。
使用超链接
如果网页包含指向媒体文件的超链接，大多数浏览器会使用“辅助应用程序”来播放文件。
以下代码片段显示指向 mp3 文件的链接。如果用户点击该链接，浏览器会启动“辅助应用程序”来播放该文件：
实例
<a href="song.mp3">Play the sound</a>
亲自试一试
内联的声音
当您在网页中包含声音，或者作为网页的组成部分时，它被称为内联声音。
如果您打算在 web 应用程序中使用内联声音，您需要意识到很多人都觉得内联声音令人恼火。同时请注意，用户可能已经关闭了浏览器中的内联声音选项。
我们最好的建议是只在用户希望听到内联声音的地方包含它们。一个正面的例子是，在用户需要听到录音并点击某个链接时，会打开页面然后播放录音。
HTML 4.01 多媒体标签
标签 描述
<applet> 不赞成。定义内嵌 applet。
<embed> HTML4 中不赞成，HTML5 中允许。定义内嵌对象。
<object> 定义内嵌对象。
<param> 定义对象的参数。
HTML 5 多媒体标签
标签 描述
<audio> 标签定义声音，比如音乐或其他音频流。
<embed> 标签定义嵌入的内容，比如插件。】
【HTML 视频★
在 HTML 中播放视频的方法同样有很多种。
实例
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
<source src="movie.webm" type="video/webm" />
<object data="movie.mp4" width="320" height="240">
<embed src="movie.swf" width="320" height="240" />
</object>
</video>
亲自试一试
问题，问题，以及解决方法
在 HTML 中播放视频并不容易！
您需要谙熟大量技巧，以确保您的视频文件在所有浏览器中（Internet Explorer, Chrome, Firefox, Safari, Opera）和所有硬件上（PC, Mac , iPad, iPhone）都能够播放。
在本章，W3School 为您总结了问题和解决方法。
使用 <embed> 标签
<embed> 标签的作用是在 HTML 页面中嵌入多媒体元素。
下面的 HTML 代码显示嵌入网页的 Flash 视频：
实例
<embed src="movie.swf" height="200" width="200"/>
亲自试一试
问题
HTML4 无法识别 <embed> 标签。您的页面无法通过验证。
如果浏览器不支持 Flash，那么视频将无法播放
iPad 和 iPhone 不能显示 Flash 视频。
如果您将视频转换为其他格式，那么它仍然不能在所有浏览器中播放。
使用 <object> 标签
<object> 标签的作用是在 HTML 页面中嵌入多媒体元素。
下面的 HTML 片段显示嵌入网页的一段 Flash 视频：
实例
<object data="movie.swf" height="200" width="200"/>
亲自试一试
问题
如果浏览器不支持 Flash，将无法播放视频。
iPad 和 iPhone 不能显示 Flash 视频。
如果您将视频转换为其他格式，那么它仍然不能在所有浏览器中播放。
使用 <video> 标签
<video> 是 HTML 5 中的新标签。
<video> 标签的作用是在 HTML 页面中嵌入视频元素。
以下 HTML 片段会显示一段嵌入网页的 ogg、mp4 或 webm 格式的视频：
实例
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
<source src="movie.webm" type="video/webm" />
Your browser does not support the video tag.
</video>
亲自试一试
问题
您必须把视频转换为很多不同的格式。
<video> 元素在老式浏览器中无效。
<video> 元素无法通过 HTML 4 和 XHTML 验证。
最好的 HTML 解决方法
HTML 5 <object> <embed>
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
<source src="movie.webm" type="video/webm" />
<object data="movie.mp4" width="320" height="240">
<embed src="movie.swf" width="320" height="240" />
</object>
</video>
亲自试一试
上例中使用了 4 中不同的视频格式。HTML 5 <video> 元素会尝试播放以 mp4、ogg 或 webm 格式中的一种来播放视频。如果均失败，则回退到 <embed> 元素。
问题
您必须把视频转换为很多不同的格式
<video> 元素无法通过 HTML 4 和 XHTML 验证。
<embed> 元素无法通过 HTML 4 和 XHTML 验证。
注释：使用 <!DOCTYPE html> (HTML5) 解决验证问题。
优酷解决方案
在 HTML 中显示视频的最简单的方法是使用优酷等视频网站。
如果您希望在网页中播放视频，那么您可以把视频上传到优酷等视频网站，然后在您的网页中插入 HTML 代码即可播放视频：
<embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf"
width="480" height="400"
type="application/x-shockwave-flash">
</embed>
亲自试一试
使用超链接
如果网页包含指向媒体文件的超链接，大多数浏览器会使用“辅助应用程序”来播放文件。
以下代码片段显示指向 AVI 文件的链接。如果用户点击该链接，浏览器会启动“辅助应用程序”，比如 Windows Media Player 来播放这个 AVI 文件：
实例
<a href="movie.swf">Play a video file</a>
亲自试一试
关于内联视频的一段注释
当视频被包含在网页中时，它被称为内联视频。
如果您打算在 web 应用程序中使用内联视频，您需要意识到很多人都觉得内联视频令人恼火。
同时请注意，用户可能已经关闭了浏览器中的内联视频选项。
我们最好的建议是只在用户希望看到内联视频的地方包含它们。一个正面的例子是，在用户需要看到视频并点击某个链接时，会打开页面然后播放视频。
HTML 4.01 多媒体标签
标签 描述
<applet> 不赞成。定义内嵌 applet。
<embed> 不赞成。定义内嵌对象。（HTML5 中允许）
<object> 定义内嵌对象。
<param> 定义对象的参数。
HTML 5 多媒体标签
标签 描述
<video> 标签定义声音，比如音乐或其他音频流。
<embed> 标签定义嵌入的内容，比如插件。】
【————HTML实例篇★】
【1.HTML 基础标签实例★
1.一个简单的 HTML 文件
这个例子是一个很简单的 HTML 文件，使用了尽可能少的 HTML 标签。它向您演示了 body 元素中的内容是如何被浏览器显示的。
代码：
<html>
<head>
<title>我的第一个 HTML 页面</title>
</head>
<body>
<p>body 元素的内容会显示在浏览器中。</p>
<p>title 元素的内容会显示在浏览器的标题栏中。</p>
</body>
</html>
查看结果:
body 元素的内容会显示在浏览器中。
title 元素的内容会显示在浏览器的标题栏中。
2.简单的段落
此例演示：段落元素中的文字如何被浏览器显示。
<html>
<body>
<p>这是段落。</p>
<p>这是段落。</p>
<p>这是段落。</p>
<p>段落元素由 p 标签定义。</p>
</body>
</html>
查看结果：
这是段落。
这是段落。
这是段落。
段落元素由 p 标签定义。
3.更多的段落
本例演示段落元素的某些缺省的行为。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<body>
<p>
这个段落
在源代码中
包含许多行
但是浏览器
忽略了它们。
</p>
<p>
这个段落
在源代码 中
包含 许多行
但是 浏览器
忽略了 它们。
</p>
<p>
段落的行数依赖于浏览器窗口的大小。如果调节浏览器窗口的大小，将改变段落中的行数。
</p>
</body>
</html>
结果：
这个段落 在源代码中 包含许多行 但是浏览器 忽略了它们。
这个段落 在源代码 中 包含 许多行 但是 浏览器 忽略了 它们。
段落的行数依赖于浏览器窗口的大小。如果调节浏览器窗口的大小，将改变段落中的行数。
4.“诗歌”问题
本例演示 HTML 格式化的某些问题。
<html>
<body>
<h1>春晓</h1>
<p>
春眠不觉晓，
处处闻啼鸟。
夜来风雨声，
花落知多少。
</p>
<p>注意，浏览器忽略了源代码中的排版（省略了多余的空格和换行）。</p>
</body>
</html>
结果：
春晓
春眠不觉晓， 处处闻啼鸟。 夜来风雨声， 花落知多少。
注意，浏览器忽略了源代码中的排版（省略了多余的空格和换行
5.折行
本例演示在 HTML 文档中折行的使用。
<html>
<body>
<p>
To break<br />lines<br />in a<br />paragraph,<br />use the br tag.
</p>
</body>
</html>
结果：
To break
lines
in a
paragraph,
use the br tag.
6.标题
本例演示在 HTML 文档中显示标题的标签。
<html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
<p>请仅仅把标题标签用于标题文本。不要仅仅为了产生粗体文本而使用它们。请使用其它标签或 CSS 代替。</p>
</body>
</html>
结果：
This is heading 1
This is heading 2
This is heading 3
This is heading 4
This is heading 5
This is heading 6
请仅仅把标题标签用于标题文本。不要仅仅为了产生粗体文本而使用它们。请使用其它标签或 CSS 代替。
7.居中排列的标题
本例演示一个居中排列的标题。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<body>
<h1 align="center">This is heading 1</h1>
<p>上面的标题在页面中进行了居中排列。上面的标题在页面中进行了居中排列。上面的标题在页面中进行了居中排列。</p>
</body>
</html>
结果：
This is heading 1
上面的标题在页面中进行了居中排列。上面的标题在页面中进行了居中排列。上面的标题在页面中进行了居中排列。
8.水平线
本例演示如何插入水平线。
<html>
<body>
<p>hr 标签定义水平线：</p>
<hr />
<p>这是段落。</p>
<hr />
<p>这是段落。</p>
<hr />
<p>这是段落。</p>
</body>
</html>
结果：
hr 标签定义水平线：
这是段落。
这是段落。
这是段落。
9.隐藏的注释
本例演示如何在 HTML 源代码中插入隐藏的注释。
<html>
<body>
<!--这是一段注释。注释不会在浏览器中显示。-->
<p>这是一段普通的段落。</p>
</body>
</html>
结果：
这是一段普通的段落。
10.背景颜色
本例演示如何为 HTML 页面添加背景颜色。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-cn" />
</head>
<body bgcolor="yellow">
<h2>请看: 改变了颜色的背景。黄色</h2>
</body>
</html>
结果：
黄色背景
】
【2.HTML 文本格式化实例★
1.文本格式化
此例演示如何在一个 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>
结果：
This text is bold
This text is strong
This text is big
This text is emphasized
This text is italic
This text is small
This text contains subscript
This text contains superscript
2.预格式文本
此例演示如何使用 pre 标签对空行和空格进行控制。
<html>
<body>
<pre>
这是
预格式文本。
它保留了 空格
和换行。
</pre>
<p>pre 标签很适合显示计算机代码：</p>
<pre>
for i = 1 to 10
print i
next i
</pre>
</body>
</html>
结果：
这是
预格式文本。
它保留了 空格
和换行。
pre 标签很适合显示计算机代码：
for i = 1 to 10
print i
next i
3.“计算机输出”标签
此例演示不同的“计算机输出”标签的显示效果。
<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>
结果：
Computer code
Keyboard input
Teletype text
Sample text
Computer variable
注释：这些标签常用于显示计算机/编程代码。
4.地址
此例演示如何在 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>
结果：
Written by Donald Duck.
Visit us at:
Example.com
Box 564, Disneyland
USA
5.缩写和首字母缩写
此例演示如何实现缩写或首字母缩写。
<html>
<body>
<abbr title="etcetera">etc.</abbr>
<br />
<acronym title="World Wide Web">WWW</acronym>
<p>在某些浏览器中，当您把鼠标移至缩略词语上时，title 可用于展示表达的完整版本。</p>
<p>仅对于 IE 5 中的 acronym 元素有效。</p>
<p>对于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。</p>
</body>
</html>
结果：
etc.
WWW
在某些浏览器中，当您把鼠标移至缩略词语上时，title 可用于展示表达的完整版本。
仅对于 IE 5 中的 acronym 元素有效。
对于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。
6.文字方向
此例演示如何改变文字的方向。
<html>
<body>
<p>
如果您的浏览器支持 bi-directional override (bdo)，下一行会从右向左输出 (rtl)；
</p>
<bdo dir="rtl">
Here is some Hebrew text
</bdo>
</body>
</html>
结果：
如果您的浏览器支持 bi-directional override (bdo)，下一行会从右向左输出 (rtl)；
Here is some Hebrew text
7.块引用
此例演示如何实现长短不一的引用语。
<html>
<body>
这是长的引用：
<blockquote>
这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。
</blockquote>
这是短的引用：
<q>
这是短的引用。
</q>
<p>
使用 blockquote 元素的话，浏览器会插入换行和外边距，而 q 元素不会有任何特殊的呈现。
</p>
</body>
</html>
结果：
这是长的引用：
这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。
这是短的引用： 这是短的引用。
使用 blockquote 元素的话，浏览器会插入换行和外边距，而 q 元素不会有任何特殊的呈现。
8.删除字效果和插入字效果
此例演示如何标记删除文本和插入文本。
<html>
<body>
<p>一打有 <del>二十</del> <ins>十二</ins> 件。</p>
<p>大多数浏览器会改写为删除文本和下划线文本。</p>
<p>一些老式的浏览器会把删除文本和下划线文本显示为普通文本。</p>
</body>
</html>
结果：
一打有 二十 十二 件。
大多数浏览器会改写为删除文本和下划线文本。
一些老式的浏览器会把删除文本和下划线文本显示为普通文本】
【3.HTML 链接实例★
1.创建超级链接
本例演示如何在 HTML 文档中创建链接。
2.将图像作为链接
本例演示如何使用图像作为链接。
3.在新的浏览器窗口打开链接
本例演示如何在新窗口打开一个页面，这样的话访问者就无需离开你的站点了。
4.链接到同一个页面的不同位置
本例演示如何使用链接跳转至文档的另一个部分
5.跳出框架
本例演示如何跳出框架，假如你的页面被固定在框架之内。
6.创建电子邮件链接
本例演示如何如何链接到一个邮件。（本例在安装邮件客户端程序后才能工作。）
7.创建电子邮件链接 2
本例演示更加复杂的邮件链接。
】
【后继内容1.1版本添加，更新很快滴，放心★】↑
✔【作者正在努力，，，★】✘
▼【导读 ，前面的几章选择不看，否则可能会晕的★
适合对网站已有初步认识的 Webmaster 或是专业的 CGI 程序开发人员。全书分成五章：
第一章 主要是介绍 PHP 的背景及功能，并将 PHP 和其它的 CGI 界面比较，让您对 PHP 有初步的认识。
第二章 说明 PHP 的安装及配置部份。对于分工较细的网站，本章适合系统管理人员在配置 PHP 系统的参考。
第三章 本章说明了 PHP 的程序结构与相关语法，提供想要学习 PHP 语言的读者一个完整的基础。
第四章 这是本书的最重要部份，也将是您将本书留在书签或我的最爱的理由。本章将 967 个 PHP 的函数，依其所属的性质分成 55 个单元，对函数提供详细的解说，并适时提供相关的范例。
第五章 本章的范例程序都是作者在 Web CGI 上多年实战经验的累积，为前面几章的总成及综合范例。您可以从这些程序入手，精心打造属于自己网站的专用程序，让您的网站与众不同。
附录Ａ 可让您在对某函数有印象时，快速找到您要的函数。
对于刚开始接触 PHP 的读者，建议从第一章或者第二章开始读起，按部就班打好基础。对于完全掌握 PHP 程序语言的高手，建议将第四章看一次，加上附录Ａ函数索引，必让您在开发 PHP 程序时如虎添翼。对于学了一点，却又觉得有些不够的读者，建议从第五章，研究现成的程序，让您对 PHP 加深结构语法的印象。】
【PHP 的来龙去脉 ★
讲到 PHP 的全名就蛮有趣的，它是一个递归的缩写名称，"PHP: Hypertext Preprocessor"，打开缩写还是缩写。PHP 是一种 HTML 内嵌式的语言 (类似 IIS 上的 ASP)。而 PHP 独特的语法混合了 C、Java、Perl 以及 PHP 式的新语法。它可以比 CGI 或者 Perl 更快速的执行动态网页。
图一: PHP 是 Web Server 最佳的后端延伸界面
PHP 最初是在公元 1994 年 Rasmus Lerdorf 开始计划发展。在 1995 年以 Personal Home Page Tools (PHP Tools) 开始对外发表第一个版本。在这早期的版本中，提供了访客留言本、访客计数器等简单的功能。随后在新的成员加入开发行列之后，在 1995 年中，第二版的 PHP 问市。第二版定名为 PHP/FI(Form Interpreter)。PHP/FI 并加入了 mSQL 的支持，自此奠定了 PHP 在动态网页开发上的影响力。在 1996 年底，有一万五千个 Web 网站使用 PHP/FI；在 1997 年中，使用 PHP/FI 的 Web 网站成长到超过五万个。而在 1997 年中，开始了第三版的开发计划，开发小组加入了 Zeev Suraski 及 Andi Gutmans，而第三版就定名为 PHP3。
PHP3 跟 Apache 服务器紧密结合的特性；加上它不断的更新及加入新的功能；并且它几乎支持所有主流与非主流数据库；再以它能高速的执行效率，使得 PHP 在 1999 年中的使用网站超过了十五万!!它的源代码完全公开，在 Open Source 意识抬头的今天，它更是这方面的中流砥柱。不断地有新的函数库加入，以及不停地更新的活力，使得 PHP 无论在 UNIX 或是 Win32 的平台上都可以有更多新的功能。它提供丰富的函数，使得在程序设计方面有着更好的支持。
PHP 的第四代 Zend 核心引擎已经进入测试阶段。整个脚本程序的核心大幅改动，让程序的执行速度，满足更快的要求。在最佳化之后的效率，已较传统 CGI 或者 ASP 等程序有更好的表现。而且还有更强的新功能、更丰富的函数库。无论您接不接受，PHP 都将在 Web CGI 的领域上，掀起巅覆性的革命。对于一位专职 Web Master 而言，它将也是必修课程之一。】
【PHP 的功能概述★
PHP 在数据库方面的丰富支持，也是它迅速走红的原因之一，它支持下列的数据库或是资料表：
Adabas D
DBA
dBase
dbm
filePro
Informix
InterBase
mSQL
Microsoft SQL Server
MySQL
Solid
Sybase
ODBC
Oracle 8
Oracle
PostgreSQL
而在 Internet 上它也支持了相当多的通讯协议 (protocol)，包括了与电子邮件相关的 IMAP, POP3；网管系统 SNMP；网络新闻 NNTP；帐号共用 NIS；全球信息网 HTTP 及 Apache 服务器；目录协议 LDAP 以及其它网络的相关函数。
除此之外，用 PHP 写出来的 Web 后端 CGI 程序，可以很轻易的移植到不同的系统平台上。例如，先以 Linux 架的网站，在系统负荷过高时，可以快速地将整个系统移到 SUN 工作站上，不用重新编译 CGI 程序。面对快速发展的 Internet，这是长期规划的最好选择。
在加入其它的模块之后，提供了更多样的支持如下：
英文拼写检查
BC 高精确度计算
公元历法
PDF 文件格式
Hyperwave 服务器
图形处理
编码与解码功能
哈稀处理
WDDX 功能
qmail 与 vmailmgr 系统
压缩文件处理
XML 解析
除此之外，一般语言有的数学运算、时间处理、文件系统、字符串处理、行程处理等功能，它一样都不缺。再加上它是免费的系统，使得成本与效益比，几乎等于无限大！】
【PHP 与其它 CGI 的比较 ★
无可置疑的，写 CGI 的方式有很多种，而 PHP 只是其中的一种选择罢了。对资深的 Webmaster 而言，CGI 的写作界面应是随着需求而改动。毕竟，在一个对系统反映速度要求极严格的系统而言，恐怕只有 NSAPI 界面写的 CGI 程序才能符合要求了。在其它的场合，相信使用 PHP 来作为 CGI 的界面是游刃有余，而且是最适合的。
程序界面 PHP ASP CGI NSAPI ISAPI
操作系统 均可 Win32 均可 均可 Win32
Web服务器 数种 IIS 均可 Netscape Server IIS
执行效率 快 快 慢 极快 极快
稳定性 佳 中等 最高 差 差
开发时间 短 短 中等 长 长
修改时间 短 短 中等 长 长
程序语言 PHP VB 不限 C/C C/Delphi
网页结合 佳 佳 差 差 差
学习门槛 低 低 高 极高 高
函数支持 多 少 不定 中等 少
系统安全 佳 极差 最佳 佳 尚可
使用网站 超多 多 多 极少 少
改版速度 快 慢 无 慢 慢
其中的 PHP 可用在数种 Web 服务器上；传统 CGI 就不限是哪种操作系统或 Web 服务器平台；NSAPI 一定要在 Netscape 的服务器 (如 Netscape Enterprise Server 或 FastTrack Server) 上才可以执行，但可支持多种操作系统 (UNIX 或 Win32)；ASP 及 ISAPI 只在 IIS 上有完整的功能。
在稳定性上，由于 NSAPI 或 ISAPI 是动态链接的方式，因此在执行若出现问题，会使得 Web 服务器一起瘫痪。而 ASP 在我实际应用经验上，隔阵子就会使系统不稳定，需要重新启动操作系统。PHP 在许多的网站使用上，不但长期使用都没有问题，而且程序的稳定性也不错。当然最稳的还是传统 CGI 程序，因为它是由操作系统负责控制，不会因 CGI 程序的错误导致 Web 服务器的不稳定。
在开发及维护时间上，PHP 及 ASP 都有不错的表现。而 NSAPI 及 ISAPI 则需要长时间的开发过程，在稳定上线后，这两种界面反倒是效率最佳的方法。传统的 CGI 程序则要视开发工具语言而定了，用 Perl 或是 shell script 不需要编译的过程，直接就可以执行，若用 Delphi 或 VC/BCB 甚至用组合语言等都要经过编译才能执行，至于用 VB 来写传统 CGI，唉....。
要比较和网页结合的能力，PHP 和 ASP 是并驾齐驱的，其它的方式就不能内嵌 HTML 语法了。而这也是影响开发时间的因素之一。
就系统安全性而言，ASP 是最差的，在没有经过微软的 IIS Service Pack 处理过，使用 ::$DATA 就可以看到 ASP 的源代码，这真是叫人不敢领教。当然，传统 CGI 的程序，由于是由操作系统直接管理，要破解的难度最高，黑客必须由操作系统下手，而不能由 Web 服务器下手。PHP 在许多商业及非商业使用时，也没有听过有什么安全的问题。
在新增功能及改版方面，传统的 CGI 由于不受任何语言限制，没有这方面的问题。PHP 是最有活力的，数天至数周就有一个新版本出现，每次的新版，就代表更多的功能及修正更多的错误。其它的 ASP、NSAPI、ISAPI 就视它的 Web 服务器改版速度了，ASP 要等到 IIS 5.0 出现时才会有 ASP 3.0，也就是要等到 Windows 2000 正式上市。
总而言之，在 Web 的后端 CGI 程序，就像鱼与熊掌一般，没有高效率又开发方便的选择。不过相信 PHP 是处于开发容易、效率也不错的平衡点上。】
【环境需求与准备工作 ★
在安装 PHP 做为 WWW 服务器的一部份时，我们可以考虑用 UNIX 操作系统；或者是 Windows NT/95 等 Win32 API 的平台。当然，大部份的人都会使用 UNIX 来当作 PHP 的执行平台 (在 Windows NT 的用户大多数都会选择 IIS ASP)，因此，本书的所有内容以及范例程序都是在 UNIX 上为主。实际上，Linux Apache PHP 应是最经济的选择，因为这样的组合几乎是不用钱的，成本与效益比这也是最好的选择。而许多成功网站的经验，更是采用这种组合最好的佐证。
Linux 操作系统方面，您可以选择各式的 Linux 套件，包括 Slackware Linux、RedHat、OpenLinux、SuSE....等等，反正这方面的软件在店里也是很容易而且很便宜就可以买到。对学生而言，也可以去各大 FTP 站下载完整的系统安装。
Apache 服务器则是目前最多 WWW 网站所采用的服务器。您可以到 http://www.apache.org 下载最新版的程序及相关文件，若您觉得从国外下载要很久的话，也可以用它的 Mirror 网站下载。
PHP 则可以去它的官方网站 http://www.php.net 下载所需要的程序。
虽然目前 WindowsNT 或者 Windows98 等 Win32 的系统平台也能安装 PHP 及 Apache 服务器，不过这似乎没什么道理，因为 PHP 和 Apache 在 UNIX下可以跑得更快更好。
当然，若想使用商业化的系统平台，SUN、IBM、HP、DEC、SGI、NEC 等公司都提供相关的 UNIX 或者是 WindowsNT 的系统平台。加上高安全性调整过后的 Apache 服务器：Stronghold 或是其它支持 SSL 的 Apache 版本。这种组合，相信能满足商业化的需求。而 PHP 就扮演着快速方便的 CGI 角色，让客户对网站的服务品质更加满意。】
【快速配置及安装 ★
以下是基本的安装步骤，运行环境是 UNIX 系列的系统平台。在安装之前，要先下载 apache_1.3.x.tar.gz 及 php-3.0.x.tar.gz 两个文件。可以将这两个文件放在 /usr/src 中再开始执行以下的步骤。 下面每个行号后是一个步骤，步骤中的所有选项是连在一起的，请不要分开执行。
gzip -d -c apache_1.3.x.tar.gz | tar xvf -
gzip -d -c php-3.0.x.tar.gz | tar xvf -
cd apache_1.3.x
./configure --prefix=/www
cd ../php-3.0.x
./configure --with-mysql --with-apache=../apache_1.3.x --enable-track-vars
make
make install
cd ../apache_1.3.x
./configure --prefix=/www --activate-module=src/modules/php3/libphp3.a
make
make install
第一、二行利用 gzip 及 tar 加上管道功能，将压缩文件解压还原。然后在 Apache 的原始文件目录中执行环境配置，--prefix 选项指示 Apache 的安装目录路径。之后进入 PHP3 的原始文件目录中，若没有 MySQL 数据库，则可省略 --with-mysql 的选项，重要的是一定要加入 --with-apache 选项，而且 Apache 原始文件的路径要正确。配置完 PHP3 之后就编译、安装到 Apache 的原始文件目录中。之后在 Apache 原始文件目录中再加入 PHP 的模块文件。在编译及安装 Apache 之后就初步完成了。之后就是要配置 Apache 才能让 Web Server 顺利运作。
需要注意的是，PHP 要和任何数据库连接，都要在执行这些步骤之前先将数据库设好，并确定 Web Server 上可以顺利存取数据库系统。如果需要其它的一些 PHP 外部模块也要先配置好这些模块。
cd ../php-3.0.x
cp php3.ini-dist /usr/local/lib/php3.ini
之后将 php3.ini 放在指定的目录，如果需要，也可以手动修改 php3.ini 文件文件，以符合使用的要求。
在 Apache 服务器的配置方面，要在 Apache 的配置文件 httpd.conf 或 srm.conf 文件中加入下面的字符串。告诉 Apache 服务器，扩展名 php3 是一个特殊的程序文件。当然扩展名可以设成别的扩展名，还有一些网站将 php 的程序扩展名设为 phtml 也是不错的选择，反正这就要看 Webmaster 的规划了。
AddType application/x-httpd-php3 .php3
在 PHP 4.x 版的方法大致和 PHP 3.0.x 版相同，不同的地方在于 PHP 4.x 的目录名称及编译后的模块放置目录不同。此外，默认的扩展名也由 .php3 变成了 .php。当然在安装前还要先下载 PHP 4.x 的程序才行。
gzip -dc apache_1.3.x.tar.gz | tar xvf -
gzip -dc php-4.0.x.tar.gz | tar xvf -
cd apache_1.3.x
./configure --prefix=/www
cd ../php-4.0.x
./configure --with-mysql --with-apache=../apache_1.3.x --enable-track-vars
make
make install
cd ../apache_1.3.x
./configure --prefix=/www --activate-module=src/modules/php4/libphp4.a
make
make install
cd ../php-4.0.x
cp php.ini-dist /usr/local/lib/php.ini
在 httpd.conf 或 srm.conf 加入
AddType application/x-httpd-php .php
AddType application/x-httpd-php-source .phps
而 PHP 4.x 版中对 Apache 服务器加入了新的环境变量配置项。
php_value [PHP directive name] [value]
php_flag [PHP directive name] [On|Off]
php_admin_value [PHP directive name] [value]
php_admin_flag [PHP directive name] [On|Off]
在 PHP 3.0.x 版中，有些目录可能会有 .htaccess 的文件，使用 PHP 4.0.x 版的系统，必须将这个文件拿掉，可以使用改名字的方式或者直接删除。
当一切配置好了之后，重新执行 Apache 服务器。在 Apache 目录下有 bin 或是 sbin 的目录，其中会有 apachectl 的 shell 程序，输入 apachectl restart 就可以重新启动 Apache 服务器了。赶快试看看 hello, world 程序吧！
唉，懒得啰嗦了，直接来语法吧！】
【PHP语法讲解★】
【hello, world ★
在 K&R 二教授的经典名著 The C Programming Language 一书中的 "hello, world" 几乎已经变成了所有程序语言的第一个范例。因此，在这儿也用 PHP 来写个最基本的 "hello, world" 程序。
<html>
<head>
<title>First program</title>
</head>
<body>
<?php
echo "hello, world\n";
?>
</body>
</html>
这十行程序在 PHP 中不需经过编译等复杂的过程，只要将它放在配置好可执行 PHP 语法的服务器中，将它存成文件 helloworld.php 好了。在用户的浏览器端，只要在 Location: 输入 http://some.hostname/helloworld.php，就可以在浏览器上看到 hello, world 字符串出现。
我们可以看到，这个程序只有三行有用，其它六行都是标准的 HTML 语法。而它在返回浏览器时和 JavaScript 或 VBScript 完全不一样，PHP 的程序没有传到浏览器，只在浏览器上看到短短的几个字 "hello, world"。
在第六行及第八行，分别是 PHP 的开始及结束的嵌入符号。第七行才是服务器端执行的程序。在这个例子中，"\n" 和 C 语言的表示都一模一样，代表换行的意思。在第一章也有介绍过 PHP 是混合多种语言而成，而 C 正是含量最多的语言。在一个表达式结束后，要加上分号代表结束。】
【嵌入方法 ★
要将 Homepage 中放入 PHP，有以下数种做法
<? echo ("这是一个 PHP 语言的嵌入范例\n"); ?>
<?php echo("这是第两个 PHP 语言的嵌入范例\n"); ?>
<script language="php">
echo ("这是类似 JavaScript 及 VBScript 语法
的 PHP 语言嵌入范例");
</script>
<cho ("这是类似 ASP 嵌入语法的 PHP 范例"); s
其中第一种及第两种是最常用的两个方法，在小于符号加上问号后，可以加也可以不加 php 三个字，之后就是 PHP 的程序码。在程序码结束后，加入问号大于两个符号就可以了。第三种方法对熟悉 Netscape 服务器产品的 Webmaster 人员而言，有相当的亲切感，它是类似 JavaScript 的写作方式。而对于从 Windows NT 平台的 ASP 投向 PHP 的用户来说，第四种方法似曾相似，只要用 PHP 3.0.4 版本以后的服务器都可以用小于百分比的符号开始，以百分比大于结束 PHP 的部分，但想用第四种方法的用户别忘了在 php.ini 加入 asp_tags 或是在编译 PHP 时加入 --enable-asp-tags 的选项，才能使第四种方法有效。建议少用第四种方法，当 PHP 与 ASP 源代码混在一起时就麻烦了。
其实，在写作 PHP 的程序最好的方法，就是先处理好纯 HTML 格式的 Homepage 文件之后，再将需要变量或其它处理的地方改成 PHP 程序。这种方法，可以让您在开发上达到事半功倍的效果。】
【引用文件★
PHP 最吸引人的特色之一大概就是它的引用文件了。用这个方法可以将常用的功能写成一个函数，放在文件之中，然后引用之后就可以调用这个函数了。
引用文件的方法有两种：require 及 include。两种方式提供不同的使用弹性。
require 的使用方法如 require("MyRequireFile.php"); 。这个函数通常放在 PHP 程序的最前面，PHP 程序在执行前，就会先读入 require 所指定引入的文件，使它变成 PHP 程序网页的一部份。常用的函数，亦可以这个方法将它引入网页中。
include 使用方法如 include("MyIncludeFile.php"); 。这个函数一般是放在流程控制的处理部分中。PHP 程序网页在读到 include 的文件时，才将它读进来。这种方式，可以把程序执行时的流程简单化。
在 PHP 的官方网站中，每页都可以看到原始程序，更是处处看到这两种引入文件的方法。】
【程序注释★
在 PHP 的程序中，加入注释的方法很灵活。可以使用 C 语言、C 语言或者是 UNIX 的 Shell 语言的注释方式，而且也可以混合使用。这可以让每个写 PHP 网页程序的 Webmaster 或 Programmer 发展出属于自己的写作风格。
<?php
echo "这是第一种例子。\n"; // 本例是 C 语法的注释
/* 本例采用多行的
注释方式 */
echo "这是第两种例子。\n";
echo "这是第三种例子。\n"; # 本例使用 UNIX Shell 语法注释
?>
不过在使用多行注释时请注意，不能让注释陷入递归循环当中，否则会引起错误。
<?php
/*
echo "这是错误的示范。\n"; /* 递归注释会引起问题 */
*/
?>】
【常量类型★
PHP 在常量中定义了以下一些常量。
__FILE__
这个默认常量是 PHP 程序文件名。若引用文件 (include 或 require)则在引用文件内的该常量为引用文件名，而不是引用它的文件名。
__LINE__
这个默认常量是 PHP 程序行数。若引用文件 (include 或 require)则在引用文件内的该常量为引用文件的行，而不是引用它的文件行。
PHP_VERSION
这个内建常量是 PHP 程序的版本，如 '3.0.8-dev'。
PHP_OS
这个内建常量指执行 PHP 解析器的操作系统名称，如 'Linux'。
TRUE
这个常量就是真值 (true)。
FALSE
这个常量就是伪值 (false)。
E_ERROR
这个常量指到最近的错误处。
E_WARNING
这个常量指到最近的警告处。
E_PARSE
本常式为解析语法有潜在问题处。
E_NOTICE
这个常式为发生不寻常但不一定是错误处。例如存取一个不存在的变量。
这些 E_ 开头形式的常量，可以参考 error_reporting() 函数，有更多的相关说明。
当然在程序写作时，以上的默认常量是不够用。define() 的功能可以让我们自行定义所需要的常量。见下例
<?php
define("COPYRIGHT", "Copyright © 2000, netleader.126.com");
echo COPYRIGHT;
?>】
【变量类型★
PHP 的变量类型不多，有以下五种：
string
integer
double
array
object
string 即为字符串变量，无论是单一字符或数千字的字符串都是使用这个变量类型。值得注意的是要指定字符串给字符串变量，要在头尾加上双引号 (例如: "这是字符串")。在要让字符串换行时，可使用溢出字符，也就是反斜线加上指定的符号，若是 \x 加上二位数字，如 \xFE 即表十六进位字符，详见下表：
符号 意义
\" 双引号
\\ 反斜线
\n 换行
\r 送出 CR
\t 跳位 (TAB)
integer 为整数型别。在 32 位的操作系统中，它的有效范围是 -2,147,483,648 到 2,147,483,647。要使用 16 进位整数可以在面加 0x。
double 为浮点数型别。在 32 位的操作系统中，它的有效范围是 1.7E-308 到 1.7E 308。
array 为数组变量，可以是二维、三维或者多维数组，其中的元素也很自由，可以是 string、integer 或者 double，甚至是 array。
object 为类变量，目前在 PHP 中的类不多，若论及类，Microsoft 的 ASP 类仍然较 PHP 的默认类多，相信这有赖大家的努力。不过话又说回来，Web CGI 程序要求的是效率，以完全面向对象的方式，恐怕用户在浏览时也会因为程序执行速度慢而很不耐烦吧。
要使用变量，只要在英文字符串前面加个美元号 $ 即可，目前变量名称仍不能使用中文。至于变量的大小写是不一样的，对开发 PHP 程序的 TEAM 来说，最好使用相同的变量使用风格，以免届时因为变量大小的问题，花许多无谓的时间去找寻问题点，那就麻烦了。
以下为变量的使用范例：
$mystring = "我是字符串";
$WilsonPeng = "真是认真的作者";
$NewLine = "换行了\n";
$int1 = 38;
$int2 = 49;
$hexint = 0x10;
$float1 = 1.732;
$float2 = 1.4E 2;
$MyArray1 = array("子", "丑", "寅", "卯");
$MyArray2 = array(
"地支" => array("子", "丑", "寅", "卯"),
"生肖" => array("鼠", "牛", "虎", "兔"),
"数字" => array(1, 2, 3, 4)
);
类的使用上就比较麻烦了，要先定义类别，甚至必须先要方法，才能使用类，如下例：
class foo {
function do_foo () {
echo "Doing foo.";
}
}
$bar = new foo;
$bar -> do_foo ();
更多有关类的讨论，参考 类
此外，还有布尔值 (boolean)，通常 1 即为 true，0 为 false。
在变量之间，若要转换类型，在 PHP 程序中是很自由的，直接就拿来用了，不必经过特殊的转换函数。当然，浮点数转成整数就有点牵强了，不过可以将浮点数转成字符串，也是很好处理。】
【变量的使用 ★
就像大部份的结构化程序，有所谓的全局变量与局部变量，PHP 在这方面也是有相同的处理方式。
在 PHP 的程序执行时，系统会在内存中保留一块全局变量的区域。实际运用时，可以透过 $GLOBALS["变量名称"] 将需要的变量取出。在用户自定的函数或程序中，就可以用 $GLOBALS 数组取出需要的变量。当然别忘了 PHP 的变量有分大小写，搞错了大小写可是叫一百年，变量也不会出来。
$GLOBALS 数组是 PHP 程序中比较特殊的变量，不必定义，系统会自动匹配相关的变量在里面。在函数中，也不必管 $GLOBALS 数组是否已经做全局定义，就可以直接使用了。
和 $GLOBALS 变量类似的还有 $php_errormsg 字符串变量。若 PHP 的配置文件 (php.ini/php3.ini) 中的 track_errors 选项打开的话，会有全局变量 $php_errormsg 可以看到错误的信息。
在 PHP 中，全局变量的有效范围 (scope) 仅限于主要程序中，不会影响到函数中同名的变量，也就是全局变量与局部变量互不侵犯。若要变量能通透到函数中，就要用到 $GLOBALS 数组或是使用 global 定义。
例如，在自行开发的函数中，要取得目前执行 PHP 程序页面的文件名，就可以用 $GLOBALS["PHP_SELF"] 取出 $PHP_SELF 的值。
<?php
// 本程序使用 $GLOBALS 数组
function myfunc() {
echo $GLOBALS["PHP_SELF"];
}
myfunc();
?>
下面是错误的示范，请勿模仿，上面的才是正确的示范。
<?php
// 这是错误的示范
function errfunc() {
echo $PHP_SELF;
}
errfunc();
?>
但是这个错误的示范要是改成下例就没问题了
<?php
// 本程序使用全局定义
function myfunc() {
global $PHP_SELF;
echo $PHP_SELF;
}
myfunc();
?>
在变量前面加上 global 的名称，就是定义该变量为全局变量。用这种方式，就不需使用 $GLOBALS 数组，也能让变量进入自行开发的函数中。
接下来先看静态变量的例子
<?php
// 静态变量的例子
function myfunc() {
static $mystr;
$mystr.="哈";
echo $mystr."<br>\n";
}
myfunc(); // 哈
myfunc(); // 哈哈
myfunc(); // 哈哈哈
?>
函数在执行时所产生的变量，在函数结束时就消失了，有时因为程序的需要，函数在循环中，当不希望变量在每次执行完函数就消失的话，静态变量 (static variable) 就派上用场了。上例中，使用 $mystr 变量之前，先在变量前面加上 static，即表示变量 $mystr 是静态变量，当每次执行 myfunc() 函数时，$mystr 的值会一直增加，每执行一次就多一个哈字。若将 static 的静态变量定义拿掉，就没办法累加哈字了。
<?php
// 不是静态变量的例子 (错误的)
function myfunc() {
$mystr.="哈";
echo $mystr."<br>\n";
}
myfunc(); // 哈
myfunc(); // 哈
myfunc(); // 哈
?>
再看一个比较实际的例子，它是处理表格的颜色，让隔行的颜色不同。
<?php
function TdBackColor() {
static $ColorStr;
if ($ColorStr=="808080") {
$ColorStr="c0c0c0";
} else {
$ColorStr="808080";
}
return($ColorStr);
}
echo "<table border=1>\n";
for ($i=0; $i<10; $i ) {
$ColorStr=TdBackColor();
echo "<tr><td bgcolor=".$ColorStr.">这是第".$i."行</td></tr>\n";
}
echo "</table>";
?>
PHP 的变量使用技巧上，最令人觉得不可思议的则是变量的变量 (variable variable)。这是充分利用 PHP 特性玩出的特殊技巧
<?php
$a = "Hello";
$$a = "world";
echo "$a, $hello"; // Hello, world
echo "$a, {$a}"; // 也是 Hello, world
?>
mdean@kcnet.com 举出一个更绝的例子 (24-Apr-1999)，他称为变量的函数 (variable function)
<?php
function myCallbackFunction()
{
print("Hello from callback");
}
function myFunction($callback)
{
$callback();
}
// call to myFunction passing callback
// function as parameter
myFunction("myCallbackFunction");
?>
至于用户在 FORM 中输入的资料，要怎么处理呢？要是在 PHP 的配置文件中，track_vars 设为 On 时，直接使用变量名字就好了。如下例，next.php 在执行时，系统会自动产生两个变量 $username 及 $sex，直接使用就好了，比起传统的 CGI 要自己解析，PHP 实在是太神奇了。
<form action=next.php method=post>
姓名: <input type=text name="username"><br>
性别: <input type=text name="sex"><br>
<input type=submit>
</form>
由于 PHP 许多语法都是 C 语言的翻版，故 PHP 在使用变量时，随时都可以使用新的变量，只要在使用前将变量初始化就好了，不必像 Pascal 语言那样严谨，所有要使用的变量都要事先定义。这当然有好处与坏处：好处是使用方便、自由；坏处就是常常因这些自由而付出相当大的代价调试。在程序码短的 PHP 程序当然不成问题，当程序在数百数千行，甚至 include 或 require 好几层之后，问题就浮现出来了。无论如何，保持良好的写作习惯才是避免浪费青春的方法。】
【运算符号★
运算符号可以用来处理数字、字符串及其它需要比较运算的条件。PHP 的运算符号和 C 语言的运算符号与很类似，对于有经验的程序设计人员，应可以很顺利的掌握 PHP 的运算符号。
不同的运算符号，其实还是有优先顺序，就像小时候在学数学时，老师会教：先乘除、后加减。在 PHP 的运算优先顺序可以参考下面的表格，在混合式的情形下，愈往下表示优先权愈高。至于符号代表的意义，散见于以下的章节中。
运算符号 结合规则
, 左至右
or 左至右
xor 左至右
and 左至右
.= &= |= /= i ^= = = -= *= 左至右
? : 左至右
|| 左至右
&& 左至右
| 左至右
^ 左至右
& 左至右
== != 不限
< <= >= > 不限
<< >> 左至右
- . 左至右
* / .E5至右
! ~ -- @ 右至左
[] 右至左
就像先哲说的：物有本末、事有终始，知所先后，则近道矣，在运算时只要照着运算优先顺序写出来的程序，应该不会发生结果和预期不同的情形。在写作时多注意细节，可以减少调试的痛苦！】
【算术运算 ★
算术运算 (arithmetic operators) 符号，就是用来处理四则运算的符号，这是最简单，也最常用的符号，尤其是数字的处理，几乎都会使用到算术运算符号。
符号 意义
加法运算
- 减法运算
* 乘法运算
/ 除法运算
.E5余数
累加
-- 递减
以下为简单的算术运算范例
<?php
$a = 8;
$b = 2;
$c = 3;
echo $a $b."<br>\n";
echo $a-$b."<br>\n";
echo $a*$b."<br>\n";
echo $a/$b."<br>\n";
echo $a."<br>\n";
$a ;
echo $a."<br>\n";
$c--;
echo $c;
?>】
【字符串运算 ★
字符串运算 (string operator) 的运算符号只有一个，就是英文的句号 .。它可以将字符串连接起来，变成合并的新字符串。
以下是字符串运算的例子
<?php
$a = "PHP 4";
$b = "功能强大";
echo $a.": ".$b;
?>】
【赋值运算★
赋值运算 (assignment operator) 有时会让人搞得一头雾水，不过它可以让程序更精简，增加程序的执行效率。
符号 意义
= 将右边的值连到左边
= 将右边的值加到左边
-= 将右边的值减到左边
*= 将左边的值乘以右边
/= 将左边的值除以右边
b将左边的值对右边取余数
.= 将右边的字符串加到左边
<?php
$a = 5;
$a = 2; // 即 $a = $a 2;
echo $a."<br>\n";
$b = "哇";
$b .= "哈"; // $b = "哇哈";
$b .= "哈"; // $b = "哇哈哈";
echo "$b<br>\n";
?>】
【位运算 ★
PHP 的位运算子 (bitwise operators) 共有六个，提供数字做一些快速而低阶的运算。要了解更多有关位运算的信息，可以参考离散数学方面的书籍。
符号 意义
& 且 (And)
| 或 (Or)
^ 异或 (Xor)
<< 向左移位
>> 向右移位
~ 取 1 的补数】
【逻辑运算★
逻辑运算 (logical operators) 通常用来测试真假值。最常见到的逻辑运算就是循环的处理，用来判断是否该离开循环或继续执行循环内的指令。
符号 意义
< 小于
> 大于
<= 小于或等于
>= 大于或等于
== 等于
!= 不等于
&& 而且 (And)
and 而且 (And)
|| 或者 (Or)
or 或者 (Or)
xor 异或 (Xor)
! 不 (Not)
<?
$a = 5;
if ($a != 5) {
echo "$a 不是 5";
} else {
echo "$a 是 5";
}
?>】
【其它运算符号 ★
除了上述的运算符号之外，还有一些运算符号难以归类。
符号 意义
$ 变量
& 变量的地址 (加在变量前)
@ 不显示错误信息 (加在函数前)
-> 类的方法或者属性
=> 数组的元素值
? : 三元运算子
其中比较特殊的是三元运算子 ? :，以下例来解释
(expr1) ? (expr2) : (expr3);
若 expr1 的运算结果为 true，则执行 expr2；否则执行 expr3。实际上它有点类以 if...else 循环，但可以让程序较精简有效率。】
【流程控制 ★
由于 PHP 的大部份语法都是继承了 C 语言的语法，因此，在流程控制方面，也是有着和 C 语言极类似的循环。PHP 的循环不像 ASP 般可以使用 goto 的 BASIC 语法，PHP 是结构化的程序语言，流程的设计上有一定的规定，而不能用 BASIC 的概念来乱跳到别的部分中。
PHP 的语法没有像 C 语言的 main(){} 部分，其实整个 PHP 主页面 (就是浏览器输入的 URL) 就是 main(){} 部分，这点和其它的解析程序，如 Prel、Python、Shell Script 倒是很像。
在流程的部分分隔符号上，都是使用 { 当作部分的开头，用 } 当作结尾，和 C 语言相同。不过 C 可以定义 begin 当开头、end 当结尾 (像 Pascal)，而 PHP 中不能做这种特殊的定义。
而 PHP 语法中在每条指令结束时都要加上分号 ;，但是在部分结尾符号 } 后面不用加上分号结束。】
【if..else 循环 ★
if..else 循环有三种结构
第一种是只有用到 if 条件，当作单纯的判断。解释成 "若发生了某事则怎样处理"。语法如下：
if (expr) {
statement
}
其中的 expr 为判断的条件，通常都是用逻辑运算符号 (logical operators) 当判断的条件。而 statement 为符合条件的执行部分程序，若程序只有一行，可以省略大括号 {}。
范例：本例省略大括号。
<?php
if (date("D") == "Sat") echo "周末了，狂欢去";
?>
范例：本例的执行部分有三行，不可省略大括号。
<?php
if (file_exists("/usr/local/lib/php3.ini")) {
echo "以下是 PHP3 的配置文件<p><pre>\n";
readfile("/usr/local/lib/php3.ini");
echo "</pre>\n";
}
?>
第两种是除了 if 之外，加上了 else 的条件，可解释成 "若发生了某事则怎样处理，否则该如何解决"。语法如下
if (expr) {
statement1
} else {
statement2
}
范例：上面的例子来修改成更完整的处理。其中的 else 由于只有一行执行的指令，因此不用加上大括号。
<?php
$f="/usr/local/lib/php3.ini";
if (file_exists($f)) {
echo "以下是 PHP3 的配置文件<p><pre>\n";
readfile($f);
echo "</pre>\n";
} else echo "很抱歉，找不到 $f";
?>
第三种就是递归的 if..else 循环，通常用在多种决策判断时。它将数个 if..else 拿来合并运用处理。
直接看下面的例子
<?php
if ($a > $b) {
echo "a 比 b 大";
} elseif ($a == $b) {
echo "a 等于 b";
} else {
echo "a 比 b 小";
}
?>
上例只用二层的 if..else 循环，用来比较 a 和 b 两个变量。实际要使用这种递归 if..else 循环时，请小心使用，因为太多层的循环容易使设计的逻辑出问题，或者少打了大括号等，都会造成程序出现莫名其妙的问题。】
【do..while 循环★
do..while 是重复叙述的循环，可以分成两种模式。
最单纯的就是只有 while 的循环。用来在指定的条件内，不断地重覆指定的步骤。语法如下
while (expr) {
statement
}
其中的 expr 为判断的条件，通常都是用逻辑运算符号 (logical operators) 当判断的条件。而 statement 为符合条件的执行部分程序，若程序只有一行，可以省略大括号 {}。
下例很有趣，要电脑的浏览器出现十次 "以后不敢了" 的字符串，前面并加上数字，表示说了第几次不敢了。(感觉好像是 Web Server 做错事被处罚)
<?php
$i = 1;
while ($i <= 10) {
print $i ;
echo ". 以后不敢了<br>\n";
}
?>
while 可以不用大括号来包住执行部分，而使用冒号加上 endwhile。见下例
<?php
$i = 1;
while ($i <= 10):
print $i ;
echo ". 以后不敢了<br>\n";
endwhile;
?>
另外一种 do..while 循环则先执行，再判断是否要继续执行，也就是说循环至少执行一次，有点像是先斩后奏的方法。这种的循环，和单用 while 是不同的 (单用 while 是先判断再处理)。若读者熟 Pascal 语言的话，会发现 do..while 循环像是 Pascal 的 repeat..until 循环。
do..whilte 的语法如下
do {
statement
} while (expr);】
【for 循环 ★
for 循环就单纯只有一种，没有变化，它的语法如下
for (expr1; expr2; expr3) {
statement
}
其中的 expr1 为条件的初始值。expr2 为判断的条件，通常都是用逻辑运算符号 (logical operators) 当判断的条件。expr3 为执行 statement 后要执行的部份，用来改变条件，供下次的循环判断，如加一..等等。而 statement 为符合条件的执行部分程序，若程序只有一行，可以省略大括号 {}。
下例是用 for 循环写的 "以后不敢了" 的例子，可以拿来和用 while 循环的比较。
<?php
for ($i=1; $i<=10; $i ) {
echo "$i. 以后不敢了<br>\n";
}
?>
从上例中，可以很明显的看到，用 for 和用 while 的不同。实际应用上，若循环有初始值，且都要累加(或累减)，则使用 for 循环比用 while 循环好。例如将资料从数据库取出，可能用 for 循环会比用 while 循环适合?】
【switch 循环 ★
switch 循环，通常处理复合式的条件判断，每个子条件，都是 case 指令部分。在实作上若使用许多类似的 if 指令，可以将它综合成 switch 循环。
语法如下
switch (expr) {
case expr1:
statement1;
break;
case expr2:
statement2;
break;
:
:
default:
statementN;
break;
}
其中的 expr 条件，通常为变量名称。而 case 后的 exprN，通常表示变量值。冒号后则为符合该条件要执行的部分。注意要用 break 跳离循环。
<?php
switch (date("D")) {
case "Mon":
echo "今天星期一";
break;
case "Tue":
echo "今天星期二";
break;
case "Wed":
echo "今天星期三";
break;
case "Thu":
echo "今天星期四";
break;
case "Fri":
echo "今天星期五";
break;
default:
echo "今天放假";
break;
}
?>
很明显的，上述的例子用 if 循环就很麻烦了。当然在设计时，要将出现机率最大的条件放在最前面，最少出现的条件放在最后面，可以增加程序的执行效率。上例由于每天出现的机率相同，所以不用注意条件的顺序。】
【其它的流程控制 ★
除了上面的流程控制指令之外，尚有 break 及 continue 两个流程控制指令。
break 用来跳出目前执行的循环，如下例
<?php
$i = 0;
while ($i < 10) {
if ($arr[$i] == "stop") {
break;
}
$i ;
}
?>
continue 立即停止目前执行循环，并回到循环的条件判断处，见下例
<?php
while (list($key,$value) = each($arr)) {
if ($key ) { // 略过偶数
continue;
}
do_something_odd ($value);
}
?>
而 BASIC 常用的 goto 在 C 及 Borland Pascal 中或许可以使用。但在 PHP 中，由于它的 Web Server Script 特性以及结构化的组成，并不能在 PHP 中使用 goto 循环指令?】
【函数 ★
在 PHP 中，允许程序设计者将常用的流程或者变量等元件，组织成一个固定的格式。也就是说用户可以自行组合函数或者是类。
PHP 中的函数 (function) 和 C 语言一样，包括有返回值及无返回值，不像 Pascal 分成函数 (function) 和程序 (procedure) 那么复杂。
在函数的名称上，PHP 对于大小写的管制很松散。可以在定义函数时写成大写的名字，而在使用时使用小写的名字。总之，对函数而言，不用管大小写，只要注意名称没有重复就好了。
以下就是函数的使用语法
function myfunc($arg_1, $arg_2, ..., $arg_n) {
// 执行一些步骤
return $retval;
}
在使用时，在自定的函数名称前要加入 function 的保留字，表示这是定义用户自定函数。之后的 myfunc 可以是任何的英文字母开头的字符串，字符串除了开头不能是数字或是下划线，在第一个字母后可以是阿拉伯数字或者是下划线，当然其它的符号或是中文字不能当函数名。
$arg_1 到 $arg_n 为函数使用的参数，参数之间使用逗号隔开。在参数后的大括号 {}，即为整个函数的部分。函数如果返回值，使用 return 可将值返回。而参数可以事先定义初始值或默认值。有定义默认值参数在使用函数时可以省略，但一定要放在没有配置默认值参数的后面，否则 PHP 在解析函数时，会出现错误。
另外就是参数的类型，只要参数是 PHP 支持的变量类型都可以使用，无论是数组、字符串、或是整数....等等。返回值也是一样。
下面即为使用默认值及不用默认值例子
<?php
function myfunc1($arg_1, $arg_2, $arg_3="我是默认字符串") {
echo $arg_1 $arg_2;
echo $arg_3."<p>\n";
}
myfunc(3, 4); // 参数 $arg_3 省略。
myfunc(6, 6, "不用默认值") // 输入参数 $arg_3。
?>
参数的值，通常使用传值方式输入，有时在值得的需求时，可以使用传址的方式，传入参数的指针。方法就是在参数的前面加上 & 符号即可。如下例
<?php
function myfunc2(&$argstr) {
$argstr=ereg_replace("/", "-", $argstr);
}
$today="2000/01/01";
myfunc2($today);
echo $today; // 2000-01-01;
?>】
【类 ★
用户定义的类，也是学好 PHP 所必备的条件之一。而 PHP 的类，和其它的面向对象语言比较起来，还算蛮单纯的。PHP 只有类别 (class)、方法 (method)、属性、以及单一继承 (extensions) 等。对不习惯使用 C 、Java、Delphi 等面向对象语言来开发程序的用户，不妨先阅读一下有关面向对象概念的书，相信可以带来许多的收获。
下面的范例是手推车类。可以看到，使用 class 表示它是一个类类别。在类别中的 function，例如 add_item 则表示该类的一个方法。方法可以封装类的实际处理情形，让该类自己能依封装好的方法来执行一些步骤。
程序中的 $this 类变量也和 $GLOBALS 及 $php_errormsg 两个变量一样，在 PHP 中属于特殊的变量。$this 变量只用在类类别中，表示类的本身。
<?php
// 程序名: cart.inc
class Cart {
var $items; // 手推车类
// 本方法加入 $num 件物品到手推车中 (加到 $artnr 变量)
function add_item ($artnr, $num) {
$this->items[$artnr] = $num;
}
// 本方法从手推车减少 $num 件物品 (从 $artnr 变量减掉)
function remove_item ($artnr, $num) {
if ($this->items[$artnr] > $num) {
$this->items[$artnr] -= $num;
return true;
} else {
return false;
}
}
}
?>
要使用手推车可以用类似下例的方式。可以先将每个类存成 Include 文件，再将它 require 或 include 进来。在定义变量 $cart 时，要使用 new 的保留字，表示 $cart 使用 Cart 类。使用 -> 符号，表示执行类的方法。
<?php
require("cart.inc");
$cart = new Cart;
$cart->add_item("10", 1);
?>
之后再设计有记名的手推车。记名手推车从手推车遗传下来，因此手推车拥有的方法及属性，记名手推车也有，而记名手推车比手推车增加了名字的方法 (或许该称属性较恰当)。
从下例中可以看到，子类 Named_Cart 使用 extends 来继承其父类 Cart。虽然 Named_Cart 类中没有增加物品及减少物品的方法，不过由于遗传的特性，父类有的东西它都有。
<?php
// 程序名: named_cart.inc
require("cart.inc");
class Named_Cart extends Cart {
var $owner;
function set_owner ($name) {
$this->owner = $name;
}
}
?>
要使用记名手推车类，请看下面的范例。当然这不算太好的设计，每个子类都一直 require 它的父类，会造成服务器在 I/O 上面的负担。在实作时，可以将整个系列的类在同一个程序文件中，从最早的袓先类到最后的子孙类，也方便日后修正。
<?php
require("named_cart.inc");
$ncart = new Named_Cart; // 建立类变量
$ncart->set_owner ("CyberRidder"); // 配置类的记名属性
echo $ncart->owner; // 显示类的记名属性
$ncart->add_item ("10", 1); // 从父类遗传的方法也可使用
?>
因此，在 PHP 中使用了 extends 保留字，加上良好的系统分析与完整的 CRC 卡片 (详见面向对象相关书籍) 设计之后，PHP 可变成拥有强大类能力的 CGI 语言。
PHP 由于是脚本语言 (Script)，因此程序源代码可见，在软件工程中的元件黑箱并不会在目前的 PHP 版本中出现，也就是说，全部的类其实没有隐藏起它的内容。对于软件业者而言，没有办法保护所谓的软件 IC，站在开放团体而言，反而有源代码是件好事，至于孰是孰非，就很难判定了，不过目前 PHP 还是 Open Source 团体的一份子，或许日后 Zend 引擎可以做到类封装的功能也不一定。】
【函数库及函数 ★
本章中的函数涵盖 PHP 3.0.11 版前的所有函数。
函数的格式如下:
函数库名称
函数名称
函数功能简述。
语法: 返回类型 函数名称(类型 参数1, 类型 参数2....);
返回值: 变量类型
函数种类: 例如: 数据库, 网络..等等
内容说明
函数说明详述内容
使用范例
函数的范例 (本栏可能省略)
参考
小节索引 函数名称, 小节索引 函数名称... (本栏可能省略)
以下为 PHP 的相关函数库
Adabas D 数据库链接函数库
apache服务器专用函数库
数组处理函数库
拼写检查函数库
BC 高精确度函数库
历法函数库
ClibPDF 函数库
日期与时间函数库
DBA 函数库
dBase 格式资料表函数库
dbm 类数据库函数库
目录管理函数库
动态链接函数库
程序执行功能函数库
FDF 函数库
filePro 数据库函数库
文件系统函数库
HTTP 相关函数库
Hyperwave 服务器函数库
图形处理函数库
IMAP 电子邮件系统函数库
PHP 选项及相关信息函数库
Informix 数据库函数库
InterBase 数据库函数库
LDAP 目录协议函数库
电子邮件函数库
数学运算函数库
mcrypt 编码函数库
mhash 哈稀函数库
杂项函数库
mSQL 数据库函数库
SQL Server 数据库函数库
MySQL 数据库函数库
Sybase 数据库函数库
网络函数库
NIS 函数库
ODBC 数据库链接函数库
Oracle 8 数据库函数库
Oracle 数据库函数库
Perl 相容语法函数库
PDF 格式文件函数库
PostgreSQL 数据库函数库
正则表达式函数库
信号与共享内存函数库
Solid 数据库链接函数库
SNMP 网管函数库
字符串处理函数库
URL 处理函数库
变量处理函数库
Vmailmgr 邮件处理函数库
WDDX 函数库
压缩文件函数库
XML 解析函数库
Session 函数库
GNU 记录函数库
FTP 文件传输函数库
MCAL 模块日历存取函数库
ps:具体讲解在1.3版本写好
】▽
■【也在努力中，，★】□》</div>
<div class="wo-entry-prev-next"><a href="/entry/404873" title="更新：更新版软件大小">«Newer</a> <a href="/entry/400805" title="更新：软件最新版本">Older»</a></div>
<form method="POST" action="https://s.wodemo.net/"><input type="hidden" name="act" value="file_talk" /><input type="hidden" name="fid" value="400807" />Comment:<br /><textarea name="content" cols="15" rows="3" class="wo-reply-textarea"></textarea><div>Name:<input type="input" name="name" value="" /></div><input type="submit" value="Submit" /></form>
<hr />
<a href="https://2763027322.wodemo.net/">Back to home</a><br />
<br />
<span class="wo-site-feed-link"><a href="https://2763027322.wodemo.net/subscribe">Subscribe</a> | </span>
<a href="https://wodemo.net/reg?return_to=https%3A%2F%2F2763027322.wodemo.net%2Fentry%2F400807">Register</a> |
<a href="https://wodemo.net/login?return_to=https%3A%2F%2F2763027322.wodemo.net%2Fentry%2F400807">Login</a>
<span class="wo-n-count-block wo-hidden">
| <a href="https://s.wodemo.net/notification">N<sup class="wo-n-count-num"></sup></a>
</span>
</div><!--content body-->
<script type="text/javascript">
WoUtil.init('https://2763027322.wodemo.net/entry/400807');
</script>
</body>
</html>
]]></plaintext></pre></listing></pre></var></tt></samp></kbd></code></u></del></strike></del></s></del></ins></sup></sub></strong></small></i></em></big></b></p></table></div>
亲自试一试
注释：图像的名称和尺寸是以属性的形式提供的。】
【3.HTML 元素★
HTML 文档是由 HTML 元素定义的。
HTML 元素
HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。
开始标签 元素内容 结束标签