2.3 新建项目与页面
原创声明。未经许可，不得转载，作者：小步教程。
2.3.1 第1步：打开项目文件夹
（1）Windows资源管理器新建文件夹“F:\小步教程\css\chapter02-开发环境搭建”。
（2） “文件”—“打开文件夹”，选择上述文件夹，打开成功。
2.3.2 第2步：新建hello.html文件
单击“新建文件”按钮。
输入文件名 hello.html，回车后自动打开编辑窗口。
2.3.3 第3步：Emmet快速完成代码
注意事项。文件扩展名是html时，输入感叹号!才会提示html模板。
输入感叹号!或html5，弹出Emmet模板列表。单击右侧的右箭头，提示模板完整内容。
回车后完成如下代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
代码说明
（1）<!DOCTYPE html>
声明文档类型是HTML5标准模式。HTML4及以前版本的设计用于PC端，HTML5支持PC端与移动端。早期版本3、4有不同的写法， HTML4严格模式文档类型声明示例：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
如果不指定版本号与模式表示HTML 5版本的标准模式，这意味版本5本身不断升级。
（2）<html lang="en">
HTML文档的根元素，后续内容嵌套在该结点。如果不设置语言，删除lang属性。
<html>
（3）<head>
文档头部，包含其它节点，例如元数据meta、标题title。
（4）<meta charset="UTF-8">
设置字符集为UTF-8，支持中文，如果不加可能导致显示中文乱码。
（5）<meta name="viewport" content="width=device-width, initial-scale=1.0">
用于移动端页面设置，viewport表示浏览器窗口的页面内容区。默认情况viewport宽度并不等于设备（如手机）显示屏的宽度，width=device-width表示设为相同；默认情况页面打开时可能被浏览器自动缩放，initial-scale=1.0表示不缩放。
（6）<title>
设置文档标题，显示在浏览器窗口标题栏。
（7）<body>
设置页面主体内容，后续主要在这里编码实现页面内容。
试一试。完全手动输入以上内容。
2.3.4 第4步：编辑页面内容
<title>节点内容设置为“小步教程”。
<body>节点内容设置为“hello，HTML。www.xiaobuteach.com”。
hello.html完整内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小步教程</title>
</head>
<body>
Hello，HTML。www.xiaobuteach.com
</body>
</html>
保存文件。接下来安装Live Server插件运行页面。
