Coursera 笔记

Module 01 · HTML OverviewHTML 概述

HTML FeaturesHTML5 功能概述

Coursera ↗

学习目标

观看本视频后，您将能够：

  • 列举 HTML5 的一些功能。
  • 描述 文档对象模型（Document Object Model, DOM）树。
  • 解释 何时使用 XML，何时使用 HTML。

HTML5 的功能

HTML5 提供了一系列强大的功能，包括：

  1. 网页分类：可将网页划分为不同的部分。
  2. 数据管理：内置工具支持高效的数据管理。
  3. 绘图与多媒体：支持绘图工具、视频和音频的嵌入与播放。
  4. 跨浏览器应用：便于开发适用于 Web 和 便携设备 的跨浏览器应用。
  5. 灵活性：允许开发互动性更强的现代化网站。
  6. 用户体验：创建接近桌面应用程序的用户体验。
  7. 多平台开发：通过结合 API 能力，支持多平台开发。
  8. 一致性：为用户提供在多个设备和平台上统一的应用程序体验。

HTML5 文档结构

HTML5 示例文档

文档被标记为 HTML 类型时，浏览器会按照 HTML 规则解析内容。

HTML5 文档的核心结构包括以下元素：

  1. !DOCTYPE 声明：
    • 表示文档类型，不属于 HTML 标签。
    • 用于告诉浏览器页面使用的 HTML 版本。
    • 通常放在 HTML 代码的第一行，但并非强制要求。
  2. <html> 标签：
    • HTML 文档的根元素。
    • 包含其他所有 HTML 元素，不包括 !DOCTYPE 声明。
  3. <head> 元素：
    • 包含网页的元信息。
    • 常见内容包括：
      • 标题 (<title>)：例如，Sample page。
      • 脚本 (<script>)。
      • 样式 (<style>)。
      • 样式表链接。
      • 元信息 (<meta>)。
      • 浏览器支持信息与初始化函数。
  4. <body> 元素：
    • 包含网页显示的所有内容。

DOM 树（文档对象模型）

  • 定义：DOM 树是文档的 内存表示形式。
  • 组成节点：
    • DOCTYPE 节点。
    • 元素节点（如标题、段落等）。
    • 文本节点。
    • 注释节点。

浏览器（HTML 用户代理）会解析标记语言并将其转换为 DOM 树。

HTML 与 XML 的比较

XML 格式的 HTML5 文档

  • XML 文档与 HTML 文档类似，但需满足以下要求：
    • 必须包含 XML 声明，例如第一行的 <xml>。
    • 内容类型（Content-Type）必须指定为 XML 媒体类型，例如 application/xml。
    • 由浏览器的 XML 处理器 解析。

HTML 与 XHTML 的选择

选择 HTML 还是 XHTML 取决于应用需求，例如是否使用 XSLT（可扩展样式表转换语言） 创建其他文档。

HTML 与 XHTML 的异同

对比项 HTML XHTML
语法严格性 不严格：允许不匹配的引号、未关闭的元素等。 严格：必须使用小写标签，所有元素需有结束标签。
属性值 可省略或不加引号。 必须有值，且用双引号或单引号包围。
错误处理 遇到语法错误时不会中断解析。 遇到非良构语法时，XML 解析器会停止处理。

总结

在本视频中，您学习了以下内容：

  1. HTML5 的功能：
    • 支持网页分类、数据管理、多媒体工具。
    • 开发跨浏览器应用和多平台应用。
    • 提升用户互动性和体验。
  2. DOM 树：
    • 是文档的内存表示形式，包含 DOCTYPE 节点、元素节点、文本节点和注释节点。
  3. HTML 与 XML 的选择：
    • HTML 语法宽松、适合一般用途。
    • XHTML 更严格、适合需要与其他文档转换的情况。

💡 提示：根据应用场景选择合适的标记语言，充分利用 HTML5 提供的丰富功能！