Web标准设计-小苏

• 
  

  • 一扇经常开启的门的铰链不需要润滑油。
  • 一条湍急的河流不会变得污浊。
  • 无论是声音还是想法都不可能在真空中传播。
  • Web标准如果不用就会腐朽。
  • 这世界真奇妙！

• 
  

  《Web标准设计》针对Web开发人员讲解Web标准。开始部分解释了Web标准一些概念跟误会，之后详细介绍了构成Web标准的各个组成部分，着重介绍了XHTML和CSS的应用，同时还讨论了JavaScript、XML、XSLT的应用，此外还介绍了中文的特殊表现、命名的应用以及Web标准中最常给人忽视的无障碍网页倡议（WAI）。

  本书采用的是渐进学习的方式，除了最后一章，基本上如果你不能掌握前面章节的知识，直接阅读后面的章节可能会让你感到一些迷惘。不管你是新手还是骨灰级玩家，我都建议你从头开始逐页阅读本书，你所掌握的知识不代表与我所掌握的知识完全相同。本书的例子并不多，多数都是通过一个例子做着举一反三的演示。

  如果你认为某一章节的知识早已经被你所掌握，你也可以直接跳到你感兴趣的章节阅读你感兴趣的内容。以下是概述本书16章的内容：

  1. Web标准不是神话 介绍Web标准的一些概念，包括选择的目的、带来的好处以及一些误解。此外还介绍了一些开发使用的软件与环境。

  2. XHTML——浏览器上的新大陆 介绍了Web标准的核心组成部分中的XHTML，从常见元素的介绍到与HTML的区别以及元素应用的细节。本章描述了缩写(X)HTML必需的基础语法和概念。

  3. CSS——网页美容师 介绍了处理表现的CSS，从基本的语法到复杂的选择符的使用，以及使用的单位与应用的方式，此外还介绍了继承与覆盖和优先权的计算。

  4. 用XHTML和CSS来“摆”网页 通过实例的形式开始介绍XHTML+CSS的应用，在介绍应用的同时还分析了对应的XHTML或CSS的详细属性的使用，包括基础的属性应用和盒模型的详细介绍。

  5. 布局之道 通过实例的形式介绍了使用XHTML+CSS的各种常用布局以及实现的原理。包括从经典的三行两列固定宽度的布局到复杂的多栏布局的各种布局的有效的实现方式。

  6. 不要害怕各式各样的浏览器 介绍了产生兼容问题的一些本质以及解决的方式，包括讨论各浏览器兼容的必要、兼容的方式以及各个问题产生的原因和解决方向，之外还讨论了IE私有的Layout机制和各浏览器的块级格式化范围。

  7. CSS常用技巧 通过实例的形式介绍CSS的一些常用技巧，包括滑动门技术、圆角的实现、标识当前页面等常用技巧，此外，还讨论了一些好玩的技巧，比如放大文字、图片，实现Tips提示等技巧。

  8. 文字的艺术 介绍了具有中国特色的汉字的一些特殊性及一些文字相关的技巧。包括缩放文字的机制、文字的行高基线问题，以及文字在多种情况下的变化，比如在文本框中、不间断的文字、省略部分文字等，此外还介绍了常用的字体及影响字体的因素。

  9. 细品命名与微格式 介绍了命名的应用。包括命名的规则和原则，以及命名的重要性，此外还介绍了自定义标签和通过命名产生应用的Microformats（微格式）。

  10. 换个思维来设计 介绍了通过转换概念实现的一些常见技巧，包括有文字替换、缩放布局、用“叠”的方式来实现一些非常规的效果的实现。此处还讨论了百分比加减固定数值的实现、margin负值实现两列等高及在各浏览器中实现类inline-block的效果。

  11. 隐藏在浏览器背后的CSS 重点介绍了IE的私有属性和Firefox实现的一些CSS3的私有属性，此外还讨论了校验的意义及与其它浏览器兼容的建议。

  12. JavaScript让Web动起来 介绍了Web标准组成的一个重要的部分——JavaScript。从概念开始，包括语法、变量、基本的数据类型、表达式与运算符、函数、对象，以及DOM和事件处理等。此外，还介绍了怎样把JavaScript与XHTML和CSS整合应用的一些技巧及部分JavaScript的实用特效。

  13. 亲和力 讨论了Web标准组成的另一个重要的组成部分——Accessibility（可访问性）。包括概念上的一些解释及WCAG的一些个人的见解。此外还介绍了一些通过技术层面解决的问题。

  14. XML的无限变化 通过实例介绍了网站发展的另一个方向——XML的应用，包括与XHTML、CSS的关系及应用，及XML与XPath和XSLT关系与应用。此外还讨论了XML的未来。

  15. 简单的实战 通过创建两个网站的首页介绍了各种各样的技术的整合应用。包括网站从设计稿转变成页面的各步骤的实现，以及各种情况出现时的处理。此外，还讨论了架构网站前端要注意的问题和建设自己网站的建议。

  16. 最后的建议 这一章是唯一一章与Web标准没多大关系的章节。是我个人给你在学习完前面十五章内容后的一些建议。

• 1. Web标准不是神话
     1. 理解Web标准
        1. Web标准是什么
        2. 错误的思维
        3. 无障碍网页倡议（WAI）
     2. 量化Web标准
        1. 大部分通过W3C校验的网站只是伪标准
        2. Web标准要求一览表
        3. 如果量化
     3. 为什么选择Web标准
     4. CSS为什么着火
        1. CSS 的作用
        2. CSS 布局 VS. 表格布局
     5. 我能否学好Web标准
        1. 我需要具备什么素质和条件才能学好Web标准
        2. 学习的重点与难点
     6. 欲善其事，先利其器
        1. 软件的选择
        2. 调试环境
  2. XHTML：浏览器上的新大陆
     1. 一切从语义开始
     2. 网页的构成
     3. 常见标签
        1. 标题
        2. 内容
        3. 列表
        4. 表格
        5. 表单
        6. 注释
     4. 比HTML多出一个X
        1. 还多了什么
        2. 谁影响了网页的样子
        3. 坚持Strict Markup
        4. 语义化
     5. 按语义来分类
     6. 块元素与内联元素
     7. div不是神
        1. 合理应用
        2. div与span的差别
  3. CSS：网页美容师
     1. 语法结构
        1. 基本结构
        2. 样式表中的注释
        3. 字符转义
     2. 选择符的使用
        1. 通配选择符
        2. 类型选择符
        3. 包含选择符
        4. 子对象选择符
        5. 相邻选择符
        6. 属性选择符
        7. ID选择符
        8. 选择符分组
     3. 伪元素与伪类
        1. 伪类
        2. 伪对象
     4. 常用单位
        1. 长度单位
        2. 颜色单位
     5. 应用 CSS 在网页上
        1. 链入外部样式表
        2. 定义内部样式
        3. 定义内联定义
        4. 导入指定的外部样式表
        5. 各种方式的差异
        6. 糟糕的手持设备
     6. 继承与覆盖
     7. 优先权的计算
  4. 用XHTML和CSS来“摆”网页
     1. 开始第一个页面
     2. 文字的表现
        1. 字体的外型
        2. 颜色的定义
        3. 背景的定义
     3. 最简单的布局
        1. Margin 与 Padding
        2. 单列固定宽度居中
        3. 单列自适应宽度
        4. 奇怪的高度
        5. 边框的定义
     4. 郁闷的盒模型
     5. 文字旁边的图片
        1. baseline
        2. 垂直对齐
        3. 图片的浮动
     6. 列表的应用
        1. 定义列表的外观
        2. 导航菜单的应用
        3. 列表的常见应用
     7. 表格
        1. 表格的控制
        2. 为不同浏览器使用不同的选择符
        3. 伪表格
     8. 表单
        1. 样式表单
        2. 表单元素的细节
        3. 注册表单
  5. 布局之道
     1. 固定的左右分栏
        1. 经典三行两列固定宽度的布局
        2. 两列等高――背景伪造篇（一）
        3. 自由与未来
     2. 自适应的左右分栏
        1. 经典三行两列自适应宽度的布局
        2. 两列等高――背景伪造篇（二）
        3. 百分比的细节
        4. clear:right与overflow
     3. 一栏固定宽度，一栏自适应宽度
        1. 单栏浮动
        2. 浮动的负值可以让主要的内容优先显示
        3. Min & Max
     4. 多栏布局
        1. 三栏固定宽度和自适应的布局
        2. 混合固定宽度和自适应宽度的多栏布局
        3. 流出固定宽度的两栏在自适应宽度的中栏后面
        4. 偏移出来固定宽度的两栏在自适应宽度的中栏后面
     5. 组合之路
  6. 不要害怕各式各样的浏览器
     1. 浏览器的市场
        1. 古老的IE5.x
        2. 讨厌的IE6
        3. 里程碑――IE7
        4. 新一代的IE4
        5. 开发利刃――Firefox
        6. 华丽的Oprea
        7. 异军――Safari
     2. 兼容之道
        1. 条件注释
        2. 过滤浏览器
        3. 破坏属性
        4. Hack之道
     3. 兼容问题
        1. 一切从浮动开始
        2. Layout初体验
        3. 闭合浮动元素
        4. IE受不了浮动
        5. IE的其它问题
        6. Layout全接触
        7. 块级格式化范围（block formatting context）
        8. 其他浏览器的问题
  7. CSS 常用技巧
     1. 滑动门技术
        1. 滑动门的原理
        2. 当只有文字被放大时
        3. 一张图片当N个门使用
        4. 一些可能会被忽略的问题
        5. 其他的一些应用
     2. 圆角
     3. 图片的细节
        1. 载入中的图片
        2. 加载不了的图片
        3. 缩放的图片
        4. 伪类缩放的图片
     4. 被放大的文字
     5. 当前标识
        1. 视觉标识
        2. 面包屑（Breadcrumbs）
        3. 操作步骤
     6. 居中元素
        1. 垂直居中多行文字
        2. 未知大小图片在已知大小容器中垂直和水平居中
        3. 相对页面大小垂直和水平居中已知大小的容器
     7. 隐藏的 Tips 会出现
        1. 实现原理
        2. 图片信息
  8. 文字的艺术
     1. 中文
     2. 缩放机制
        1. 缩放的文字
        2. 缩放的盒子
     3. 行高与基线
        1. 行高的细节
        2. 基线
        3. 文本空间
     4. input里的文字
     5. 链接的范围
        1. 额外的点击空间
        2. 缺少的点击空间
     6. 不间断的文字
     7. 省略掉的文字
     8. 字体的介绍
        1. 中文字体
        2. 英文字体
     9. 语言会影响到字体
  9. 细品命名
     1. 命名规则
     2. 命名原则
     3. 不再陌生的 Microformats
        1. 认识微格式
        2. 从微格式提炼知识
     4. ID 与 CLASS 选择谁
     5. 自定义标签
     6. 命名的重要
  10. 换个思维来设计
      1. 消失了文字 看到了彩虹
         1. 文字变成图片的几种方法
         2. 文字也可以用Flash来表现
      2. 用div代替html/ body
      3. 缩放的布局
         1. 实现原理
         2. 缩放一半
         3. 精准em
      4. 网页是可以用叠的
         1. 在一屏幕里显示所有内容
         2. 图片的位置
         3. position:absolute的层叠
      5. 百分比加减固定数值
         1. 50%+200px
         2. 50%-200px
      6. 两列等高――margin负值篇
      7. 类display:inline-block的应用
  11. 隐藏在浏览器背后的CSS
      1. (X)HTML 与 CSS 校验的意义
      2. IE背后的善良
         1. IE常见私有属性
         2. 滤镜
      3. 火狐狸的尾巴带着CSS3的味道
         1. At-rules 规则
         2. Properties 属性
         3. Values 属性值
      4. 其它浏览器的兼容方案
  12. JavaScript让Web动起来
      1. 概念
         1. 什么是JavaScript
         2. ECMAScript是什么
         3. 什么是DOM
         4. 什么是BOM
         5. 想法
         6. 怎样让JavaScript运行
      2. 编程基础
         1. 语法
         2. 变量
         3. 基本数据类型
         4. 表达式与运算符
         5. 基本语句
         6. 函数
         7. 对象
      3. DOM无处不在
         1. 把文档表示为树
         2. 树的节点
         3. 节点的属性
         4. HTML DOM 特征
      4. 事件处理
         1. 什么是事件
         2. Event对象
         3. 事件的绑定
         4. 分离
      5. 只要改变className就可以改变很多――下拉菜单的练习
         1. 结构的选择
         2. 分离实现效果
         3. 想法
      6. 表单的辅助
         1. 检查数据
         2. 隐式提示
         3. 创建内容――innerHTML VS createElement
         4. setTimeout
         5. Ajax初体验
         6. HTML5的表单元素
      7. class特效
  13. 亲和力
      1. 概念
      2. Web内容可访问性指南
         1. 并非所有的内容都是显示的
         2. 保持原有功能的有效性
         3. 让文字看得见
         4. 热键操作
         5. 导航
         6. 标题与内容
         7. 语言与编码
         8. 亲和力声明
         9. 建议
      3. 技术层上的一些亲和力
         1. 如何让链接变得更有表达能力
         2. 扩展链接的提示
         3. 节省步骤
         4. 图片还是背景图片
  14. XML的无限变化
      1. XML的作用
         1. XML能做什么
         2. XML的表现
         3. XML+CSS的表现
         4. 元素的语义
         5. XSLT初体验
      2. XPath与XSLT
         1. XPath简介
         2. XSLT应用XPath
         3. 程序性转换的XSLT
         4. XSLT常见元素
         5. XSLT函数 document
         6. XPath定位
         7. XPath基本表达式
         8. XPath常见函数
         9. X练习
      3. 华丽的RSS
         1. 复习
         2. 转换时间格式的模板与参数的应用
         3. 过滤与排序
         4. 背景色交替
         5. 显示(X)HTML内容
         6. 还能做什么？
      4. XML的周边与命运
         1. XML Schema
         2. WML
         3. SVG
         4. XML的未来
  15. 简单的实战
      1. OpenLab
         1. 分析结构
         2. 叠出来的头部
         3. 一张背景的导航
         4. 表格无敌
         5. 隐藏内容
         6. 变化
      2. Ao.A相册
         1. 分析结构
         2. 大背景
         3. 基本结构
         4. 图片展示
         5. 浮动的空白
         6. 小小的Tip提示
         7. IE的兼容问题
         8. 放弃也是一种美！
         9. 精准到px
         10. 让网页动起来――JavaScript
         11. 让网页动起来――Flash
         12. 网页并非会按我们所想的显示
         13. 网页并不一定要用浏览器看的
         14. 打印网页
      3. 架构前端
         1. 脚本框架
         2. 模块化样式表
         3. 模块化(X)HTML
         4. 文件架构
      4. 给自己做点什么
         1. 开始设计属于你自己的网站
         2. 结构与表现
         3. 华丽的效果源自哪里?
  16. 最后的建议
      1. 思维的乐趣
         1. 坚持独立思考
         2. 要善于自己发现和解决问题
         3. 不断丰富知识，提高所掌握知识的质量
         4. 换个角度思考问题
      2. 减少重复开发的选择
      3. 让维护方便点
         1. 适当的注释
         2. API手册
      4. 以后自学的方向
  
  

网名叫小苏，因为我的名字比较难打，结果我多了一个合成的中国英文名 xiaosu。我打过很多杂，平面设计师，前端开发工程师，交互设计师，产品设计师，现在的职位是前端设计师.

编辑评论

一，很有内容，技术含量高，而且都是健康食品。就像你去超市购完物付款时，看到排在你前面的那个老奶奶的购物篮里装满了菠菜、青椒、大葱、西红柿、鸡蛋、莴苣、蘑菇、胡萝卜、菜花、茄子，还有一些你根本就叫不出名字的各类蔬菜，而再低头看看你的购物篮里都是些酸奶、薯片、巧克力、可乐、冰淇淋、香肠、咸鸭蛋、葡萄干这类东西时，你就会感到人家的购物篮的东西比你的“更有内容”，从而感到不太好意思。阅读这本书时，你就会有这种感觉。

二，很有思想。正如嗷嗷自己说的，这本书的价值常常不在于给你一个解决方法，而是给你讲解这个问题的本质，并且，面对这样一个本质，我们如何开动脑筋去解决它。学会解决问题的过程比解决问题本身更为重要。

三，语言风趣，读之不累。尽管你偶尔可能还是会看到那么一个两个或者三个前面的缺点部分所提到的问题，但它们毕竟已经很少了，基本不影响阅读了，而且，整本书的语言是风趣的，充满热情的，进取的，几段读下来你就会有这样一个认识——这是一个能从无聊中钻探出快乐的人写的。只有真正的技术专家才能带给你这样的感觉。

因这三点，我等待这本书两年时间。

书已经打开，现在是读书时间。

勘误表

1. 第5页：1.1.2 错误的思维中忽视的语义 引用内容

   • 目前的网页表达信息一般是以
     • 自然语言（英语、匈牙利语、汉语…）
     • 图表、多媒体、版面布局
   • 这些让人类使用是可以，但机器使用起来便有困难了!
   • 在应用程序分布方面：
     • 使用不只有人参与的自动化应用程序分布过程
     • 各种个体都能够理解网页资源的含义
     • 在网站中的一个良好定义的术语体系是必须的

   应该更新为hax 翻译的

   • 当前的Web使用以下形式来表达信息：
     • 自然语言（英语、匈牙利语、汉语…）
     • 图形、多媒体、页面设计¹
   • 这些形式很适合人类，但是机器处理起来就困难了！
   • 特别是分布式的应用中：
     • 分布协作的各方是自动化程序而不是人类（至少不仅仅是人类）；
     • 智能代理需要去“理解”Web资源；
     • 必须有一套合理的领域术语。

   【注：Web是专指整个Web，不宜译为网页；graphics是图形而不仅限于图表（chart）；page layout在这里指的是页面的整体设计，虽然在网页设计师那里“版面布局”也可以作此理解，但是关注语义网的读者并不一定熟悉网页设计，所以直接用“页面设计”可能更合适一些】

2. 25页：倒数第二行 <a href="#"title="应该<a href="#" title="
3. 27页：datatime 应该是 datetime
4. 28页：第八行 ，kdb应该是kbd
5. 37页：select的代码应该为

   <select id="..." name="...">
   	<optgroup label="传说中的分组1">
   	<option value="...">传说中的测试1</option>
   	<option value="...">传说中的测试2</option>
   	</optgroup>
   	<optgroup label="传说中的分组2">
   	<option value="...">传说中的测试3</option>
   	</optgroup>
   </select>

6. 80页：p元素如果字体是24px，那它的行高就是24px乘以1.5等于48px中的48应该为36
7. 89页：第一段代码 ，

   *{
   	argin:0;
   	padding:0;
   }

   中的 argin应该是margin
8. 188页: “6.16 华丽的Oprea”，应为“6.16 华丽的Opera
9. 233页：第9行 forest53.com的网站已经过期，勿访，可能会有问题。T_T