html简介

HTML网页设计参考手册2

HTML入门

第

章

HTML的基本概念

HTML的发展历史

网页设计原则

Dreamweaver简介

在Dreamweaver中直接

编写HTML

网页制作技术日新月异，但都是以HTML为基础的。HTML是浏览器识别

网页的标记语言，可以说，没有它就没有丰富多彩的网页。本章首先让读者对

HTML有一个初步的认识，了解其概念、发展历史以及编写方法。

第1章HTML入门

3

1.1HTML的基本概念

1.1.1HTML简介

HTML的英文全称是HyperTextMarkupLanguage，直译为超文本标记语言。它是全球广域网上描

述网页内容和外观的标准。HTML包含了一对打开和关闭的标记，在当中包含有属性和值。标记描述

了每个在网页上的组件，例如文本段落、表格或图像等。

事实上，HTML是一种因特网上较常见的网页制作标注性语言，而并不能算做一种程序设计语言，

因为它缺少程序设计语言所应有的特征。HTML通过IE等浏览器的翻译，将网页中所要呈现的内容、

排版展现在用户眼前。

1.1.2HTML的结构概念

一个完整的HTML文件包括标题、段落、列表、表格以及各种嵌入对象，这些对象统称为HTML

元素。在HTML中使用标签来分割并描述这些元素。实际上可以说，HTML文件就是由各种HTML

元素和标签组成的。一个HTML文件的基本结构如下：

文件开始标记

文件头开始的标记

…文件头的内容

文件头结束的标记

文件主体开始的标记

…文件主体的内容

文件主体结束的标记

文件结束标记

从上面的代码结构可以看出，在HTML文件中，所有的标记都是相对应的，开头标记为<>，结束

标记为，在这两个标记中间添加内容。

有了标记作为文件的主干后，HTML文件中便可添加属性、数值、嵌套结构等各种类型的内容了。

1.1.3HTML的标记

既然HTML是超文本标记语言，那么可以想象其构成主要是通过各种标记来标示和排列各对象，

通常由尖括号“<”、“>”以及其中所包容的标记元素组成。例如，与就是一对标记，

称为文件的头部标记，用来记录文档的相关信息。

在HTML中，所有的标记都是成对出现的，而结束标记总是在开始标记前增加一个“/”。标记与

标记之间还可以嵌套，也可以放置各种属性。此外在源文件中，标记是不区分大小写的，因此在HTML

源程序中，与的写法都是正确的，而且其含义是相同的。

HTML定义了3种标记用于描述页面的整体结构。页面结构标记不影响页面的显示效果，它们是

帮助HTML工具对HTML文件进行解释和过滤的。

HTML网页设计参考手册4

标记：HTML文档的第1个标记，它通知客户端该文档是HTML文档，类似地，结束标

记出现在HTML文档的尾部。

标记：出现在文档的起始部分，标明文档的头部信息，一般包括标题和主题信息，其

结束标记指明文档标题部分的结束。

标记：用来指明文档的主体区域，该部分通常包容其他字符串，例如标题、段落、列

表等。读者可以把HTML文档的主体区域简单地理解成标题以外的所有部分，其结束标记

指明主体区域的结尾。

1.2HTML的发展历史

1969年前后，托德尼尔逊提出超文本的概念，IBM公司的CharkesGoklfard等设计出了通用标

记语言——GML。到1978年，美国国家标准局一工作组对GML进行了规范，推出了命名为SGML

的通用标记语言。1980年，ISO正式确定SGML为描述各种电子文件结构及内容的国际通用标准。

1990年，TimBerners-Lee将他设计的初级浏览和编辑系统在网上合二为一，创建了一种快速小型

超文本语言来为他的想法服务。他设计了数十种乃至数百种未来使用的超文本格式，并想象智能客户

代理通过服务器在网上进行轻松谈判并翻译文件。它同Macintosh的ClarisXTND系统极为相似，不同

的是它可以在任何平台和浏览器上运行。

最初的HTML语言以文本格式为基础，可以用任何编辑器和文字处理器来为网络创建或转换文本，

仅有不多的几个标签。网络从此迅猛发展，人们开始在网上发布信息。很快人们就开始琢磨在网上放

置图像和图标。

1993年，NCSA推出了Mosaic，也就是第一个图文浏览器，从此Web开始迅速地发展起来。HTML

语言也不断产生新型、功能强大且生动有趣的标签形式，例如、、和等。

但是此时，出现了许多不同的HTML版本，而只有设计者和用户共有的HTML部分才可以正确显

示。因此在这段时属猪多少岁 间，W3C都在激烈争论名叫HTML3的新技术，该文件概括了所有全新的特性，但

没有任何技术支持。出于这种混乱局面的考虑，在1996年，W3C的HTMLWorkingGroup组织编写

了新的规范，从此HTML3.2开始发展，它更接近于现实的目标，即提供给内容商和浏览器发展商在

研究工作中一个公允的参考标准。

到现在为止，HTML已经发展到了比较成熟的HTML4版本，在这个版本下的语言中，规范更加

统一，浏览器之间的兼容性也更加完善。

1.3网页设计原则

在设计网页时，一般要遵循以下原则：

结构性：在设计网页时，须注意网页的标记结构、脚本语言结构、使用条列的方式、善用分

段及空白字符，让整体结构看起来整齐美观，易于纠错及理解，在发生问题时，才能很快找

到错误所在处。

第1章HTML入门

5

通用性：考虑标记语言能否适用于各种浏览器，尽量以大多数浏览器都支持的标记语言为主，

倘若有不得已的情况，一定要特别加以注明，并找出替代性的方案。遇有可以注解或说明的

标记或组件属性，应该尽可能地注明其内容。

差异性：了解各种浏览器的差异，力求输出的结果尽可能一致。

习惯性：了解用户使用窗口与浏览时的习惯，如组件摆放的顺序，习惯用鼠标、T育儿心得 ab键、Esc

键及Enter键等操作习惯，或因网页下载时间太长，无法让用户耐心等候等因素，都是设计网

页时必须考虑的因素。

适用性：有些组件会因用户的窗口环境或安装的程序而异，可能在作者的计算机里可以完整

地执行，而在其他用户的计算机上却只能下载文档，所以在设计完毕后，一定要多试几组不

同平台的计算机，以确保网页的可行性。

反复性：反复检查是否错误，是否有需要注意文字大小写之处，以及名称是否正确。

1.4Dreamweaver简介

使用Dreamweaver，设计师可以随心所欲地编写代码、设计网站网页以及进行高级开发。无论是

喜欢手写HTML代码还是习惯于可视化环境，Dreamweaver都能提供方便快捷、功能强大的工具，使

用Dreamweaver将是一种全新的体验。在易用、创新、规范等优点的基础上，Dreamweaver还拥有更

先进的网页布局和设计环境，以及更为强大的代码编辑功能等卓越特性。

DreamweaverMX2004的操作界面主要由以下几个部分组成：标题栏、菜单栏、插入栏、文档工

具栏、文档窗口、属性面板以及多个浮动面板，如图1-1所示。

图1-1DreamweaverMX2004的界面布局

1.4.1标题栏

标题栏主要包括Dreamweaver标记、应用程序的名称、当前正在编辑文档的标题和名称等信息，

还包括最小化按钮、最大化按钮以及关闭按上官女 钮。

单击Dreamweaver标记

可以打开系统菜单。在Dreamweaver标记后面显示程序名称，之后的中

HTML网页设计参考手册6

括号“[]”内是当前打开的文档的标题，小括号“（）”内是该文件的名称。每次新建一个文档，

Dreamweaver都会自动将文档标题命名为“无标题文档”，文件名定义为Untitled-x。其中，文档的标

题和文档的文件名称是不同的概念。文件的标题通常在文档中的标记中，是在用浏览器

打开文档时显示在浏览器窗口的标题栏上的名称，而文件的名称则是文档存储在磁盘上的文件名。

1.4.2菜单栏

菜单栏位于标题栏的下方，它包括文件、编辑、查看、插入、修改、文本、命令、站点、窗口和

帮助10个菜单项，如图1-2所示。

图1-2菜单栏

下面简单介绍一下Dreamweaver中的各个菜单项。

“文件”菜单：包含文件操作的标准菜单项，例如新建、打开、保存等。“文件”菜单还包

含各种其他命令，用于查看当前文档或对当前文档执行操作，例如“在浏览器中预览”和“打

印代码”。

“编辑”菜单：中元节的 包含文件编辑的标准菜单项，例如剪切、复制和粘贴等。“编辑”菜单还包

括选择和搜索命令，即“选择父标签”与“查找和替换”，并且提供对键盘快捷键编辑器、

标签库编辑器和参数选择编辑器的访问。

“查看”菜单：用于选择文档的不同视图（设计视图和代码视图），并且可以用于显示或隐

藏不同类型的页面元素和Dreamweaver工具。

“插入”菜单：提供插入面板的各项，用于将各种对象插入文档。

“修改”菜单：用于更改选定页面元素或项的属性。使用此菜单，可以编辑标签属性、更改

表格和表格元素，并且为库和模板执行不同的操作。

“文本”菜单：用于设置文本的各种格式。

“命令”菜单：提供对各种命令的访问，包括根据格式参数选择设置代码格式的命令、创建

相册的命令，以及使用MacromediaFireworks优化图像的命令。

“站点”菜单：包含站点操作菜单项，这些菜单项可用于创建、打开和编辑站点，以及管理

当中国古典美女 前站点中的文件。

“窗口”菜单：提供对Dreamweaver中所有面板、检查器和窗口的访问。

“帮助”菜单：提供对Dreamweaver帮助文档的访问，包括用于使用Dreamweaver以及创建对

Dreamweaver的扩展的帮助系统，并且包括各种语言的参考材料。

1.4.3插入栏

对于一些经常使用的操作，从菜单项中选择不是很方便。插入栏是Dreamweaver提供的一些菜单

命令的快捷方法，其按钮一般都和菜单中的命令相对应，运用插入栏可以更方便快捷。插入栏集成了

多种网页元素，包括图像、文字等，如图1-3所示。

第1章HTML入门

7

图1-3插入栏

单击插入栏左边的向下箭头，可以选择不同的工具组，包括布局、表单、文本等，如图1-4所示。

如果选择“显示为制表符”命令，则以传统的方式显示插入栏，如图1-5所示。

图1-4工具组菜单图1-5传统方式的插入栏

“收藏夹”是用户自定义的组，在这里用户可以创建自己常用的按钮。

1.4.4文档工具栏

“文档”工具栏包含按钮和弹出式菜单，它们提供各种“文档”窗口视图（如“设计”视图和“代

码”视图）、各种查看选项和一些常用操作（如浏览器中预览），如图1-6所示。

图1-6文档工具栏

要显示文档工具栏，可以选择“查看”|“工具栏”|“文档”命令。文档工具栏中各个图标按钮的

功能分别如下：

（显示代码视图）：显示代码窗口。

（显示代码和设计视图）：显示代码和设计窗口。

（显示设计视图）：显示设计窗口。

（活动数据视图）：用来查看实时数据视图。

（标题）：用来设置或修改文档的标题。

（文件管理）：单击该按钮，通过这里来实现消除只读属性、获取、取出、上传、存回、

撤销取出、设计注意以及站点定位等功能。

（在浏览器中预览/调试）：单击该按钮在定义好的浏览器中预览或调试，或是编辑浏览

器列表。

（刷新）：单击该按钮，可以刷新设计显示中通过代码更改的部分。

（参考）：单击该按钮来启动代码属性设置面板。

（代码导航）：单击该按钮来移动文档里定义的JavaScript函数，设置或删除代码里的

断点。

（视图选项）（代码视图模式）：单击代码视图模式下的选项菜单按钮，可以选择自动换

行、行数、高亮显示无效HTML、语法颜色、自动缩进等选项，以怎样做狮子头 及在顶端查看设计视图。

HTML网页设计参考手册8

（视图选项）（设计视图模式）：单击设计视图模式下的选项菜单按钮，可以选择隐藏所

有的可视化帮助或锁定可视化帮助，如表格边框、层边框、框架边框、图像地图、不可见元

素、表头、标尺、网格以及轮廓图像。

1.4.5属性面板

“属性”面板主要用于显示在文档窗口中所选中元素的属性，允许用户在属性面板中对元素属性

直接进行修改。根据选中元素的不同，属性面板上的内容也不同。图1-7、图1-8分别为文本和图像的

属性面板。

图1-7文本属性面板

图1-8图像属性面板

在属性面板的右下角，通常都有一个指向上方的三角形图标。单击该三角形图标可以折叠属性面

板。当属性面板被折叠时，单击指向下方的三角形图标又可以重新展开属性面板，显示更多的属性设

置内容。

单击属性面板右上角的

图标，则可以打开属性面板菜单。在菜单中可以选择属性面板的显示

模式。

1.4.6其他面板

在Dreamweaver中提供了一系列面板，在窗口的右侧以面板组的形式显示出来，如图1-9所示。

它是一个工具集合的控制框架，可以将各种窗口、面板放置在其中，组合成为选项卡的形式，以节

省屏幕空间。在必要时还可以将这些红参怎么吃 浮动窗口、面板拖离，成为独立的可停靠浮动面板，如图1-10

所示。

如果希望将某个面板同其他面板组合成多个选项卡的形式，可以单击面板右上角的

图标，从打

开的菜单中选择“将XX组合在”子菜单中一个面板进行组合，如图1-11所示。

第1章HTML入门

9

图1-9面板组图1-10单独的浮动面板图1-11以选项卡形式组合面板

1.5在Dreamweaver中直接编写HTML

在Dreamweaver中可以直接书写HTML的代码。下面通过一个HTML小实例进行说明。

1.5.1编写HTML代码

（1）启动DreamweaverMX2004程序。如果是第一次启动该程序，系统会弹出“工作区设置”对

话框，让用户选择工作界面的风格，如图1-12所示。如果以后改变了主意，可以在“首选参数”对话

框中设置成不同的工作区风格。

（2）选中右侧的“代码编写者”单选按钮，单击“确定”按钮以代码视图的形式打开一个新的

HTML文件，如图1-13所示。

图1-12“工作区设置”对话框图1-13Dreamweaver的代码视图

（3）在代学习英语作文 码中标签之间的内容就是新建HTML文件的标题，也就是将要在浏览器

的标题栏中显示的页面标题。这里将其更改为“网页文件的标题”。

（4）在与标签之间添加主体内容的代码，如下：

欢迎学习HTML语言！

我们愿做您最忠实的良师益友！

让我们伴您一起走入HTML的世界吧！！

HTML网页设计参平安夜是哪天 考手册10

这样一个最基本的HTML文件就编写完成了。

1.5.2保存并查看HTML文件

（1）选择“文件”|“保存”命令，打开如图1-14所示的“另存为”对话框。

（2）在“保存在”下拉列表框中选择存盘的位置，在“文件名”文本框中输入文件的名称“实例

1”，设置文件的保存类型为“HTML文档”，单击“保存”按钮完成文件的保存。

（3）双击保存的文件，可以在浏览器中看到文件的效果，如图1-15所示。

图1-14“另存为”对话框图1-15实例1的页面效果