1.1 HTML与XHTML


网页学习网《CSS教程布局实例》教程假设读者已经对HTML有所掌握，如果读者了解以下HTML标记中大多数标记的含义，就可以开始学习本教程。

<html>、<head>、<title>、<body>、<p>、<img>、<a>、<div>、

<ul>、<ol>、<li>、<style>、<table>、<tr>、<td>、<form>、<input>、<br>、<hr>。

如果读者还不清楚上面这些标记的含义，请先跟随网页学习网《HTML教程入门经典》，学习一下最基础的知识，然后再开始学习本教程。

此外，本教程将不再占用篇幅抽象地讲解使用css布局所具有的优势，相信大部分读者对此已经有所了解。如果对这个问题感兴趣。可访问http://www.lodidance.com/html/jc/552.html，清晰地阐速了从传统布局方式到css布局的采龙去脉，并给出比较深入的分析。

本章将就一些在工作中，会遇到的实际问题进行讲解，作为学习css设计的必备基础。

HTML与XHTML是一种语言还是两种语言？基本上可以认为，它们是一种语言的不同阶段，有点类似于文言文和白话文之间的关系。因此它们也经常被写作(X)HTML。下面首先从它们的渊源和区别开始本教程的讲解：

一、追根溯源

(X)HTML是所有上网的人每天都离不开的基础，所有网页都是使用(X)HTML编写的。随着网络技术日新月异的发展．HTML也经历了不断的改进。可以认为XHTML是HTML的“严谨版”。

HTML在初期，为了它更广泛地被接受，大幅度放宽了标准的严格性，例如标记可以不封闭，属性可以加引号，也可以不加引号，等等，导致出现了很多混乱和不规范的代码。这
显然不符合标准化的发展趋势，影响了互联网的进一步发展。

为此，相关规范的制订者——W3C组织．一直在不断地努力，逐步推出新的版本规范。从HTML到XHTML．大致经历了以下几个版本。

◆ HTML 2.0: 于1995年l 1月发布。

◆ HTML 3.2: 于1996年1月14日发布．

◆ HTML 4.0: 于1997年12月18日发布。

◆ HTML 4.01（微小改进）: 于1999年12月24日发布，

◆ XHTML 1.0: 于2000年1月发布，后叉经迂修订于2002年8月1日重新发布。

◆ XHTML 1.1: 于2001年5月31日发布。

◆ XHTML 2.0: 正在制定中。

在正式的标准序列中，没有HTML1.0版，这是因为在最初阶段．各个机构都推出了目己的方案，没有形成统一的标准。因此．W3C组织发布的HTML 2.O是形成标准以后的第一个正式规范。lodidance.com

这些规范实际上主要是为浏览器的开发者阅读的，因为他们必须了解这些规范的所有细节。而对于网页设计师来说，并不需要了解规范之间的细微差别，这与实际工作并不十分相关。因此，网页设计师通常只要知道一些大的原则就可以了。而且这些规范的文字也都比较晦涩，并不易阅读。当然．如果设计师真的能够花一些时间把HTML和css的规范仔细通读一遍，将会有巨大的收获。因为这些规范是所有设计师的“圣经”。

知识：W3C组织就是World Wide Web Consortium（全秋万维网联盟）的简称。W3C组织创建于l994年．研究Web规范和指导方针，致力于推动Web发展，保证各种Web技术能很好地协同工作。W3C的主要职责是确定来来万维网的发展方向，并且制定相关的建议（Recommendation．由W3C是一个民间组织，没有约束性，因此只提供建议）。

HTML 4.01规范建议（HTML 4.01 Specification Recommendation）就是由W3CF制定的。它还负制CSS、XML、XHTML和MathML等其他网络语言规范。

二、DOCTYPE（文档类型）的含义与选择

从Dreamweaver MX 2004版开始，在使用Dreamweaver新建一个网页文档的时候，默认情况下生成的基本网页代码是这样的：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <title>无标题文档</title>
  7. </head>
  8. <body>
  9. </body>
  10. </html>

可以看到最上面有两行关于“DOCTYPE”（文档类型）的声明，它就是告诉浏览器，使用哪种规范来解释这个文档中的代码。

设计师可以在新建文档的时候选择使用哪种文档类型。在Dreamweaver的新建文档对话框中，在右下方有—个文档类型下拉框，如图1所示。


图1 在Dreamweaver中选择文档类型

对于HTML 4.01和XHTML 1.0分别对应于一种严格（Strict）类型和一种过渡（Transitional）类型。过渡类型兼容以前版本定义的，而在新版本已经废弃的标记和属性。严格类型则不兼容已经废弃的标记和属性。

注意：目前，建议读者使用XHTML 1.O transitional（XHTML 1.0过渡类型），这样设计师可以按照XHTML的标准书写符合Web标准的网页代码。司时在一些特蛛情况下还可以使用传统的做法。

三、XHTML与HTML的重要区别

尽管目前浏览器都兼容HTML．但是为了使网页能够符合标准，设计师应该尽量使用XHTML规范来编写代码，需要注意以下事项。

1.在XHTML中标记名称必须小写

在HTML中，标记名称可以大写或者小写。例如，下面的代码在HTML中是正确的。

  1. <BODY>
  2. <P>网页学习网(lodidance.com)</P>
  3. </BODY>

但是在XHTML中，则必须写为：

  1. <body>
  2. <p>网页学习网(lodidance.com)</p>
  3. </body>

2.在XHTML中属性名称必须小写

HTML属性的名称也必须是小写的。例如，在XHTML中下面的代码的写法是错误的。

  1. <IMG SRC="image.gif" WIDTH="200" HEIGHT="100" BORDER="0">

正确的写法应该是：

  1. <img src="image.gif" width="200" height="100" border="0">

3.在XHTML中标记必须严格嵌套

HTML中对标记的嵌套没有严格的规定。例如，下面的代码在HTML中是正确的。

  1. <b><i>这行文字以粗体倾斜显示</b></i>

然而在XHTML中，必须改为：

  1. <b><i>这行文字以粗体倾斜显示</i></b>

此外，经常被忽略的是对列表标记的嵌套写法。例如，下面的写法在XHTML中是错误的。

  1. <ul>
  2. <li>咖啡</li>
  3. <li>茶
  4. <ul>
  5. <li>红茶</li>
  6. <li>绿茶</li>
  7. </ul>
  8. <li>牛奶</li>
  9. </ul>

正确的写法是：

  1. <ul>
  2. <li>咖啡</li>
  3. <li>茶
  4. <ul>
  5. <li>红茶</li>
  6. <li>绿茶</li>
  7. </ul>
  8. </li>
  9. <li>牛奶</li>
  10. </ul>

4.在XHTML中标记必须封闭

在HTML规范中，下列代码是正确的。

  1. <p>网页学习网
  2. <p>lodidance.com

上述代码中，第2个<p>标记就意味着前一个<p>标记的结束，但是在XHTML中，这是不允许的，二必须严格地使标记已封闭，正确写法如下所示。

  1. <p>网页学习网</p>
  2. <p>lodidance.com</p>

5.在XHTML中，即使是空元素的标记也必须封闭

这里说的空元素的标记，就是指那些<img>，<br>等不成对的标记，它们也必须封闭，例如下面的写法是错误的。

  1. 换行<br>
  2. 水平线<hr>
  3. 图像<img src="happy.gif" alt="欢迎笑脸">

正确的写法应该是：

  1. 换行<br />
  2. 水平线<hr />
  3. 图像<img src="happy.gif" alt="欢迎笑脸" />

6.在XHTML中属性值用双引号括起来

在HTML中，属性可以不必使用双引号，例如：

  1. <p class=subTitle>

而在XHTML中，必须严格写作：

  1. <p class="subTitle">

7.在XHTML中属性值必须使用完整形式

在HTML中，一些属性经常使用简写方式设定属性值，例如：lodidance.com

  1. <input disabled>

而在XHTML中，必须完整地写作：

  1. <input disabled = "true">

8.在XHTML中，应该区分“内容标记”与¨结构标记”

例如<p>标记是一个内容标记，而<table>标记是结构标记，因此不允许将<tabIe>标记置于<p>内部。而如果将<p>标记置于<td></td>之间，则是完全正确的。

有时这种错误不容易被注意到，在Dreamweaver中也得不到提示。但是在微软公司新推出的网页制作软件Expression Web中。则会给出明确的提示，如图2所示。


图2 在Expression Web中提示错误

在<table>标记的下方出现红色波浪线，表示存在错误。将鼠标指针移动到<table>标记上，则会出现提示文字“在XHTML 1.0 Transitional中，标记<p>不能包含标记<table>”。有兴趣的读者可以尝试一下这个新的网页设计软件。

点击下载第1~7章CSS教程资源 返回《CSS教程布局之道》教程列表
编辑：网页学习网
本文地址:http://www.lodidance.com/css/jc/652.html

1.1 HTML与XHTML,布布扣,bubuko.com

时间： 2024-10-30 13:57:56

1.1 HTML与XHTML的相关文章

XHTML

XHTMLXHTML基本语法规则1,元素类容<img>:定义一个图像元素,其属性src告诉浏览器该图像的来源例:<img src="123.jpg"> 2,元素类容<dd>:给<img>图像元素一个解释例:<dd>这是一个女孩子的照片</dd> 3,元素类容<h1>:关键字的级别,定义标题大小(1最大,6最小)例:<h1>学生管理</h1> 4,元素类容<p>:段落标

XHTML学习要点

目标 掌握XHTML语法,能正确书写出符合规则的文档. 要点 基本概念,与HTML有什么不一样 基本语法规则: XHTML 文档必须拥有一个根元素 标签名.属性名称必须小写 属性值必须加引号 属性不能简写 !DOCTYPE不可缺少 不允许空标签,<hr> , <br> 和 <img>应被替换为<hr />, <br /> 和 <img />. 除!DOCTYPE外,其他标签必须要被关闭. 非空标签必须使用结束标签. 空标签也必须被关闭

100 个高质量的XHTML/CSS 模板

网上的免费 Web 模板多如牛毛,良莠不齐,这组模板是 Smashing Magazine推荐的,全部是基于 XHTML/CSS 的.在 W3C 标准愈趋重要的时代,自觉使用最规范的代码可以让您的设计更经得起时间的考验.XHTML 在代码上的要求比 HTML 更规范,而 CSS,几乎就是现代 Web 设计的代名词.这100个 XHTML/CSS 模板分三组推出.这是第一组,其它部分请参考第二组,第三组. Package | Registration is necessary. Consultan

获取当前scrollTop和scrollLeft，兼容XHTML

1 // JavaScript Document 2 /* 用法与测试: 3 var myScroll = getScroll(); 4 alert("myScroll.scrollTop:" + myScroll.scrollTop); 5 alert("myScroll.scrollLeft:" + myScroll.scrollLeft); 6 */ 7 function getScroll(){ 8 var scrollTop,scrollLeft; 9 s

HTML/htm，SHTML/shtm，XML，XHTML

HTML/htm 英文全称是Hyper Text Markup Languge,中文全称是超文本标记语言:是标准通用标记语言下的一个应用,一种规范,一种标准,它通过标记符号来标记要显示的网页中的各个部分.HTML结构包括head,body两大部分,其中头部描述浏览器所需的信息,主体则包含要显示在网页上的具体内容.从发布至今,HTML经历了5次改版. 特点: 1.  简易性:HTML版本升级采用超集方式,从而更加灵活方便: 2.  可扩展性:HTML的广泛应用带来了加强功能,增加标识符等要求,HT

web—第三章XHTML

web—第三章XHTML 又是一周 我们学的了做表单:一开始我以为表单是表格.但结果:表单是以采集和提交用户输入数据的,这样讲很迷,说简单点就是登陆端.比如:Facebook.twitter.Instagram .非常强大的是表单不仅仅可以做登录端,注册.做一些像我们在网上购买东西选择数量或者是点菜的时候选票等等都可以. 首先最开始,就是理解表单是什么东西:表单的作用是什么? 其实很简单:先从表单的作用说起,表单的主要作用在于网页上提供一个图形用户界面,当用户输入正确的用户名和密码后,输入的数据

XML与XHTML

什么是XML XML的基本格式 XML的定义文档 HTML5的文档定义 XHTML1.0的文档定义 XHTML1.0标记格式 12.1 什么是XML XML中文翻译为可扩展标记语言,顾名思义,它比HTML的优势: 延伸性 简单易懂 12.2 XML的基本格式 <?xml version="1.0" encoding="gb2312"?> <我的家人> <爸爸> <姓名>张三</姓名> <年龄>5

HTML与XHTML的区别

为什么要使用XHTML? 我们认为万维网上的许多页面都包含着糟糕的 HTML 代码. 下面的 HTML 代码仍然可以工作得很好,即使它没有遵守 HTML 规则: <html> <head> <title>This is bad HTML</title> <body> <h1>Bad HTML </body> XML 是一种标记化语言,其中所有的东西都要被正确的标记,以产生形式良好的文档. XML 用来描述数据,而 HTML

&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;详解

每次写html页面开头基本都会加上这么两行: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> ************************

xhtml和css概述

Xhtml和css概述 1.html的过渡到xhtml html与xhtml不是两种语言,它们是一种语言的不同阶段,有点类似于文言文和白话文之间的关系.因为网络技术的日新月异,html的不断改进,所以说xhtml是html的“严谨版”. 详情了解html介绍:http://baike.baidu.com/link?url=XZg9Djt-snnwAICod0SKPbXVhm7BqfTrnEUE2As9E201oL8X7mGbLp7hIsXGV5M6hkcb7gBqWY2NTF-d3dY6Za (