HTML 向 XHTML1.0 兼容性指导

HTML 向 XHTML1.0 兼容性指导主要包括以下几个方面:

1. DOCTYPE 声明

在 XHTML 中,需要在文档开头声明 DOCTYPE,HTML 4.01 的 DOCTYPE 声明如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

而在 XHTML 中,DOCTPYE 声明为:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

可以看到,两者的主要区别就是 DOCTYPE 的声明方式和文档类型,因此在将 HTML 转化为 XHTML 时,需要做出相应的修改。

2. 标签必须正确嵌套

在 XHTML 中,标签必须正确嵌套,即每次打开标签后必须在合适的位置关闭该标签,否则会导致页面展示异常或者无法正常显示。举例说明:

<!--错误的嵌套方式-->
<p><em>这是一段有意思的<em>文字</p></em>
<!--正确的嵌套方式-->
<p><em>这是一段有意思的<em>文字</em></em></p>

3. XHTML 标签必须小写

所有 XHTML 的标签都必须是小写的,而在 HTML 中大小写不敏感,举例说明:

<!--错误的大小写-->
<HTML>
    <HEAD>
        <TITLE>XHTML 指南</title>
    </HEAD>
    <BODY>
        <H1>这是一篇XHTML指南</h1>
        <p>在这个指南当中,我们将会学习如何将HTML转化为XHTML1.0</p>
    </BODY>
</HTML>
<!--正确的大小写-->
<html>
    <head>
        <title>XHTML 指南</title>
    </head>
    <body>
        <h1>这是一篇XHTML指南</h1>
        <p>在这个指南当中,我们将会学习如何将HTML转化为XHTML1.0</p>
    </body>
</html>

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:HTML 向 XHTML1.0 兼容性指导 - Python技术站

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

相关文章

  • Bootstrap禁用响应式布局的实现方法

    关于“Bootstrap禁用响应式布局的实现方法”,我将为您提供一份完整攻略,详细介绍实现步骤和代码示例。 什么是响应式布局 在进入具体实现方法之前,我们先了解一下什么是响应式布局。 响应式布局是指通过CSS的媒体查询、弹性盒子等技术,让网页能够根据不同的屏幕尺寸自动调整展示效果,为不同设备提供优化的用户体验。在Bootstrap中,响应式布局是默认开启的,…

    css 2023年6月11日
    00
  • 纯css3实现照片墙效果

    下面是详细讲解“纯CSS3实现照片墙效果”的攻略。 1. 实现思路 照片墙效果可以用CSS3的grid和flex来实现。其中,grid更适合实现较为复杂的照片墙效果,而flex则更适合实现简单的照片墙效果。下面,我们将分别讲解两种方法。 2. 使用grid实现照片墙效果 2.1 HTML结构 首先,我们需要创建一个div容器来包裹整个照片墙。然后,我们在容器…

    css 2023年6月11日
    00
  • CSS教程:建议font-size使用em

    下面是讲解“CSS教程:建议font-size使用em”的完整攻略。 一、什么是em? em指的是相对于父元素(或祖先元素)的字体大小的单位。比如,如果父元素的字体大小是16px,那么1em就是16px。如果它的父元素字体大小改变为20px,那么1em就是20px。 二、为什么建议使用em作为font-size的单位: 1.相对于px,em可以自适应页面大小…

    css 2023年6月9日
    00
  • 用css margin去掉横排图片之间的间距

    首先需要明确一点,图片之间存在间距的原因通常是由于其默认的外边距(margin)和内边距(padding)引起的。接下来,提供以下两种方法可以去掉横排图片之间的间距。 方法一:设置图片的display属性 将图片的display属性设置为“inline-block”,然后设置其外边距(margin)为负值就可以去掉图片之间的间距了。比如: img { dis…

    css 2023年6月10日
    00
  • css 解决英文字符与阿位伯数字自动换行

    为了解决英文字符与阿拉伯数字的自动换行问题,我们可以使用word-wrap和word-break属性来实现。word-wrap属性定义了在何处断开单词或者长单词换行;word-break属性则定义了在何处断开一个单词来实现自动换行。 具体来说,我们可以使用以下代码来实现自动换行: word-wrap: break-word; // 当单词太长时,自动换行,防…

    css 2023年6月10日
    00
  • CSS实现两列布局的N种方法

    以下是“CSS实现两列布局的N种方法”的详细攻略: 一、使用浮动实现两列布局 首先,需要在HTML结构中创建两个div,用来表示左右两个列,例如: <div class="left-column">左侧内容</div> <div class="right-column">右侧内容&l…

    css 2023年6月10日
    00
  • 第一次接触神奇的Bootstrap网格系统

    第一次接触神奇的Bootstrap网格系统 Bootstrap是一款流行的前端开发框架,其中最具特色的功能莫过于它的网格系统了。本文将详细介绍如何利用Bootstrap网格系统进行前端页面布局。 什么是Bootstrap网格系统 Bootstrap网格系统是一种通过12个栅格列来进行页面布局的系统。栅格列可以覆盖整个页面宽度,也可以将页面分成多个部分。 默认…

    css 2023年6月11日
    00
  • css解决font-weight:blod跳动问题的解决

    下面是“CSS解决font-weight:bold跳动问题的解决”的完整攻略。 问题描述 在CSS中,我们可以使用font-weight属性来设置文本的字体粗细程度,其中取值为bold时表示加粗。但是当我们在设置了bold属性后,文本常常会出现跳动的问题,这是因为字体加粗导致了文本框的大小变化,从而导致页面重排。 解决方案 使用font-weight: 60…

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