HTML5 简介和基础骨架
一、HTML5 简介
HTML5 是 HTML（超文本标记语言）的第五个主要版本，于 2014 年 10 月由 W3C（万维网联盟）正式发布。它不仅是对 HTML4.01 和 XHTML 的升级，更是一套完整的 Web 技术标准，包含了新的标记语言、应用程序接口（API）和行为规范，旨在简化 Web 开发并增强 Web 应用的功能。
1. HTML5 的核心特点
语义化标签：引入了如 <header>、<footer>、<nav>、<article> 等具有明确语义的标签，使文档结构更清晰，便于搜索引擎解析和开发者维护。
多媒体支持：内置 <video> 和 <audio> 标签，无需依赖第三方插件（如 Flash）即可播放音视频。
图形绘制：提供 <canvas> 元素用于动态绘制图形，支持 2D 和 3D 绘图，以及 SVG 用于矢量图形展示。
本地存储：引入 localStorage 和 sessionStorage，允许在客户端存储大量数据，减少与服务器的交互。
离线应用：通过 Service Worker 和 Manifest 支持离线访问 Web 应用。
表单增强：新增多种表单控件类型（如 date、email、number）和属性，简化表单验证。
地理定位：提供 Geolocation API，允许 Web 应用获取用户的地理位置信息（需用户授权）。
跨文档通信：支持不同域名下的页面之间进行安全通信。
简化的语法：DOCTYPE 声明更简洁，标签不区分大小写，部分标签可省略闭合等。
2. HTML5 与之前版本的主要区别
| 特性 | HTML4/XHTML | HTML5 |
|---|---|---|
| 文档声明 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> | <!DOCTYPE html> |
| 语义标签 | 主要依赖 <div> 加 class 区分结构 | 提供 <header>、<nav> 等语义化标签 |
| 多媒体 | 依赖第三方插件（如 Flash） | 内置 <video>、<audio> 标签 |
| 本地存储 | 主要依赖 Cookie（容量小，安全性低） | 提供 localStorage（持久化）和 sessionStorage（会话级） |
| 绘图功能 | 无原生支持，依赖插件 | 内置 <canvas> 元素，支持动态绘图 |
3. HTML5 的兼容性
目前，所有现代浏览器（Chrome、Firefox、Safari、Edge 等）都已全面支持 HTML5 的核心特性。对于一些老旧浏览器（如 IE9 及以下），部分新特性可能不被支持，但可通过引入 polyfill 库（如 Modernizr）进行兼容处理。
二、HTML5 基础骨架
HTML5 文档的基础骨架是构建所有网页的起点，它定义了文档的基本结构和必要组成部分。以下是完整的 HTML5 基础骨架：
<!DOCTYPE html> <html lang="zh-CN"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>页面标题</title> </head> <body></body> </html>
1. 各部分详解
（1）文档声明：<!DOCTYPE html>
这是 HTML5 的文档类型声明，用于告诉浏览器当前文档使用的是 HTML5 标准。与 HTML4 复杂的声明相比，HTML5 的声明非常简洁，且不区分大小写。
作用：
确保浏览器以标准模式渲染页面，而非怪异模式（Quirks Mode）
避免浏览器使用旧的渲染规则，保证页面在不同浏览器中表现一致
（2）根元素：<html>
<html> 标签是整个 HTML 文档的根元素，所有其他元素都必须包含在其中。
lang="zh-CN" 属性：指定文档的主要语言为简体中文，有助于搜索引擎优化（SEO）和屏幕阅读器等辅助技术的正确解析。
（3）头部：<head>
<head> 标签用于包含文档的元数据（metadata），即描述文档的信息，这些信息不会直接显示在页面上，但对浏览器和搜索引擎非常重要。
（4）字符编码：<meta charset="UTF-8">
该 meta 标签指定文档使用的字符编码为 UTF-8，UTF-8 是一种通用的字符编码，支持几乎所有语言的字符（包括中文、英文、日文等）。
注意：此标签应放在 <head> 标签的最前面，以确保浏览器在解析文档内容前正确识别编码，避免出现乱码。
（5）视口设置：<meta name="viewport" ... >
这是针对移动设备的重要设置，用于控制页面在移动设备上的显示方式。
content="width=device-width, initial-scale=1.0" 的含义：
width=device-width：使页面宽度等于设备的屏幕宽度
initial-scale=1.0：设置页面的初始缩放比例为 1.0（即不缩放）
作用：确保页面在移动设备上正确显示，避免出现页面过大或过小的问题，是响应式网页设计的基础。
（6）页面标题：<title>
<title> 标签用于定义页面的标题，显示在浏览器的标题栏或标签页上。
作用：
帮助用户识别当前页面内容
是搜索引擎优化（SEO）的重要因素，搜索引擎会优先考虑标题内容
（7）主体内容：<body>
<body> 标签包含了网页中所有可见的内容，如文本、图片、链接、表格、表单等。用户在浏览器中看到的所有内容都应该放在 <body> 标签内。
2. 扩展骨架（包含常见元素）
在实际开发中，基础骨架会根据需求扩展，加入更多元素，例如：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="description" content="页面描述信息，用于SEO"><meta name="keywords" content="关键词1, 关键词2, 关键词3"><meta name="author" content="作者名称"><title>我的第一个HTML5页面</title><!-- 引入外部CSS样式表 --><link rel="stylesheet" href="styles.css"><!-- 内部CSS样式 --><style>body {margin: 0;padding: 0;}</style>
</head>
<body><header><h1>网站标题</h1><nav><ul><li><a href="#">首页</a></li><li><a href="#">关于我们</a></li><li><a href="#">联系我们</a></li></ul></nav></header><main><article><h2>文章标题</h2><p>这是一篇文章的内容...</p></article></main><footer><p>© 2023 我的网站 版权所有</p></footer><!-- 引入外部JavaScript文件 --><script src="app.js"></script><!-- 内部JavaScript代码 --><script>console.log("页面加载完成");</script>
</body>
</html>3. 编写 HTML5 代码的注意事项
标签名可以小写（推荐）或大写，但建议保持一致的风格
大多数标签需要成对出现（如 <div></div>），部分自闭合标签（如 <img>、<meta>）可省略闭合符号（在 HTML5 中 <img> 和 <img/> 均可）
属性值可以使用双引号或单引号，推荐使用双引号
语义化标签的使用应符合其含义，如 <nav> 用于导航，<article> 用于独立的文章内容
JavaScript 代码通常放在 </body> 标签之前，或使用 defer/async 属性，确保在 DOM 加载完成后执行
三、总结
HTML5 作为现代 Web 开发的基础，提供了更强大的功能和更简洁的语法，使得构建丰富、交互性强的 Web 应用变得更加容易。掌握 HTML5 的基础骨架是学习 Web 开发的第一步，它为后续学习 CSS 和 JavaScript 奠定了基础。
通过合理使用 HTML5 的语义化标签和新特性，可以创建出结构清晰、性能优良、兼容性好且对搜索引擎友好的网页。