HTML 网页设计参考手册

1/1731HTML网页设计参考手册HTML入门HTML基本标记文字与段落列表超链接使用图像添加多媒体元素表格的应用添加表单框架结构2/1732第1章HTML入门HTML的基本概念HTML的发展历史网页设计原则Dreamweaver简介在Dreamweaver中直接编写HTML网页制作技术日新月异，但都是以HTML为基础的。HTML是浏览器识别网页的标记语言，可以说，没有它就没有丰富多彩的网页。本章首先让读者对HTML有一个初步的认识，了解其概念、发展历史以及编写方法。1.1HTML的基本概念1.1.1HTML简介HTML的英文全称是HyperTextMarkupLanguage，直译为超文本标记语言。它是全球广域网上描述网页内容和外观的标准。HTML包含了一对打开和关闭的标记，在当中包含有属性和值。标记描述了每个在网页上的组件，例如文本段落、表格或图像等。事实上，HTML是一种因特网上较常见的网页制作标注性语言，而并不能算做一种程序设计语言，因为它缺少程序设计语言所应有的特征。HTML通过IE等浏览器的翻译，将网页中所要呈现的内容、排版展现在用户眼前。1.1.2HTML的结构概念一个完整的HTML文件包括标题、段落、列表、表格以及各种嵌入对象，这些对象统称为HTML元素。在HTML中使用标签来分割并描述这些元素。实际上可以说，HTML文件就是由各种HTML元素和标签组成的。一个HTML文件的基本结构如下：html文件开始标记head文件头开始的标记…文件头的内容/head文件头结束的标记body文件主体开始的标记…文件主体的内容/body文件主体结束的标记/html文件结束标记从上面的代码结构可以看出，在HTML文件中，所有的标记都是相对应的，开头标记为，结束标记为/，在这两个标记中间添加内容。有了标记作为文件的主干后，HTML文件中便可添加属性、数值、嵌套结构等各种类型的内容了。3/17331.1.3HTML的标记既然HTML是超文本标记语言，那么可以想象其构成主要是通过各种标记来标示和排列各对象，通常由尖括号“”、“”以及其中所包容的标记元素组成。例如，head与/head就是一对标记，称为文件的头部标记，用来记录文档的相关信息。在HTML中，所有的标记都是成对出现的，而结束标记总是在开始标记前增加一个“/”。标记与标记之间还可以嵌套，也可以放置各种属性。此外在源文件中，标记是不区分大小写的，因此在HTML源程序中，Head与HEAD的写法都是正确的，而且其含义是相同的。HTML定义了3种标记用于描述页面的整体结构。页面结构标记不影响页面的显示效果，它们是帮助HTML工具对HTML文件进行解释和过滤的。html标记：HTML文档的第1个标记，它通知客户端该文档是HTML文档，类似地，结束标记/html出现在HTML文档的尾部。head标记：出现在文档的起始部分，标明文档的头部信息，一般包括标题和主题信息，其结束标记/head指明文档标题部分的结束。body标记：用来指明文档的主体区域，该部分通常包容其他字符串，例如标题、段落、列表等。读者可以把HTML文档的主体区域简单地理解成标题以外的所有部分，其结束标记/body指明主体区域的结尾。1.2HTML的发展历史1969年前后，托德·尼尔逊提出超文本的概念，IBM公司的CharkesGoklfard等设计出了通用标记语言——GML。到1978年，美国国家标准局一工作组对GML进行了规范，推出了命名为SGML的通用标记语言。1980年，ISO正式确定SGML为描述各种电子文件结构及内容的国际通用标准。1990年，TimBerners-Lee将他设计的初级浏览和编辑系统在网上合二为一，创建了一种快速小型超文本语言来为他的想法服务。他设计了数十种乃至数百种未来使用的超文本格式，并想象智能客户代理通过服务器在网上进行轻松谈判并翻译文件。它同Macintosh的ClarisXTND系统极为相似，不同的是它可以在任何平台和浏览器上运行。最初的HTML语言以文本格式为基础，可以用任何编辑器和文字处理器来为网络创建或转换文本，仅有不多的几个标签。网络从此迅猛发展，人们开始在网上发布信息。很快人们就开始琢磨在网上放置图像和图标。1993年，NCSA推出了Mosaic，也就是第一个图文浏览器，从此Web开始迅速地发展起来。HTML语言也不断产生新型、功能强大且生动有趣的标签形式，例如background、frame、font和blink等。但是此时，出现了许多不同的HTML版本，而只有设计者和用户共有的HTML部分才可4/1734以正确显示。因此在这段时间，W3C都在激烈争论名叫HTML3的新技术，该文件概括了所有全新的特性，但没有任何技术支持。出于这种混乱局面的考虑，在1996年，W3C的HTMLWorkingGroup组织编写了新的规范，从此HTML3.2开始发展，它更接近于现实的目标，即提供给内容商和浏览器发展商在研究工作中一个公允的参考标准。到现在为止，HTML已经发展到了比较成熟的HTML4版本，在这个版本下的语言中，规范更加统一，浏览器之间的兼容性也更加完善。1.3网页设计原则在设计网页时，一般要遵循以下原则：结构性：在设计网页时，须注意网页的标记结构、脚本语言结构、使用条列的方式、善用分段及空白字符，让整体结构看起来整齐美观，易于纠错及理解，在发生问题时，才能很快找到错误所在处。�通用性：考虑标记语言能否适用于各种浏览器，尽量以大多数浏览器都支持的标记语言为主，倘若有不得已的情况，一定要特别加以注明，并找出替代性的方案。遇有可以注解或说明的标记或组件属性，应该尽可能地注明其内容。�差异性：了解各种浏览器的差异，力求输出的结果尽可能一致。�习惯性：了解用户使用窗口与浏览时的习惯，如组件摆放的顺序，习惯用鼠标、Tab键、Esc键及Enter键等操作习惯，或因网页下载时间太长，无法让用户耐心等候等因素，都是设计网页时必须考虑的因素。�适用性：有些组件会因用户的窗口环境或安装的程序而异，可能在作者的计算机里可以完整地执行，而在其他用户的计算机上却只能下载文档，所以在设计完毕后，一定要多试几组不同平台的计算机，以确保网页的可行性。�反复性：反复检查是否错误，是否有需要注意文字大小写之处，以及名称是否正确。1.4Dreamweaver简介使用Dreamweaver，设计师可以随心所欲地编写代码、设计网站网页以及进行高级开发。无论是喜欢手写HTML代码还是习惯于可视化环境，Dreamweaver都能提供方便快捷、功能强大的工具，使用Dreamweaver将是一种全新的体验。在易用、创新、规范等优点的基础上，Dreamweaver还拥有更先进的网页布局和设计环境，以及更为强大的代码编辑功能等卓越特性。（……略）1.5在Dreamweaver中直接编写HTML（……略）5/1735第2章HTML基本标记头部标记——head标题标记——title元信息标记——meta基底网址标记——base页面的主体标记——body页面注释标记——!----本章介绍HTML的各种基本标记，这些都是一个完整的网页必不可少的。通过它们可以了解网页的基本结构及其工作原理。2.1头部标记——head在HTML语言的头元素中，一般需要包括标题、基底信息、元信息等。HTML的头元素是以head为开始标记，以/head为结束标记的。一般情况下，CSS和JavaScript都是定义在头元素中的，而定义在HTML语言头部的内容往往不会在网页上直接显示。它用于包含当前文档的相关信息，包括title、base、basefont、isindex、meta、style、link、script等。下面介绍在HTML头部标记中的几种重要标记。2.2标题标记——titleHTML页面的标题一般是用来说明页面用途的，它显示在浏览器的标题栏中。每个HTML页面都应该有标题，在HTML文档中，标题信息设置在页面的头部，也就是head与/head之间。标题标记以title开始，以/title结束。语法：title…/title说明：在标记中间的“…”就是标题的内容，它可以帮助用户更好地识别页面。页面的标题有且只有一个，它位于HTML文档的头部，即head和/head之间。下面以实例说明标题标记的用法。实例代码：htmlheadtitle文件的标题/title/headbody/body/html保存页面后在IE中打开，可以看到浏览器的标题栏中显示了刚才设置的标题“文件的标题”，效果如图2-1所示。6/17362.3元信息标记——metameta元素提供的信息是用户不可见的，它不显示在页面中，一般用来定义页面信息的名称、关键字、作者等。在HTML中，meta标记不需要设置结束标记，在一个尖括号内就是一个meta内容，而在一个HTML头页面中可以有多个meta元素。meta元素的属性有两种：name和http-equiv，其中name属性主要用于描述网页，以便于搜索引擎机器人查找、分类（目前几乎所有的搜索引擎都图2-1HTML页面的标题使用网上机器人自动查找meta值来给网页分类）。这其中最重要的是description（站点在搜索引擎上的描述）和keywords（关键词）。下面根据功能的不同分别介绍元信息标记的使用方法。2.3.1设置页面关键字设置页面关键字是为了向搜索引擎说明这一网页的关键词，从而帮助搜索引擎对该网页进行查找和分类，它可以提高被搜索到的几率，一般可设置不只1个关键字，之间用逗号隔开。但是由于很多搜索引擎在检索时会限制关键字数量，因此在设置关键字时不要过多，注意每一个关键字都要切中要害。语法：metaneme=keywordcontent=具体的关键字说明：在该语法中，name为属性名称，这里是“keyword”，也就是设置网页的关键字属性，而在content中则定义了具体的关键字的内容。下面以实例来具体说明。实例代码：htmlheadtitle学习元信息标记/titlemetaname=keywordcontent=html,元信息,关键字/headbody/body/html在实例中设定了“html”、“元信息”和“关键字”这3个词语作为该页面的关键字。2.3.2设置页面描述设置页面描述也是为了便于搜索引擎的查找，它用来描述网页的主题等，与关键字一样，设置的页面描述也不会在网页中显示出来。语法：metaname=descriptioncontent=对页面的描述语言7/1737说明：在该语法中，name为属性名称，这里设置为“description”，也就是将元信息属性设置为页面描述，在content中定义具体的描述语言。在上一实例的基础上添加页面的描述信息，实例代码如下：htmlheadtitle学习元信息标记/titlemetaname=keywordcontent=html,元信息,关键字metaname=descriptioncontent=关于HTML使用的网站/headbody/body/html在该实例中，设置了“关于HTML使用的网站”为网页的描述。2.3.3设置编辑工具现在有很多编辑软件都可以制作网页，在源代码的头页面中可以设置网页编辑工具的名称。与其他meta元素相同，编辑工具也只是在页面的源代码中可以看到，而不会显示在浏览器中。语法：metaname=generatorcontent=编辑软件的名称说明：在该语法中，name为属性名，设置为“generator”，也就是设置编辑工具，在content中定义具体的编辑器名称。在上面实例的基础上添