Web标准实战

第一部分 重新审视HTML

第1章 列表 2

1.1 逛商店 2

1.2 测验 3

1.2.1 方法A：用br/来分隔 3

...

第一部分 重新审视HTML

第1章 列表 2

1.1 逛商店 2

1.2 测验 3

1.2.1 方法A：用br/来分隔 3

1.2.2 折行问题 3

1.2.3 方法B：项目符号 4

1.2.4 方法C：更加接近 5

1.2.5 方法D：包装的喜悦 6

1.3 内容回顾 6

1.4 实例秀 7

1.4.1 去掉项目符号 7

1.4.2 创建更酷的项目符号 8

1.4.3 可导航的列表 9

1.4.4 迷你选项卡形状 12

第2章 标题 14

2.1 构造文档标题的最佳方式是什么 14

2.1.1 方法A：富有语义 14

2.1.2 方法B：p与b的组合 15

2.1.3 方法C：样式和内容 16

2.2 内容回顾 18

2.3 实例秀 18

2.3.1 简洁的样式 18

2.3.2 加背景 19

2.3.3 可变换的图标 21

2.3.4 方便地更新 21

2.3.5 变色龙效果 22

2.4 小结 23

第3章 表格是邪恶的吗 24

3.1 完全的表格形态 24

3.2 人人可有的表格 25

3.3 添加摘要 27

3.4 表头 28

3.5 表头和数据的关系 29

3.6 使用abbr属性 31

3.7 thead、tfoot和tbody 31

3.8 表格是邪恶的吗 33

3.9 实例秀 33

3.9.1 创建网格 33

3.9.2 压缩空白 34

3.9.3 除IE/Mac之外的版本 35

3.9.4 腾出空间 35

3.9.5 自定义表头外观 36

3.9.6 带背景图片的表头 37

3.9.7 给ID指定图标 39

3.10 小结 41

第4章 引用文本 42

4.1 方法A：缺乏语义 42

4.2 方法B：类的演出 43

4.3 方法C：blockquote是最好的 43

4.4 内容回顾 44

4.5 实例秀 44

4.5.1 刨根问底的cite 45

4.5.2 行内引用 45

4.5.3 为blockquote设定样式 46

4.6 小结 51

第5章 表单 52

5.1 创建表单时有哪些选择 52

5.1.1 方法A：使用一个表格 52

5.1.2 方法B：没有表格，却变得拥挤 53

5.1.3 方法C：简单并且更有亲和力 54

5.2 内容回顾 58

5.3 实例秀 59

5.3.1 神奇的tabindex 59

5.3.2 为频繁访问的表单设定accesskey 60

5.3.3 给表单设定样式 61

5.4 小结 67

第6章 strong、em及其他短语元素 68

6.1 表现化与结构化 69

6.1.1 为什么strong和em比b和i要好 69

6.1.2 那么em呢 70

6.1.3 只要粗体或者斜体就行了 70

6.1.4 粗体加斜体 72

6.2 内容回顾 73

6.3 实例秀 73

6.3.1 短语元素 73

6.3.2 cite设计 74

6.3.3 abbr和acronym 76

6.3.4 code 78

6.3.5 samp 78

6.3.6 var 79

6.3.7 kbd 79

6.4 最后的短语 79

第7章 锚点 80

7.1 当指向页面特定部分时，如何构建锚点才是最佳方案 80

7.1.1 方法A：空的名字 80

7.1.2 方法B：都在名称中 81

7.1.3 方法C：去掉名称 82

7.1.4 方法D：全合一 84

7.2 内容回顾 84

7.3 实例秀 85

7.3.1 title属性 85

7.3.2 给链接设定样式 86

7.4 收锚启航 90

第8章 更多列表 91

8.1 构造编号列表的最佳方式 91

8.1.1 方法A：无序的顺序 92

8.1.2 方法B：有序列表 92

8.2 构造一组词条和解释的最佳代码是什么 94

8.2.1 方法A 95

8.2.2 方法B 95

8.3 内容回顾 98

8.4 实例秀 98

8.4.1 标识各个部分 98

8.4.2 自定义编号 99

8.4.3 将编号加到CSS里 99

8.4.4 最终效果 100

8.5 小结 101

第9章 精简HTML代码 102

9.1 使用Web标准构建网站时如何精简HTML代码 102

9.1.1 子代选择符 103

9.1.2 方法A：愉快地使用类 103

9.1.3 方法B：自然选择 104

9.1.4 不必要的div 106

9.1.5 方法A：愉快地使用div 107

9.1.6 方法B：丢掉div 107

9.1.7 其他示例 107

9.1.8 内容回顾 108

9.2 实例秀 108

9.2.1 未加工的HTML代码 108

9.2.2 添加样式 109

9.2.3 自定义项目符号 110

9.2.4 添加边框 111

9.3 小结 113

第二部分 样式点滴

第10章 应用CSS 116

10.1 怎样将CSS应用到文档上 116

10.1.1 方法A：style元素 117

10.1.2 方法B：外部样式表 118

10.1.3 方法C：@import 118

10.1.4 为多个样式表结合使用方法B和C 120

10.1.5 两种级别的样式 121

10.1.6 拥抱层叠 122

10.1.7 方法D：行内样式 123

10.2 内容回顾 124

10.3 实例秀 125

10.4 小结 128

第11章 打印样式 129

11.1 如何对打印指定样式 129

11.1.1 媒介类型 130

11.1.2 两种定向方式 130

11.1.3 方法A：media属性 130

11.1.4 方法B：@media或者@import 131

11.1.5 允许多个值 131

11.1.6 分隔屏幕和打印样式 132

11.1.7 建立打印样式表 132

11.2 内容回顾 137

第12章 CSS布局 138

12.1 如何用CSS构造两栏布局 138

12.1.1 方法A：浮动侧栏 139

12.1.2 方法B：双浮动 144

12.1.3 方法C：浮动内容 145

12.1.4 方法D：绝对定位 148

12.2 内容回顾 154

12.3 实例秀 155

12.3.1 框模型问题 155

12.3.2 伪栏 158

12.4 小结 160

第13章 设定文本样式 161

13.1 怎么把超文本变酷 161

13.1.1 改变Times字体 162

13.1.2 改变行间距 162

13.1.3 都是一家人 163

13.1.4 字符间距调整 164

13.1.5 段首字母下沉 165

13.1.6 文本对齐 167

13.1.7 字形变换 168

13.1.8 小型大写字母 169

13.1.9 段落缩进 169

13.2 内容回顾 170

第14章 图片替换 171

14.1 怎样通过CSS用图片替换文本 171

14.1.1 不存在完美的解决方案 171

14.1.2 使用它，但要小心 172

14.2 方法A：Fahrner图片替换 172

14.2.1 HTML代码 172

14.2.2 额外的标签 172

14.2.3 CSS代码 173

14.2.4 指定背景 173

14.2.5 优点 174

14.2.6 缺点 174

14.2.7 权衡利弊 175

14.3 方法B：Leahy/Langridge图片替(LIR) 175

14.3.1 HTML和CSS代码 175

14.3.2 框模型的痛苦 176

14.3.3 缺点 176

14.4 方法C：Phark方法 176

14.4.1 HTML和CSS代码 176

14.4.2 还是不完美 177

14.5 内容回顾 177

14.6 实例秀 178

14.6.1 标志切换 178

14.6.2 示例 178

14.6.3 一对标志 179

14.6.4 CSS代码 179

14.6.5 恢复链接 180

14.6.6 结果 180

14.7 具有亲和力的可翻转图片选项卡 181

14.7.1 问题 181

14.7.2 解决方案 182

14.7.3 HTML代码：一个列表统领一切 182

14.7.4 一张图片，三种状态 182

14.7.5 CSS：魔法产生的地方 183

14.7.6 结果 184

14.7.7 为什么要使用它 185

14.7.8 文本不能缩放 185

14.8 兼容性 185

14.9 小结 186

第15章 为body设定样式 187

15.1 两栏，有时又是三栏 187

15.1.1 页面和样式结构 189

15.1.2 body有类 190

15.1.3 不仅可用于栏 190

15.2 “你在这里” 191

15.2.1 导航列表 191

15.2.2 标明各个部分 192

15.2.3 魔法CSS 193

15.3 内容回顾 194

第16章 下一步 195

16.1 下一步去往何处 195

16.1.1 组织和出版物 195

16.1.2 富有影响力和启发性的博客 197

16.1.3 书籍 199

16.2 结束语 200

索引 201