1.3 HTML5文件的编写方法

有两种方式来产生HTML文件：一种是自己写HTML文件，事实上这并不是很困难，也不需要特别的技巧；另一种是使用HTML编辑器，它可以辅助使用者来做编写的工作。

1.3.1 使用记事本手工编写HTML文件

前面介绍到HTML5是一种标记语言（标记语言代码是以文本形式存在的），因此所有的记事本工具都可以作为它的开发环境。HTML文件的扩展名为.html或.htm，将HTML源代码输入到记事本并保存之后，可以在浏览器中打开文档以查看其效果。

使用记事本编写HTML文件，具体操作步骤如下：

01 单击Windows桌面上的【开始】按钮，选择【所有程序】➢【附件】➢【记事本】命令，打开一个记事本，在记事本中输入HTML代码，如图1-2所示。

图1-2 编辑HTML代码

02 编辑完HTML文件后，选择【文件】➢【保存】命令或按Ctrl+S组合键，在弹出的【另存为】对话框中选择【保存类型】为【所有文件】，然后将文件扩展名设为.html或.htm，如图1-3所示。

图1-3 【另存为】对话框

03 单击【保存】按钮，保存文件。打开网页文档，在IE浏览器中预览效果，如图1-4所示。

图1-4 网页的浏览效果

1.3.2 使用Dreamweaver CC编写HTML文件

常言道：“工欲善其事，必先利其器”。虽然使用记事本可以编写HTML文件，但是编写效率太低，对于语法错误及格式都没有提示，因此，可以使用专门编写HTML网页的工具来弥补这种缺陷。Adobe公司的Dreamweaver CC用户界面非常友好，是一个非常优秀的网页开发工具，深受广大用户的喜爱。

使用Dreamweaver CC编写HTML文件，具体操作步骤如下：

01 启动Dreamweaver CC（如图1-5所示），在欢迎屏幕的【新建】栏中选择HTML选项，或者单击菜单中的【文件】➢【新建】命令（快捷键Ctrl+N）。

图1-5 包含欢迎屏幕的主界面

02 弹出【新建文档】对话框（如图1-6所示），在【页面类型】选项区中选择HTML选项，在【文档类型】中选择【HTML 5】选项。

图1-6 【文档类型】对话框

03 单击【创建】按钮，创建HTML文件，如图1-7所示。

图1-7 设计视图下显示创建的文件

04 在文档工具栏中，单击【代码】按钮，切换到代码视图，如图1-8所示。

图1-8 代码视图下显示创建的文件

05 修改HTML文件标题，将代码中<title>标记中的“无标题文档”修改成“蝶恋花”。

06 在<body>标记中输入“溪上平岗千叠翠，万树亭亭，争作拏云势。”，完整HTML代码如下所示。

     <!DOCTYPE html>
     <head>
     <meta charset=utf-8" />
     <title>蝶恋花</title>
     </head>
     <body>
     溪上平岗千叠翠，万树亭亭，争作拏云势。
     </body>
     </html>

07 保存文件。单击菜单中的【文件】➢【保存】命令或按Ctrl+S组合键，弹出【另存为】对话框。在对话框中，选择保存位置并输入文件名，单击【保存】按钮，如图1-9所示。

图1-9 保存文件

08 单击文档工具栏中的图标，选择查看网页的浏览器，或按下功能键F12使用默认浏览器查看网页，预览效果如图1-10所示。

图1-10 浏览器预览效果

上一章目录下一章