首先我们启动HBuilderX2.0 ，界面如图2-1所示
图2-1 软件开发界面
单击“文件—新建—项目”，弹出新建项目管理界面，我们在里面进行了项目类型选择“5+APP”、项目名称填写“编程之路”、设置文件存放路径和模板选择“默认模板”，点击创建，我们的新建项目就OK了，如图2-2所示。
图2-2 新建项目设置
这样我们的开发目录基本建立起来了，主要包括4个文件夹和2个html文档，目录结构如图2-3所示。。4个文件夹分别是：CSS文件夹用于存储样式文件、img文件夹用于存储图片信息、js文件夹用于存储Javascript文件，unpackage文件夹是放置app图标和启动界面的图片，为了集中管理项目的相关资源，方便打包，本质上和系统中的任意一个其他文件夹没什么区别。2个问文档分别是：index.html文件用于显示手机页面显示；manifest.json文件是html5+移动App的配置文件。
图2-3开发基本目录结构
在右侧项目管理器中，单击默认生成的index.html文件，右侧编辑文档窗口，我们会看到HbulderX给我们设置一些默认代码，具体如下：
1.DOCTYPE html>
2.html>
3.head>
4. meta charset="utf-8">
5. meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
6. title>title>
7. script type="text/javascript">
8. document.addEventListener('plusready', function(){
9. //console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。"
10. });
11. script>
12.head>
13.body>
14.body>
15.html>
这就是一个HTML文档的基本结构。那什么是THML文档呢？Html简单的说，就是“将设计图转换为用户查看的网页”所需要的技术，它是标记语言，只有明白了各种标记的用法，就掌握了HTML。标记由括号包围的元素组成，一般包括起始标记和结束标记标记名称>，例如上面代码中的和是一对标记，表示该文档是HTML文档。
从上面代码可以看出一个HTML文档主要由：网页文件格式HTML、文档头HEAD和文档内容BODY三部分组成。我简单的介绍一下：
第一行： 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。必须是 HTML 文档的第一行，位于 标签之前。 声明没有结束标签。
第二行：标签告知浏览器其自身是一个 HTML 文档。该标签与 标签想对应，限定了文档的开始点和结束点。
第三行：
登录查看全部
参与评论
手机查看
返回顶部