1.3.1 HTML文件的编写方法
编写HTML文件主要有3种方法：手工直接编写、使用可视化软件和由Web服务器一方实时动态生成，以下分别进行介绍。
1.手工直接编写
由于HTML语言编写的文件是标准的ASCII文本文件，所以可以使用任何的文本编辑器来打开并编写HTML文件，如Windows系统中自带的记事本。
2.使用可视化软件
可以使用WebStorm、Dreamweaver、Sublime等软件进行可视化的网页编辑制作。
3.由Web服务器一方实时动态生成
这种方法需要通过后端的网页编程来实现，如JSP、ASP、PHP等，一般情况下都需要数据库的配合。
1.3.2 手工编写页面
下面先使用记事本来编写第一个HTML文件，操作步骤如下：
（1）选择“开始”→“程序”→“附件”→“记事本”菜单项，打开windows系统自带的记事本，如图 1.4所示。
（2）在记事本中直接键入HTML代码，具体代码如下：
<html>
<head>
<title>简单的HTML文件</title>
</head>
<body text="blue">
<h2 align="center">HTML5初露端倪</h2>
<hr>
<p>让我们一起体验超炫的HTML5旅程吧</p>
</body>
</html>（3）输入代码后。记事本中显示出代码的内容，如图 1.5所示。
（4）打开记事本菜单栏中的“文件”→“另存为”菜单，弹出如图 1.6所示的“另存为”对话框。
（5）在“另存为”对话框中，首先选择存盘的文件夹，然后在“保存类型”下拉列表中选择“所有文件”，在“编码”中选择UTF-8，并填写文件名，例如，将文件命名为1-2.html，最后单击“保存”按钮。
（6）关闭记事本，回到存盘的文件夹，双击如图 1.7所示的1-2.html文件。可以在浏览器（推荐谷歌浏览器）中看到最终页面效果，如图 1.8所示。
1.3.3 使用可视化软件WebStorm制作页面
WebStorm是jetbrains公司旗下的一款JavaScript开发工具。软件支持不同浏览器的提示，还包括使所有用户自定义的函数（项目中）。代码补全包含了所有流行的库，比如：jQuery、YUI、Dojo、Prototype、Mootools和Bindows等。被广大JavaScript开发者誉为Web前端开发神器、最强大的HTML5编辑器、最智能的JavaScript IDE等。
下面以WebStorm英文版为例，首先说明安装WebStorm 11.0.4的过程，然后再介绍制作HTML5页面的方法。
1.下载与安装
（1）首先打开浏览器，输入网址https://www.jetbrains.com/webstorm/download/previous.html，进入WebStorm官网地址下载页，如图 1.9 所示。
（2）单击超链接“Version 11.0.4 for Windwos（exe）”。开始下载WebStorm 11.0.4程序，如图 1.10所示。
（3）下载完之后，双击打开WebStorm-11.0.4这个应用程序，如图 1.11所示。
（4）单击Next按钮，将显示如图 1.12所示的界面，在该界面单击Browse按钮选择一个安装路径（默认的路径是“C:\Program Files\JetBrains\WebStorm 11.0.4”）。
（5）单击Next按钮，弹出选择安装选项的界面，这里需要勾选全部的复选框，如图 1.13所示。
（6）单击Next按钮，选择开始菜单文件夹，默认为“JetBrains”，如图 1.14所示。
（7）单击Install按钮，显示安装的进度条，如图 1.15所示。
（8）安装进程结束后，单击Next按钮，弹出如图 1.16所示界面，在该界面单击Finsh按钮，完成WebStorm 11.0.4的安装。
2.创建HTML文件和运行HTML程序
（1）单击系统的“开始”→“所有程序”→JetBrains WebStorm 11.0.4，启动WebStorm软件的主程序，其主界面如图 1.17所示。
（2）选择菜单栏中的File→New Project选项，新建一个工程，如图 1.18所示。
（3）在Location文本框中输入工程存放的路径，也可以单击“更多”按钮选择路径，如图 1.19所示。然后单击Create按钮，完成工程的创建。
（4）选择新建好的HTML工程，单击鼠标右键，在弹出的快捷菜单中选择New→HTML File选项，创建一个HTML文件。如图 1.20所示。
（5）选择完成之后会弹出如图 1.21所示的新窗口，在Name对应的输入框中输入文件名，在这里将文件名命名为“index.html”，并在“Kind”下拉框中选择“HTML 5 file”选项。
（6）单击OK按钮，弹出新建好的HTML5文件，如图 1.22所示。
（7）接下来，就可以编辑HTML5文件了，在<body>标记中输入文字“神奇的HTML5”，如图 1.23所示。
（8）编辑完代码后，可以通过单击WebStorm编辑器菜单栏中的File→Save As选项，保存文件或另存为一个文件，还可以选择保存路径，如图 1.24所示，单击OK按钮后，若弹出提示框，单击OK按钮即可。
编辑完代码代码后，也可以直接通过单击菜单栏中的Run→选择Run→选择index.html，或者直接双击创建好的HTML5文件，在浏览器中运行代码，页面效果如图 1.25所示。
下面通过一个实例进一步了解HTML文件的基本结构和<body>属性的运用。
实例01 运用<body>属性，渲染页面效果
新建一个html5文件，为<body>标记添加样式，渲染页面效果，具体代码如下：
<!doctype html>
<html>
<head>
<meta charset="stf-8">
<title>运用body属性。渲染页面效果</title>
</head>
<!--设置背景图片:background-->
<body background="images/bg.jpg">
<center>
<br><br><br><br><br><br><br><br><br>
<h2>长风破浪会有时</h2>
<h2>直挂云帆济沧海</h2><br>
<h3><a href="http://www.mingrisoft.com">单击链接</a></h3>
</center>
</body>
</html>编辑完代码后，在浏览器中运行代码，运行效果如图 1.26所示。
说明：在上面代码的第8行中，background=“images/bg.jpg”表示页面使用了名称为bg.jpg的背景图片，此处读者了解即可。关于图片的处理方法将会在第3章中详细介绍。
拓展训练：
一、试着使用<body>标记，为页面设置背景颜色为蓝色。（源代码：https://cdncos.worthstudy.cn/tbnote/2023/01/15/01.rar）
二、试着使用<body>标记，设置不同状态下的链接的颜色。（源代码：https://cdncos.worthstudy.cn/tbnote/2023/01/15/02.rar）
暂无评论内容