HTML重构:战术篇

上文书我们说到《HTML重构:战略篇》,书接前言下面是战术篇,我们通过路线图来先有一个大体印象:

1、HTML规范化(Well-Formedness):语法正确
2、HTML Validity :语义正确
3、不仅仅是语义正确:HTML元素的用法回归正途
4、正确还不够:关注你的内容
5、哪有个完啊:关注网站可用性(Accessibility)

HTML规范化(Well-Formedness):语法正确

  规范化(Well-Formedness)是XML中的概念,它指文档严格遵守约束。规范化的HTML文档结构是一个独一无二的树。HTML规范化是发挥XML工具强大功能的先决条件,可靠地DOM操作也为跨浏览器脚本的提供了一个很好的基础。不规范的页面在浏览器中可能表现千差万别,因为浏览器对错误的理解和处理是不一样的,而规范化的HTML让浏览器行为可预测。好处当然还有很多,比如SEO,快速加载… ...

  下面会有一些规范化的实践指南,作者给出了做这些重构的动机和利弊,大家可以根据自己的情况来选择。下面简单列一下:

  文档转为小写Change Name to Lowercase

  属性赋值添加引号Quote Attribute Value

  省略值不全Fill In Omitted Attribute Value

  例如:<input type="radio" value="debit" checked></input>

  空标签添加空属性Replace Empty Tag with Empty-Element Tag

  例如:<hr>变成<hr class='empty' />

  添加结束标签Add End-tag

  删除重叠Remove Overlap

  例如:<strong><em>very important</strong></em>!

  文档编码转成UTF-8Convert Text to UTF-8<转义为 &lt ;Escape Less-Than Sign& to &amp;Escape AmpersandEscape Quotation Marks in Attribute Values

  属性值内字符转义:" to &quot;  ' to &apos;

  添加DOCTYPE声明Introduce an XHTML DOCTYPE Declaration
   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

  实体添加结束符Terminate Each Entity Reference&amp之类的实体要不全; 即:&amp;

  使用标准实体名Replace Imaginary Entity References添加根元素Introduce a Root Element添加XHTML的名称空间Introduce the XHTML Namespace

HTML Validity :语义正确

  背景介绍:HTML验证是通过与标准HTML规则进行比较的方式,分析HTML文档、标记出错误和非标准代码的处理过程。Web页面使用HTML进行渲染,而HTML本身采用了HTML规范作为其规则和标准。通过验证HTML代码穿越多重浏览器标准!

  通过验证的文档,能够帮助浏览器反映创作者的意图。通过验证的站点会获得下列优势:页面行为可预测,浏览器兼容问题,未来的浏览器上也可以运行,更容易维护,等等…
W3C在线验证地址:http://jigsaw.w3.org/css-validator/

  通过验证并不是强制要求的,一个规范化但是没有通过验证的文档照样可以使用XML工具。如果你有特殊的应用比如MathXML,也可以忽略掉通过HTML验证。下面简单列出一些要通过验证要做的工作:
  清除非法标签Remove All Nonexistent Tags

  添加图像说明Add an alt Attribute

  嵌入标签换成对象标签Replace embed with object

  添加严格的文档类型声明Introduce a Strict DOCTYPE Declaration

  Replace center with CSS

  Replace font with CSS

  Replace i with em or CSS

  Replace b with strong or CSS

  Replace the color Attribute with CSS

  Convert img Attributes to CSS

  Replace applet with object

  Replace Presentational Elements with CSS

  Nest Inline Elements inside Block Elements

不仅仅是语义正确:HTML元素的用法回归正途

  一个Web开发者可能会有这样的忏悔:我错了,我一直都在用表格做布局,我的页面和样式杂糅在一起… …我们可能把原因归结为历史,以前的开发就没有这种理念,历史是这样的么?传统的HTML是基于SGML标准,这个标准诞生于Web之前,我们回顾一下:

  SGML是1986年出版发布的一个信息管理方面的国际标准(ISO 8879)。该标准定义独立于平台和应用的文本文档的格式、索引和链接信息,为用户提供一种类似于语法的机制,用来定义文档的结构和指示文档结构的标签。其中Markup的含义是指插入到文档中的标记。标记分为两种:一种称为procedard markup,用来描述文档显示的样式;另一种称为descriptive markup,用来描述文档中的文字的用途。制定SGML的基本思想是把文档的内容与样式分开。
 
  回顾历史我们应该像佟掌柜一样感慨了:“我错了,我真的错了”

  如何将文档的内容和样式分开?作者同样给出了一些建议:

  Replace Table Layouts

  Replace Frames with CSS Positions

  Move Content to the Front

  Mark Up Lists as Lists

  Replace blockquote/ul Indentation with CSS

  Replace Spacer GIFs

  Add an ID Attribute

  Add Width and Height to an Image

继续>>下一页[第1页][第2页]

时间: 2024-11-03 03:49:01

HTML重构:战术篇的相关文章

艾伟:HTML重构:战略篇

<Refactoring HTML: Improving the Design of Existing Web Applications>是一本精彩的HTML重构指南,作者给出了HTML重构的实践路线和方法.本文是<Refactoring HTML>的读书笔记,按照我的理解将全书的分为:战略篇,战术篇,工具篇. 本文是战略篇:全局方略的角度介绍重构的内涵,原因,时机,目标 嗯哼,我们开始: 进行重构就像打一场仗,而战争的发起是要慎重考虑的,<孙子兵法>里面讲"

HTML重构:战略篇

<Refactoring HTML: Improving the Design of Existing Web Applications>是一本精彩的HTML重构指南,作者给出了HTML重构的实践路线和方法.本文是<Refactoring HTML>的读书笔记,按照我的理解将全书的分为:战略篇,战术篇,工具篇. 本文是战略篇:全局方略的角度介绍重构的内涵,原因,时机,目标 嗯哼,我们开始: 进行重构就像打一场仗,而战争的发起是要慎重考虑的,<孙子兵法>里面讲"

新闻发布系统,SQLHelper重构

在清楚把握牛腩新闻发布系统的需求,以及对系统的数据库也做好了相应的设计后,接下来的几天里就是对后台代码的编写. 在视频中,采用的是经典三层的框架,这对于已经经历过机房重构的我们来说,敲代码还是很容易上手的. 相信大家都不会忘记机房重构中我们的一个好助手,那就是SQLHelper. 在机房重构的时候,看了很多博客,大家都用上了,也都觉得好用,我也就直接借鉴而来.在自己一步一步调试的时候,在自己的程序出现Bug的时候,真的发现SQLHelper的好处多多.但自己也没有去认真研究过这样一个类究竟是怎么

产品前端重构(TypeScript、MVC框架设计)

最近两周完成了对公司某一产品的前端重构,本文记录重构的主要思路及相关的设计内容. 公司期望把某一管理类信息系统从项目代码中抽取.重构为一个可复用的产品.该系统的前端是基于 ExtJs 5 进行构造的,后端是基于 Asp.net MVC 提供的 REST 数据接口.同时,希望通过这次重构,不但能将其本身重构至可用于快速二次开发的产品,同时还要求该前端代码要保证相对的独立,使得同时可以接入 .NET 和 JAVA 两个不同的后端平台所提供的数据接口.   旧代码的问题 老系统的前端代码如下图所示:

浅谈遗留代码的重构

             背景 <重构>诞生至今有近17个年头了,日常开发中大家谈到重构,要么非常随意,认为重构就是改代码:要么非常谨慎,把重构描述成焦油坑,像瘟神一样敬而远之.针对最具挑战性的遗留代码重构,有哪些需要注意的呢? 谈论任何事情,都该有它的上下文.本文谈论的技术背景是大型通信类产品,对于互联网产品不一定适用.另外,本文也不会涉及重构技术,有兴趣读者可以读<重构>或者<Effective Refactoring in C++>. 遗留代码重构决策表 遗留代码

Hi,我们的代码重构了

 作为一名程序员,我最大的愿望是自己写的代码,能够被人称赞,一直留存在项目里,直到永远.能够让自己的代码一直留存在项目里,一方面自己写的代码要健壮,没有任何逻辑错误.另一方面,还要具有很好的扩展性,能够适应需求的变化.对于前者来说,只要有个两三年的基本功,基本上就能保证代码的质量.然而,要写出具有扩展性的代码,却是一件比较困难的事情.       不是因为具有可扩展性的代码不好写,而是因为这个度不好把握.我们知道系统的可扩展性总是与系统的业务和性能成反比,因此,我们不会在追求系统的扩展性上而忽略

重构-使代码更简洁优美:实际经验之谈(提供一技巧,让你省掉N多代码)

这几天没怎么写文,因为在用 CYQ.Data  框架 重构以前的一个博客源码,而在重构的过程中,最关键的就是简化代码了.   今天,我将说一个很典型的示例,看完本示例后,不要惊讶,不要怀疑,它不是神马,也不是浮云,   而是很实在的一种方式,能让你节省了N多的代码,让你的代码看起来更简洁优美.   而这里说的一个很典型的示例,是从我目前重构中的博客中应用而来的:   一:正常的开发方式   1:扫一眼当前的项目解决方案   2:说说Module库 一般我们很常见的会有一个页面基类,当然各花叫法不

做个好重构不容易 怎样才算一个好重构?

文章简介:如何做一个好重构. 用这个标题,是因为前一段时间组里有一个开放式讨论:怎样才算一个好重构?其实,"好"与"坏"向来都是相对的,因为每个人眼中看待"好"与"坏"的标准不一样,不如从自身的角度考虑一下:如何做一个好重构? 先来看一个平时我们遇到的最多的两栏布局: 计算">基本的html代码: 来看具体的CSS代码实现(忽略margin): 很明显在保持同样html结构的情况下,实现两栏布局可以有多种CSS

关于“网站重构”概念解析

概念|网站重构 近来大家总是在标准上争论不休,其实,这些问题一些相关文章已经说得很明白了. 以下我就谈谈我的看法.本帖子有太多的"我认为",说明了我只是想把我的想法拿出来跟大家商榷,或许有太多不对的地方,也请大家一一指出. 1.我对web标准的理解 所谓的web标准,在一些教程文章上已经得到结论:结构化标准(XHTML.XML).表现标准(CSS.XSLT?).行为标准(DOM.ECMAScript).这些东西在网上一搜一大把,在这里我就不多说了.我只说我自己的想法: a.标准是相对的