列表3.3 我们应用的标记：./app/index.html
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Fire Sale</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<!--控件部分在顶部添加了用于打开和保存文件的按钮。稍后我们将向这些按钮添加功能。-->
<section class="controls">
<button id="new-file">New File</button>
<button id="open-file">Open File</button>
<button id="save-markdown" disabled>Save File</button>
<button id="revert" disabled>Revert</button>
<button id="save-html">Save HTML</button>
<button id="show-file" disabled>Show File</button>
<button id="open-in-default" disabled>Open in Default Application</button>
</section>
<!--我们的应用程序允许使用.raw-markdown类编写和编辑文本区域中的内容，并使用.rendered-html类在div元素中呈现该内容。-->
<section class="content">
<!--<label>标签是可选的，并且包含了这些标签，以使视障用户更容易访问应用程序。 -->
<label for="markdown" hidden>Markdown Content</label>
<textarea class="raw-markdown" id="markdown"></textarea>
<div class="rendered-html" id="html"></div>
</section>
</body>
<!--在文件末尾的标记中，我们需要渲染进程的代码，它位于同一个目录中的renderer.js中。 -->
<script>
require('./renderer');
</script>
</html>
我们的应用程序目前还没有太多需要查看的地方。
如果您和我一样，您对我在效果图中引入的两列接口有点怀疑。在讨论如何使用HTML和CSS实现列时，很少使用easy这个词。
幸运的是，我们可以自信地使用添加到CSS3的名为Flexbox的新布局模式来快速定义应用程序的两列布局。Flexbox使创建页面布局变得很容易，可以在各种屏幕大小范围内进行可预测的操作，如清单3.4所示。它对CSS来说是相对较新的，直到最近才得到Internet Explorer的支持。