【技术专题】HTML5 网页技术 - HTML5简介 & HTML5 文档结构

大家好，我是Java1234_小锋老师，最近更新《一天学会 HTML5 视频教程(无废话版) 》专辑，感谢大家支持。

本课程主要介绍和讲解 HTML5简介，文档结构，文本与排版标签，链接与图片，列表标签，表格标签，表单基础以及增强，容器与页面结构基础，语义化标签，音频与视频，Canvas 基础以及动画入门，SVG 基础，Web Storage 本地存储，文件 API，拖放 API，地理定位 API，Web Workers 入门。

视频教程+课件+源码打包下载：

链接：https://pan.baidu.com/s/1o-zRfndo1HHrS_uFroOiCw?pwd=1234

提取码：1234

HTML5（在第二阶段目录里）

HTML5简介

一、HTML5 是什么

HTML5 是 HTML 的第五个主要版本，也是现代 Web 开发的基础标准之一。它由 W3C 与 WHATWG 等组织推动，W3C 于 2014 年发布正式推荐标准。如今 HTML5 更多由 WHATWG 以 Living Standard 形式持续维护。

严格来说，HTML5 指新版 HTML 规范；但在实际开发中，人们常把与它配套的 CSS3、JavaScript API、浏览器存储、多媒体、图形、通信等技术统称为"HTML5 技术"。它的核心目标是：减少对 Flash 等插件的依赖，提升语义化与可访问性，支持音视频和图形，支持离线与本地存储，并让 Web 应用更接近原生应用体验。

二、HTML5 与 HTML4 / XHTML 的区别

HTML4 是基于 SGML 的早期 HTML 标准，XHTML 则是 HTML4 的 XML 序列化版本，要求严格 XML 语法。HTML5 不再基于 SGML，语法更宽松，同时定义了标准化的浏览器解析算法。

主要区别可以概括为：

文档类型：HTML4 有多种 DTD，XHTML 需要 XML 声明和 DTD；HTML5 统一为极简的 doctype html。
语法严格度：HTML4 较宽松，XHTML 非常严格，标签必须闭合、属性必须加引号、大小写敏感；HTML5 较宽松，标签和属性不区分大小写，部分标签可省略闭合。
MIME 类型：XHTML 推荐以 XML 方式解析；HTML5 通常以 text/html 解析，兼容性更好。
语义标签：HTML4 和 XHTML 主要依赖 div、span；HTML5 新增 header、nav、main、article、section、aside、footer 等语义标签。
多媒体：HTML4/XHTML 播放音视频通常依赖插件；HTML5 原生支持 audio、video。
表单能力：HTML5 新增 email、url、number、range、date、color 等输入类型，以及 required、placeholder、pattern 等属性。
API 能力：HTML5 提供 Canvas、Web Storage、Web Workers、WebSocket、Geolocation 等大量 API；HTML4/XHTML 这方面非常有限。
废弃标签：HTML5 废弃 font、center、frame、frameset、applet、big、strike 等，鼓励用 CSS 和语义结构替代。
错误处理：HTML4/XHTML 对错误解析不够统一；HTML5 定义了详细解析规则，使不同浏览器行为更一致。

三、HTML5 新特性地图

可以按领域理解 HTML5 的新特性地图：

语义与结构：header、nav、main、article、section、aside、footer、figure、details、summary 等。
表单与交互：新输入类型、约束验证、datalist、progress、meter、dialog、拖放。
多媒体：audio、video、source、track、字幕、媒体控制 API。
图形与动画：Canvas 2D、WebGL、SVG、CSS3 动画、过渡和变换。
存储与离线：localStorage、sessionStorage、IndexedDB、Service Worker、Cache API、PWA。
通信能力：WebSocket、Server-Sent Events、WebRTC、Fetch、XMLHttpRequest 2。
性能与并发：Web Workers、requestAnimationFrame、History API、Page Visibility。
设备与系统：Geolocation、设备方向、摄像头、通知、File API、拖放。
样式与布局：CSS3、Flex、Grid、媒体查询、自定义字体、圆角、阴影、渐变。
可访问性与国际化：语义标签、lang 属性、ARIA、表单标签与键盘可访问性。

这些能力并不是孤立存在，而是共同构成了现代 Web 应用的基础。

四、HTML5 HelloWorld实现

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Hello World</title>
</head>
<body>
  <h1>Hello, World!</h1>
</body>
</html>

HTML5 文档结构

一个完整的 HTML5 文档基本结构如下：

html 复制代码

<!DOCTYPE html>
<!-- 这是一个 HTML 注释：声明文档为 HTML5 -->
<html lang="zh-CN">
<head>
  <!-- 指定字符编码，防止中文乱码 -->
  <meta charset="UTF-8">

  <!-- 页面标题，显示在浏览器标签页上 -->
  <title>我的第一个 HTML5 页面</title>
</head>
<body>
  <!-- 以下是页面中可见的内容 -->
  <h1>你好，HTML5！</h1>
  <p>这是一个 HTML5 文档结构示例。</p>
</body>
</html>

逐项说明：

<!DOCTYPE html>
- 文档类型声明，必须放在 HTML 文档最前面。
- 告诉浏览器：这是一个 HTML5 文档，请按 HTML5 标准解析。
- 它不是 HTML 标签，不需要闭合。
<html>
- 整个 HTML 文档的根元素。
- 所有内容都放在 <html> 和 </html> 之间。
- lang="zh-CN" 表示页面语言是中文，有利于搜索引擎和屏幕阅读器识别。
<head>
- 文档头部，用来存放页面的元数据。
- 这些内容通常不会直接显示在页面正文中。
- 常见内容有：meta、title、link、style、script 等。
<title>
- 定义网页标题。
- 会显示在浏览器标签页、收藏夹以及搜索结果中。
- 每个 HTML 页面都应该有一个 <title>。
<body>
- 页面主体部分。
- 所有用户能看到的页面内容都放在这里，例如标题、段落、图片、链接、列表、表格、表单等。
注释
- HTML 注释写法：
  html 复制代码
```

```
- 注释不会显示在页面上，只用于给开发者说明代码。
- 注释不能嵌套，例如不能写：
  html 复制代码
```
 -->
```

整体结构可以理解为：

html 复制代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>页面标题</title>
  </head>
  <body>
    页面可见内容
  </body>
</html>

简单记：

<!DOCTYPE html> 声明类型，<html> 是根，<head> 管元数据，<body> 管显示内容，<meta charset> 管编码，<title> 管标题， 写注释。

【技术专题】HTML5 网页技术 - HTML5简介 & HTML5 文档结构

视频教程+课件+源码 打包下载 ：

HTML5简介

一、HTML5 是什么

二、HTML5 与 HTML4 / XHTML 的区别

三、HTML5 新特性地图

四、HTML5 HelloWorld实现

HTML5 文档结构

视频教程+课件+源码打包下载：