给网页加新装备：HTML5 极速入门手册
70
0
0
一句话先记住：HTML5 = 更语义化的骨架 + 富媒体 + 本地能力，让我们少写插件、多写标签。
1. 新标签，让结构自己说话
| 场景 | 老写法 | HTML5 推荐 | 一句话好处 |
|---|---|---|---|
| 头部/底部 | <div id="header"> | <header> | 读屏器、SEO 直接秒懂 |
| 导航 | <div class="nav"> | <nav> | 搜索引擎权重↑ |
| 正文 | <div class="main"> | <main> | 页面核心区域一目了然 |
| 独立文章 | <div class="article"> | <article> | 可整段转发、离线缓存 |
| 侧边栏 | <div class="sidebar"> | <aside> | 语义化，样式少写 10 行 |
2. 富媒体「三件套」——不写插件也能播
<!-- 音频 -->
<audio controls loop>
<source src="bgm.mp3" type="audio/mpeg">
</audio>
<!-- 视频 -->
<video width="640" height="360" controls poster="cover.jpg">
<source src="trailer.mp4" type="video/mp4">
</video>
<!-- 画布 -->
<canvas id="draw" width="300" height="150"></canvas>
<script>
const ctx = document.getElementById('draw').getContext('2d');
ctx.fillStyle = '#FF6B6B';
ctx.fillRect(20, 20, 100, 60);
</script>- 同一页混用 = 零冲突；样式、事件全靠 CSS/JS，不用 Flash。
- 移动端默认走原生解码，省电。
3. 本地存储 & 离线：把 Cookie 吃不完的放硬盘
// 1. 本地存储（永久，同域）
localStorage.setItem('theme', 'dark');
console.log(localStorage.getItem('theme')); // dark
// 2. 会话存储（标签页关即清）
sessionStorage.setItem('temp', '123');
// 3. 离线清单（让网页断网也能用）
// 在 <html> 加 manifest="site.appcache" 或写 Service Worker容量：localStorage ≈ 5 MB，比 Cookie 的 4 KB 猛了 1000 倍。
4. 新表单控件：少写正则、少被吐槽
<input type="email" placeholder="邮箱" required>
<input type="date">
<input type="range" min="0" max="100" value="50">
<input type="color">- 浏览器自带校验 & 键盘适配，移动端会自动切换合适键盘。
- 样式可改，但别抹掉原生提示，可访问性更友好。
5. 定位 + 图形 API 速览（知道有啥，用再深挖）
// 获取用户坐标
navigator.geolocation.getCurrentPosition(pos => {
console.log(pos.coords.latitude, pos.coords.longitude);
});
// SVG 矢量图，放大 800% 依然锋利
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" fill="#3498db"/>
</svg>6. 起手模板：每次新建文件直接粘
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 新页</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>站点标题</h1>
<nav>
<a href="#content">跳转到内容</a>
</nav>
</header>
<main id="content">
<article>
<h2>文章标题</h2>
<p>正文，可以嵌 audio / video / canvas …</p>
</article>
</main>
<aside>
<p>侧边栏 or 广告位</p>
</aside>
<footer>
<p>© 2024 你的大名</p>
</footer>
<script src="main.js"></script>
</body>
</html><!DOCTYPE html>不区分大小写，浏览器直接进标准模式。viewport写死，移动端不会默认缩放。
7. 一句话总结
HTML5 把「结构、媒体、存储、图形」做成原生标签和 API，让我们写更少的补丁、跑更顺的页面。
记住：先找语义标签，再考虑 Canvas/SVG，最后上脚本——你的代码已经赢了一半。
0
快来点个赞吧
发表评论
评论列表