- HTML5+CSS3+JavaScript 从入门到项目实践（超值版）
- 聚慕课教育研发中心
- 799字
- 2025-02-18 09:35:04
1.3 编写第一个HTML页面
前面介绍了HTML的基本知识，下面编写一个简单的HTML页面，使用的是WebStorm编辑软件，在后续的讲解中均使用这款编辑器。
1.3.1 搭建HTML运行环境
HTML运行环境非常简单，它不需要服务端，只需要下载一款编辑器，如Dreamweaver、WebStorm等，在编辑器中直接编写代码，然后在浏览器中查看效果。下面以WebStorm为例来介绍一下。
首先到WebStorm编辑器的官网http://www.jetbrains.com/webstorm/去下载软件的安装包，如图1-2所示。
图1-2 WebStorm编辑器的官网
安装完成后，还需要创建一个文件夹，用于存放代码，假设在桌面创建这个文件夹，命名为“源码”，如图1-3所示。
图1-3 “源码”文件夹
启动WebStorm编辑器，在编辑器中打开刚才创建的文件夹“源码”，操作顺序是选择file→open命令，在弹出的窗口中，选择“源码”选项，如图1-4所示。
图1-4 找到源码文件
单击OK按钮后，在弹出的对话框中单击This Window按钮，这样就进入“源码”文件夹里了，如图1-5所示，以后所编写的代码都在这里面。
图1-5 进入“源码”文件夹
完成以上步骤，接下来就可以创建HTML页面了。
创建HTML页面有两种方法。
第一种：操作顺序是File→New→HTML File，如图1-6所示。
图1-6 创建HTML页面
第二种：在“源码”文件夹上右击→New→HTML File，如图1-7所示。
图1-7 创建HTML页面
单击HTML File选项后，弹出命名窗口，这是第一个页面，所以命名为one，如图1-8所示。
图1-8 页面命名
单击OK按钮，页面创建完成，如图1-9所示。
图1-9 新创建的页面
1.3.2 检查浏览器是否支持
在WebStorm中，把鼠标指针移动到编辑器的右上角，会默认显示5种浏览器的图标，如图1-10所示。
图1-10 默认的浏览器
如果用户的计算机上安装了相应的浏览器，当单击时会在浏览器中显示页面内容，如果没有安装，就会弹出找不到的提示框，如图1-11所示。
图1-11 提示框
1.3.3 编写“hello HTML 5”Web页面
一切准备就绪，开始编写一个简单的页面。
就会发现，当one.html文件创建完成时，里面有一些代码，这些代码其实是HTML的框架，只需在<body></body>标签中编写需要的内容即可，如图1-12所示，其他标签含义将在后续的内容介绍。
图1-12 编写hello HTML 5页面
在Chrome浏览器中运行的结果如图1-13所示。
图1-13 one.html文件显示效果