具体描述
一扇经常开启的门的铰链不需要润滑油。
一条湍急的河流不会变得污浊。
无论是声音还是想法都不可能在真空中传播。
Web标准如果不用就会腐朽。
这世界真奇妙!
专题页面:http://www.aoao.org.cn/book/web-standards-design/
作者简介
嗷嗷 前端设计师
个人网站 http://www.aoao.org.cn
目录信息
1.1 理解Web标准
1.1.1 Web标准是什么
1.1.2 错误的思维
1.1.3 无障碍网页倡议(WAI)
1.2 量化Web标准
1.2.1 大部分通过W3C校验的网站只是伪标准
1.2.2 Web标准要求一览表
1.2.3 是追求标准还是理解标准
1.3 为什么选择Web标准
1.4 CSS为什么着火
1.4.1 CSS的作用
1.4.2 CSS 布局 VS. 表格布局
1.5 我能否学好Web标准
1.5.1 我需要具备什么素质和条件才能学好Web标准
1.5.2 学习的重点与难点
1.6 欲善其事, 先利其器
1.6.1 软件的选择
1.6.2 调试环境
第二章 XHTML——浏览器上的新大陆
2.1 一切从语义开始
2.2 网页的构成
2.3 常见标签
2.3.1 标题
2.3.2 内容
2.3.3 列表
2.3.4 表格
2.3.5 表单
2.3.6 注释
2.4 比HTML多出一个X
2.4.1 还多了什么
2.4.2 谁影响了网页的样子
2.4.2.1 浏览器的多模式
2.4.2.2 开启通往标准的模式
2.4.3 坚持Strict Markup
2.4.4 语义化
2.5 按语义来分类
2.6 块元素与内联元素
2.7 div不是神
2.7.1 合理应用
2.7.1.1 嵌套
2.7.1.2 div不是table
2.7.2 div与span的差别
第三章 CSS——网页美容师
3.1 语法结构
3.1.1 基本结构
3.1.2 样式表中的注释
3.1.3 字符转义
3.2 选择符的使用
3.2.1 通配选择符
3.2.2 类型选择符
3.2.3 包含选择符
3.2.4 子对象选择符
3.2.5 相邻选择符
3.2.6 属性选择符
3.2.6.1 匹配属性和属性值
3.2.6.2 类选择符
3.2.7 ID选择符
3.2.8 选择符分组
3.3 伪元素与伪类
3.3.1 伪类
3.3.1.1 :first-child伪类
3.3.1.2 链接伪类——:link 和 :visited
3.3.1.3 动态伪类——:hover. :active与:focus
3.3.1.4 语言伪类——:lang
3.3.2 伪对象
3.3.2.1 :first-letter
3.3.2.2 :first-line
3.3.2.3 :before和 :after
3.4 常用单位
3.4.1 长度单位
3.4.1.1 px vs. em
3.4.1.2 百分比单位
3.4.1.3 其他长度单位
3.4.2 颜色单位
3.5 应用 CSS 在网页上
3.5.1 链入外部样式表
3.5.2 定义内部样式
3.5.3 定义内联定义
3.5.4 导入指定的外部样式表
3.5.5 各种方式的差异
3.5.6 糟糕的手持设备
3.6 继承与覆盖
3.7 优先权的计算
第四章 用XHTML和CSS来“摆”网页
4.1 开始你的第一个页面
4.2 文字的表现
4.2.1 字体的外型
4.2.2 颜色的定义
4.2.3 背景的定义
4.3 最简单的布局
4.3.1 Margin 与 Padding
4.3.2 单列固定宽度居中
4.3.3 单列自适应宽度
4.3.4 奇怪的高度
4.3.5 边框的定义
4.4 郁闷的盒模型
4.5 文字旁边的图片
4.5.1 baseline
4.5.2 垂直对齐
4.5.3 图片的浮动
4.6 列表的应用
4.6.1 定义列表的外观
4.6.2 导航菜单的应用
4.6.3 列表的常见应用
4.7 表格
4.7.1 表格的控制
4.7.2 为不同浏览器使用不同的选择符
4.7.3 伪表格——看起来像, 其实却不是表格
4.8 表单
4.8.1 样式表单
4.8.2 表单元素的细节
4.8.3 注册表单
第五章 布局之道
5.1 固定的左右分栏
5.1.1 经典的三行两列固定宽度的布局
5.1.2 两列等高——背景伪造篇(一)
5.1.3 自由与未来
5.2 自适应的左右分栏
5.2.1 经典的三行两列自适应宽度的布局
5.2.2 两列等高——背景伪造篇(二)
5.2.3 百分比的细节
5.2.4 clear:right与overflow
5.3 一栏固定宽度, 一栏自适应宽度
5.3.1 单栏浮动
5.3.2 浮动的负值可以让主要的内容优先显示
5.3.3 Min & Max
5.4 多栏布局
5.4.1 三栏固定宽度和自适应的布局
5.4.2 混合固定宽度和自适应宽度的多栏布局
5.4.3 流出固定宽度的两栏在自适应宽度的中栏后面
5.4.4 偏移出来固定宽度的两栏在自适应宽度的中栏后面
5.5 组合之路
第六章 不要害怕各式各样的浏览器
6.1 浏览器的市场
6.1.1 古老的IE5.x
6.1.1.1 IE5.x/win
6.1.1.2 IE5.x/mac
6.1.2 讨厌的IE6
6.1.3 里程碑——IE7
6.1.4 新一代的IE4
6.1.5 开发利刃——Firefox
6.1.6 华丽的Oprea
6.1.7 异军——Safari
6.2 兼容之道
6.2.1 条件注释
6.2.2 过滤浏览器
6.2.3 破坏属性
6.2.4 Hack之道
6.3 兼容问题
6.3.1 一切从浮动开始
6.3.2 Layout初体验
6.3.3 闭合浮动元素
6.3.4 IE受不了浮动
6.3.4.1 浮动元素双倍margin
6.3.4.2 消失的margin-bottom
6.3.4.3 砍掉的内容
6.3.4.4 消失的内容
6.3.4.5 多了一只“猪”
6.3.5 IE的其他问题
6.3.5.1 背景消失
6.3.5.2 背景原点
6.3.5.3 没有内容的内容
6.3.5.4 消失的滚动条
6.3.5.5 更多的消失
6.3.6 Layout全接触
6.3.6.1 默认Layout元素
6.3.6.2 属性触发Layout
6.3.6.3 关于内联元素
6.3.6.4 重置hasLayout
6.3.6.5 引起问题
6.3.7 块级格式化范围(block formatting context)..
6.3.8 其他浏览器的问题
第七章 CSS常用技巧
7.1 滑动门技术
7.1.1 滑动门的原理
7.1.2 当只有文字被放大时
7.1.3 一张图片当N个门使用
7.1.4 一些可能会被忽略的问题
7.1.5 其他的一些应用
7.2 圆角
7.3 图片的细节
7.3.1 载入中的图片
7.3.2 加载不了的图片
7.3.3 缩放的图片
7.3.4 伪类缩放的图片
7.4 被放大的文字
7.5 当前标识
7.5.1 视觉标识
7.5.2 面包屑(Breadcrumbs)
7.5.3 操作步骤
7.6 居中元素
7.6.1 垂直居中多行文字
7.6.2 未知大小图片在已知大小容器中垂直和水平居中
7.6.3 相对页面垂直和水平居中已知大小的容器
7.7 隐藏的Tips会出现
7.7.1 实现原理
7.7.2 图片信息
第八章 文字的艺术
8.1 中文的特殊性
8.2 缩放机制
8.2.1 缩放的文字
8.2.2 缩放的盒子
8.3 行高与基线
8.3.1 行高的细节
8.3.2 基线
8.3.3 文本空间
8.4 input里的文字
8.5 链接的范围
8.5.1 额外的点击空间
8.5.2 缺少的点击空间
8.6 不间断的文字
8.7 省略掉的文字
8.8 字体的介绍
8.8.1 中文字体
8.8.2 英文字体
8.9 语言会影响到字体
第九章 细品命名与微格式
9.1 命名规则
9.2 命名原则
9.3 不再陌生的 Microformats
9.3.1 认识微格式
9.3.2 从微格式中提炼知识
9.4 ID与CLASS选择谁
9.5 自定义标签
9.6 命名的重要性
第十章 换个思维来设计
10.1 消失了文字, 看到了彩虹
10.1.1 文字变成图片的几种方法
10.1.2 文字也可以用Flash来表现
10.2 用div代替html/ body
10.3 缩放的布局
10.3.1 实现原理
10.3.2 缩放一半
10.3.3 精准em
10.4 网页是可以用叠的
10.4.1 在一屏幕里显示所有内容
10.4.2 图片的位置
10.4.3 position:absolute的层叠
10.5 百分比加减固定数值
10.5.1 50%+200px
10.5.2 50%-200px
10.6 两列等高——margin负值篇
10.7 类display:inline-block的应用
第十一章 隐藏在浏览器背后的CSS
11.1 (X)HTML与CSS校验的意义
11.2 IE背后的善良
11.2.1 IE常见私有属性
11.2.2 滤镜
11.3 火狐狸的尾巴带着CSS3的味道
11.3.1 At-rules 规则
11.3.2 Properties 属性
11.3.3 Values 属性值
11.4 其他浏览器的兼容方案
第十二章 JavaScript让Web动起来
12.1 概念
12.1.1 什么是JavaScript
12.1.2 ECMAScript是什么
12.1.3 什么是DOM
12.1.4 什么是BOM
12.1.5 想法
12.1.6 怎样让JavaScript运行
12.2 编程基础
12.2.1 语法
12.2.2 变量
12.2.3 基本数据类型
12.2.3.1 数值
12.2.3.2 字符串
12.2.3.3 布尔型
12.2.4 表达式与运算符
12.2.4.1 算术运算符
12.2.4.2 关系运算符
12.2.4.3 逻辑运算符
12.2.4.4 赋值运算符
12.2.5 基本语句
12.2.5.1 条件语句
12.2.5.2 循环语句
12.2.6 函数
12.2.7 对象
12.3 DOM无处不在
12.3.1 把文档表示为树
12.3.2 树的节点
12.3.3 节点的属性
12.3.4 HTML DOM 特征
12.4 事件处理
12.4.1 什么是事件
12.4.2 Event对象
12.4.3 事件的绑定
12.4.4 分离
12.5 只要改变className就可以改变很多——下拉菜单的练习
12.5.1 结构的选择
12.5.2 分离实现效果
12.5.3 想法
12.6 表单的辅助
12.6.1 检查数据
12.6.2 隐式提示
12.6.3 创建内容——innerHTML VS createElement
12.6.4 setTimeout的用处
12.6.5 Ajax初体验
12.6.6 HTML5的表单元素
12.7 class特效
第十三章 亲 和 力
13.1 概念
13.2 Web内容可访问性指南
13.2.1 并非所有的内容都是显示的
13.2.2 保持原有功能的有效性
13.2.3 让文字看得见
13.2.4 热键操作
13.2.5 导航
13.2.6 标题与内容
13.2.7 语言与编码
13.2.8 亲和力声明
13.2.9 建议
13.3 技术层上的一些亲和力
13.3.1 如何让链接变得更有表达能力
13.3.2 扩展链接的提示
13.3.3 节省步骤
13.3.4 图片还是背景图片
第十四章 XML的无限变化
14.1 XML的作用
14.1.1 XML能做什么
14.1.2 XML的表现
14.1.3 XML+CSS的表现
14.1.4 元素的语义
14.1.5 XSLT初体验
14.2 XPath与XSLT
14.2.1 XPath简介
14.2.2 XSLT应用XPath
14.2.3 程序性转换的XSLT
14.2.4 XSLT常见元素
14.2.5 XSLT函数 document
14.2.6 XPath定位
14.2.6.1 定位路径表达式
14.2.6.2 轴
14.2.6.3 节点测试
14.2.7 XPath基本表达式
14.2.8 XPath常见函数
14.2.9 X练习
14.3 华丽的RSS
14.3.1 复习
14.3.2 转换时间格式的模板与参数的应用
14.3.3 过滤与排序
14.3.4 背景色交替
14.3.5 显示(X)HTML内容
14.3.6 还能做什么?
14.4 XML的周边与命运
14.4.1 XML Schema
14.4.2 WML
14.4.3 SVG
14.4.4 XML的未来
第十五章 简单的实战
15.1 创建开源社区系统OpenLab的首页
15.1.1 分析结构
15.1.2 叠出来的头部
15.1.3 一张背景的导航
15.1.4 表格无敌
15.1.5 隐藏内容
15.1.6 显示的变化
15.2 Ao.A相册
15.2.1 分析结构
15.2.2 大背景
15.2.3 基本结构
15.2.4 图片展示
15.2.5 浮动的空白
15.2.6 小小的Tip提示
15.2.7 IE的兼容问题
15.2.8 放弃也是一种美!
15.2.9 精准到px
15.2.10 让网页动起来——JavaScript
15.2.10.1 那JavaScript要应用在哪些地方呢?
15.2.10.2 那使用JavaScript要注意什么呢?
15.2.11 让网页动起来——Flash
15.2.12 网页并非会按我们所想的显示
15.2.13 网页并不一定要用浏览器看的
15.2.14 打印网页
15.3 架构前端
15.3.1 脚本框架
15.3.2 模块化样式表
15.3.3 模块化(X)HTML
15.3.4 文件架构
15.4 给自己做点什么
15.4.1 开始设计属于你自己的网站
15.4.2 结构与表现
15.4.3 华丽的效果源自哪里?
第十六章 最后的建议
16.1 思维的乐趣
16.1.1 坚持独立思考
16.1.2 要善于自己发现和解决问题
16.1.3 不断丰富知识, 提高所掌握知识的质量
16.1.4 换个角度思考问题
16.2 减少重复开发的选择
16.3 让维护方便点
16.3.1 适当的注释
16.3.2 API手册
16.4 以后自学的方向
附录
· · · · · · (收起)
读后感
其实觉得这本书很不错的,至少在国内,能够用心写出这种书真的是很难得可贵。 但是,看到现在,发现这本书里有的地方写得实在是过于“简略”。是的,里面有很多的例子,但是那些代码连基本的注释都没有,所以,就导致你如果不是一个中级学习者,可能完全看不懂…… 不管怎么说...
一直在期待这本书,一直希望国内能有一本正视WEB标准,并且全面阐述WEB标准书籍。而这本书是我觉得国内最全面的一本关于WEB标准的书籍,这本书很厚,所以我说这是本参考书。说实话的,很少有人会抱着一本四五百页的书从头看到尾,我也没有。但是我却时常在遇到一些疑问的时候去...
内容很全面很充实。。。。关于定位,布局,浮动方面知识都一一讲解的很详细,比较适合初学者学习;而且还是百度的技术前辈写的,确实总结得很好。百度百度,一鞭直渡! 在国内,可以说作者很用心在写这本书。 但是,正是因为太过详细,反而显得部分易混易错的知识点不是很突出...
一直在期待这本书,一直希望国内能有一本正视WEB标准,并且全面阐述WEB标准书籍。而这本书是我觉得国内最全面的一本关于WEB标准的书籍,这本书很厚,所以我说这是本参考书。说实话的,很少有人会抱着一本四五百页的书从头看到尾,我也没有。但是我却时常在遇到一些疑问的时候去...
其实觉得这本书很不错的,至少在国内,能够用心写出这种书真的是很难得可贵。 但是,看到现在,发现这本书里有的地方写得实在是过于“简略”。是的,里面有很多的例子,但是那些代码连基本的注释都没有,所以,就导致你如果不是一个中级学习者,可能完全看不懂…… 不管怎么说...
用户评价
读完《Web标准设计》,我才意识到自己之前对Web设计的理解有多么片面。这本书就像一本引人入胜的侦探小说,一步步揭示了Web标准背后的逻辑和价值。作者并非简单地罗列技术细节,而是深入剖析了为什么需要遵循这些标准,它们是如何协同工作,最终共同构建出稳定、高效、易于维护的Web应用。 书中对Web性能优化的讲解也让我茅塞顿开。我之前总是想着如何让页面看起来更炫酷,却忽略了加载速度的重要性。作者详细讲解了如何通过优化图片、压缩文件、利用浏览器缓存等手段来提升网页的加载速度,以及这些优化措施对用户体验和SEO的积极影响。特别是关于代码分割(Code Splitting)和懒加载(Lazy Loading)的技术,让我对如何构建高性能的单页应用有了全新的认识。这本书绝对是我在Web设计学习道路上的一个重要里程碑。
这本书的理论深度和实践指导的结合做得非常出色。它不仅仅停留在概念层面,更提供了大量可操作的建议和代码示例。我尤其喜欢书中关于CSS布局的章节,它让我从混乱的浮动布局中解脱出来,真正掌握了Flexbox和Grid布局的精髓。以前我总是为了实现一个复杂的布局而花费大量时间,不断地调整margin和padding,而现在,通过Flexbox和Grid,我可以轻松地构建出响应式、自适应的页面结构,并且代码量大大减少。 此外,作者对于JavaScript在Web标准中的作用也进行了深入的探讨。他强调了JavaScript应该作为一种增强用户体验的工具,而不是核心内容的载体。这让我反思了自己之前过度依赖JavaScript来生成内容的做法,意识到这不仅对SEO不利,也会影响网页的加载速度和用户体验。书中关于渐进增强(Progressive Enhancement)和优雅降级(Graceful Degradation)的理念,为我提供了构建健壮、可靠Web应用的思路。
作为一名正在学习网页设计的新手,我一直被海量的信息和各种新兴的技术弄得眼花缭乱,总感觉自己抓不住重点。直到我看到了《Web标准设计》这本书,才感觉找到了“主心骨”。这本书并没有一上来就教你各种炫酷的效果,而是回归最根本的Web技术,用非常清晰易懂的方式讲解了HTML、CSS和JavaScript这三大基石。特别是对HTML语义化的阐述,让我明白原来每个标签都有它存在的意义,用对了才能让搜索引擎和辅助技术更好地理解我们的网页。 让我印象最深刻的是,书中关于可访问性(Accessibility)的讲解。我之前从未深入思考过,原来很多残障人士在浏览网页时会遇到各种困难,而Web标准正是解决这些问题的关键。作者用了很多实际的例子,比如如何使用`alt`属性为图片添加描述,如何为表单元素添加`label`,以及如何利用ARIA(Accessible Rich Internet Applications)属性来增强交互元素的可用性。读完这部分,我才意识到,一个真正优秀的设计,是能够惠及所有人的,而不仅仅是“看得见”的部分。
我是一名Web开发爱好者,一直对如何构建出既美观又实用的网站充满好奇。偶然间翻阅了《Web标准设计》,这本书彻底颠覆了我之前对网页制作的认知。它不仅仅是一本技术手册,更像是一本设计哲学指南。书中关于“内容为王”的理念让我印象深刻,强调了在设计过程中,内容的结构化和语义化是首要任务,而视觉呈现则应该服务于内容,而不是喧宾夺主。这一点在现代Web设计中尤为重要,因为用户越来越倾向于快速获取信息,一个清晰、有逻辑的网页结构能够极大地提升用户体验。 让我特别惊喜的是,这本书还详细讲解了Web标准对于网站长期维护和可扩展性的重要性。过去我经常遇到项目上线一段时间后,由于代码混乱、缺乏规范,导致后续修改困难重重,甚至出现意想不到的Bug。而《Web标准设计》通过引入模块化CSS、组件化思想,以及统一的代码风格,为我提供了一套行之有效的解决方案。读完后,我感觉自己仿佛掌握了一套“内功心法”,能够从容应对各种复杂的Web项目。
这本《Web标准设计》真的让我大开眼界!我一直以为网页设计就是堆砌HTML和CSS,把颜色、字体、图片调一调就好,没想到背后竟然有如此深奥的学问。这本书从最基础的HTML语义化讲起,让我明白原来一个简单的`<div>`标签背后隐藏着如此多的信息,对搜索引擎优化(SEO)和可访问性(Accessibility)至关重要。作者深入浅出地解释了为什么必须使用标准化的HTML标签,而不是随意创造自己的标签,这不仅是为了让代码更容易被理解和维护,更是为了让各种设备和浏览器都能正确地解析网页内容。 接着,书中对CSS的讲解更是让我醍醐灌顶。我之前写CSS总是东拼西凑,遇到样式冲突就头疼不已,而这本书系统地介绍了CSS的盒模型、选择器优先级、层叠规则,以及如何利用Flexbox和Grid布局来构建响应式网站。特别是关于响应式设计的章节,我终于理解了为什么很多网站在不同设备上看起来效果截然不同,以及如何通过媒体查询(Media Queries)来针对不同屏幕尺寸进行样式调整。作者还强调了CSS预处理器(如Sass/Less)的应用,这极大地提高了我的开发效率,让我能够编写出更简洁、更易于管理的CSS代码。
在CSS与web标准中不错的书
主要是语言比较生动,入门挺好的,不过有点旧了。
好友的作品,必需要认真阅读一下
想想看看这个能让“米随随”有结婚之后的三年之痒一样感觉的书
书本好厚,总结的真全面,作者辛苦啦,不过很多这方面的书篇章大体类似,要是简洁点就好了