HTML5网页制作入门：轻松上手，打造个性化网站从零开始

了解HTML5

HTML5，即超文本标记语言第五版，是当前网页开发的主流标准。相较于前几代HTML，HTML5提供了更多的功能，如多媒体支持、离线存储、图形绘制等，使得网页开发更加高效和强大。

HTML5的优势

更强大的多媒体支持：HTML5原生支持音频和视频，无需额外插件。
离线存储：通过Application Cache、localStorage和sessionStorage等技术，实现网页离线存储功能。
图形绘制：通过Canvas和SVG技术，实现网页图形绘制功能。
更丰富的API：提供更多用于网页开发的API，如Geolocation、Web Workers、WebSockets等。

HTML5基础语法

标签结构

HTML5的基本结构如下：

<!DOCTYPE html>
<html>
<head>
    <title>页面标题</title>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

常用标签

<head>：包含页面元数据，如标题、字符编码、链接等。
<title>：定义页面标题。
<body>：包含页面内容，如文本、图片、视频等。
<h1>-<h6>：定义标题级别，<h1>为最高级别。
<p>：定义段落。
<a>：定义超链接。
<img>：定义图片。

HTML5布局

布局方式

HTML5提供了多种布局方式，如：

Flexbox：一种灵活的布局方式，能够适应不同屏幕尺寸。
Grid：一种基于网格的布局方式，能够实现复杂的布局效果。
CSS Grid：CSS Grid布局的扩展，提供更强大的布局功能。

Flexbox布局

以下是一个简单的Flexbox布局示例：

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            display: flex;
            justify-content: space-between;
        }
        .item {
            flex: 1;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
    </div>
</body>
</html>

HTML5多媒体

音频和视频

HTML5原生支持音频和视频，以下是一个简单的音频和视频示例：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <audio controls>
        <source src="audio.mp3" type="audio/mpeg">
        Your browser does not support the audio element.
    </audio>
    <video controls>
        <source src="video.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
</body>
</html>

Canvas和SVG

Canvas和SVG都是HTML5提供的图形绘制技术。

Canvas：用于绘制2D图形，以下是一个简单的Canvas示例：

<!DOCTYPE html>
<html>
<head>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas" width="200" height="100"></canvas>
    <script>
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");
        ctx.fillStyle = "#FF0000";
        ctx.fillRect(0, 0, 150, 75);
    </script>
</body>
</html>

SVG：用于绘制矢量图形，以下是一个简单的SVG示例：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <svg height="100" width="100">
        <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
    </svg>
</body>
</html>

HTML5离线存储

Application Cache

Application Cache允许网页在离线状态下工作。以下是一个简单的Application Cache示例：

<!DOCTYPE html>
<html manifest="cache.appcache">
<head>
</head>
<body>
    <h1>Hello, world!</h1>
</body>
</html>

localStorage和sessionStorage

localStorage和sessionStorage用于存储数据，以下是一个简单的示例：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <script>
        localStorage.setItem("key", "value");
        console.log(localStorage.getItem("key")); // 输出: value
    </script>
</body>
</html>

总结

HTML5为网页开发带来了许多便利，掌握HTML5基础语法、布局、多媒体和离线存储等技术，可以帮助你轻松上手网页制作。通过不断实践和积累，你可以打造出个性化、功能丰富的网站。