引言

在数字化时代，网页和移动应用已成为人们日常生活中不可或缺的一部分。HTML5作为新一代的网页标准，不仅提供了丰富的功能，还极大地简化了网页和移动应用的开发过程。本文将带你走进HTML5的世界，通过实例教程，轻松上手构建互动网页与移动应用。

HTML5基础知识

1. HTML5简介

HTML5是HTML的第五个版本，自2014年起正式成为万维网联盟（W3C）的标准。它增加了许多新特性，如语义化标签、离线存储、多媒体支持等，使得网页开发更加高效、便捷。

2. HTML5基本结构

HTML5的基本结构包括：<!DOCTYPE html>、<html>、<head>、<body>。以下是一个简单的HTML5页面示例：

<!DOCTYPE html>
<html>
<head>
    <title>HTML5实战教程</title>
</head>
<body>
    <h1>欢迎来到HTML5世界</h1>
    <p>本文将带你轻松上手构建互动网页与移动应用。</p>
</body>
</html>

3. HTML5常用标签

HTML5提供了丰富的标签，以下是一些常用的标签：

  • <header>：定义网页的页眉部分。
  • <nav>：定义导航链接。
  • <section>：定义文档中的一个章节。
  • <article>：定义页面中的独立内容。
  • <aside>：定义侧边栏内容。
  • <footer>：定义网页的页脚部分。

互动网页开发

1. CSS3样式

CSS3是CSS的升级版，提供了丰富的样式效果，如阴影、圆角、动画等。以下是一个简单的CSS3样式示例：

body {
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
}

h1 {
    color: #333;
    text-align: center;
}

p {
    color: #666;
    line-height: 1.6;
}

2. JavaScript脚本

JavaScript是一种客户端脚本语言，用于实现网页的交互功能。以下是一个简单的JavaScript脚本示例：

function sayHello() {
    alert('Hello, World!');
}

window.onload = function() {
    document.getElementById('btn').onclick = sayHello;
};

3. HTML5 Canvas

Canvas是HTML5提供的一个绘图API，可以用于绘制图形、图像等。以下是一个简单的Canvas示例：

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
<script>
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');
    ctx.fillStyle = "#FF0000";
    ctx.fillRect(0, 0, 150, 100);
</script>

移动应用开发

1. HTML5与CSS3

移动应用开发中，HTML5与CSS3可以用于构建响应式网页，适配各种屏幕尺寸。以下是一个简单的响应式网页示例：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        .container {
            max-width: 600px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>欢迎来到移动应用世界</h1>
        <p>本文将带你轻松上手构建互动网页与移动应用。</p>
    </div>
</body>
</html>

2. JavaScript与Web API

JavaScript与Web API可以用于实现移动应用的各种功能，如地理位置、摄像头、传感器等。以下是一个简单的地理位置API示例：

if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
        var latitude = position.coords.latitude;
        var longitude = position.coords.longitude;
        console.log('Latitude: ' + latitude + ', Longitude: ' + longitude);
    });
} else {
    console.log('Geolocation is not supported by this browser.');
}

总结

通过本文的实例教程，相信你已经对HTML5实战有了初步的了解。在实际开发中，你需要不断学习、实践，才能成为一名优秀的网页和移动应用开发者。祝你在HTML5的世界里，一路顺风！