HTML5 手机网站开发全教程
前言：为什么是 HTML5？
HTML5 并不仅仅是 HTML 的第五个版本，它是一整套技术的集合，为移动设备而生，它带来了许多强大的新特性，让我们可以更轻松、更高效地开发出媲美原生 App 的移动网站：
（图片来源网络，侵删）
- 语义化标签：
<header>,<footer>,<nav>,<article>,<section>等，让代码结构更清晰，对搜索引擎（SEO）和屏幕阅读器更友好。 - 多媒体支持：原生支持
<video>和<audio>，无需再依赖 Flash 等第三方插件。 - Canvas & SVG：强大的 2D 图形绘制能力，用于制作动画、游戏和数据可视化。
- 本地存储：
localStorage和sessionStorage，让网站可以在浏览器中存储数据，实现离线应用或记住用户状态。 - 响应式设计：配合 CSS3 的媒体查询，一套代码可以完美适配各种尺寸的设备（手机、平板、桌面）。
第一步：准备工作
在开始编码之前,你需要准备一些工具。
-
代码编辑器
- 强烈推荐：Visual Studio Code (VS Code)，它免费、强大、插件生态丰富，对前端开发支持极佳。
- 其他选择：Sublime Text, Atom, WebStorm。
-
现代浏览器
- 必备：Google Chrome，它拥有最强大的开发者工具，可以实时调试你的代码、模拟不同设备、检查性能。
-
移动设备调试
（图片来源网络，侵删）- Chrome 开发者工具：在电脑上打开 Chrome，按
F12或Ctrl+Shift+I，然后点击设备切换按钮（左上角一个手机+平板的图标），就可以模拟各种手机型号进行调试。 - 真机调试：将手机和电脑连接到同一 Wi-Fi，通过 Chrome 的 "USB 调试" 功能，可以在手机上实时看到电脑上代码的修改效果。
- Chrome 开发者工具：在电脑上打开 Chrome，按
第二步：核心概念 - 响应式设计
手机网站的灵魂是 响应式设计，其核心思想是：“流体网格 + 弹性图片 + 媒体查询”。
视口
这是移动端最最重要的一步！视口是浏览器显示网页的区域，默认情况下，移动浏览器会以桌面版页面的宽度（通常是 980px）来渲染页面，然后将其缩小以适应屏幕，导致页面字体和元素都变得非常小。
为了解决这个问题,我们必须在 HTML 的 <head> 中加入 viewport meta 标签：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width=device-width：告诉浏览器，页面的宽度应该等于设备的屏幕宽度。initial-scale=1.0：告诉浏览器，初始的缩放比例是 100%，不要进行缩放。
没有这个标签，你的移动网站体验会很差。
（图片来源网络，侵删）
流体网格
传统的网页使用固定像素（px）来定义布局，这在移动端行不通，响应式设计使用 百分比（） 或 视口单位（vw, vh） 来定义容器和元素的宽度，使其能根据屏幕大小自动伸缩。
示例：
.container {
width: 100%; /* 容器宽度始终是父元素的100% */
max-width: 1200px; /* 但最大不超过1200px，避免在大屏幕上过宽 */
margin: 0 auto; /* 居中 */
}
.sidebar {
width: 30%; /* 侧边栏占容器宽度的30% */
float: left;
}
.main-content {
width: 70%; /* 主内容占容器宽度的70% */
float: left;
}
弹性图片
图片和视频也需要适应其容器,只需设置一个简单的 CSS 规则：
img, video {
max-width: 100%;
height: auto;
}
这能确保图片和视频永远不会溢出它们的容器。
媒体查询
媒体查询是响应式设计的“大脑”，它允许你根据设备的特定特征（如屏幕宽度、高度、方向）来应用不同的 CSS 样式。
语法：
/* 当屏幕宽度小于等于 768px 时（通常是平板和手机的断点） */
@media (max-width: 768px) {
/* 在这里写移动端专用的CSS */
.sidebar {
width: 100%; /* 在小屏幕上，侧边栏占满全宽 */
}
.main-content {
width: 100%; /* 主内容也占满全宽 */
}
.navigation {
flex-direction: column; /* 导航栏从水平变为垂直 */
}
}
常用的断点：
- ~ 320px - 480px: 小手机
- ~ 481px - 768px: 大手机 / 小平板
- ~ 769px - 1024px: 平板
- ~ 1025px+: 桌面
第三步：实战演练 - 创建一个简单的移动网页
让我们动手创建一个基础的移动页面。
文件结构
创建一个项目文件夹,里面包含以下文件：
my-mobile-site/
├── index.html
├── style.css
└── images/
└── logo.png编写 HTML (index.html)
使用 HTML5 的语义化标签来构建页面结构，并牢记 viewport。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">我的移动网站</title>
<link rel="stylesheet" href="style.css">
<!-- 引入一个移动端友好的字体图标库，如 Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
<header>
<div class="header-container">
<a href="#" class="logo">
<img src="images/logo.png" alt="网站Logo">
</a>
<button id="menu-toggle" class="menu-toggle">
<i class="fas fa-bars"></i>
</button>
</div>
</header>
<nav class="main-nav" id="main-nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">产品服务</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
<main>
<section class="hero">
<h1>欢迎来到我的网站</h1>
<p>这是一个使用 HTML5 和 CSS3 构建的响应式移动网站示例。</p>
<a href="#" class="cta-button">了解更多</a>
</section>
<section class="features">
<div class="feature-item">
<i class="fas fa-mobile-alt"></i>
<h3>移动优先</h3>
<p>专为移动设备优化，提供最佳体验。</p>
</div>
<div class="feature-item">
<i class="fas fa-paint-brush"></i>
<h3>现代设计</h3>
<p>简洁、美观的界面设计。</p>
</div>
<div class="feature-item">
<i class="fas fa-rocket"></i>
<h3>快速响应</h3>
<p>优化的代码，确保加载速度。</p>
</div>
</section>
</main>
<footer>
<p>© 2025 我的移动网站. 保留所有权利.</p>
</footer>
<script src="script.js"></script>
</body>
</html>
编写 CSS (style.css)
现在来编写样式,重点是移动端优先和响应式。
/* --- 全局样式和移动端默认样式 --- */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
line-height: 1.6;
color: #333;
background-color: #f4f4f4;
}
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* --- 头部样式 --- */
header {
background: #fff; 
