HTML文件的基本结构.doc_咨信网zixin.com.cn

资源描述

第 Dreamweaver+CSS入门章 1 1.1 HTML文件的基本结构 HTML的英文全称是Hyper Text Markup Language，它是网页超文本标记语言的缩写，是Internet上用于编写网页的主要语言。HTML中每个用来作为标记的符号都可以看作是一条命令，它告诉浏览器应该如何显示文件的内容。 1.1.1 HTML文件结构一个完整的HTML文件由标题、段落、表格和文本等各种嵌入的对象组成，这些对象统称为元素，HTML使用标记来分隔并描述这些元素。实际上整个HTML文件就是由元素与标记组成的。下面是一个HTML文件的基本结构。 <html>文件开始标记 <head>文件头开始的标记 ……文件头的内容 </head>文件头结束的标记 <body>文件主体开始的标记 ……文件主体的内容 </body>文件主体结束的标记 </html>文件结束标记从上面的代码可以看出，HTML代码分为3部分，其中各部分含义如下。 <html>…</html>：告诉浏览器HTML文件开始和结束的位置，其中包括<head>和<body>标记。HTML文档中所有的内容都应该在这两个标记之间，一个HTML文档总是以<html>开始，以</html>结束。 <head>…</head>：HTML文件的头部标记，在其中可以放置页面的标题以及文件信息等内容，通常将这两个标签之间的内容统称为HTML的头部。 <body>…</body>：用来指明文档的主体区域，网页所要显示的内容都放在这个标记内，其结束标记</body>指明主体区域的结束。 1.1.2 使用记事本手工编写HTML页面编写HTML文件有两种方法，一种是利用记事本编写，另一种是在可视化网页制作软件中编写，如Dreamweaver，下面分别进行讲述。 HTML是一个以文字为基础的语言，并不需要什么特殊的开发环境，可以直接在Windows自带的记事本中编写。HTML文档以.html为扩展名，将HTML源代码输入记事本并保存，可以在浏览器中打开文档以查看其效果。使用记事本手工编写HTML页面的具体操作步骤如下。（1）在Windows系统下，执行“开始”→“所有程序”→“附件”→“记事本”命令，新建一个记事本，在记事本中输入代码，如图1-1所示。（2）编写完HTML文件后，执行“文件”→“保存”命令，弹出“另存为”对话框，在对话框中选择保存的路径，在“文件名”下拉列表框中输入index.htm，文件的扩展名为.htm或.html，如图1-2所示。图1-1 输入代码图1-2 “另存为”对话框（3）单击“保存”按钮，这时该文本文件就变成了HTML文件，在浏览器中浏览效果如图1-3所示。 1.1.3 使用Dreamweaver编写HTML页面 Dreamweaver被称为“所见即所得”的网页制作工具。这使得用户在没有任何HTML语言基础的情况下，照样可以制作网页。使用Dreamweaver编写HTML页面的具体操作步骤如下。（1）启动Dreamweaver CS3，执行“文件”→“新建”命令，弹出“新建文档”对话框，在对话框中选择“空白页”→HTML→“无”选项，如图1-4所示。图1-3 浏览效果图1-4 “新建文档”对话框（2）单击“创建”按钮，新建网页文档，在“标题”文本框中输入“公司简介”，如图1-5所示。（3）执行“修改”→“页面属性”命令，弹出“页面属性”对话框，在对话框中将“左边距”、“上边距”、“下边距”和“右边距”分别设置为0，如图1-6所示。单击“确定”按钮，设置页面属性。图1-5 新建文档图1-6 “页面属性”对话框（4）将光标放在页面中，执行“插入记录”→“表格”命令，弹出“表格”对话框，在对话框中将“行数”设置为2，“列数”设置为1，“表格宽度”设置为“776像素”，如图1-7所示。（5）单击“确定”按钮，插入表格，此表格记为“表格1”，将“对齐”设置为“居中对齐”，如图1-8所示。图1-7 “表格”对话框图1-8 插入表格（6）将光标置于表格1的第2行单元格中，插入1行13列的表格，此表格记为“表格2”，如图1-9所示。（7）将光标置于表格1的右边，插入2行1列的表格，此表格记为“表格3”，将“对齐”设置为“居中对齐”，如图1-10所示。（8）将光标置于表格1的第1行单元格中，执行“插入记录”→“媒体”→Flash命令，弹出“选择文件”对话框，在对话框中选择banner.swf选项，如图1-11所示。（9）单击“确定”按钮，插入Flash，如图1-12所示。图1-9 插入表格图1-10 插入表格图1-11 “选择文件”对话框图1-12 插入Flash （10）将光标置于表格2相应的单元格中，输入相应的文本，如图1-13所示。（11）选中插入的文本，打开“属性”面板，在面板中将“大小”设置为13px，“文本颜色”设置为#FFFFFF，如图1-14所示。图1-13 插入文本图1-14 设置文本属性（12）将光标置于表格3的第2行单元格中，输入相应的文本，在“属性”面板中将“大小”设置为13px，“文本颜色”设置为#666666，如图1-15所示。图1-15 输入文本（13）将光标置于表格1的第2行单元格中，打开“属性”面板，在面板中单击“背景”文本框右边的按钮，弹出“选择图像源文件”对话框，如图1-16所示。（14）在对话框中选择相应的背景图像，单击“确定”按钮，插入背景图像，如图1-17所示。图1-16 “选择图像源文件”对话框图1-17 插入背景图像（15）将光标置于表格2相应的单元格中，执行“插入记录”→“图像”命令，弹出“选择图像源文件”对话框，插入图像images/018.gif，如图1-18所示。（16）将光标置于表格3的第1行单元格中，插入图像images/013.gif，如图1-19所示。（17）将光标置于表格3第2行单元格相应的位置，插入图像images/sds.jpg，将“对齐”设置为“右对齐”，如图1-20所示。（18）执行“文件”→“保存”命令，弹出“另存为”对话框，在对话框中选择保存的位置，在“文件名”文本框中输入index.htm，如图1-21所示。（19）单击“保存”按钮，保存文档，按F12键在浏览器中预览效果，如图1-22所示。图1-18 插入图像图1-19 插入图像图1-20 插入图像图1-21 “另存为”对话框图1-22 效果图 1.2 XHTML入门 XHTML是Extensible HyperText Markup Language的缩写。它是由国际W3C组织制定并公布发行的。XHTML是一个过渡技术，结合了部分XML的强大功能及大多数HTML的简单特性。 HTML语言中只有有限的创建要素，因此无法处理非常规的内容，同时HTML不能很好地支持不断更新的显示媒体，如手机等。而XHTML是XML的一种应用，因此所有XML的处理器都可以处理XHTML的文档，使语言具有了可扩展性。使用XHTML具有以下优点。 l XHTML提倡使用更加简洁和规范的代码，使得代码的阅读和处理更方便，同时也便于搜索引擎的检索。 l XHTML文档在旧的基于HTML的浏览器中能够表现得和在新的基于XHTML的浏览器中一样出色。 l XHTML是可扩展的语言，能够包含其他文档类型，既能够利用HTML的文档对象模块（DOM），又能利用XML的文档对象模块。所以XHTML可以支持更多的显示设备。 l 在XHTML中，推荐使用CSS样式定义页面的外观。XHTML分离了页面的结构和表现，方便利用数据和更换外观。 l XML是Web发展的趋势，具有更好的向后兼容性。使用XHTML 1.0只要遵守一些简单规则，就可以设计出既适合XML系统，又适合当前大部分HTML浏览器的页面。首先看一个最简单的XHTML页面结构，其代码如下。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>最简单的XHTML文档</title> </head> <body> 这里是正文文档 </body> </html> 这段代码，包含了一个XHTML页面必需具有的页面结构。其具体结构如下。 1．文档类型声明部分文档类型声明部分由<!DOCTYPE>元素定义，在代码的前两行，这部分在浏览器中不会显示。其对应的页面代码如下。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2．<html>元素和名字空间 <html>元素是XHTML文档中必须使用的元素，所有的文档内容（包括文档头部内容和文档主体内容）都要包含在<html>元素之中。标签<html>表示HTML代码的开始，文件的结束标签是</html>。名字空间是<html>元素的一个属性，写在<html>元素起始标签里。其在页面中的相应代码如下。 <html xmlns="http://www.w3.org/1999/xhtml"> 3．网页头部元素网页头部元素<head>也是XHTML文档中必须使用的元素。其作用是定义页面头部的信息，其中可以包含标题元素、<meta>元素等，它不会显示在浏览器内。网页头部元素对应的页面代码如下。 <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> <title>最简单的XHTML文档</title> </head> 4．页面标题元素页面标题元素<title>用来定义页面的标题。在<title>和</title>标签之间的文字内容是HTML文档的标题信息，出现在浏览器的标题栏。其对应的页面代码如下。 <title>最简单的XHTML文档</title> 5．页面主体元素页面主体元素<body>用来定义页面所要显示的内容。页面的信息主要通过页面主体来传递。<body>元素可以包含所有页面元素。在<body>和</body>标签之间的文字内容是HTML文档主要显示的信息，出现在浏览器中。其对应的页面代码如下。 <body> 这里是正文文档 </body> 定义了以上几个元素后，便构成了一个完整的XHTML页面。此时在浏览器中呈现的效果如图1-23所示。图1-23 简单的XHTML页面显示效果 1.3 网站与Web标准 Web标准，即网站标准。目前通常所说的Web标准一般指网站建设采用基于XHTML语言的网站设计语言，Web标准中典型的应用模式是CSS+DIV。实际上，Web标准并不是某一个标准，而是一系列标准的集合。 1.3.1 什么是Web标准 Web标准是由W3C和其他标准化组织制定的一套规范集合，Web标准的目的在于创建一个统一的用于Web表现层的技术标准，以便于通过不同浏览器或终端设备向最终用户展示信息内容。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的网站标准也分三方面：结构化标准语言，主要包括XHTML和XML；表现标准语言，主要包括CSS；行为标准，主要包括对象模型（如W3C DOM）、ECMAScript等。 1．结构结构对网页用到的信息进行分类与整理。在结构中用到的技术主要包括HTML、XML和XHTML。 2．表现表现用于对信息进行版式、颜色、大小等形式控制。在表现中用到的技术主要是CSS层叠样式表。 3．行为行为是指文档内部的模型定义及交互行为的编写，用于编写交互式的文档。在行为中用到的技术主要包括DOM和ECMAScript。 l DOM(Document Object Model)文档对象模型 DOM是浏览器与内容结构之间的沟通接口，使用户可以访问页面上的标准组件。 l ECMAScript脚本语言 ECMAScript是标准脚本语言，用于实现具体界面对象的交互操作。 1.3.2 为什么要建立Web标准大部分人都有深刻体验，每当主流浏览器版本升级时，刚建立的网站就可能变得过时，则需要升级或者重新设计网站。在网页制作时采用Web标准技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变网页的外观和格式。简单说，网站标准的目的就是： l 提供最多利益给最多的网站用户； l 确保任何网站文档都能够长期有效； l 简化代码、降低建设成本； l 让网站更容易使用，能适应更多不同用户和更多网络设备； l 当浏览器版本更新，或者出现新的网络交互设备时，确保所有应用能够继续正确执行。对于网站设计和开发人员来说，遵循网站标准就是使用标准；对于网站用户来说，网站标准就是最佳体验。对网站浏览者的好处： l 文件下载与页面显示速度更快； l 内容能被更多的用户所访问（包括失明、视弱、色盲等残障人士）； l 内容能被更广泛的设备所访问（包括屏幕阅读机、手持设备、搜索机器人、打印机、电冰箱等）； l 用户能够通过样式选择定制自己的表现界面； l 所有页面都能提供适于打印的版本。对网站设计者的好处： l 更少的代码和组件，容易维护； l 带宽要求降低，代码更简洁，成本降低； l 更容易被搜寻引擎搜索到； l 改版方便，不需要变动页面内容； l 提供打印版本而不需要复制内容； l 提高网站易用性。在美国，有严格的法律条款来约束政府网站必须达到一定的易用性，其他国家也有类似的要求。 1.3.3 怎样改善现有网站大部分的设计师依旧采用传统的表格布局、表现与结构混杂在一起的方式来建立网站。学习使用XHTML+CSS的方法需要一个过程，使现有网站符合网站标准也不可能一步到位。最好的方法是循序渐进，分阶段来逐步达到完全符合网站标准的目标。 1．初级改善 l 为页面添加正确的DOCTYPE DOCTYPE是document type的简写。用来说明XHTML或者HTML是什么版本。浏览器根据DOCTYPE定义的DTD（文档类型定义）来解释页面代码。 l 设定一个名字空间直接在DOCTYPE声明后面添加如下代码： <html XMLns="http://www.w3.org/1999/xhtml" > l 声明编码语言为了被浏览器正确解释和通过标识校验，所有的XHTML文档都必须声明它们所使用的编码语言，代码如下： <meta http-equiv="Content-Type" content="text/html; charset=GB2312" /> 这里声明的编码语言是简体中文GB2312。 l 用小写字母书写所有的标签 XML对大小写是敏感的，所以，XHTML也是大小写有区别的。所有XHTML元素和属性的名字都必须使用小写。否则文档将被W3C校验认为是无效的。例如下面的代码是不正确的： <Title>公司简介</Title> 正确的写法是： <title>公司简介</title> l 为图片添加alt属性为所有图片添加alt属性。alt属性指定了当图片不能显示的时候就显示供替换文本，这样做对正常用户可有可无，但对纯文本浏览器和使用屏幕阅读机的用户来说是至关重要的。只有添加了alt属性，代码才会被W3C正确校验通过。如下所示代码： <img src="logo.gif" alt="东方公司标志，首页"> l 给所有属性值加引号在HTML中，可以不需要给属性值加引号，但是在XHTML中，属性值必须被加引号。例height="100"是正确的，而height=100就是错误的。 l 关闭所有的标签在XHTML中，每一个打开的标签都必须关闭，如下所示： 每一个打开的标签都必须关闭。 HTML可以接受不关闭的标签，XHTML就不可以。 这个规则可以避免HTML的混乱和麻烦。 2．中级改善接下来的改善主要在结构和表现相分离上，这一步不像初级改善那么容易实现，需要观念上的转变，以及对CSS技术的学习和运用。 l 用CSS定义元素外观应该使用CSS来确定元素的外观。 l 用结构化元素代替无意义的元素许多人可能从来都不知道HTML和XHTML元素设计的本意是用来表达结构的。很多人已经习惯用元素来控制表现，而不是结构。例如下面的代码：北京 上海 广州 就没有如下的代码好： <ul> <li>北京</li> <li>上海</li> <li>广州</li></ul> l 给每个表格和表单加上ID 给表格或表单赋予一个唯一的、结构的标记，例如： <table id="menu"> 1.4 为什么要在网页中加入CSS CSS是Cascading Style Sheets（层叠样式表）的缩写，它可以与HTML或XHTML超文本标记语言配合来定义网页的外观。 1.4.1 什么是CSS 当熟练掌握了Dreamweaver的基本功能后，可能会发现制作的网页有些问题，例如文字不能添加在图片上，段落之间不能设置行距。有时即使懂得一些HTML标记，但是还不能随意改变网页元素的外观，无法随心所欲地编排网页。因此W3C协会颁布了一套CSS语法，用来扩展HTML语法的功能。CSS是网页设计的一个突破，它解决了网页界面排版的难题。可以说，HTML的标记主要是定义网页的内容（Content），而CSS决定这些网页内容如何显示（Layout）。网页设计通常需要统一网页的整体风格，统一的风格大部分涉及网页文字属性、网页背景色以及链接文字属性等，如果应用CSS来控制这些属性，会大大提高网页设计速度，更加统一网页总体效果。例如图1-24和图1-25所示的网页分别为使用CSS前后的效果。图1-24 使用CSS前图1-25 使用CSS后 1.4.2 如何编写CSS CSS的语句是内嵌在HTML文档内的。所以，编写CSS的方法和编写HTML文档的方法是一样的。可以用任何一种文本编辑工具来编写CSS。如Windows的记事本和写字板、专门的HTML编辑工具（FrontPage、Dreamweaver等），都可以用来编辑CSS文档。要在Dreamweaver中添加CSS语法，先在Dreamweaver的主界面中，将编辑界面切换成“拆分”视图，使用“拆分”视图能同时查看代码和设计效果。编辑语法在“代码”视图中进行，如图1-26所示。图1-26 在Dreamweaver中编写CSS 13

展开阅读全文