HTML5开发手机app是一种使用HTML5、CSS3和JavaScript来构建在移动设备上运行的应用程序的方法。与传统的原生应用程序相比，HTML5应用程序具有跨平台和可移植性的优势，可以运行在不同的操作系统和设备上，包括Android、iOS和Windows Phone等。
下面是一个HTML5开发手机app的实例，同时也会介绍其中的详细原理。
首先，我们需要一个文本编辑器来编写HTML、CSS和JavaScript代码。常见的文本编辑器有Sublime Text、Visual Studio Code等。在其中新建一个HTML文件，并命名为index.html。在该文件中，我们使用HTML标记语言来构建应用程序的用户界面。
```html
Welcome to My App
This is a sample HTML5 app.
```
在上面的HTML代码中，我们定义了一个标题（`
`）和一个段落（`
`），以及一个按钮（`
接下来，我们需要创建一个CSS文件，命名为style.css，用来设置应用程序的样式。
```css
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
h1 {
color: #333;
}
p {
color: #666;
margin-bottom: 20px;
}
button {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
}
```
在上面的CSS代码中，我们设置了应用程序的背景色、字体、颜色等样式属性，包括标题、段落和按钮的样式。
最后，我们需要创建一个JavaScript文件，命名为app.js，用来实现应用程序的交互行为。
```javascript
var button = document.getElementById('myButton');
button.addEventListener('click', function() {
alert('Hello, World!');
});
```
在上面的JavaScript代码中，我们获取了id为myButton的按钮元素，并为其添加了一个点击事件的监听器。当按钮被点击时，会弹出一个对话框显示"Hello, World!"的消息。
至此，我们已经完成了一个简单的HTML5手机app的开发实例。
总结起来，HTML5开发手机app的原理就是使用HTML、CSS和JavaScript来创建应用程序的用户界面、样式和交互行为。通过编写HTML文件、CSS文件和JavaScript文件，以及引入相应的外部文件，我们可以实现一个基本的HTML5手机app。这种开发方法具有跨平台和可移植的特性，可以在不同的设备上运行，并且通过网络进行部署和更新。
