DOCTYPE和XHTML的相关认识

DOCTYPE 是一种文档类型定义,它使得浏览器知道文档使用哪种规范解析。在 HTML 中,DOCTYPE 是必须的,否则浏览器将无法正确显示页面。而在 XHTML 中,DOCTYPE 不仅是必须的,还与 XHTML 版本紧密相关。

常用的 DOCTYPE 有以下几种:

  • HTML5:<!DOCTYPE html>
  • HTML 4.01:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  • XHTML 1.0:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  • XHTML 1.1:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

一般情况下,我们推荐使用 HTML5 作为 DOCTYPE,因为它最简洁、最具可读性,并且支持最新的 HTML 特性。在任何情况下,必须确保 DOCTYPE 是正确的。

XHTML 是一种基于 XML 的 HTML 版本,它更严谨、更标准化,因此更容易与其他 XML 应用程序集成。XHTML 要求文档严格遵循 XML 规范,必须有正确的 DOCTYPE,不能包含任何错误的标签或属性,所有标签必须要有相应的结束标签。XHTML 支持 XML 命名空间,并使用更多的小写字母。

以下是两个示例说明:

示例 1:HTML5

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>HTML5 DOCTYPE 示例</title>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

这是一个 HTML5 文档,它使用最简单的 DOCTYPE,只需指定 <!DOCTYPE html>,然后就可以使用 HTML5 特性,比如语义化标签、音视频元素、Canvas 元素等等。

示例 2:XHTML 1.0

<!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" xml:lang="en" lang="en">
  <head>
    <title>XHTML 1.0 DOCTYPE 示例</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

这是一个 XHTML 1.0 文档,它必须有正确的 DOCTYPE,使用严格模式,所有标签和属性必须要符合 XML 的规范。XHTML 还需要在文档头指定 XML 命名空间 (xmlns="http://www.w3.org/1999/xhtml")和 XML 语言 (xml:lang="en")。这段示例代码不仅是 XHTML 1.0 严格模式的示例,也是 XML 的示例,XML 是一种通用的标记语言,广泛应用于数据存储和传输。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:DOCTYPE和XHTML的相关认识 - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • vue.js实现标签页切换效果

    下面我将为大家介绍一下如何用 Vue.js 实现标签页切换效果的完整攻略。 1. 创建标签页组件 首先,我们需要创建一个标签页组件。具体实现可以使用 Vue.js 的单文件组件形式进行开发。标签页组件需要包含一个选项卡和对应的内容。 <template> <div> <ul> <li v-for="(tab…

    css 2023年6月10日
    00
  • CSS 实现各种 Loading 效果附带解析过程

    让我来详细讲解“CSS 实现各种 Loading 效果附带解析过程”的完整攻略。 什么是 Loading 效果? Loading 效果指的是在 Web 应用程序加载数据或执行长时间任务时,网页会显示一种状态,以表示正在加载系统或应用程序。例如,百度、谷歌、淘宝等网站在页面加载时会出现一个菊花图或一个圆圈不断旋转的动画。 怎么实现各种 Loading 效果? …

    css 2023年6月10日
    00
  • JavaScript中无法通过div.style.left获取值的解决方法

    当我们想要获取页面元素的某个样式属性值时,通常可以使用元素对象的style属性来获取。例如,我们可以使用div.style.left获取div元素的左侧偏移量。但是,在JavaScript中,我们有时会遇到无法通过这种方式获取元素属性值的情况。这种情况通常发生在我们想要获取CSS样式表中定义的样式属性值时,例如异步加载的CSS文件渲染完成后,我们想要获取其中…

    css 2023年6月10日
    00
  • 详解Vue.js3.0 组件是如何渲染为DOM的

    下面就来详细讲解一下Vue.js3.0 组件是如何渲染为DOM的攻略。 组件渲染说明 在 Vue.js 中,组件是一个独立的单元,可以复用和拆分,使得我们的代码更加模块化和易于维护。Vue.js3.0 的组件渲染过程主要包含以下几个步骤: 组件的准备阶段:Vue.js会读取组件模板中的标签和属性,解析出组件的结构和属性配置; 组件的实例化阶段:Vue.js …

    css 2023年6月10日
    00
  • javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等

    获取和判断浏览器窗口、屏幕、网页的高度、宽度等是前端开发基础中非常重要的知识点,在网站开发中常常会使用到。JavaScript提供了多种方式来获取这些值,下面是这些方法的详细讲解: 获取浏览器窗口的高度和宽度 获取浏览器窗口的高度和宽度可以使用window.innerHeight和window.innerWidth这两个属性来实现,代码如下: console…

    css 2023年6月10日
    00
  • CSS Sprites 圆角制作教程

    CSS Sprites 圆角制作教程 CSS Sprites是一种优化Web页面性能的技术,可以将多个小图片合并成一张大图片,减少HTTP请求次数,从而提高页面加载速度。本攻略将详细讲解如何使用CSS Sprites制作圆角效果,包括基本原理、制作方法和示例说明。 1. 基本原理 CSS Sprites的基本原理是将多个小图片合并成一张大图片,然后使用CSS…

    css 2023年5月18日
    00
  • Angular实现表格自滚动效果

    下面我会详细讲解如何使用Angular实现表格自滚动效果的完整攻略。 1. 准备工作 在开始之前,需要确保环境已经搭建好,包括Angular的开发环境和依赖。然后,需要安装两个依赖:@angular/cdk和@angular/material,这两个依赖提供了表格组件中需要的许多特性。 2. 创建表格组件 首先,需要创建一个表格组件,用于展示数据和实现自滚动…

    css 2023年6月10日
    00
  • JS随机漂浮广告代码具体实例

    下面我来详细介绍一下“JS随机漂浮广告代码”的具体实例攻略。 什么是JS随机漂浮广告代码 “JS随机漂浮广告代码”指的是使用JavaScript编写的一段代码,用于实现网页上随机漂浮的广告效果。随机漂浮广告效果是指广告图片在页面中不断地上下、左右移动,突出广告的宣传效果。 实现随机漂浮广告的步骤 实现随机漂浮广告的步骤主要包括以下几个方面: 设计广告图片 编…

    css 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部