第二篇：结构与XHTML _结构是xhtml表现是-优快云博客

本文链接：https://blog.youkuaiyun.com/xiaolongwang2010/article/details/6437713

本文介绍了XHTML的基本概念及其与Web标准的关系，包括结构化内容的重要性、文档类型定义（DTD）、名字空间的设定、编码声明等内容。此外，还详细讲解了XHTML中常见标签的正确用法和注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第二篇：结构与XHTML 【2011-05-21】

{ 对于网页开发来讲，理解web标准首先要理解结构与表现分离的含义。

v 网页的结构化就是将没有格式的内容用HTML或者XHTML标签分割成不同的部分，使内容更加具有逻辑性、易用性，同时使内容可以由CSS来控制外观表现。

v 网页的内容就是访问者真正想要了解的信息。这里所谓的”真正”是指纯粹的数据和信息本身，而不包含辅助信息(如装饰性图片，修饰文字显示格式的属性如大小、颜色等)。

v 网页是由超文本标记语言(HTML HyperText Markup Language)构成的。”超文本”就是指页面内可以包含图片、链接、音乐、程序等非文字的元素；”标记”就是说它不是程序语言，只是由文字及标记组合而成。

v HTML缺点之一是：手机、PDA、信息家电都不能直接显示HTML。

DTD

v DOCTYPE 是 document type(文档类型)的简写。用来说明本文件用的XHTML或者HTML是什么版本。 DTD是一个XML文档，解释了哪些标签、属性或值对于HTML的一个特定类型是有效的。在XHTML中必须声明文档的类型，以便于浏览器知道正在浏览的文档是什么类型的。并且声明要位于HTML文件的第一行。如：

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional //EN”http://www.w3.org/TR/xhtml/DTD /xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <title></title> </head> <body></body> </html>

{ DOCTYPE 声明不是xhtml文档的一部分，也不是文档的一个了元素，所以没有必要加上结束标签。

v 其中DTD(如 xhtml1-transitional.dtd)叫做文档类型定义，里面包含了文档的规则，浏览器根据定义的DTD来解释页面的标签，并展现出来。xhtml1.0提供了3种DTD声明可供选择。

° 过渡的(Transitional)要求非常宽松的DTD，它充许继续使用HTML4.01的标识。完整代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

° 严格的(Strict )要求严格的DTD，不能使用任何表现层的标识和属性，完整代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

° 框架的(Frameset)专门针对框架页面设计使用的DTD，如果页面中包含有框架，需要采用这种DTD。完整代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

{ 设定一个名字空间(Namespace)

v 通俗地讲，名字空间就是给文档做一个标记，告诉别人这个文档是属于谁的。名字空间声明充许通过一个URL来识别名字空间，只要直接在DOCTYPE声明后面添加如下代码即可：

v 其中XMLns就是XHTML namespace 的缩写。 http://www.w3.org/1999/xhtml并不是指一个具体的文件，仅仅是给它一个名字而已。

v XHTML 是HTML 向XML的过渡，因此它需要符合XML文档规则，因此也需要定义名字空间，又因为XHTML1.0不能自定义标签，所以它的名字空间都相同，就是”http://www.w3.org/1999/xhtml”> 然而 w3.org的校验器不会由于这个属性没有出现在要校验的XHTML文档中而报错，这是因为XMLns=http://www.w3.org/1999/xhtml 是一个固定值，即使文档里没有包含它，它也会自动加上。

v 为了被浏览器正确解释和通过标识校验，所有的XHTML文档都必须声明它们所使用的编码语言。如：

v <meta http-equiv =”Content-Type” content=”text/html ; charset=”GB2312” />这里声明的编码语言是简体中文GB2312.

v 因为XHTML文档是XML的一种。而XML对大小写敏感，所在XHTML中标签名字一定要用小写字母。

v 在XHTML 中属性名也必须是小写，同时属性值必须带上英文双引号

错误	正确
<table WIDTH=100%>	<table width=”100%”>

{ 在XHTML中用id属性代替name属性

v 在HTML4.01中为<a>、<applet>、<frame>、<iframe>、<img>和<map>定义了一个name属性，在XHTML里除了表单<form>和链接<a>，name属性不能使用，应该用id来代替。

错误	正确
<img src=”img/cat.jpg” name=”cat”/>	<img src=”img/cat.jpg” id=”cat”/>

{ 内容文字注意转义

v 由于HTML的标签是以”<>”来表示的，因此”<>”不能直接出现在内容文字中，而需要转义。

v 如下，A型是达不到想要的效果。

A型 <p>段落<pl>段落</p> B型 <p>段落< pl >段落</p>

常用字符转义序列表

英文字符	转义序列	注解
&	&	和
<	<	小于号
>	>	大于号
“	"	双引号
		空格
©	©	版权符
®	®	注册符

xml:lang属性和lang 属性

lang属性指定了元素中内容的语言属性。如果网页定义为XHTML1.1或者XML格式，那么要使用xml:lang属性，因为xml:lang属性是XML中确定语言信息的标准用法。

如果网页使用HTML格式，那么应该同时使用xml:lang和lang属性。

<div lang=”no” xml:lang=”no”>content</div>

此属性常用于<html>标签中，代表整个文档使用了某种语言.

段落(Paragraphs)标签<p>是处理文字时经常用的标签，大段文字一般应该使用<p>标签而且不建议使用<br>换行，因为<p>标签中的文字会自动换行，而且换行的效果要要优于<br>.

<ul>(Unordered Lists ，无序列表) 可以用于导航条。<ol>(Ordered Lists ,有序列表)即有先后顺序的，因此<ol>可以使用在排行榜或者章节列表等地方。无论是<ul>还是<ol>,其内的列表向都是<li>,而<li>是不能脱离<ul>或者<ol>单独存在的，且在<ul>/<o.>与<li>之间不能插入其他的内容。

释义列表(Definiton Lists)是一类事物以及与其相关的解释。释义列表的开始标签是<dl>,每个被解释的事物的开始标签为<dt>，每个解释的内容的开始标签为<dd>。

<dl> <dt>Presentation</dt> <dd>n.介绍、陈述、赠送、表达</dd> <dt>Structure</dt> <dd>n.结构、构造、建筑物</dd> <dd>vt.建筑、构成、组织</dd> </dl>

<em>标签是强调显示为斜体， <strong>标签是重点强调加粗显示。

<table>、<td>、<th>、<caption>和<summary>属性

在XHTML中，表格不应该用来布局，是为了显示表格类的数据，才使用表格。

<table>标签为表格总体定义用，其内包含下面的内容。

<caption>标签为表格标题，<caption>标签必须紧随<table>标签之后，而且每个表格只能定义一个标题，在浏览器内通常这个标题会被居中显示于表格之上。

<tr>标签为表格行，<tr>内包含<th>和<td>标签。

<th>标签为表头单元格，浏览器默认以粗体显示。

<td>标签为单元格。

<thead>标签为表格头部，其内必须有<tr>标签

<tbody>标签为表格主体内容，其内必须有<tr>标签

<tfoot>标签为表格注脚，其内必须有<tr>标签

summar属性为摘要

还可以使用scope属性，它可用于取代headers属性，标记含有表头信息的单元格，其中各数值的内容如下：

row指示当前单元格，为包含当前单元格的行提供相关的表头信息。

col指示当前单元格，为根据当前单元格指定的列提供相应的表头信息。

rowgroup/colgroup 指示当前单元格，为包含当前单元格的其余行/列组提供相应的表头信息。

abbr 用于定义表头单元格中的缩写名，如果没有定义该属性，则将默认单元格内容为节略显示。

实际效果：

° <thead>、<tbody>、<tfoot>标签使得制作者可以对表格中行进行分组。当创建表格时，这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当比较长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每一张页面上，不过，需要注意的是，这个3个标签必须同时出现在<table>内，这样浏览器可以在收到所有数据前呈现页脚。<tbody>标示出了表格的主体部分，当表格很长时。可以使用多个<tbody>标签来分隔表格内容。

{ <q>、<blockquote>、<cite>和cite 属性

° 论坛和博客经常会用引用别人的话，用<q>标签来标记简单的单行引用。不过<q>标签可能会引起一些易用性的问题。不建议使用。对于那些一段或者好几段的长篇引用，就应该使用<blockquote>标签，一段文章不可以直接放在<blockquote>中，引用的内容还必须包含在一个块级元素中，通常是<p>。属性cite既可以与<q>一起使用，也可以和<blockquote>一起使用，用来提供引用内容的来源地址。但是如果用<span>来代替<q>不标记引用内容，那么就不能使用cite属性。

<cite>作为标签，是列举的意思，默认以斜体显示。

<ins>标签表示插入的内容，而<del>标签则表示已被删除的内容，这两个标签搭配使用，用来描述文档中的更新和修正。这两个标签还用添加cite 和 datetime 属性来表明删除的原因和时间。

{ alt属性和title属性

v title属性用来为元素提供额外的说明信息，当鼠标指向具有title属性的元素时，会在鼠标下出现title内设定的文字。

v alt属性为不能显示图像、窗体等用户端指定替换文字。

表单 <form>定义供用户输入的表单 <input>定义输入域 <textarea>定义文本域 <select>定义选择列表 <optgroup>定义选项组

<option>下拉列表中的选项 <button>按钮 <label>标签 <fieldset>定义域 <legend>定义域的标题 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.O Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN" xml:lang="zh-CN"> <head> <title>form</title> </head> <body> <form id="test_form" method="post" action="#"> <fieldset> <legend>用户基本信息</legend> <label for="nikename">昵称：</label> <input name="nikename" id="nikename" type="text" size="16" maxlength="30" /> <label for="age">年龄：</label> <input name="age" id="age" type="text" size="6" maxlength="8" /> <label>密码：</label> <input name="password" id="password" type="password" value="" size="16"/> <input type="radio" name="sex" id="sex_male" value="male"/> <label for="sex_male">男</label> <input type="radio" name="sex" id="sex_female" value="female" /> <label for="sex_female">女</label> </fieldset> <fieldset> <legend>用户联系信息</legend> <label for="address">地址：</label> <input name="address" id="address" type="text" size="32" maxlength="100" /> <p><label for="postalcode">邮政编码：</label> <input name="postalcode" id="postalcode" type="text" size="6" maxlength="6"/> <label for="phone">电话：</label> <input name="phone id="phone" type="text" size="11" maxlength="11" /> </p><p><label for="local">所在地：</label> <select name="locus"> <optgroup label="直辖市"> <option value="1">北京</option> <option value="2">上海</option> <option value="3">成都</option> </optgroup> <optgroup label="省"> <option value="4">四川省</option> </optgroup> </select></p> </fieldset> <input type="submit" name="btn_submit" value="提交" /> <input type="reset" name="btn_reset" value="重置" /> </form> </body> </html>

实际效果：