XHTML - Super Cool!

今天试着用 XHTML 写了一个 hello, world 级别的简单页面。感觉味道好极了!

我是初次接触 XHTML,现在对它的认识是:它可被看做一种较高级的 web 页面开发模式,规范,高效。

我所使用的 DTD 是 XHTML 1.0 Transitional,所以,很多以前的 HTML 3.x/4.x 标签和属性还能继续使用。真正写起页面来,并没有多大陌生感。使用 Dreamweaver MX 2004 来做代码编辑器,更是减少了范错几率。

一点体会:

Web 重在呈现内容,呈现内容则重在排版。我过去总是用 table 标签来排,很规整,并且感觉严谨。而 XHTML 的开发模式中,使用 div 来排版,一个个层可以随意的绝对定位,相当自由。看上去,和使用 table 相比,页面代码简洁清晰了很多倍!我再看那密密麻麻的 tr、td 时已经觉得难闻了……

CSS 变得更加重要。我以前写页面,CSS 的作用仅仅是规定一下字体,至多再设置一下“平面文本框/按钮”。排版中最重要的“位置”,都是用 table 来写,<td width="20%" align="center"... 位置是固定的方方块块,不能交叉和覆盖;而用 XHTML 来写,div 的位置全部通过 CSS 来确定,position: absolute; left: 20%; top: 40px;... 相对于 table,div 可以出现在任何位置(想起了我大一时第一次用 DW 2.0,把 layer 到处拖~)因此自然能构造比 table 复杂数倍的版面,而代码却异常的少。独立的 CSS 文件可被缓存,整个页面的 size 也就小了。

显然 XHTML 的内涵是丰富的,不过,就入门来讲,只需要注意下面这些要点,就能比较快的从 HTML 转过来(当然,HTML 你也要熟悉先):

1. 所有标签都必须用小写字母,<div>, not <DIV>

2. 标签必须成对:有开始和闭合:<div>...</div>,HTML 中的单个标签,如 <br>、<img> 就需要写成 <br />、<img />。

3. 属性值必须写在双引号中,如 <div id="SomeDiv" />

4. 标签不能交叉嵌套。

5. “&”符号必须用实体“&amp;”替换。

6. “Well-formed document”。

XHTML 的 DTD,写在页首:
code:
<?xml version="1.0" encoding="UTF-8"?>
<!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 1.0 Transitional DTD 的结构 XHTML 1.0 Transitional DTD 是一种较为宽松的文档类型定义 (DTD),其主要目的是帮助开发者逐步从传统的 HTML 向更严格的 XML 兼容的标准迁移。它的 DOCTYPE 声明如下: ```html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ``` 这段声明指定了当前文档遵循的是 W3C 制定的 XHTML 1.0 Transitional 规范[^1]。具体来说,`PUBLIC` 表示这是一个公开可用的 DTD 文件,而 `-//W3C//DTD XHTML 1.0 Transitional//EN` 是公共标识符,用于描述该 DTD 的名称及其所属机构(这里是 W3C)。URL `http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd` 提供了实际的 DTD 文件位置。 #### 名字空间的作用 除了 DOCTYPE 声明外,在 XHTML 文档中还需要指定根元素 `<html>` 的名字空间 (`xmlns`) 属性。例如: ```html <html xmlns="http://www.w3.org/1999/xhtml"> ``` 这个属性表明整个文档属于 W3C 定义的 XHTML 命名空间,从而确保浏览器能够按照预期解析文档中的标记[^2]。 --- ### XHTML 1.0 Transitional DTD 的用途 XHTML 1.0 Transitional DTD 主要用于支持向后兼容旧版 HTML 页面的设计需求。以下是其核心特点和适用场景: 1. **允许使用表现层标识** 与 Strict 版本不同,Transitional DTD 支持一些特定的表现层标签和属性,比如 `<center>`, `<font>`, 和 `align` 属性等。这使得开发者可以更容易地维护那些尚未完全迁移到 CSS 样式的传统页面[^1]。 2. **适合过渡阶段的项目** 对于希望逐渐转向标准化但又无法立即放弃某些遗留功能的情况,Transitional DTD 提供了一种折衷方案。它既保留了一些灵活性,同时也鼓励良好的编码实践[^4]。 3. **简化跨平台适配** 使用 Transitional DTD 编写的网页通常能够在较老版本的浏览器中正常显示,同时也能满足现代浏览器对于语义化的要求[^3]。 需要注意的是,尽管 Transitional DTD 更加宽容,但它仍然要求所有标签必须闭合,并且属性值需要用引号括起来——这是区别于经典 HTML 的重要特征之一。 --- ### 示例代码片段 下面是一个完整的 XHTML 1.0 Transitional 文档模板: ```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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>XHTML 1.0 Transitional Example</title> </head> <body> <h1 style="color:red;">Welcome to My Website!</h1> <p align="center">This is an example of a paragraph with alignment.</p> <hr /> <ul> <li><a href="#section1">Section 1</a></li> <li><a href="#section2">Section 2</a></li> </ul> <div id="section1"><strong>Section One Content Here...</strong></div> <div id="section2">Section Two Content Here...</div> </body> </html> ``` 上述例子展示了如何利用 Transitional DTD 来创建一个简单却符合标准的 Web 页面,其中包括基本布局、链接导航以及样式应用等内容。 ---
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值