• XHTML 结构化之一:使用 XHTML 重构网站
  • 源码下载
    HTML源码 ASP源码 PHP源码 .NET源码 其他源码
  • 网站模板
    织梦模板 ShopEx模板 EcShop模板 Discuz模板 帝国模板
  • 网站素材
    字体下载 高清图片 网页模板 PSD素材 矢量素材
  • 网页特效
    返回顶部 图片代码 鼠标特效 菜单导航 HTML5特效
  • 站长资讯
    网站运营 建站经验 搜索优化 互联网
快捷导航

源码下载

HTML源码 ASP源码 PHP源码 .NET源码 其他源码

网站模板

织梦模板 ShopEx模板 EcShop模板 Discuz模板 帝国模板

网站素材

字体下载 高清图片 网页模板 PSD素材 矢量素材

网页特效

返回顶部 图片代码 鼠标特效 菜单导航 HTML5特效

站长资讯

网站运营 建站经验 搜索优化 互联网

软件下载

电脑软件 安卓软件 苹果软件

建站功具

WEB服务器 网页设计 FTP工具 建站辅助

建站教程

服务器教程 CMS教程 脚本之家
重庆站长网

模板PHPOK企业招聘人才博客微博人力资源

投稿中心
  • 重庆站长

  • 源码下载

  • 网站模板

  • 网站素材

  • 网页特效

  • 站长资讯

  • 软件下载

  • 建站功具

  • 建站教程

  • 程序插件

  • 网站基础

  • 帮助中心

HTML源码 ASP源码 PHP源码 .NET源码 其他源码 微擎微赞模块 VIP源码 淘宝客网站源码

织梦模板 ShopEx模板 EcShop模板 Discuz模板 帝国模板 WordPress主题

字体下载 高清图片 网页模板 PSD素材 矢量素材 免抠素材 PPT模板

返回顶部 图片代码 鼠标特效 菜单导航 HTML5特效 css3特效 日期时间 选项卡_滑动门 HTML5小游戏 动画效果 表单按钮 jquery特效

网站运营 建站经验 搜索优化 互联网

电脑软件 安卓软件 苹果软件

WEB服务器 网页设计 FTP工具 建站辅助

服务器教程 CMS教程 脚本之家

shopex插件 Discuz!插件 pjblog插件 wordpress插件 dedecms插件 ecshop插件 phpcms插件

HTML教程 DIV&CSS Javascript/Ajax Dreamweaver XHTML教程 W3C教程

关于我们 联系我们 广告服务 投稿指南 友情链接 积分金币规则 加入VIP会员

当前位置:重庆站长网 > 网站基础 > XHTML教程 > XHTML 结构化之一:使用 XHTML 重构网站

XHTML 结构化之一:使用 XHTML 重构网站

时间:2019-11-14 12:35:40 来源:用户投稿 浏览: 次

我们曾经为本节撰写的标题是:“XHTML : 简单的规则,容易的方针。”原因之一是,本节讨论的规则和方针是简单和容易的。原因之二是,一本简单和容易的 WEB 设计图书,就像超级市场的新式的免费商品一样,虽然常见却可以有效地吸引人的眼球,这样的东西可以刺激人的兴趣,并且鼓励人们尝试。

我确实希望本节的内容可以激发你的兴趣,并鼓励你去尝试。为什么这么说呢?因为一旦你掌握了本章包含的简单容易的理念,你就会重新思考网页运作的方式,并开始改变建造它们的方法。然而我并不希望你只是将代码重新改写一遍。我希望你可以实实在在地以另一种方式思考和工作。

另一方面,重构才是 XHTML 真正的意义。

在本章,我们将研究结构化标记的机制和涵义。如果你正在将网站标准融入你的开发项目,你或许会觉得本章的内容有些熟悉。不过即便是这方面的老手,也会从本章发现意外的收获。

XHTML 规则概要

将传统的 HTML 转换为 XHTML 1.0 是快捷且无痛的,只要你遵守一些简单的规则和容易的方针。不管是否使用过 HTML,都不会妨碍你使用 XHTML。

  • 使用恰当的文档类型声明和命名空间。
  • 使用 meta 元素声明你的内容类型。
  • 使用小写字母书写所有的元素和属性。
  • 为所有的属性值加引号。
  • 为所有的属性分配值。
  • 关闭所有的标签。
  • 使用空格和斜线关闭空标签。
  • 不要在注释中写双下划线。
  • 确保小于号及和号为 < 和 &

Unicode 和其他字符集

XML、XHTML、和HTML 4.0 文档的默认字符集是 Unicode,一个由 Unicode 联盟定义的标准。Unicode 是一套全面的字符集,它为每个字符提供了一个特定的唯一的数字,不论平台、程序和语言。Unicode 也是我们拥有的最接近通用字母表的事物,尽管它并不是一个字母表,而是一套数字映射方案。

尽管 Unicode 是 web 文档默认的字符集,开发人员依然可以自由地选择更适合他们的其他字符集。比方说,美国和西欧的网站常常使用 ISO-8859-1 (Latin-1) 编码,而中华人民共和国的国家标准是 gb2312。

为表达语义而标记文档,而不是为了样式

记住:请最大限度地使用 CSS 来进行布局。在 web 标准的世界里,XHTML 标记与表现无关,它只与文档结构有关。

结构良好的文档可以向浏览器传达尽可能多的语义,不论是浏览器位于掌上电脑还是时髦的桌面图形浏览器。结构良好的文档都能向用户传达可视化的语义,即使是在老的浏览器,或是在被用户关闭了 CSS 的现代浏览器中。

不是每个站点都能立即抛弃 HTML 表格布局。CSS 的发明者,W3C,直到 2002 年 11 月才将官方网站转换为 CSS 布局。然而,即使是顽固的唯标准主义者也不总是将表现从结构中完全分离处理,至少在 XHTML 1 中是做不到的。但是现在,我们可以向这个理想迈出重大的一步,通过将表现从结构中分离(或者说将数据从设计中),即使是混合的传统的布局也可从中受益。

下面有一些提示,可以帮助你通过更结构化的方式进行思维:

提纲内的色彩

在语法学校,我们中的大部分人都被迫使用标准的提纲格式来写文章。现在,我们成为了设计师,可以多么自由地摆脱提纲的限制,然后大胆地投身于独特的个人表达的自由领域(也许我们的宣传册和商业站点还不是那么独特和个人化)。但是至少我们不会再受到提纲的困扰了。

实际上,依照 HTML,我们应该将内容结构化为有组织的层级。在浏览器不支持 CSS 的时期,我们无法在交付可供销售的布局的同时做到这一点。但是今天,在将我们的设计不折不扣地实现的同时,我们有能力交付内在结构良好的文档。

当你将供网络使用的文本进行标记,或者当你将已有的文本文档转换为网页时,请使用传统提纲的这些条目进行思考。

<h1>我的主题</h1>
<p>介绍性文字</p>
<h2>补充性的观点</h2>
<p>相关文字</p>

同时,避免使用已被废弃的 HTML 元素比如 <font>,或者无语义的元素比如 <br />,来模拟其实不存在的逻辑结构。

比如,不要像这样做:

<font size="7">我的主题</font><br />
介绍性文字<br /><br />
<font size="6">补充性的观点</font><br />
相关文字<br />

根据它们的意义使用元素,而不是根据它们的外观

我们中一些人已经陷在了一个坏习惯中,当我们仅仅需要一个大号字的文本时使用h1,或者在我们需要在前面加一个圆点符号时使用 li。就像我们在前面的章节讨论过的,浏览器一直都习惯于将设计属性强加于 HTML 元素之上。我们都一直习惯于认为,h1 意味着大号字,而li意味着圆点,或者 blockquote 意味着文本缩进。我们中的大多数人还在使用结构化元素模拟表现效果的方式来胡乱地写作 HTML。

同样地,假如设计师希望所有的标题使用相同的字号,她会将所有的标题设置为 h1,即使这么做毫无结构化语义可言。

<h1>这是主标题,在我将文本按照提纲格式组织的情况下。</h1>
<h1>这不是主标题,但是我希望它与上面的标题使用一样的字体,但是我不知该如何使用CSS。</h1>
<h1>这根本不是一个标题。但是我非常希望页面中的文字使用相同的字体,以达到我希望的,
如果我了解CSS,就可以在不打乱文档结构的情况下达到这个设计。</h1>

我们必须把我们的小把戏放到一边,然后开始根据元素的语义来使用它们,而不是根据它们看上去的样子。实际上,h1可以成为你希望的任何样子。通过 CSS,h1 可以成为非粗体的小号的罗马字体,而 p 文本可以成为粗体的大号字,li 也可以没有圆点(你或者可以使用小猫小狗或者公司标志的 PNG,GIF 或者 JPEG 图片取而代之)等等。

从今天开始,我们将要使用 CSS 来决定元素的外观。我们甚至可以根据元素在页面中或者在站点中所在的位置来改变它们的外观。 CSS 可以将表现从结构中彻底抽离,并且允许你按照你喜欢的样式来格式化任何元素。

h1, h2, h3, h4, h5, h6 {
	font-family: georgia, palatino, "New Century Schoolbook",
	times, serif;
	font-weight: normal;
	font-size: 2em;
	margin-top: 1em;
	margin-bottom: 0;
	}

你为什么要这么做呢?这么做的目的是为了在图形浏览器中获得品牌化的外观和感觉的同时,在文本浏览器、无线设备、HTML 格式的电子邮件中,文档的结构得到保留。

我们并不想在关于 XHTML 的章节讲述更多 CSS 方面的技术。我们只是希望展示文档结构和可视表达是两个完全不同的事物,并且结构化元素应被用来转换文本,而不是强加显示效果。

使用结构化元素,而不是无意义的垃圾

由于我们已经忘记或者根本不知道 HTML 和 XHTML 的用途是传达结构化的意义,许多 HTML 争论者这样使用标签来插入列表:

项目一<br />
项目二<br />
项目三<br />

考虑一下使用有序或者无序列表取而代之:

<ul>
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
</ul>

"但是li给我一个圆点,而我不需要圆点!"你也许会这么说。根据上面的章节,CSS不对元素被期望的外观做任何假定。它等待你来告诉它你所期待的元素外观。关闭圆点是 CSS 的最基本的能力。它有能力使列表看起来和普通文本没有两样,也可以使列表看起来像图形导航栏,具有完整的反转效果。

所以,请使用列表元素来标记列表。相似地,使用 strong 来代替 b,使用 em 代替 i,等等。在大多数桌面浏览器缺省状态下,strong 的显示效果和 b 相同,而 em 和 i 相同,同时也可以在不破坏文档结构的情况下创建你期待的视觉效果。

尽管 CSS 不会为任何元素的显示作假设,浏览器却作了很多假设,并且我们还没有碰到一个将 strong 显示为其他效果而不是粗体字的浏览器(除非是被设计师创建的 CSS 指示以其他方式显示)。假如你担心某个陌生的浏览器不会将 strong 显示为粗体字,你可以编写这么一条 CSS 规则:

strong {
	font-weight: bold;
	font-style: normal;
	}

视觉元素和结构

web 标准不仅要求我们使用何种科技,而且还要遵守使用这些技术的方式。使用 XHTML 来编写标记,同时使用 CSS 来处理一部分或者全部的布局,并不一定会使站点更易用更轻便,同时节约多少带宽。就像我们在早期使用的技术那样,XHTML 和 CSS 也会被误用和滥用。冗长的 XHTML 和冗长的 HTML 一样,都会浪费用户的带宽和时间。冗长的过度的 CSS 也不能完全的代替表现 HTML 代码;这只不过是一种糟糕的东西被另一种代替了而已。



本文标题:XHTML 结构化之一:使用 XHTML 重构网站 - XHTML教程
本文地址:http://www.admin023.cn/webbase/xhtml/559.html

    (作者:佚名)   /   责任编辑:重庆站长网
    • 上一篇:返回列表
    • 下一篇:XHTML教程之XHTML简介
    • 收藏
    • 打印

    相关阅读

  • XHTML教程之XHTML简介

    XHTML 是更严格更纯净的 HTML 代码。 XHTML 是什么? XHTML 指可扩展超文本标签语言(EXtensible HyperText Markup Language)。 XHTML 的目标是取代 HTML。 XHTML 与 HTML 4.01 几乎是相同的。 XHTML 是更严格...

  • 2022-01-07
  • XHTML教程之XHTML简介

    XHTML 是更严格更纯净的 HTML 代码。 XHTML 是什么? XHTML 指可扩展超文本标签语言(EXtensible HyperText Markup Language)。 XHTML 的目标是取代 HTML。 XHTML 与 HTML 4.01 几乎是相同的。 XHTML 是更严格...

  • 2019-11-14

    资讯列表

    • HTML教程
    • DIV&CSS
    • Javascript/Ajax
    • Dreamweaver
    • XHTML教程
    • W3C教程

    文章排行榜

    • 1 影响网站页面浏览量的因素有哪些
    • 2 百科外链时代终结:百度百科参考资料全部替换为百度快照
    • 3 解决DedeCms5.7更新软件不能上传图片问题
    • 4 大型强子对撞机首次加速原子:达到接近光速
    • 5 企业网站制作怎么样可以把握好用户体验
    • 6 网页文本排版知识:为正确的内容使用恰当的标签
    • 7 移动web端屏幕适配(rem)
    • 8 自身产品运营数据分析的5个步骤
    • 9 CSS基础入门教程之CSS id 选择器
    • 10 众盟数据蝉联创业邦中国创新成长企业100强

    热门标签

      魅族 魅族Flyme Facebook Facebook隐私 Faceboo 漏洞 HTTPS 融360 叶大清 融360法人 PHP8 JIT 荣耀10i 京东 京东汽车 汽车 电商 Ruby 恶意后门 代码
    返回
    顶部
    关于我们 联系我们 广告服务 投稿指南 友情链接 积分金币规则 加入VIP会员

    备案号:

    Copyright © 2016-2018 重庆站长网 版权所有

    ×