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

HTML

什么是 HTML?

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

HTML 的基本结构是什么?

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 标签,而是一个指令,告诉浏览器如何解析和渲染页面。

为什么需要它?
  1. 触发标准模式:
  • 浏览器在解析 HTML 文档时,会根据 <!DOCTYPE> 声明来决定使用哪种模式来渲染页面。如果 <!DOCTYPE> 存在并且格式正确,浏览器将以标准模式(Standards Mode)渲染页面,这意味着浏览器将严格按照 W3C 规范来解析和渲染 HTML 和 CSS。
  • 如果 <!DOCTYPE> 缺失或格式不正确,浏览器可能会进入怪异模式(Quirks Mode)。在怪异模式下,浏览器会模仿旧版浏览器的行为,以保持对旧网站的兼容性。这种方式可能导致页面布局和样式出现不可预测的问题。
  1. 定义文档类型:
  • 声明指定了文档遵循的 HTML 或 XHTML 版本。例如,HTML5 使用 `` 表示这是一个 HTML5 文档。对于早期的 HTML 和 XHTML 版本, 声明会更加详细,包含 DTD(文档类型定义)的引用,这有助于验证文档结构是否符合特定的标准。
  1. 提高跨浏览器兼容性:
  • 正确的 <!DOCTYPE> 声明有助于确保你的网页在不同浏览器中具有一致的表现。因为不同的浏览器在标准模式下的行为更为一致,而在怪异模式下则可能表现各异。使用标准模式可以减少因浏览器差异导致的问题。
    小结

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

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

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

XML

什么是 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 的基本结构是什么?

html 复制代码
<!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="替代文本" />:图像元素,注意所有空标签必须闭合。
相关推荐
Myli_ing18 分钟前
HTML的自动定义倒计时,这个配色存一下
前端·javascript·html
EterNity_TiMe_28 分钟前
【论文复现】(CLIP)文本也能和图像配对
python·学习·算法·性能优化·数据分析·clip
sanguine__31 分钟前
java学习-集合
学习
lxlyhwl32 分钟前
【STK学习】part2-星座-目标可见性与覆盖性分析
学习
nbsaas-boot32 分钟前
如何利用ChatGPT加速开发与学习:以BPMN编辑器为例
学习·chatgpt·编辑器
CV学术叫叫兽1 小时前
一站式学习:害虫识别与分类图像分割
学习·分类·数据挖掘
我们的五年1 小时前
【Linux课程学习】:进程程序替换,execl,execv,execlp,execvp,execve,execle,execvpe函数
linux·c++·学习
FØund4041 小时前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
一棵开花的树,枝芽无限靠近你2 小时前
【PPTist】添加PPT模版
前端·学习·编辑器·html
VertexGeek2 小时前
Rust学习(八):异常处理和宏编程:
学习·算法·rust