【学习】【HTML】HTML、XML、XHTML

news2024/11/13 14:29:40

HTML

什么是 HTML？

HTML (HyperText Markup Language) 是一种用于创建和展示网页的标准标记语言。它由一系列的元素组成，这些元素通过标签的形式来告诉浏览器如何显示内容。

HTML 的基本结构是什么？

<!DOCTYPE html>
<html>
<head>
    <title>页面标题</title>
</head>
<body>
    <h1>主标题</h1>
    <p>这是页面的内容。</p>
</body>
</html>

<!DOCTYPE html>：声明文档类型为 HTML5。
<html>：根元素，包裹整个 HTML 文档。
<head>：包含文档的元数据，如标题、字符集、样式表链接等。
<title>：定义文档的标题，显示在浏览器的标签页上。
<body>：包含文档的所有可见内容，如文本、图像、视频等。

什么是 HTML5？

HTML5 是第五个主要版本的 HTML，旨在改进 Web 应用的功能和性能。
引入了许多新特性，如语义化标签、多媒体支持、表单控件、本地存储等。

HTML5 有哪些新特性？

语义化标签：如 <header>, <footer>, <nav>, <article>, <section> 等。
多媒体支持：<audio> 和 <video> 标签。
表单控件：新的输入类型，如 email, date, range 等。
本地存储：localStorage 和 sessionStorage。
Canvas：绘图区域，支持动态绘图和动画。
Web Workers：后台线程，支持复杂计算任务。

HTML 的 DOCTYPE 是什么？为什么需要它？

DOCTYPE 是什么？

是一个文档类型声明（Document Type Declaration），用于告知浏览器页面使用的 HTML 或 XHTML 版本。它位于 HTML 文档的最前面，紧接在任何其他内容之前。并不是一个 HTML 标签，而是一个指令，告诉浏览器如何解析和渲染页面。

为什么需要它？

触发标准模式：

浏览器在解析 HTML 文档时，会根据 <!DOCTYPE> 声明来决定使用哪种模式来渲染页面。如果 <!DOCTYPE> 存在并且格式正确，浏览器将以标准模式（Standards Mode）渲染页面，这意味着浏览器将严格按照 W3C 规范来解析和渲染 HTML 和 CSS。
如果 <!DOCTYPE> 缺失或格式不正确，浏览器可能会进入怪异模式（Quirks Mode）。在怪异模式下，浏览器会模仿旧版浏览器的行为，以保持对旧网站的兼容性。这种方式可能导致页面布局和样式出现不可预测的问题。

定义文档类型：

声明指定了文档遵循的 HTML 或 XHTML 版本。例如，HTML5 使用 `` 表示这是一个 HTML5 文档。对于早期的 HTML 和 XHTML 版本，声明会更加详细，包含 DTD（文档类型定义）的引用，这有助于验证文档结构是否符合特定的标准。

提高跨浏览器兼容性：

正确的 <!DOCTYPE> 声明有助于确保你的网页在不同浏览器中具有一致的表现。因为不同的浏览器在标准模式下的行为更为一致，而在怪异模式下则可能表现各异。使用标准模式可以减少因浏览器差异导致的问题。
小结

声明虽然简单，但在确保网页正确解析和渲染方面起着至关重要的作用。建议在编写 HTML 文档时，始终在文档的最开始处添加一个合适的声明，以确保最佳的兼容性和表现。

HTML 中的 meta 标签有什么作用？

<meta> 标签用于提供文档的元数据，如字符集、描述、关键词等。例如，<meta charset="UTF-8"> 设置字符编码，<meta name="description" content="页面描述"> 提供页面描述。

XML

什么是 XML？

XML 是一种用于存储和传输数据的标记语言。
强调数据的结构化表示，要求所有标签必须正确闭合，并且区分大小写。

XML 的基本结构是什么？

<?xml version="1.0" encoding="UTF-8"?>
<catalog>
    <book id="bk101">
        <author>Gambardella, Matthew</author>
        <title>XML Developer's Guide</title>
    </book>
</catalog>

<?xml version="1.0" encoding="UTF-8"?>：声明文档的版本和字符编码。
<catalog>：根元素，包裹整个 XML 文档。
<book>：子元素，表示一本书。
id="bk101"：属性，提供额外的信息。
<author>、<title>：子元素，表示书的不同属性。

什么是 DTD 和 XML Schema？

DTD (Document Type Definition)：定义了 XML 文档的合法结构。
XML Schema：类似于 DTD，但功能更强大，使用 XML 语法定义，支持数据类型、复杂的数据结构等。

如何解析 XML 数据？

使用 DOMParser 解析器：将整个 XML 文档加载到内存中，形成一个树状结构。

XHTML

什么是 XHTML？

XHTML 是 HTML 的一个更严格的版本，结合了 HTML 和 XML 的特性。
要求所有标签必须闭合，属性值必须用引号括起来，且所有标签名和属性名都必须小写。
XHTML 提供了模块化的设计，允许开发者根据需要选择不同的模块来构建文档。
最终被 HTML5 取代。

XHTML 的基本结构是什么？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>页面标题</title>
</head>
<body>
    <h1>主标题</h1>
    <p>这是页面的内容。</p>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">：声明文档类型为 XHTML 1.0 严格模式。
<html xmlns="http://www.w3.org/1999/xhtml">：根元素，指定命名空间。
<head>：包含文档的元数据，如标题、字符集、样式表链接等。
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />：定义文档的字符编码。
<title>：定义文档的标题，显示在浏览器的标签页上。
<body>：包含文档的所有可见内容，如文本、图像、视频等。
<img src="image.jpg" alt="替代文本" />：图像元素，注意所有空标签必须闭合。