初识HTML
2020-04-06 18:19:48 合肥网站建设制作网络公司
初识HTML
HTML 是 Hypertext Marked Language 的缩写，中文译为“超文本标记语言”，其目的在于运用标签使文件达到预期的显示效果。用 HTML 编写的超文本文档称为 HTML 文档，它能独立于各种操作系统平台（如 UNIX，Windows 等），且每个 Web 页都对应一个 HTML 文档。自 1990 年以来 HTML就一直被用作 WWW（World Wide Web） 的信息表示语言，用于描述 Homepage 的格式设计和与
WWW 上其他 Homepage 的连接信息。HTML 中的超文本功能，也就是链接功能，使网页之间可以互相链接起来，从而使人们在浏览网页时可以十分方便地从一个页跳转到另一个页面。
HTML 是在 SGML 定义下的一种描述性语言，或者说 HTML 是 SGML 的一个应用程序。虽然 HTML 和 C、BASIC、Pascal 等一样都称为语言，但是用 C、BASIC、Pascal 语言编过程序的人会发现，HTML 和它们有着本质的不同。
C 语言是编译语言，需要经过编译才能有过程性的运行，而 HTML 是一种解释语言，或者说是一种标识语言，通过各种标识来表达不同信息。也有的人认为 HTML 根本就不是一种语言， 而只是一种排版格式而已。
1、创建第一个网页
既可以使用普通的编辑工具（如，记事本、写字板、Word 2000 等），也可以使用可视化专业工具软件（如，Dreamweaver MX、Frontpage 2000 等）来创建网页（HTML 文档）。下面来学习一下如何在记事本和 Dreamweaver MX 中利用 HTML 语言来创建第一个网页。
1．用编辑工具创建第一个网页（HTML 文档）
编写 HTML 语言可以使用的编辑工具很多，最简单的就是用 Windows 自带的记事本了，下面就以记事本为例，来学习编辑第一个网页，操作步骤如下：
① 编写代码。在 Windows 操作系统中，依次点击“开始”→“程序”→“附件”→“记事本”。打开一个记事本后，在里面输入如图代码。
图 在记事本中输入 HTML 代码
这就是一个 HTML 文件最基本的结构。下面先将它保存好，然后在浏览器中浏览一下效果， 最后再来解释这些代码的含义。
② 保存文件。打开“文件”菜单，选择“另存为”。在弹出的“保存为”对话框中，先选择保存该文件的位置。本书选择Ｃ盘根目录下的“My web”文件夹，然后为该文件起个名字，如“first.htm”，最后单击“保存”按钮。如图 所示。
图 将文件保存为扩展名为.htm 的文件
③ 浏览效果。找到刚才保存的文件“ first.htm”，打开它就可以看到图所示的浏览效果。
图 HTML 文件的浏览效果
④ 源码分析。前面介绍 HTML 语言时曾经提到，HTML 源代码就是网页的本质所在，而源代码中有许多带尖括号的字符，被称之为标签。观察本例的 HTML 源代码不难发现其中就包含了许多标签，如<html>、</ html >，<title>、</title>，<body>、</body>等，那么它们到底有什么作用，又有什么含义呢？下面就一起来分析一下这些代码：
<html>和</html>标签
<html>和</html>标签是用来告诉浏览器，表示这个文件是 HTML 格式的文件，也就是网页文件，而不是 txt 文档或是 doc 等其他格式的文档。整个 HTML 文件的所有内容都应该包含在这一对<html></html>标签之间，即 HTML 文件必须以<html>开始，以</html>结束。
<head>和</head>标签
<head>和</head>标签位于 Web 页的开头，它包含一些与 Web 有关的特定信息，如网页的标题、样式定义及脚本等。<head>标签应放在<html>标签的后面，且是成对出现的。本例中的<title> 和</title>标签就是最基本的、最常用的标题标签，写在<title>和</title>标签之间的内容就是显示在浏览器标题栏上的标题文字。
<body>和</body>标签
<body>和</body>标签表示正文内容的开始。人们浏览网页时所看到的文字、图形、图像、链接、动画、视频和声音等元素就是位于该标签内的。从图 4-1-1 可以看出，在 HTML 文档中的<body>和</body>标签是放在<head>和</head>标签之后且成对出现的。
2．用专业工具软件创建第一个 HTML 文档
当前比较流行的创建 HTML 文档方法就是用功能强大的可视化设计工具软件 DreamweaverMX、Frontpage 2000，这里介绍 Dreamweaver MX 软件的使用方法，只是简单地说明创建 HTML文档的方法。
（1）新建文档
打开 Dreamweaver MX 软件，依次选择“文件”→“新建”或者直接按“Ctrl+N”键，打开“新建文档”对话框，如图所示。
图 “新建文档”对话框
然后，依次选择“基本页”、“HTML”，最后单击“创建”按钮，这样就新建了一个 HTML文档。
（2）查看代码
在 Dreamweaver MX 中查看网页的 HTML 代码有多种方式，可以选择下面任意一种：
① 将可视化编辑窗口切换成为代码编辑窗口。选择 Dreamweaver MX 中“查看”菜单中的“代码”命令，或单击 Dreamweaver MX 面板左上角 按钮，即可将可视化编辑窗口切换成 代码编辑窗口，显示当前网页的 HTML 代码，如图。
图显示代码视图
② 将可视化编辑窗口一分为二。选择Dreamweaver MX 中“查看”菜单中的“代码和设计”命令， 或单击 Dreamweaver MX 面板左上角 按钮，就可以达到将编辑窗口分割为可视化编辑窗口与代码 编辑窗口两部分的效果，在实际的网页编辑中这也是最方便实用的一种方法。如图 所示。
图 显示代码视图和设计视图
从图 中可以看到 Dreamweaver MX 已搭好基本框架，可以直接在其中编写 HTML 代码。下面先在<title></title>之间输入“我编写的第一个网页”，然后在<body></body>之间输入“这就是我的第一个网页!!我好激动啊!!”如图所示。
以后修改网页，既可以直接在可视化编辑窗口中修改，也可以在代码编辑窗口中修改 HTML
代码。
（3）保存代码
在编写代码工作到一定阶段以后，或者为了备份，或者为了测试，需要将编辑的代码保存起来。可以选择 Dreamweaver MX“文件”中的“保存”命令或者直接按“Ctrl+S”键，可弹出如图 所示的“保存”对话框。
图 保存 HTML 文档
存放路径和文件名的设置方法与上面记事本中设定的方法相同，然后单击“保存”按钮，即可将 HTML 文件保存在合适的地方。
这就是用两种不同方法编写的第一个网页，下面将深入学习 HTML 的语法知识。
![[703]服装设计展示](http://www.cywangzhan.com/uploads/allimg/2002/1-2002241124050-L.jpg)
![[704]皮革皮具类\纺](http://www.cywangzhan.com/uploads/allimg/2002/1-2002241144310-L.jpg)
