启动一个写html代码的编辑器，比如vscode、webstrom、Hbuilder等ide。如图示例用vs。

在左侧空白处 右键鼠标在弹出的菜单中选择 新建文件。

输入文件名称及后缀。如图示例：demo.html文件。

输入doc再按下Tab快捷键。由软件自动补全部分默认代码。如图。

接下来在head标签中，添加style标签，在其里面书写我们的样式代码。在其body标签中，书写我们的布局代码div等。

代码写完后按ctrl+s保存文件。在 我的电脑 中找到刚才的文件路径。双击鼠标使用默认的浏览器打开。

最后我们刚才输入的代码显示结果如下，成功实现简单的页面布局。

如需更复杂的布局。继续添加其他结构及样式。包括js代码等。