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具有以下优点。
●XHTML提倡使用更加简洁和规范的代码，使得代码的阅读和处理更方便，同时也便于搜索引擎的检索。
●XHTML文档在旧的基于HTML的浏览器中能够表现得和在新的基于XHTML的浏览器中一样出色。
●XHTML是可扩展的语言，能够包含其他文档类型，既能够利用HTML的文档对象模块（DOM），又能利用XML的文档对象模块。
所以XHTML可以支持更多的显示设备。
●在XHTML中，推荐使用CSS样式定义页面的外观。
XHTML分离了页面的结构和表现，方便利用数据和更换外观。
●XML是Web发展的趋势，具有更好的向后兼容性。
使用XHTML 1.0只要遵守一些简单规则，就可以设计出既适合XML系统，又适合当前大部分HTML浏览器的页面。
首先看一个最简单的XHTML页面结构，其代码如下。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/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""/TR/xhtml1/DTD/xhtml1-transitional.dtd">2．<html>元素和名字空间<html>元素是XHTML文档中必须使用的元素，所有的文档内容（包括文档头部内容和文档主体内容）都要包含在<html>元素之中。
标签<html>表示HTML代码的开始，文件的结束标签是</html>。
名字空间是<html>元素的一个属性，写在<html>元素起始标签里。
其在页面中的相应代码如下。
<html xmlns="/1999/xhtml">3．网页头部元素网页头部元素<head>也是XHTML文档中必须使用的元素。
其作用是定义页面头部的信息，其中可以包含标题元素、<meta>元素等，它不会显示在浏览器内。
网页头部元素对应的页面代码如下。
<head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"/><title>最简单的XHTML文档</title></head>4．页面标题元素页面标题元素<title>用来定义页面的标题。