1.3 HTML文件
使用HTML语言编写的文件称为HTML文件，扩展名为.html或.htm。HTML文件是一种纯文本文件，可以使用记事本、Editplus等文本编辑工具，或frontPage、Dreamweaver等可视化编辑工具来编写。HTML文件由浏览器解释执行，具有跨平台性，任何一台主机，只要具有浏览器就可以执行HTML文件。通过浏览器中的“查看>>源文件”命令，访问者可以查看网页的HTML代码。
HTML文件的组成包含两部分内容：一是HTML标记；二是HTML标记所设置的内容。
1.3.1 HTML标记
HTML标记用于描述网页结构，同时也可对页面对象样式进行简单的设置。所有标记都是由一对尖括号（“<”和“>”）和标记名所构成的，并分为开始标记和结束标记。开始标记使用<标记名>表示，结束标记使用</标记名>表示。在开始标记中使用attributename=“value”这样的格式来设置属性，结束标记不包含任何属性。标记中的标记名用来在网页中描述网页对象，属性和属性值用来提供HTML元素的相关信息。
标记语法格式：
<标记名称 属性="属性值" 属性="属性值" …> …</标记名称>
例如：<ahref="index.html">返首页</a>
通常标记都具有默认属性，当一个标记中只包含标记名时，标记将使用默认属性，例如：段落标记<p>，其存在一个默认的居左对齐方式。
大多数HTML标记都有一个开始标记和结束标记，有部分标记只有开始标记，没有结束标记，如<br>。对于同时具有开始标记和结束标记的称为双标记，而只具有开始标记的称为单标记。在HTML标记中，有些标记既可以作单标记使用，也可以作双标记使用，如<p>、<li>等。
HTML开始标记后面或标记对之间的内容就是HTML标记所设置的内容，其中的内容可以是普遍的文本，也可是嵌套的标记。
标记属性可以对标记所设置的内容进行一些简单样式的设置，如对文字颜色、字号、字体等样式进行设置。通过给属性设置不同的值，可以获得不同的样式效果。
一个标记中可以包含任意多个属性，不同属性之间使用空格分隔，例如：<hr color="#acee3d"size="5">。
对于HTML标记，属性值可以使用引号括起来，也可以不使用引号。使用引号时既可以是单引号，也可以是双引号。例如，size="3"及size='3'都正确。但需注意的是，引号必须配对使用，不能一边使用双引号，另一边却使用单引号；此外，使用引号时必须保证是在英文输入状态下输入。另外，HTML标记和属性不区分大小写，即标记<hr>、<Hr>和<HR>作用是一样的。
1.3.2 HTML文件的基本结构
按照实现功能的不同，整个HTML文件可分成两层：一层是外层，由<html>和</html>标记对来标识；另外一层是内层，用于实现HTML文件的具体功能。根据实现功能的不同，又可以将内层细分为两个区域，即头部区域和主体区域。
头部区域的标识标记是<head>和</head>，<head>和</head>之间的内容都属于头部区域中的内容。这个区域主要用来设置一些与网页相关的信息，如网页标题、字符集、网页描述的信息等，设置的信息内容一般不会显示在浏览器窗口中。
要在浏览器窗口显示的内容需要放在主体区域。主体区域的标识标记是<body>和</body>。
HTML文件的基本结构如下：
<html> <head> 头部区域的内容 </head>注（1） <body> 主体区域的内容 </body>注（2） </html>
注（1）：头部区域
注（2）：主体区域
1.3.3 HTML文件的编写方法
HTML文件是一个文本文件，我们可以使用任意一种文本编辑工具。在此，我们将介绍两种编写方法，即使用最简单的记事本工具编写和使用可视化的网页制作利器Dreamweaver编写。
1. 使用记事本编写HTML文件
打开记事本，在光标处直接输入图1-1所示的代码，并以“ex1-1.html”为文件名将文件保存在D:\web\code\lesson1目录下。
图1-1 使用记事本编写HTML文件
在D:\web\code\lesson1目录找到ex1-1.html文件，并双击该文件，会自动打开浏览器执行该html文件；或者打开浏览器，选择“文件→打开”命令，从弹出的“打开”对话框中找到ex1-1.html文件后，单击“确定”按钮，即可以执行该文件，运行效果如图1-2所示。
图1-2 HTML文件在浏览器中的运行效果
2. 使用Dreamweaver编写HTML文件
Dreamweaver是Macromedia公司推出的目前最流行、使用最广泛的一款专业的可视化网页制作软件，集网页制作和网站管理于一身，可用于对Web站点、Web页面进行设计和编码。
使用Dreamweaver的文档窗口通常包含多个视图窗口，其中Dreamweaver CS6包含了4个视图窗口，分别如下所述。
代码视图：用于编写和编辑HTML、CSS、JavaScript等代码的编码环境。
设计视图：用于可视化页面布局、可视化编辑的设计环境。
拆分视图：用于同时显示同一文档的代码视图和设计视图。
实时视图：用于实时展现浏览器浏览效果的窗口。
打开Dreamweaver CS6软件，在打开的界面中选择“新建”栏目下的“HTML”，将会默认打开图1-3所示的代码视图。在代码视图中可直接编写代码，编写完后将文件保存为html文件，如图1-4所示。如果同时单击拆分视图和实时视图，则可同时查看代码视图及其在浏览器中的显示效果，如图1-5所示。
图1-3 使用Dreamweaver新建HTML文件默认打开的代码视图
图1-4 在代码视图中进行代码的编写
图1-5 同时显示代码视图和实时视图
在代码视图、设计视图和拆分视图中，也可通过单击“在浏览器中预览/调试”按钮，以打开选择的浏览器来浏览网页，如图1-6所示。
图1-6 选择浏览器浏览网页