1.3 HTML5文件的编写方法_HTML5+CSS3+jQuery Mobile+Bootstrap开发APP从入门到精通（视频教学版）-QQ阅读男生中文都市网

1.3 HTML5文件的编写方法

有两种方式来产生HTML文件：一种是自己写HTML文件，事实上这并不是很困难，也不需要特别的技巧；另一种是使用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 网页的浏览效果

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

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

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

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

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

图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 浏览器预览效果