1、HTML基础,1.1 什么是HTML1.2 创建 Web 页 1.3 发布 Web 页,1.1 什么是HTML1.1.1 Web 页的基本概念 1.1.1.1 Internet 与 WWW 1.1.1.2 WWW 与浏览器当我们在网上冲浪时，基本工作过程如图 1-1 所示。,图 1-1 上网冲浪的基本工作原理,1.1.1.3 网站与主页1.1.2 HTML 的工作原理如果在浏览器中任意打开一个网页，然后在窗口中空白位置单击鼠标右键，选择“查看源文件”命令（或者选择“查看”菜单中的“源文件”命令），则系统会启动“记事本”，其中包含一些文本信息，如图 1-2 所示。,图 1-2 网页的源文件,这些
2、文本其实就是网页的本质 HTML 源代码。HTML（HyperText Markup Language，超文本标记语言）是表示网页的一种规范（或者说是一种标准），它通过标记符定义了网页内容的显示。例如，用 标记符可以在网页上定义一个表格。说明：超文本是相对普通文本而言的，与普通文本按顺序定位不同，超文本最典型的特点就是文本中包含指向其他位置的链接，通过这些链接使文档组织成了网状结构，如图 1-3 所示（这实际上也是 WWW 信息组织的基本原理）。例如，我们可以把常规意义上的书本理解为普通文本，而把由超链接组织起来的电子文档理解为超文本。,图 1-3 超文本示意图,在 HTML 文档中，通过使用
3、标记符可以告诉浏览器如何显示网页，即确定内容的显示格式。浏览器按顺序读取 HTML 文件，然后根据内容周围的 HTML 标记符解释和显示各种内容。例如，如果为某段内容添加 标记符，则浏览器会以比一般文字大的粗体字显示该段内容，如图 1-4 所示。,图 1-4 浏览器解释 HTML 标记符示意,HTML 中的超文本功能，也就是超链接功能，使网页之间可以链接起来。网页与网页的链接构成了网站，而网站与网站的链接就构成了多姿多彩的 WWW。HTML 由国际组织 W3C（万维网联盟）制定和维护，HTML 3.2 是目前支持最好的标准（几乎所有浏览器都支持），但 HTML 4.0 也已逐步普及。最新的标准
4、是 HTML 4.01，它对 HTML 4.0 作了一些小的修正。对于基本的标记符，3.2 与 4.0 基本一致，在本书中不作区分，但本书中的主要内容是以 4.0 为基础的。,如果需要了解 HTML 的更详细情况，请访问 W3C 的官方网站：http:/www.w3.org（如图 1-5 所示），可以从该网站中获得最新的 HTML 规范。,图 1-5 W3C 的官方网站 http:/www.w3.org,1.2 创建 Web 页1.2.1 标记符基础 1.2.1.1 基本的 HTML 语法 1.2.1.2 标记符的属性1.2.2 Web 页的基本结构 1.2.2.1 HTML标记 1.2.2.
5、2 首部标记,1TITLE 标记符在首部标记符中，最基本、最常用的标记符是标题标记符 和 ，用于定义网页的标题。网页标题可被浏览器用作书签和收藏清单。当网页在浏览器中显示时，网页标题将在浏览器窗口的标题栏中显示。例如，以下 HTML 代码在浏览器中的显示如图 1-6 所示。,图 1-6 TITLE 标记符的效果,这里是网页标题请看浏览器的标题栏。 注意：本书的 HTML 代码中，使用黑体的内容是需要引起读者注意的部分。实际上，HTML 文件相当于文本文件，不包含任何字符格式设置。,2META 标记符,在首部标记符中另外一个比较常用的标记符是 META，它用于说明与 Web 页有关的信息。例如，
6、可以说明文件创作工具、文件作者等信息。META 标记符的常用属性包括：name、http-equiv 以及 content。其中，name 属性给出特性名，而 content 属性给出特性值，http-equiv 属性指定 HTTP 响应名称，通常用于替换 name 属性，HTTP 服务器使用该属性值为 HTTP 响应消息头收集信息。,说明：HTTP 是 HyperText Transfer Protocol（超文本传输协议）的缩写，它是 Internet 上最常用的协议之一。例如： 设置客户端行内程序的语言是 JavaScript； 设置行内样式的样式语言为 CSS。META 标记符的一个常
7、用功能是设置自动转址功能，即使浏览器自动从一个地址跳转到另一个地址，如下所示。,META示例META示例 在此实例中，完成当前文档加载 30 秒后将自动加载另一个文档（即“URL =”后指定的 HTML 文档），如图 1-7 所示。,30秒后自动跳转,图 1-7 利用 META 实现自动转址功能,说明：要实现以上效果，必须使“URL =”后指定的 HTML 文档存在。在该例子中，我们指定跳转的目标为当前目录的某个文件。在实际使用此功能时，也可以直接指定一个完整的 URL 地址（例如 http:/）。有关文件路径及 URL 地址指定的详细信息，请参见本书第 3 章。3BGSOUND 标记符,1.
8、2.2.3 正文标记符正文标记符 和 包含 Web 页的具体内容，包括文字、图形、超链接以及其他各种 HTML 对象。如果没有其他标记符修饰，正文标记符中的文字将以无格式的形式显示（如果浏览器窗口显示不下，则自动换行）。例如，以下 HTML 代码在浏览器中的显示如图 1-8 所示。,图 1-8 BODY 标记符中的正文,注意：空格、回车这些格式控制在显示时都不起作用，如要使它们起作用，应使用预格式化标记符 和 将需要采用原始格式的内容包含起来。,1.2.3 设置页面属性1.2.3.1 设置页面背景颜色在 标记符中使用 bgcolor 属性可以为网页设置背景颜色。例如，如果想为网页设置黑色背景，
9、应使用以下HTML语句：在指定背景颜色时，有 16 种标准颜色可供选择，如表 1-1 所示。,表 1-1 16 种标准颜色,注：Aqua 也称 Cyan；Fuchsia 也称 Magenta。1.2.3.2 设置页面背景图像单纯使用一种颜色作为背景显然有些单调，网页设计者也可选择特定图案作为页面的背景使用 BODY 标记符的 background 属性即可。HTML语句为： ,使用背景图案时，如果图案小于浏览器窗口的大小，则浏览器会自动象铺地板砖一样平铺背景图案。例如，以下代码显示了设置背景图案的效果，如图 1-9 所示。背景图案示例背景图案示例,图 1-9 背景图案示例,注意：如果要使以上代
10、码正确工作，必须在网页所在目录包含 background.jpg 文件。用户也可以同时设置网页的背景图案和背景色，在这种情况下，只有在浏览器不能显示图像时才显示背景色。例如，如果用户将浏览器设置为不显示图像（选择“工具”菜单中的“Internet 选项”命令，然后选择“高级”选项卡，在“多媒体”下设置），那么给网页设置的背景图案将不显示，而是显示背景颜色。1.2.3.3 设置背景图像水印效果 1.2.3.4 设置文字和超链接的颜色,1.2.4 添加注释不论是编写程序还是制作网页，为所做的工作添加注释都是一种良好的工作习惯。实际上，添加注释是任何程序开发工作必须遵循的规范之一。由于 Web 站点
11、经常需要更新，因此创建的 Web 页必须易于维护，而添加注释是增强文档可读性的重要手段。HTML 的注释由开始标记符 构成。这两个标记符之间的任何内容都将被浏览器解释为注释，而不在浏览器中显示。,例如，以下HTML代码在浏览器中的显示如图 1-10 所示。网页标题正文，正文，正文 ,图 1-10 注释不在网页中显示,注意：注释可插入在 Web 页的任何位置。,1.2.5 显示特殊字符如果用户需要在网页中显示某些特殊字符，例如： 等与 HTML 语法冲突的符号（浏览器会自动将 表示为 ，有关参考字符完整的编码请参见附录 2。注意：与HTML标记符不同，字符代码名称区分大小写。,例如，要在 Web
12、 页中显示内容“ is a popular VCD program.”，则需使用参考字符。HTML 代码如下，在浏览器中的显示如图 1-11 所示。参考字符示例 is a popular VCD program. ,图 1-11 参考字符示例,说明：对于 is a popular VCD program. 不过，如果要显示 ，则一定要使用参考字符，否则会出现显示错误。,1.2.6 创建和测试 Web 页 1.2.6.1 创建 Web 页 使用“记事本”创建 Web 页的步骤如下：（1）单击“开始”按钮，选择“程序/附件/记事本”。（2）在“记事本”的窗口中输入 HTML 代码。（3）输入代码结
13、束后，选择“文件”菜单中的“保存”或“另存为”命令，则弹出如图 1-12 所示的“另存为”对话框。,图 1-12 “另存为”对话框,（4）在“文件名”框中键入 Web 页的名称，注意文件名必须以 .htm 或 .html 为扩展名。如果需要，应在“保存在”列表框中定位到特定的目录。（5）单击“保存”按钮，即创建出了一个 Web 页。1.2.6.2 测试Web页,1.3 发布 Web 页1.3.1 创建本地站点 1.3.2申请网页空间 1.3.3用 FTP 上传网页 申请了免费网页空间之后，需要用 FTP 的方式将网页上传到服务器上，才能让别人通过 Internet 浏览自己的网站。上传时通常可
14、以使用一些 FTP 软件，下面以最常用的 CuteFTP4.0 为例简要说明上传网页的过程。,注意：对于不同版本的 CuteFTP，操作过程略有不同，但基本选项是相同的。首先应在计算机上安装 CuteFTP（如果没有该软件，可以去一些下载软件的站点进行下载，或者直接到 去下载），然后通过以下步骤上传网页：（1）启动 CuteFTP，此时系统自动打开“FTP Site Manager”（FTP 站点管理器）对话框。（2）在该对话框中，单击“New”按钮，如图 1-13 所示。,站点标签,站点地址,用户名,口令,新建站点,连接站点,图 1-13 新建 FTP 站点,（3）在“Site Setti
15、ngs for New Site”（站点设置）对话框中填写以下信息：l Label for site 此选项用于标识所建立的 FTP 站点，可以用任何自己想要的名称，例如 MyHomesite。 l FTP Host Address 此选项为 Web 服务器的 FTP 地址，通常在申请网页空间时可以获得。例如，网易免费个人主页的 FTP 地址是 。,l FTP site User Name 此选项为 Web 服务器分配给用户的用户名称，也是在申请网页空间时获得的。 l FTP site Password 此选项为对应于用户名的用户口令（密码），也是在申请网页空间时获得的。 （4）正确地填写了这
16、些选项后，单击“Connect”按钮连接站点（当然事先必须已经连接到 Internet 上），如果连接正常，那么将出现如图 1-14 所示对话框。,图 1-14 连接 FTP 站点成功时的提示对话框,（5）单击“OK”按钮，则 CuteFTP 的主窗口中显示出两栏，左边一栏是本机中的文件列表，右边一栏是 FTP 服务器上的文件列表，如图 1-15 所示。,图 1-15 连接到 FTP 站点之后的显示,（6）用与 Windows“资源管理器”同样的方式，在左边一栏中找到需要上传的文件或文件夹，将其选中（如果要同时选择多个文件或文件夹，可以在按住【Ctrl】或【Shift】键的同时用鼠标选取），在
17、右边找到需要上传到的目录，然后直接从左向右拖拽即可（所谓“拖拽”，就是指在需要上传的文件或文件夹上按住鼠标左键不放，然后移动到右边的目标位置，最后释放鼠标的过程）。,说明：除了基本的上传功能以外，使用 CuteFTP 还可以对 FTP 站点上的内容进行管理，例如，删除不需要的文件，建立文件夹，重命名文件等这些操作都与资源管理器的用法类似，请读者自行尝试。,（7）完成了上传任务后，单击“Disconnect”（ 断开连接）按钮 ，与 FTP 服务器断开连接。 （8）将文件上传到指定位置之后，通常可以立即在浏览器中查看刚装入的 Web 页，我们的站点现在已经位于 Internet 上了！以后如果需要更新，则用同样的方式上传即可，已存在的同名文件会被覆盖。,说明：由于不同 FTP 站点的要求不同，所以上传文件时应注意查看相应站点的帮助信息。例如，网易的个人主页空间要求首页用 index.html，而不是通常的 index.htm。如果读者碰上上传了网页却无法浏览的情况，请仔细查看网站上的相关信息。,
