描述
开 本: 16开纸 张: 胶版纸包 装: 平装-胶订是否套装: 否国际标准书号ISBN: 9787302473268
通俗易懂,结构清晰,由浅入深阐述网页设计师必知必会的基本技能和概念:
•
互联网与万维网基础
•
用HTML5创建网页
•
用CSS配置颜色和文本
•
用CSS配置页面布局
•
配置图像和多媒体
•
探究CSS3新增属性
•
运用网页设计*实践
•
网页的无障碍访问和使用性设计
•
为搜索引擎优化而设计
•
选择域名
•
上线,发布到网上
本书第1版和第2版深受师生喜爱,第3版根据学习需要提前在第2章介绍了HTML5结构化元素,并在第5章重点介绍了网页颜色的搭配。此外,第3版还增加了以下特色:
•
更多动手实作练习
•
案例学习有新增和修订
•
进一步深入介绍网页布局设计
•
进一步深入介绍移动网页设计
•
进一步深入介绍响应式网页设计技术
•
新增对CSS媒体查询的介绍
本书针对HTML5和CSS3的*标准进行及时的更新和修订,包含的主题有:Internet和Web概念;创建HTML5网页;用CSS配置颜色和文本;用CSS配置页面布局;配置图像和多媒体;探索新增的CSS3特性;应用网页设计*实践;设计可访问和可用的网页;搜索引擎优化设计;选择域名;发布网站。
本书适合所有对网页设计感兴趣的读者阅读,是一本理想的入门参考。
目 录
第1章 互联网和万维网基础 1
1.1 互联网和万维网 2
互联网 2
互联网的诞生 2
互联网的发展 2
万维网的诞生 2
个图形化浏览器 3
各种技术的聚合 3
1.2 网页标准和无障碍访问 4
W3C推荐标准 4
网页标准和无障碍访问 4
无障碍访问和法律 4
网页通用设计 5
1.3 浏览器和服务器 6
网络概述 6
客户端/服务器模型 6
1.4
Internet协议 8
电子邮件协议 8
超文本传输协议 8
文件传输协议 8
传输控制协议/Internet协议 8
IP地址 9
1.5 统一资源标识符(URI)和域名 10
URI和URL 10
域名 10
域名 11
通用域名 11
国家代码域名 12
域名系统DNS 13
1.6 网上的信息 14
网上的信息可靠吗? 14
网上的信息是的吗? 15
有没有指向其他资源的外部链接? 15
1.7
HTML概述 16
什么是HTML? 16
什么是XML? 17
什么是XHTML? 17
HTML的版本HTML5 17
1.8 网页幕后揭秘 18
文档类型定义(DTD) 18
网页模板 18
html元素 18
页头区域 19
主体区域 19
1.9 个网页 20
动手实作1.1 20
新建文件夹 20
保存文件 21
测试网页 22
复习和练习 23
复习题 23
动手练习 23
网上调研 24
聚焦网页设计 24
第2章 HTML基础 25
2.1 标题元素 26
动手实作2.1 26
无障碍访问和标题 27
HTML5更多的标题选项 27
2.2 段落元素 28
动手实作2.2 28
对齐 29
2.3 换行和水平标尺 30
换行元素 30
动手实作2.3 30
水平标尺元素 31
动手实作2.4 31
2.4 块引用元素 32
动手实作2.5 33
2.5 短语元素 34
2.6 有序列表 36
type属性,start属性和
reversed属性 36
动手实作2.6 37
2.7 无序列表 38
动手实作2.7 39
2.8 描述列表 40
动手实作2.8 41
2.9 特殊字符 42
动手实作2.9 42
2.10
HTML语法校验 44
动手实作2.10 44
2.11
结构元素 46
div元素 46
header元素 46
nav元素 46
main元素 46
footer元素 46
动手实作2.11 47
2.12
练习使用结构元素 48
动手实作2.12 48
2.13
锚元素 50
动手实作2.13 50
链接目标 51
链接 51
相对链接 51
block anchor 51
2.14
练习使用链接 52
站点地图 52
动手实作2.14 52
2.15
电子邮件链接 56
动手实作2.15 57
复习和练习 58
复习题 58
动手练习 59
聚焦网页设计 59
案例分析 59
Pacific Trails Resort案例分析 60
JavaJam Coffee House案例分析 62
第3章 网页设计基础 67
3.1 为目标受众设计 68
浏览器 69
屏幕分辨率 69
3.2 网 站 组 织 70
分级式组织 70
线性组织 71
随机组织 71
3.3 视觉设计原则 72
重复:在整个设计中重复视觉元素 72
对比:添加视觉刺激和吸引注意力 73
近似:分组相关项目 73
对齐:对齐元素实现视觉上的统一 73
3.4 提供无障碍访问 74
通用设计和增强无障碍访问的
受益者 74
无障碍设计有助于提高在搜索
引擎中的排名 74
法律规定 75
无障碍设计的热潮 75
3.5 文本的使用 76
文本设计的注意事项 76
3.6 调色板 78
十六进制颜色值 78
网页安全色 78
无障碍设计和颜色 79
3.7 针对目标受众进行设计 80
面向儿童 80
面向年轻人 80
面向所有人 81
面向老年人 81
3.8 选择颜色方案 83
以一张图片为基础的方案 83
色轮 84
变深、变浅和变灰 84
单色 85
相似色 85
互补色 86
分散互补色 86
三色 86
四色 87
实现颜色方案 87
3.9 使用图片和多媒体 88
文件大小和图片尺寸 88
抗锯齿/锯齿化文本的问题 88
只使用必要的多媒体 89
提供替代文本 89
3.10
更多设计考虑 90
感觉到的加载时间 91
屏 91
适当留白 91
水平滚动 91
3.11
导航设计 92
网站要易于导航 92
导航栏 92
图片导航 93
动态导航 93
站点地图 93
站点搜索功能 94
3.12
线框和页面布局 95
3.13
固定和流动布局 98
固定布局 98
流动布局 99
3.14
为移动网络设计 100
三种方式 100
移动设备设计考虑 100
桌面和移动网站的例子 101
移动设计小结 101
3.15
灵活响应的网页设计 102
3.16
网页设计实践 104
复习和练习 106
复习题 106
动手练习 107
聚焦网页设计 107
网页项目案例分析 108
项目里程碑 108
第4章 CSS基础 111
4.1
CSS概述 112
层叠样式表的优点 112
配置CSS的方法 113
层叠样式表的“层叠” 113
4.2
CSS选择符和声明 114
CSS语法基础 114
background-color属性 114
color属性 114
配置背景色和文本色 115
4.3 CSS颜色值语法 116
4.4 配置内联CSS 118
style属性 118
动手实作4.1 118
4.5 配置嵌入CSS 120
style元素 120
动手实作4.2 121
4.6 配置外部CSS 123
link元素 123
动手实作4.3 123
4.7
CSS的class、ID和后代选择符 125
class选择符 125
id选择符 125
后代选择符 125
动手实作4.4 125
4.8
span元素 127
span元素 127
动手实作4.5 127
4.9 练习使用CSS 129
动手实作4.6 129
将嵌入CSS转换为外部CSS 129
将网页与外部CSS文件关联 129
4.10
层叠 132
4.11
练习使用层叠 134
动手实作4.7 134
4.12
CSS语法校验 136
动手实作4.8 136
复习和练习 138
复习题 138
动手练习 139
聚焦网页设计 139
Pacific Trails Resort案例分析 140
JavaJam Coffee House案例分析 143
第5章 图形和文本样式基础 147
5.1 图片 148
GIF图片 148
JPEG图片 148
PNG图片 149
新的WebP图像格式 149
5.2
img元素 150
动手实作5.1 150
5.3 图片链接 152
动手实作5.2 152
5.4 配置背景图片 154
background-image属性 154
同时使用背景颜色和背景图片 154
浏览器如何显示背景图片 154
background-attachment属性 155
5.5 定位背景图片 156
background-repeat属性 156
定位背景图片 156
动手实作5.3 157
5.6 用CSS3配置多张背景图片 158
渐进式增强 158
动手实作5.4 159
5.7 用CSS配置字体 160
font-family属性 160
动手实作5.5 160
5.8
CSS文本属性 162
font-size属性 162
font-weight属性 162
font-style属性 162
line-height属性 163
text-align属性 163
text-decoration属性 163
text-indent属性 163
text-transform属性 163
letter-spacing属性 163
5.9 练习配置图形和文本 164
动手实作5.6 164
5.10
用CSS配置列表符号 166
用图片代替列表符号 167
动手实作5.7 167
5.11
收藏图标 168
配置收藏图标 168
动手实作5.8 168
5.12
图像映射 170
map元素 170
area元素 170
探索矩形图像映射 170
5.13
复习和练习 172
复习题 172
动手练习 173
聚焦网页设计 174
Pacific Trails Resort案例分析 174
JavaJam Coffee House案例分析 178
第6章 CSS进阶 183
6.1 宽度和高度 184
width属性 184
min-width属性 184
max-width属性 184
height属性 185
动手实作6.1 185
6.2 框模型 186
内容 186
填充 186
边框 186
边距 187
框模型实例 187
6.3 边距和填充 188
margin属性 188
padding属性 188
6.4 边框 190
动手实作6.2 191
6.5
CSS3圆角 192
动手实作6.3 193
6.6 居中页面内容 194
动手实作6.4 194
6.7
CSS3的边框和文本阴影 196
CSS3的box-shadow属性 196
CSS3的text-shadow属性 196
动手实作6.5 197
6.8
CSS3的background-clip和
background-origin属性 198
CSS3 background-clip属性 198
CSS3 background-origin属性 199
6.9
CSS3背景大小和缩放 200
6.10
练习使用CSS3属性 202
动手实作6.6 202
6.11
CSS3的opacity属性 204
动手实作6.7 204
6.12
CSS3 RGBA颜色 206
动手实作6.8 207
6.13
CSS3 HSLA颜色 208
色调、饱和度、亮度和alpha 208
HSLA颜色示例 208
动手实作6.9 209
6.14
CSS3的渐变 210
线性渐变语法 210
辐射渐变语法 210
CSS3渐变和渐进式增强 211
动手实作6.10 211
复习和练习 212
复习题 212
动手练习 213
聚焦网页设计 213
Pacific Trails Resort案例分析 213
JavaJam Coffee House案例分析 216
第7章 页面布局基础 221
7.1 正常流动 222
动手实作7.1 222
7.2 浮动 224
float属性 224
动手实作7.2 225
浮动元素和正常流动 225
7.3 清除浮动 226
clear属性 226
7.4 溢出 228
overflow属性 228
7.5 基本双栏布局 230
动手实作7.3 230
双栏布局的例子 234
7.6 用无序列表实现垂直导航 236
用CSS配置无序列表 236
用CSS text-decoration属性消除
下划线 236
动手实作7.4 237
7.7 用无序列表实现水平导航 238
CSS的display属性 238
动手实作7.5 239
7.8 用伪类实现CSS交互性 240
动手实作7.6 240
7.9 练习CSS双栏布局 242
动手实作7.7 242
7.10
用CSS进行定位 244
static定位 244
fixed定位 244
相对定位 244
定位 245
7.11
练
习 定 位 246
动手实作7.8 246
7.12
CSS精灵 248
动手实作7.9 249
复习和练习 250
复习题 250
动手练习 251
聚焦网页设计 251
Pacific Trails Resort案例分析 251
JavaJam Coffee House案例分析 252
第8章 链接、布局和移动
开发进阶 255
8.1 相对链接的更多知识 256
相对链接的例子 256
动手实作8.1 256
8.2 区段标识符 258
动手实作8.2 259
8.3
figure元素和figcaption元素 260
figure元素 260
figcaption元素 260
添加图题 260
动手实作8.3 261
8.4 图片浮动练习 262
动手实作8.4 262
8.5 更多HTML5元素 264
section元素 264
article元素 264
aside元素 264
time元素 264
动手实作8.5 264
8.6
HTML5与旧浏览器的兼容性 266
配置CSS块显示 266
HTML5 Shim 266
动手实作8.6 267
8.7
CSS对打印的支持 268
打印样式实践 268
动手实作8.7 269
8.8 移动网页设计 270
移动网页设计要考虑的问题 270
为移动使用优化布局 271
优化移动导航 271
优化移动图片 272
优化移动文本 272
为One Web而设计 272
8.9
viewport meta标记 273
8.10
CSS3媒体查询 275
什么是媒体查询 275
使用link元素的媒体查询例子 275
使用@media规则的媒体查询示例 276
8.11
练习媒体查询 277
动手实作8.8 277
8.12
灵活图像 281
动手实作8.9 281
8.13
测试移动显示 283
用桌面浏览器测试 284
针对专业开发人员 285
复习和练习 287
复习题 287
动手练习 288
聚焦网页设计 288
Pacific Trails Resort案例分析 288
JavaJam Coffee House案例分析 292
第9章 表格基础 297
9.1 表格概述 298
table元素 298
border属性 299
表格标题 299
9.2 表行、单元格和表头 300
动手实作9.1 301
9.3 跨行和跨列 302
动手实作9.2 302
9.4 配置无障碍访问表格 304
9.5 用CSS配置表格样式 306
动手实作9.3 306
9.6
CSS3结构性伪类 308
动手实作9.4 308
配置首字母 309
9.7 配置表格区域 310
复习和练习 312
复习题 312
动手练习 313
聚焦网页设计 313
Pacific Trails Resort案例分析 314
JavaJam Coffee House案例分析 315
第10章 表单基础 317
10.1
概述 318
form元素 318
表单控件 319
10.2
文本框 320
10.3
提交按钮和重置按钮 322
提交按钮 322
重置按钮 322
示例表单 322
动手实作10.1 323
10.4
复选框和单选钮 324
复选框 324
单选钮 325
10.5
隐藏字段和密码框 326
隐藏字段 326
密码框 326
10.6
textarea元素 328
动手实作10.2 329
10.7
select和option元素 330
select元素 330
option元素 330
10.8
label元素 332
动手实作10.3 333
10.9
fieldset元素和legend元素 334
fieldset元素 334
legend元素 334
用CSS配置fieldset分组样式 335
10.10
用CSS配置表单样式 336
动手实作10.4 336
属性选择符 337
10.11
服务器端处理 338
隐私和表单 339
10.12
表单练习 340
动手实作10.5 340
10.13
HTML5文本表单控件 342
E-mail地址输入表单控件 342
URL表单输入控件 342
电话号码表单输入控件 343
搜索词输入表单控件 343
HTML5文本框表单控件的
有效属性 343
10.14
HTML5的datalist元素 344
10.15
HTML5的slider控件和spinner
控件 346
slider表单输入控件 346
spinner表单输入控件 347
HTML5和渐进式增强 347
10.16
HTML5日历和颜色池控件 348
日历输入表单控件 348
颜色池表单控件 349
10.17
HTML5表单练习 350
动手实作10.6 350
复习和练习 352
复习题 352
动手练习 353
聚焦网页设计 353
Pacific Trails Resort案例分析 353
JavaJam Coffee House案例分析 357
第11章 媒体和交互性基础 361
11.1
插件、容器和codec 362
辅助应用程序和插件 362
11.2
配置音频和视频 364
访问音频或视频文件 364
动手实作11.1 364
多媒体和浏览器兼容问题 365
11.3
Flash和HTML5 embed元素 366
embed元素 366
动手实作11.2 367
11.4
HTML5 audio和source元素 368
audio元素 368
source元素 368
动手实作11.3 369
11.5
HTML5 video和source元素 370
video元素 370
source元素 370
11.6
练习HTML5视频 372
动手实作11.4 372
11.7
iframe元素 374
动手实作11.5 375
11.8
CSS3的transform属性 376
CSS3旋转变换 376
CSS3伸缩变换 377
动手实作11.6 377
11.9
CSS3 transition属性 378
动手实作11.7 378
11.10
练习CSS过渡 380
动手实作11.8 380
11.11
CSS下拉菜单 382
动手实作11.9 382
11.12
JavaScript和jQuery 384
JavaScript 384
jQuery 385
11.13
HTML5 API 386
地理位置 386
Web存储 386
离线Web应用程序 386
用canvas元素绘图 387
复习和练习 388
复习题 388
动手练习 388
聚焦网页设计 389
Pacific Trails Resort案例分析 389
JavaJam Coffee House案例分析 391
第12章 Web发布基础 393
12.1
注册域名 394
选择域名 394
注册域名 395
12.2
选择Web主机 396
Web主机的类型 396
选择虚拟主机 396
12.3
用FTP发布 399
FTP应用程序 399
用FTP连接 399
使用FTP 399
12.4
提交到搜索引擎 401
搜索引擎的组成 401
在搜索引擎中列出你的网站 402
12.5
搜索引擎优化 403
链接 404
图片和多媒体 404
有效代码 404
有价值的内容 404
12.6
无障碍访问测试 405
通用设计和无障碍访问 405
Web无障碍访问标准 405
测试无障碍设计相容性 406
12.7
可用性测试 407
进行可用性测试 407
动手实作12.1 408
复习和练习 409
复习题 409
动手练习 410
聚焦网页设计 410
Pacific Trails Resort案例分析 411
JavaJam Coffee House案例分析 411
附录A 复习和练习答案 413
附录B HTML5速查表 414
附录C CSS速查表 418
附录D XHTML速查表 422
附录E 对比XHTML和HTML5 425
附录F WCAG 2.0快速参考 433
附录G Web安全调色板 435
前 言
《HTML5与CSS3从入门到精通》适用于网页设计或开发初级课程。每个主题都只用两页篇幅进行讲解,在指出关键点的同时,一般还包含动手实作。全书覆盖网页设计师需要掌握的所有基础知识,包括以下主题:
互联网和万维网的概念
用HTML5创建网页
用层叠样式表(CSS)配置文本、颜色和网页布局
对网页上的图片和多媒体进行配置
探索新的CSS3属性
网页设计实践
对无障碍访问、可用性和搜索引擎优化的考量
取得域名和主机
发布到网上
本书中文版的学生文件可以从配套网站http://pan.baidu.com/s/1yd43W下载,其中包括动手实作的原始文件和解决方案,以及案例分析的原始文件。
在本书第2版取得极大成功之后,第3版新增了以下特性:
更丰富的动手实作
全面更新了范例代码、案例分析和网络资源
根据HTML5元素和HTML5 API进行了更新
对响应性网页设计技术和CSS媒体查询进行了更全面的介绍
更新了HTML5和CSS参考资源
本书特色
立足当下,展望未来。本书采用独特的教学方式,使学生在学习适合当下的网页设计技能的同时,掌握新的HTML5编码技术,迎接未来的挑战。
精心挑选主题。本书既传授“硬”技能,比如HTML5和层叠样式表(第1章和第2章,第4章~第11章),也传授“软”技能,比如网页设计(第3章)和发布到网上(第12章)。打下良好基础之后,学生作为网页设计师追寻自己的职业梦想时,会更加得心应手。使用本书的学生和老师会发现,我们这个课程变得更有趣了。学生在创建网页和网站时,可以一起讨论、综合和运用软硬技能。每个主题都用两页的篇幅来讲解,除了快速提供需要掌握的知识点,还通过动手实作来立即巩固所学到的知识。
每个主题两页篇幅。每个主题都用简洁的、两页篇幅的一个小节进行讲述。许多小节还包含马上就可以开始的动手实作,旨在帮助巩固新学的技能或概念。这种精心设计对学业沉重的学生尤其有用,因为他们需要立即搞清楚关键的概念。
动手实作。网页开发是一门技能,只有通过动手实作才能更好地掌握。本书十分强调实际动手能力的培养,体现在每章的动手实作练习题、章末练习题以及通过真实的案例分析来完成网站的开发。
网站案例分析。从第2章开始,案例分析将贯穿全书。它的作用是巩固每章所学的技能。教师资源中心提供了案例的示例解决方案,网址是http://www.pearsonhighered.com/irc。
聚焦网页设计。大多数章都提供额外的活动来探索与本章有关的网页设计主题。这些活动可以用于巩固、扩展和增强课程主题。
在我的网页开发课堂中,学生经常会问到一些同样的问题。书中列出了这些问题,并用FAQ标志注明。
开发无障碍网页的重要性日益增强,所以无障碍网页设计技术将贯穿全书。这个特殊标记可以让您更方便地找到这些信息。
本书使用特殊的道德规范标记注明与网页开发有关的道德规范话题。
提供有用的背景资料,或者帮助提高生产力。
这个特殊标记代表可供深入探索的网络资源,方便学生对当前主题进行深入学习。
参考资料。附录提供了丰富的参考资料,包括XHTML参考、HTML5参考、CSS参考、WCAG 2.0快速参考以及对ARIA Landmark Roles的概述。
视频讲解(Video Note)旨在讲解关键编程概念和技术,演示从设计到编码来解决问题的过程。视频讲解使学生可以方便地自学自己感兴趣的主题,支持选择、播放、倒退、快进和暂停。每当看到 视频讲解:……,都表明当前主题有对应的视频讲解。视频列表可以从本书中文版配套网站获取,网址是http://pan.baidu.com/s/1yd43W。注意,由于是英文视频,所以为了方便索引,书中保留了这些视频的英文名称。
补充材料
学生资源。本书中文版读者请访问http://pan.baidu.com/s/1yd43W获取动手实作的原始文件和解决方案以及案例分析的原始文件。
教师资源。以下补充资源只供符合条件的教师使用,请发送邮件到[email protected]了解更多信息。
章末练习题答案
案例分析作业答案
试题
PPT演示文稿
示范教学大纲
作者网站。除了出版社为本书提供的配套网站,作者另外建了一个网站,网址为http://www.webdevbasics.net。该网站拥有许多额外的资源,包括调色板、Flash学习/复习游戏、Adobe
Flash教程、Adobe Fireworks教程和Adobe Photoshop教程。还为每一章都单独建一个网页,提供这一章的示例、链接和更新信息。该网站由作者个人维护,不是出版商赞助的。
致 谢
特别感谢Addison-Wesley的同仁,包括Matt Goldstein,Kelsey Loanes,Carole Snyder和Camille Trentacoste。
感谢我的家人,尤其是我的“另一半”,感谢他的耐心、关爱、支持和鼓励。后还要特别纪念我的父亲,我们永远想念他。
第2章 HTML基础
第1章使用HTML5创建了个网页,并在浏览器中进行了测试。用DTD指定了要使用的HTML版本,并使用了,
,
学习内容:
使用标题、段落、div、列表和块引用来配置网页主体
配置特殊实体字符、换行符和水平标尺
使用短语元素来配置文本
校验网页语法
使用新的HTML5 header,nav和footer元素配置网页
使用锚元素链接网页
配置链接、相对链接和电子邮件链接
2.1 标 题 元 素
标题(heading)元素从h1到h6共六级。标题元素包含的文本被浏览器渲染为“块”(block)。标题上下自动添加空白(white space)。
的字号,
小。取决于所用字体(第6章将进一步讲解字号),
,
和
标记中的文本看起来可能比默认字号小一点。标题文本全都加粗。
,
和
标记中的文本看起来可能比默认字号小一点。标题文本全都加粗。
标记中的文本看起来可能比默认字号小一点。标题文本全都加粗。
为什么不将标题放到页头区域?
经常有学生试图将标题(heading)元素或者说h元素放到文档的页头(head)而不是主体(body)区域,造成浏览器显示的网页看起来不理想。虽然head和heading听起来差不多,但heading一定要放到body中。
图2.1显示了6级标题的效果。
图2.1 示例heading.html
动手实作2.1
为了创建如图2.1所示的网页,启动记事本或其他文本编辑器。打开学生文件chapter1/template.html。修改title元素并在body区域添加标题。如以下加粗的代码所示。
Heading Level 1
Heading Level 2
Heading Level 3
Heading Level 4
Heading Level 5
Heading Level 6
将文件另存为heading2.html。打开网页浏览器(如Internet Explorer或Firefox)测试网页。它看起来应该和图2.1显示的页面相似。可将自己的文档与学生文件chapter2/heading.html进行比较。
无障碍访问和标题
标题使网页更容易访问和使用。一个好的编码规范是使用标题创建网页内容大纲。利用h1,h2和h3等元素来建立内容的层次结构。同时,将网页内容包含在段落和列表等块显示元素中。在图2.2中,
标记在网页顶部显示网站名称,
标记显示网页名称,其他标题元素则用于标识更小的主题。
有视力障碍的用户可配置自己的屏幕朗读器显示网页上的标题。制作网页时利用标题对网页进行组织将使所有用户获益,其中包括那些有视力障碍的。
图2.2 利用标题创建网页大纲
HTML5更多的标题选项
你或许听说过HTML5新增的header元素。header提供了更多的标题配置选项,而且通常包含一个h1元素。本章稍后会讨论header元素。
2.2 段 落 元 素
段落元素组织句子或文本。
和
之间的文本将显示成段落,上下各显示空行。图2.3在个标题之后显示了一个段落。
图2.3 使用标题和段落的网页
动手实作2.2
为了创建图2.3的网页,启动记事本或其他文本编辑器,打开学生文件chapter2/heading.html。修改网页标题(title),在
和
之间添加一个段落。
Example
Heading Level 1
This is a sample paragraph.
Heading tags can help to make your pages more accessible and usable. It is good
coding practice to use heading tags to outline the structure of your web page
content.
Heading Level 2
Heading Level 3
Heading Level 4
Heading Level 5
Heading Level 6
将文档另存为paragraph2.html。启动浏览器测试网页。它看起来应该和图2.3相似。可将自己的文档与学生文件chapter2/paragraph.html进行比较。注意浏览器窗口大小改变时段落文本将自动换行。
对齐
测试网页时,会注意到标题和文本都是从左边开始显示的,这称为左对齐,是网页的默认对齐方式。在以前版本的HTML中,想让段落或标题居中或右对齐可以使用align属性。但这个属性已在HTML5中废弃。换言之,已经从W3C HTML5草案规范中删除了。将在第6章、第7章和第8章学习如何使用CSS配置对齐。
发布Web内容时避免使用长段落。人们喜欢快速扫视网页,而非逐字阅读。使用标题概括网页内容,并使用短的段落(三五句话即可)和列表(本章稍后学习)。
2.3 换行和水平标尺
换行元素
换行元素造成浏览器跳到下一行显示下一个元素或文本。换行标记单独使用——不成对使用,没有开始和结束标记。我们说它是一种独立或自包容标记。它在HTML5中称为void元素,编码成
。图2.4的网页在段落的句话之后使用了换行。
图2.4 注意,句话之后发生了换行
动手实作2.3
为了创建图2.4的网页,请启动文本编辑器并打开学生文件chapter2/paragraph.html。将标题修改成“Line Break
Example”。将光标移至段落句话“This is a sample paragraph.”之后。按Enter键,保存网页并在浏览器中查看。注意,虽然源代码中的“This is a sample paragraph.”是单独占一行,但浏览器并不那样显示。要看到和源代码一样的换行效果,必须添加换行标记。编辑文件,在句话之后添加
标记,如下所示:
Heading Level 1
This is a sample paragraph.
Heading tags can help to make your pages more accessible and usable.
It is good coding practice to use heading tags to outline the structure of your
web page content.
Heading Level 2
Heading Level 3
Heading Level 4
Heading Level 5
Heading Level 6
将文件另存为linebreak2.html。启动浏览器进行测试,结果如图2.4所示。可将自己的作品与学生文件Chapter2/linebreak.html进行比较。
水平标尺元素
网页设计师经常使用线和边框等视觉元素分隔或定义网页的不同区域。水平标尺元素
在在网页上配置一条水平线。由于水平标尺元素不包含任何文本,所以编码成void元素,不成对使用。水平标尺元素在HTML5中有新的语义——代表内容主题分隔或变化。图2.5展示了段落后添加水平标尺的一个网页(学生文件chapter2/hr.html)。第6章将学习如何使用层叠样式表(CSS)为网页元素配置线和边框。
至于要不要在网页上使用水平标尺,请三思而行,一般留空就足以分隔内容了。
动手实作2.4
为了创建图2.5的网页,请启动文本编辑器并打开学生文件chapter2/linebreak.html。将标题修改成“Horizontal
Rule Example”。将光标移至
标记后并按Enter键另起一行。在新行上输入
,如下所示:
Heading Level 1
This is a sample paragraph.
Heading tags can help to
make your pages more accessible and usable. It is good coding practice to use
heading tags to outline the structure of your web page content.
Heading Level 2
Heading Level 3
Heading Level 4
Heading Level 5
Heading Level 6
将文件另存为hr2.html。启动浏览器进行测试,结果如图2.5所示。可将自己的作品与学生文件Chapter2/hr.html进行比较。
2.4 块引用元素
除了用段落和标题组织文本,有时还需要为网页添加引文。
标记以特殊方式显示引文块——左右两边都缩进。引文块包含在
和
标记之间。
图2.6展示了包含标题、段落和块引用的示例网页。
图2.6 块引用元素中的文本被缩进了
使用
标记可以方便地缩进文本块。你或许会产生疑问,
是适合任意文本,还是仅适合长引文。
标记在语义上正确的用法是缩进网页中的大段引文块。为什么要强调语义?这是为将来的“语义网”准备的。《科学美国人》(Scientific American)将“语义网”描述成“对计算机有意义的一种新形式的网页内容,具有广阔发展前景。”以符合语义的、结构性的方式使用HTML是迈向“语义网”的步。所以如果仅仅是缩进文本,就不要使用
。本书以后会讲解如何配置元素的边距和填充。
动手实作2.5
为了创建图2.6的网页,请启动文本编辑器并打开chapter1/template.html。修改title元素。然后在主体区域添加一个
标题,一个
标记和一个
标记,如下所示:
Blockquote
ExampleThe Power of the Web
According to Tim Berners-Lee, the
inventor of the World Wide Web, at http://www.w3.org/WAI/:The power of the Web is in its
universality. Access by everyoneregardless of disability is an essential
aspect.
将文件另存为blockquote2.html。启动浏览器进行测试,结果如图2.6所示。可将自己的作品与学生文件Chapter2/blockquote.html进行比较。
为什么我的网页看起来还是一样的?
经常有这样的情况,把网页修改好了而浏览器显示的仍是旧的页面。如果确定已修改了网页,而浏览器没有显示更改的内容,下面这些技巧或许能解决问题。
1. 确定修改之后的网页文件已经保存。
2. 确定文件保存到正确位置——硬盘上的特定文件夹。
3. 确认浏览器从正确位置打开网页。
4. 一定要单击浏览器的“刷新”或“重载”按钮(或者按功能键F5)。
2.5 短 语 元 素
短语元素指定容器标记之间的文本的上下文与含义。不同浏览器对这些样式的解释也不同。短语元素嵌入它周围的文本中(称为内联显示),可应用于一个文本区域,也可应用于单个字符。例如,元素指定和它关联的文本要以一种比正常文本更“强调”的方式显示。
表2.1列出了常见的短语元素及其用法示例。注意,一些标记(比如和)在今天的浏览器中会造成和一样的显示(倾斜)。这两个标记在语义上将文本描述成引文(citation)或定义(definition),但两种情况下实际都显示为倾斜。
表2.1 短语元素
元素
例子
用法
WIPO
标识文本是缩写。配置title属性
加粗文本
文本没有额外的重要性,但样式采用加粗字体
引用文本
标识文本是引文或参考,通常倾斜显示
代码(code)文本
标识文本是程序代码,通常使用等宽字体
定义文本
标识文本是词汇或术语定义,通常倾斜显示
强调文本
使文本强调或突出于周边的普通文本,通常倾斜显示
倾斜文本
文本没有额外的重要性,但样式采用倾斜字体
输入文本
标识要用户输入的文本,通常用等宽字体显示
记号文本
文本高亮显示以便参考(仅HTML5)
sample文本
标识是程序的示例输出,通常使用等宽字体
小文本
用小字号显示的免责声明等
强调文本
使文本强调或突出于周边的普通文本,通常加粗显示
下标文本
在基线以下用小文本显示的下标
上标文本
在基线以上用小文本显示的上标
变量文本
标识并显示变量或程序输出,通常倾斜显示
注意,所有短语元素都是容器标记,必须有开始和结束标记。如表2.1所示,元素表明文本有很“强”的重要性。浏览器和其他用户代理通常(但并非总是)加粗显示文本。屏幕朗读器(比如Jaws或Window-Eye)可能会将文本解释为重读。例如,如果想要强调下面这行文本中的电话号码:
请拨打免费电话表明你的Web开发需求: 888.555.5555
就应像下面这样编码:
请拨打免费电话表明你的Web开发需求:
888.555.5555
注意,开始和结束标记都包含在段落标记(
和
)之中,这是正确的嵌套方式,被认为是良构(well formed)代码。如果
和标记对相互重叠,而不是一对标记嵌套在另一对标记中,嵌套就不正确了。嵌套不正确的代码无法通过HTML校验(参见稍后的2.10节“HTML语法校验”),而且可能造成显示问题。
图2.7展示了在网页(学生文件chapter2/em.html)中使用标记以倾斜方式对短语“Access by everyone”进行强调。
图2.7 标记的实际效果
相应的代码片断如下:
The power of the Web is in its
universality.Access by everyone
regardless of disability is an essentialaspect.
2.6 有 序 列 表
列表用于组织信息。标题、短段落和列表使网页显得更清晰,更易阅读。HTML支持创建三种列表:描述列表、有序列表和无序列表。所有列表都渲染成“块”,上下自动添加空白。本节讨论有序列表,它通过数字或字母编号来组织列表中包含的信息。有序列表的序号可以是数字(默认)、大写字母、小写字母、大写罗马数字和小写罗马数字。图2.8展示了有序列表的一个例子。
图2.8 有序列表的例子
有序列表以
标记开始,
标记结束;每个列表项以
标记开始, 标记结束。对图2.8的网页的标题和有序列表进行配置的代码如下:
My Favorite Colors
- Blue
- Teal
- Red
type属性,start属性和reversed属性
type属性改变列表序号的类型。例如,创建按大写字母排序的有序列表可以用
。表2.2列出了有序列表的type属性及其值。
表2.2 有序列表的type属性
值
序号
1
数字(默认)
A
大写字母
a
小写字母
I
罗马数字
i
小写罗马数字
另一个有用的属性是start,它指定序号的起始值(例如从“10”开始)。新的HTML5 reversed属性(reversed=”reversed”)可以指定降序排序。
动手实作2.6
这个动手实作将在同一个网页中添加标题和有序列表。为了创建如图2.9所示的网页,请启动文本编辑器度打开chapter1/template.html。修改title元素,并在主体区域添加h1,ol和li标记。如下所示:
Heading and List My Favorite Colors
- Blue
- Teal
- Red
将文件另存为ol2.html。启动浏览器并测试网页,结果应该如图2.9所示。可将自己的作品与学生文件chapter2/ol.html进行比较。
花些时间试验一下type属性,将有序列表设置成大写字母编号。将文件另存为ol3.html并在浏览器中测试。将自己的作品与学生文件chapter2/ola.html进行比较。
为什么动手实作中的网页代码要缩进?
网页代码是否缩进对浏览器没有任何影响,但为了方便人们阅读和维护代码,有必要合理缩进代码。例如,
- 标记通常应缩进几个空格,这样在源代码中就能看出列表的样子。虽然没有明确规定缩进空格的数量,但你的老师或工作单位可能有一定的标准。习惯使用缩进,有利于创建更容易维护的网页。
2.7 无 序 列 表
无序列表在列表的每个项目前都加上列表符号。默认列表符号由浏览器决定,但一般都是圆点。图2.10是无序列表的一个例子。
图2.10 无序列表的例子
无序列表以
标记开始,
标记结束。ul元素是块显示元素,上下自动添加空白。每个列表项以
- 标记开始,
标记结束。对图2.10的网页的标题和无序列表进行配置的代码如下:
h1>My Favorite
Colors
- Blue
- Teal
- Red
可不可以改变无序列表的列表符号?
在HTML5之前,可以为
标记设置type属性将默认列表符号更改为方块type=”square”)或空心圆(type=”circle”)。但HTML5已弃用无序列表的type属性,因为它只具有装饰性,无实际意义。但不用担心,第5章会讲解如何用CSS技术配置列表符号来显示图片和形状。
动手实作2.7
这个动手实作将在同一个网页中添加标题和无序列表。为了创建如图2.11所示的网页,请启动文本编辑器并打开chapter1/template.html。修改title元素,并在主体区域添加h1,ul和li标记。如下所示:
Heading and List My Favorite Colors
- Blue
- Teal
- Red
图2.11 无序列表
将文件另存为ul2.html。启动浏览器并测试网页,结果应该如图2.11所示。可将自己的作品与学生文件chapter2/ul.html进行比较。
花些时间试验一下type属性,将无序列表的项目符号设置成方块。将文件另存为ul3.html并在浏览器中测试。将自己的作品与学生文件chapter2/ulsquare.html比较。
2.8 描 述 列 表
描述列表(XHTML和HTML4称为定义列表)用于组织术语及其定义。术语单独显示,对它的描述根据需要可以无限长。术语独占一行并顶满格显示,描述另起一行并缩进。描述列表还可用于组织常见问题(FAQ)及其答案。问题和答案通过缩进加以区分。任何类型的信息如果包含多个术语和较长的解释,就适合使用描述列表。图2.12是描述列表的例子。
图2.12 描述列表
描述列表以
标记开始,
标记结束;每个要描述的术语以
- 标记开始,
标记结束;每项描述内容以
- 标记开始,
标记结束。
动手实作2.8
这个动手实作将在同一个网页中添加标题和描述列表。为了创建如图2.12所示的网页,请启动文本编辑器并打开chapter1/template.html。修改title元素,并在主体区域添加h1,dl,dt和dd标记。如下所示:
Description List Sample Description
List
- TCP
- Transmission Control Protocol is a method (protocol) used
alongwith the Internet Protocol (IP) to send
data in the form of messageunits, called packets, between computers
over the Internet.
- IP
- Internet Protocol is the method or protocol by which data is
sent from one computer to another on the
Internet. Each computer onthe Internet is uniquely identified by an
IP address.
- FTP
- File Transfer Protocol is a protocol used to exchange files
between computers on the
Internet.
- HTTP
- Hypertext Transfer Protocol is the protocol used for
exchanging text, graphic images, sound,
video, and other multimediafiles on the Web.
将文件另存为description2.html。启动浏览器并测试网页,结果应该如图2.12所示。不必担心换行位置不同——重要的是每行
- 术语都独占一行,对应的
- 描述则在它下方缩进。尝试调整浏览器窗口的大小,注意描述文本会自动换行。可将自己的作品与学生文件chapter2/description.html进行比较。
为什么网页在我的浏览器中的显示和例子不同?
文本根据屏幕分辨率或浏览器视口的大小而自动缩进。Web开发人员的一个重要工作就是保证使用不同屏幕分辨率、不同浏览器视口大小和不同浏览器的用户看到大致相同的网页,不至于严重“走样”。
评论
还没有评论。