新書推薦：
《
罗马之变（法语直译，再现罗马共和国走向罗马帝国的辉煌历史）
》
售價：HK$
109.8
《
自然之争：1600年以来苏格兰和英格兰北部地区的环境史（新史学译丛）
》
售價：HK$
106.4
《
硝烟下的博弈：工业革命与中西方战争
》
售價：HK$
87.4
《
让内的理性主义 发现无意识之旅
》
售價：HK$
66.1
《
知命不惧：从芝诺到马可·奥勒留的生活艺术
》
售價：HK$
110.9
《
Zemax光学设计从基础到实践
》
售價：HK$
132.2
《
全球化的黎明：亚洲大航海时代
》
售價：HK$
109.8
《
危局
》
售價：HK$
84.0
|
| 編輯推薦： |
本书以零基础讲解为宗旨，用实例引导读者深入学习，采取“基础知识→核心技术→高级应用→项目案例实战”的讲解模式，深入浅出地讲解HTML5的各项技术及实战技能。
本书第1篇“基础知识”主要讲解初识HTML5、HTML5网页文档结构、HTML5与HTML4的区别等；第2篇“核心技术”主要讲解设计网页文本内容、网页列表与段落设计、HTML5网页中的图像、使用HTML5建立超链接、使用HTML5创建表单、使用HTML5创建表格、 HTML5中的多媒体、使用HTML5绘制图形、HTML 5中的文件与拖放等；第3篇“高级应用”主要讲解获取地理位置、Web通信新技术、数据存储技术、使用Web
Worker处理线程、HTML5服务器发送事件、构建离线的Web应用等；第4篇“项目案例实战”主要讲解HTML5、CSS3和JavaScript的搭配应用案例，制作电子商务类网页，制作休闲娱乐类网页，制作企业门户类网页。
本书配套的DVD光盘中赠送了丰富的资源，诸如HTML5案例源码命令、教学幻灯片、本书精品教学视频、HTML5标签速查手册、CSS属性速查表、CSS+DIV布局赏析案例、精彩网站配色
|
| 內容簡介： |
本书以零基础讲解为宗旨，用实例引导读者深入学习，采取“基础知识→核心技术→高级应用→项目案例实战”的讲解模式，深入浅出地讲解HTML5的各项技术及实战技能。
本书第1篇“基础知识”主要讲解初识HTML5、HTML5网页文档结构、HTML5与HTML4的区别等；第2篇“核心技术”主要讲解设计网页文本内容、网页列表与段落设计、HTML5网页中的图像、使用HTML5建立超链接、使用HTML5创建表单、使用HTML5创建表格、 HTML5中的多媒体、使用HTML5绘制图形、HTML 5中的文件与拖放等；第3篇“高级应用”主要讲解获取地理位置、Web通信新技术、数据存储技术、使用Web Worker处理线程、HTML5服务器发送事件、构建离线的Web应用等；第4篇“项目案例实战”主要讲解HTML5、CSS3和JavaScript的搭配应用案例，制作电子商务类网页，制作休闲娱乐类网页，制作企业门户类网页。
本书配套的DVD光盘中赠送了丰富的资源，诸如HTML5案例源码命令、教学幻灯片、本书精品教学视频、HTML5标签速查手册、CSS属性速查表、CSS+DIV布局赏析案例、精彩网站配色方案赏析、网页样式与布局案例赏析、Web前端工程师常见面试题等。
本书适合任何想学习HTML5的人员，无论您是否从事计算机相关行业或是否接触过HTML5，通过学习均可快速地掌握HTML5的设计方法和技巧。
|
| 目錄：
|
目 录
第1篇 基础知识
第1章 初识HTML53
1.1 HTML5简介4
1.1.1 HTML 5简介4
1.1.2 HTML5文件的基本结构5
1.2 HTML5文件的编写方法5
1.2.1 案例1——手工编写HTML55
1.2.2 案例2——使用HTML编辑器6
1.3 使用浏览器查看HTML5文件10
1.3.1 各大浏览器与HTML5
的兼容11
1.3.2 案例3——查看页面效果11
1.3.3 案例4——查看源文件11
1.4 跟我练练手12
1.4.1 练习目标12
1.4.2 上机练习12
1.5 高手甜点12
第2章 HTML5网页文档结构15
2.1 Web标准16
2.1.1 Web标准概述16
2.1.2 Web标准规定的内容16
2.2 HTML5文档的基本结构17
2.2.1 文档类型说明18
2.2.2 HTML5标记HTML19
2.2.3 头标记HEAD19
2.2.4 网页的主体标记BODY22
2.2.5 页面注释标记!-- --22
2.3 综合案例——符合W3C标准的
HTML5网页制作23
2.4 跟我练练手24
2.4.1 练习目标24
2.4.2 上机练习25
2.5 高手甜点25
第3章 HTML5与HTML4的区别27
3.1 新增的主体结构元素28
3.1.1 案例1——section元素的使用28
3.1.2 案例2——article元素的使用29
3.1.3 案例3——aside元素的使用32
3.1.4 案例4——nav元素的使用33
3.1.5 案例5——time元素的使用36
3.2 新增的非主体结构元素37
3.2.1 案例6——header元素的使用37
3.2.2 案例7——hgroup元素的使用38
3.2.3 案例8——footer元素的使用40
3.2.4 案例9——figure元素的使用42
3.2.5 案例10——address元素的
使用45
3.3 新增其他常用元素46
3.3.1 案例11——mark元素的使用46
3.3.2 案例12——rp元素、rt元素
与ruby元素的使用48
3.3.3 案例13——progress元素的
使用49
3.3.4 案例14——command元素的
使用50
3.3.5 案例15——embed元素的
使用50
3.3.6 案例16——details元素与
summary元素的使用51
3.3.7 案例17——datalist元素的
使用52
3.4 新增全局属性53
3.4.1 案例18——contentEditable
属性的使用53
3.4.2 案例19——spellcheck属性的
使用54
3.4.3 案例20——tabIndex属性的
使用55
3.5 新增的其他属性56
3.5.1 案例21——表单相关属性的
使用56
3.5.2 案例22——链接相关属性的
使用64
3.5.3 案例23——其他属性的使用66
3.6 HTML5废除的属性66
3.7 跟我练练手68
3.7.1 练习目标68
3.7.2 上机练习68
3.8 高手甜点68
第2篇 核心技术
第4章 设计网页文本内容73
4.1 标题文字的建立74
4.1.1 案例1——标题文字标记74
4.1.2 案例2——标题文字的对齐
方式75
4.2 设置文字格式75
4.2.1 案例3——设置文字字体75
4.2.2 案例4——设置字号77
4.2.3 案例5——设置文字颜色78
4.2.4 案例6——设置粗体、斜体、
下划线79
4.2.5 案例7——设置上标与下标81
4.2.6 案例8——设置字体风格82
4.2.7 案例9——设置加粗字体83
4.2.8 案例10——设置字体复合
属性84
4.2.9 案例11——设置阴影文本85
4.2.10 案例12——控制换行86
4.3 设置段落格式88
4.3.1 案例13——设置段落标记88
4.3.2 案例14——设置换行标记89
4.4 设置网页水平线90
4.4.1 案例15——添加水平线90
4.4.2 案例16——设置水平线的
宽度与高度91
4.4.3 案例17——设置水平线的
颜色92
4.4.4 案例18——设置水平线的
对齐方式92
4.4.5 案例19——去掉水平线阴影93
4.5 综合案例——成才教育网文本设计94
4.6 跟我练练手95
4.6.1 练习目标95
4.6.2 上机练习95
4.7 高手甜点95
第5章 网页列表与段落设计97
5.1 网页文字列表设计98
5.1.1 案例1——建立无序列表ul98
5.1.2 案例2——建立有序列表ol99
5.1.3 案例3——建立不同类型的
无序列表100
5.1.4 案例4——建立不同类型的
有序列表101
5.1.5 案例5——嵌套列表102
5.1.6 案例6——自定义列表dl103
5.2 网页段落格式的设计104
5.2.1 案例7——设计单词间隔
word-spacing104
5.2.2 案例8——设计字符间隔
letter-spacing105
5.2.3 案例9——设计文字修饰
text-decoration106
5.2.4 案例10——设计垂直对齐
方式vertical-align107
5.2.5 案例11——设计文本转换
text-transform109
5.2.6 案例12——设计水平对齐
方式text-align110
5.2.7 案例13——设计文本缩进
text-indent112
5.2.8 案例14——设计文本行高
line-height113
5.2.9 案例15——处理空白
white-space114
5.2.10 案例16——文本反排
unicode-bidi115
5.3 综合案例——制作图文混排型
旅游网页117
5.4 跟我练练手118
5.4.1 练习目标118
5.4.2 上机练习118
5.5 高手甜点118
第6章 HTML5网页中的图像121
6.1 网页中的图像img122
6.1.1 网页中支持的图片格式122
6.1.2 图像中的路径122
6.2 在网页中插入图像124
6.2.1 案例1——插入图像124
6.2.2 案例2——从不同位置插入
图像125
6.3 编辑网页中的图像126
6.3.1 案例3——设置图像的宽度
和高度126
6.3.2 案例4——设置图像的提示
文字127
6.3.3 案例5——将图片设置为
网页背景128
6.3.4 案例6——排列图像129
6.4 实战演练——图文并茂房屋装饰
装修网页130
6.5 跟我练练手131
6.5.1 练习目标131
6.5.2 上机练习131
6.6 高手甜点131
第7章 使用HTML5建立超链接133
7.1 网页超链接的概念134
7.1.1 什么是网页超链接134
7.1.2 超链接中的URL134
7.1.3 超链接的URL类型135
7.2 建立网页超级链接135
7.2.1 案例1——创建超文本链接135
7.2.2 案例2——创建图片链接137
7.2.3 案例3——创建下载链接138
7.2.4 案例4——使用相对路径
和绝对路径139
7.2.5 案例5——设置以新窗口
显示超链接页面140
7.2.6 案例6——设置电子邮件
链接142
7.3 案例7——浮动框架iframe的使用143
7.4 案例8——精确定位热点区域145
7.5 综合案例——使用锚链接制作
电子书阅读网页148
7.6 跟我练练手151
7.6.1 练习目标151
7.6.2 上机练习151
7.7 高手甜点151
第8章 使用HTML5创建表单153
8.1 案例1——认识表单154
8.2 表单基本元素的使用155
8.2.1 案例2——单行文本输入框
text的使用155
8.2.2 案例3——多行文本输入框
textarea的使用156
8.2.3 案例4——密码域password
的使用156
8.2.4 案例5——单选按钮radio的
使用157
8.2.5 案例6——复选框checkbox
的使用158
8.2.6 案例7——下拉列表框select
的使用159
8.2.7 案例8——普通按钮button
的使用160
8.2.8 案例9——提交按钮submit
的使用161
8.2.9 案例10——重置按钮reset
的使用162
8.3 表单高级元素的使用163
8.3.1 案例11——url属性的应用163
8.3.2 案例12——email属性的
应用164
8.3.3 案例13——date属性和
times属性的应用165
8.3.4 案例14——number属性的
应用166
8.3.5 案例15——range属性的
应用167
8.3.6 案例16——required属性
的应用167
8.4 综合案例——创建用户反馈表单168
8.5 跟我练练手170
8.5.1 练习目标170
8.5.2 上机练习170
8.6 高手甜点170
第9章 使用HTML5创建表格171
9.1 表格的基本结构172
9.2 使用HTML5创建表格173
9.2.1 案例1——创建普通表格174
9.2.2 案例2——创建一个带有
标题的表格175
9.2.3 案例3——定义表格的边框
类型176
9.2.4 案例4——定义表格的表头177
9.2.5 案例5——设置表格背景178
9.2.6 案例6——设置单元格背景180
9.2.7 案例7——合并单元格181
9.2.8 案例8——排列单元格中的
内容185
9.2.9 案例9——设置单元格的
行高与列宽186
9.3 案例10——创建完整的表格187
9.4 综合案例——制作商品报价表189
9.5 跟我练练手191
9.5.1 练习目标191
9.5.2 上机练习191
9.6 高手甜点191
第10章 HTML5中的多媒体193
10.1 网页音频标签audio194
10.1.1 audio标签概述194
10.1.2 audio标签的属性194
10.1.3 音频解码器195
10.1.4 audio标签浏览器的支持
情况195
10.2 网页视频标签video195
10.2.1 video标签概述195
10.2.2 video标签的属性195
10.2.3 视频解码器196
10.2.4 video标签浏览器的支持
情况196
10.3 添加网页音频文件197
10.3.1 案例1——设置背景音乐197
10.3.2 案例2——设置音乐循环
播放198
10.4 添加网页视频文件198
10.4.1 案例3——为网页添加视频
文件198
10.4.2 案例4——设置自动运行199
10.4.3 案例5——设置视频文件
的循环播放200
10.4.4 案例6——设置视频窗口
的高度与宽度201
10.5 添加网页滚动文字202
10.5.1 案例7——滚动文字标签
的使用202
10.5.2 案例8——滚动方向属性
的应用203
10.5.3 案例9——滚动方式属性
的应用204
10.5.4 案例10——滚动速度属性
的应用205
10.5.5 案例11——滚动延迟属性
的应用206
10.5.6 案例12——滚动循环属性
的应用206
10.5.7 案例13——滚动范围属性
的应用207
10.5.8 案例14——滚动背景颜色
属性的应用208
10.5.9 案例15——滚动空间属性
的应用209
10.6 跟我练练手210
10.6.1 练习目标210
10.6.2 上机练习210
10.7 高手甜点210
第11章 使用HTML5绘制图形213
11.1 什么是canvas214
11.2 绘制基本形状215
11.2.1 案例1——绘制矩形215
11.2.2 案例2——绘制圆形216
11.2.3 案例3——使用moveTo与
lineTo绘制直线217
11.2.4 案例4——使用bezierCurveTo
绘制贝济埃曲线219
11.3 绘制渐变图形221
11.3.1 案例5——绘制线性渐变221
11.3.2 案例6——绘制径向渐变222
11.4 绘制变形图形223
11.4.1 案例7——变换原点坐标223
11.4.2 案例8——图形缩放225
11.4.3 案例9——旋转图形226
11.5 绘制其他样式的图形227
11.5.1 案例10——图形组合227
11.5.2 案例11——绘制带阴影的
图形229
11.5.3 案例12——绘制文字230
11.6 使用图像232
11.6.1 案例13——绘制图像232
11.6.2 案例14——图像平铺234
11.6.3 案例15——图像裁剪235
11.6.4 案例16——像素处理237
11.7 图形的保存与恢复239
11.7.1 案例17——保存与恢复
状态239
11.7.2 案例18——保存文件240
11.8 实战演练——绘制图形商标241
11.9 跟我练练手243
11.9.1 练习目标243
11.9.2 上机练习243
11.10 高手甜点244
第12章 HTML5中的文件与拖放245
12.1 选择文件246
12.1.1 案例1——选择单个文件246
12.1.2 案例2——选择多个文件246
12.2 使用FileReader接口读取文件247
12.2.1 案例3——检测浏览器
是否支持FileReader接口247
12.2.2 案例4——FileReader接口
的方法248
12.2.3 案例5——使用
readAsDataURL方法预览
图片248
12.2.4 案例6——使用readAsText
方法读取文本文件250
12.3 使用HTML5实现文件的拖放252
12.3.1 案例7——认识文件拖放
的过程252
12.3.2 浏览器支持情况253
12.3.3 案例8——在网页中拖放
图片253
12.3.4 案例9——在网页中拖放
文字254
12.4 综合案例——在网页中来回拖放
图片256
12.5 跟我练练手258
12.5.1 练习目标258
12.5.2 上机练习258
12.6 专家甜点258
第3篇 高级应用
第13章 获取地理位置261
13.1 Geolocation API获取地理位置262
13.1.1 地理地位的原理262
13.1.2 获取定位信息的方法262
13.1.3 常用地理定位方法262
13.1.4 案例1——判断浏览器是
否支持HTML5获取地理
位置信息263
13.1.5 案例2——指定纬度和经度
坐标264
13.1.6 案例3——获取当前位置的
经度与纬度265
13.2 目前浏览器对地理定位的支持情况267
13.3 综合案例——在网页中调用
Google地图268
13.4 跟我练练手271
13.4.1 练习目标271
13.4.2 上机练习271
13.5 高手甜点271
第14章 Web通信新技术273
14.1 跨文档消息传输274
14.1.1 跨文档消息传输的基本知识274
14.1.2 案例1——跨文档通信应用
测试274
14.2 WebSockets API277
14.2.1 什么是WebSocket API277
14.2.2 WebSockets通信基础277
14.2.3 案例2——服务器端使用
Web Sockets API279
14.2.4 案例3——客户机端使用
WebSockets API282
14.3 综合案例——编写简单的
WebSocket服务器283
14.4 跟我练练手287
14.4.1 练习目标287
14.4.2 上机练习287
14.5 高手甜点287
第15章 数据存储技术289
15.1 认识Web存储290
15.1.1 本地存储和Cookies的区别290
15.1.2 Web存储方法290
15.2 使用HTML5 Web Storage API290
15.2.1 案例1——测试浏览器的
支持情况291
15.2.2 案例2——使用session
Storage方法创建对象291
15.2.3 案例3——使用localStorage
方法创建对象293
15.2.4 案例4——Web Storage API
的其他操作295
15.2.5 案例5——使用JSON对象
存取数据296
15.3 在本地建立数据库299
15.3.1 本地数据库概述299
15.3.2 用executeSql来执行查询299
15.3.3 使用transaction方法处理
事件300
15.4 目前浏览器对Web存储的支持
情况300
15.5 综合案例——制作简单Web
留言本300
15.6 跟我练练手303
15.6.1 练习目标303
15.6.2 上机练习304
15.7 高手甜点304
第16章 使用Web Worker处理线程305
16.1 Web Workers306
16.1.1 Web Workers 概述306
16.1.2 线程中常用的变量、函数
与类307
16.1.3 案例1——与线程进行数据
的交互307
16.2 线程嵌套310
16.2.1 案例2——单线程嵌套310
16.2.2 案例3——多个子线程中的
数据交互312
16.3 综合案例——创建Web Worker
计数器314
16.4 跟我练练手315
16.4.1 练习目标315
16.4.2 上机练习315
16.5 高手甜点316
第17章 HTML5服务器发送事件317
17.1 服务器发送事件概述318
17.2 服务器发送事件的实现过程318
17.2.1 案例1——检测浏览器是否
支持Server-Sent事件318
17.2.2 案例2——使用EventSource
对象319
17.2.3 案例3——编写服务器端
代码319
17.3 综合案例——服务器发送事件实战
应用320
17.4 跟我练练手321
17.4.1 练习目标321
17.4.2 上机练习321
17.5 高手甜点322
第18章 构建离线的Web应用323
18.1 HTML 5离线Web应用概述324
18.2 实例1——使用HTML5离线Web
应用API324
18.2.1 检查浏览器的支持情况324
18.2.2 搭建简单的离线应用程序325
18.2.3 支持离线行为325
18.2.4 Manifest文件326
18.2.5 ApplicationCache API327
18.3 实例2——使用HTML5离线Web
应用构建应用329
18.3.1 创建记录资源的manifest
文件329
18.3.2 创建构成界面的HTML和
CSS329
18.3.3 创建离线的JavaScript330
18.3.4 检查applicationCache的
支持情况331
18.3.5 为Update按钮添加处理
函数332
18.3.6 添加Storage功能代码332
18.3.7 添加离线事件处理程序333
18.4 综合案例——离线定位跟踪333
18.5 跟我练练手338
18.5.1 练习目标338
18.5.2 上机练习338
18.6 高手甜点338
第4篇 项目案例实战
第19章 HTML5、CSS3和JavaScript
的搭配应用案例341
19.1 案例1——打字效果的文字的制作342
19.2 案例2——文字升降特效的制作344
19.3 案例3——跑马灯效果的制作345
19.4 案例4——闪烁图片的制作347
19.5 案例5——左右移动的图片的制作349
19.6 案例6——向上滚动菜单的制作351
19.7 案例7——跟随鼠标移动的图片
的制作353
19.8 案例8——树形菜单的制作355
19.9 案例9——时钟特效的制作360
19.10 案例10——颜色选择器的制作362
19.11 案例11——绘制火柴棒人物364
19.12 跟我练练手367
19.12.1 练习目标367
19.12.2 上机练习367
19.13 高手甜点368
第20章 制作电子商务类网页369
20.1 整体布局370
20.1.1 设计分析370
20.1.2 排版架构370
20.2 模块组成371
20.3 制作步骤371
20.3.1 样式表371
20.3.2 网页头部379
20.3.3 主体第一通栏381
20.3.4 主体第二通栏382
20.3.5 主体第三通栏383
20.3.6 网页底部384
第21章 制作休闲娱乐类网页387
21.1 整体布局388
21.1.1 设计分析388
21.1.2 排版架构389
21.2 模块组成389
21.3 制作步骤390
21.3.1 制作样式表390
21.3.2 Logo与导航菜单398
21.3.3 搜索条399
21.3.4 左侧视频模块399
21.3.5 评论模块400
21.3.6 右侧热门推荐402
21.3.7 底部模块404
第22章 制作企业门户类网页407
22.1 整体布局408
22.1.1 设计分析408
22.1.2 排版架构408
22.2 模块组成409
22.3 制作步骤409
22.3.1 样式表409
22.3.2 网页头部411
22.3.3 导航菜单栏412
22.3.4 中间主体第一栏412
22.3.5 中间主体第二栏416
22.3.6 中间主体第三栏419
22.3.7 中间主体第四栏425
22.3.8 中间主体第五栏430
22.3.9 网页底部435
|
| 內容試閱：
|
第2章 HTML5网页文档结构
文档结构是指文章的内部结构，在网页中则表现为整个页面的内部结构。在HTML5之前，并没有对网页文档的结构进行明确的规范，当打开一个网页源代码时，可能无法分清哪些是头部，哪些是尾部，而在HTML5中则对这些进行了明确的规范。
本章要点已掌握的在方框中打钩
掌握Web标准规定的内容。
掌握HTML5文档的基本结构。
掌握制作符合W3C标准的HTML5网页。
2.1 Web 标 准
在学习HTML5网页文档结构之前，首先需要了解Web的标准，该标准主要是为了解决各种浏览器与网页的兼容性问题。
2.1.1 Web标准概述
“没有规矩，不成方圆。”对于网页设计也是如此。为了Web更好地发展，对开发人员和最终用户而言，非常重要的事情就是在开发新的应用程序时，浏览器开发商和站点开发商需要共同遵守标准，这个标准就是Web标准。
Web标准的最终目的就是可以确保每个人都有权利访问相同的信息。如果没有Web标准，那么未来的Web应用都是不可能实现的。同时，Web标准也可以使站点开发更快捷，更令人愉快。
为了缩短开发和维护时间，未来的网站将不得不根据标准来进行编码。这样，开发人员就不必为了得到相同的结果，而挣扎于多版本的开发。一旦Web开发人员遵守了Web标准，那么开发人员可以更容易地理解彼此的编码，Web开发的团队协作也将会得到简化。因此，Web标准在开发中是很重要的。
使用Web标准有如下优点。
1．对于访问者
1 文件下载与页面显示速度更快。
2 内容能被更多的用户所访问包括失明、弱视、色盲等残障人士。
3 内容能被更广泛的设备所访问包括屏幕阅读机、手持设备、打印机等。
4 用户能够通过样式选择定制自己的表现界面。
5 所有页面都能提供适于打印的版本。
2．对于网站所有者
1 更少的代码和组件，容易维护。
2 带宽要求降低代码更简洁，成本降低。
3 更容易被搜寻引擎搜索到。
4 改版方便，不需要变动页面内容。
5 提供打印版本而不需要复制内容。
6 提高网站易用性。在美国，有严格的法律条款Section 508来约束政府网站必须达到一定的易用性，其他国家也有类似的要求。
2.1.2 Web标准规定的内容
Web标准不是某一个标准，而是一系列标准的集合。网页主要由三个部分组成：结构Structure、表现Presentation和行为Behavior，那么，对应的标准也分三个方面，分别如下。
1 结构化标准语言主要包括XHTML和XML。
2 表现标准语言主要包括CSS。
3 行为标准主要包括对象模型，如W3C DOM、ECMAScript等。
这些标准大部分由W3C起草和发布，也有一些是其他标准组织制定的标准，比如ECMAEuropean Computer Manufacturers Association的ECMAScript标准。
1．结构标准语言
1??XML
XML是The Extensible Markup Language可扩展标识语言的简写。和HTML一样，XML同样来源于SGML，但XML是一种能定义其他语言的语言。XML最初设计的目的是为弥补HTML的不足，以强大的扩展性满足网络信息发布的需要，后来逐渐用于网络数据的转换和描述。
2??XHTML
XHTML是The Extensible HyperText Markup Language可扩展超文本标识语言的缩写。XML虽然数据转换能力强大，完全可以替代HTML，但面对成千上万已有的站点，直接采用XML还为时过早。因此，我们在HTML4.0的基础上，用XML的规则对其进行扩展，得到了XHTML。简单地说，建立XHTML的目的就是实现HTML向XML的过渡。
2．表现标准语言
CSS是Cascading Style Sheets层叠样式表的缩写。W3C创建CSS标准的目的是以CSS取代HTML表格式布局、帧和其他表现的语言。纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构，使站点的访问及维护更加容易。
3．行为标准
1??DOM
DOM是Document Object Model文档对象模型的缩写。根据W3C DOM规范，DOM是一种与浏览器、平台、语言无关的接口，编程人员通过它可以访问页面中其他的标准组件。简单理解，DOM解决了Netscaped的Javascript和Microsoft的JavaScript之间的冲突，给予Web设计师和开发者一个标准的方法，让他们来访问站点中的数据、脚本和表现层对象。
2??ECMAScript
ECMAScript是ECMA制定的标准脚本语言JavaScript。目前推荐遵循的是ECMAScript 262。
2.2 HTML5文档的基本结构
HTML5文档最基本的结构主要包括文档类型说明、开始标记、元信息、主体标记和页面注释标记等。
在一个HTML文档中，必须包含HTMLHTML标记，并且放在一个HTML文档的开始和结束位置。即每个文档以HTML开始，以HTML结束。
HTML HTML之间通常包含两个部分，分别是HEAD HEAD和BODY BODY，HEAD标记包含HTML头部信息，如文档标题、样式定义等。BODY包含文档主体部分，即网页内容。需要注意的是，HTML标记不区分大小写。
为了便于读者从整体把握HTML文档结构，下面通过一个HTML页面来介绍HTML页面的整体结构，示例代码如下。
!DOCTYPE HTML
HTML
HEAD
TITLE网页标题TITLE
HEAD
BODY
?网页内容
BODY
HTML
从上面的代码可以看出，一个基本的HTML页由以下几个部分构成。
1 !DOCTYPE声明必须位于HTML5文档中的第一行，也就是位于HTML标记之前。该标记告知浏览器文档所使用的HTML规范。!DOCTYPE声明不属于HTML标记；它是一条指令，告诉浏览器编写页面所用的标记的版本。由于HTML5版本还没有得到浏览器的完全认可，后面介绍时还采用以前通用的标准。
2 HTMLHTML说明本页面使用HTML语言编写，使浏览器软件能够准确无误地解释、显示。
3 HEADHEAD。HEAD是HTML的头部标记，头部信息不显示在网页中，此标记内可以保护一下其他标记。用于说明文件标题和整个文件的一些公用属性。可以通过STYLE标记定义CSS样式表，通过SCRIPT标记定义JavaScript脚本文件。
4 TITLETITLE是HEAD中的重要组成部分，它包含的内容显示在浏览器的窗口标题栏中。如果没有TITLE，浏览器标题栏显示本页的文件名。
5 BODYBODY包含HTML页面的实际内容，显示在浏览器窗口的客户区中。例如，页面中文字、图像、动画、超链接及其他HTML相关的内容都是定义在该标记里面。
2.2.1 文档类型说明
Web页面的文档类型说明DOCTYPE被极大地简化了。细心的读者会发现，在第1章中使用Dreamweaver CC创建HTML文档时，文档头部的类型说明代码如下。
!DOCTYPE html PUBLIC "-W3CDTD XHTML 1.0 TransitionalEN" "http:www.w3.orgTRxhtml1DTDxhtml1-transitional.dtd"
上面为XHTML文档类型说明，读者可以看到这段代码既麻烦又难记，HTML5对文档类型进行了简化，简单到15个字符就可以了，具体代码如下。
!DOCTYPE html
DOCTYPE的声明需要出现在HTML5文件的第一行。
2.2.2 HTML5标记HTML
HTML5标记代表文档的开始。由于HTML5语言语法的松散特性，该标记可以省略，但是为了使之符合Web标准和文档的完整性，养成良好的编写习惯，建议不要省略该标记。
HTML5标记以HTML开头，以HTML结尾，文档的所有内容书写在开头和结尾的中间部分。语法格式如下。
html
...
html
2.2.3 头标记HEAD
头标记HEAD用于说明文档头部相关信息，一般包括标题信息、元信息、定义CSS样式和脚本代码等。HTML的头部信息是以HEAD开始，以HEAD结束，语法格式如下。
head
…
head
head元素的作用范围是整篇文档，定义在HTML语言头部的内容往往不会在网页上直接显示。
1．标题标记TITLE
HTML页面的标题一般是用来说明页面的用途，它显示在浏览器的标题栏中。在HTML文档中，标题信息设置在HEAD与HEAD之间。标题标记以TITLE开始，以TITLE结束，语法格式如下。
title
…
title
在标记中间的“… ”就是标题的内容，它可以帮助用户更好地识别页面。预览网页时，设置的标题在浏览器的左上方标题栏中显示。此外，在Windows任务栏中显示的也是这个标题，如图2-1所示。
图2-1 标题栏在浏览器中的显示效果
页面的标题只有一个，它们在HTML文档的头部，即Head和HEAD之间。
2．元信息标记META
META元素可提供有关页面的元信息meta-information，比如针对搜索引擎和更新频度的描述和关键词。
META标签位于文档的头部，不包含任何内容。META标签的属性定义了与文档相关联的名称值对，META标签提供的属性及取值如表2-1所示。
表2-1 META标签提供的属性及取值
属 性
值
描 述
charset
character encoding
定义文档的字符编码
content
some_text
定义与 http-equiv 或 name 属性相关的元信息
http-equiv
content-type
expires
refresh
set-cookie
把content属性关联到 HTTP 头部
name
author
description
keywords
generator
revised
others
把 content 属性关联到一个名称
1 字符集charset属性
在HTML5中，有一个新的charset属性，它使字符集的定义更加容易。例如，下列代码告诉浏览器：网页使用ISO-8859-1字符集显示，代码如下。
meta charset="ISO-8859-1"
2 搜索引擎的关键字
在早期，Meta Keywords关键字对搜索引擎的排名算法起到一定的作用，也是很多人进行网页优化的基础。关键字在浏览时是看不到的，使用格式如下。
meta name="keywords" content="关键字,keywords"
说明：
* 不同的关键词之间，应用半角逗号隔开英文输入状态下，不要使用空格或“|”间隔。
* 是keywords，不是keyword。
* 关键字标签中的内容应该是一个个的短语，而不是一段话。
例如，定义针对搜索引擎的关键词，代码如下。
meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript"
关键字标签“keywords”，曾经是搜索引擎排名中很重要的因素，但现在已经被很多搜索引擎完全忽略。如果我们加上这个标签对网页的综合表现没有坏处，不过，如果使用不恰当，对网页非但没有好处，还有欺诈的嫌疑。在使用关键字标签“keywords”时，要注意以下几点。
* 关键字标签中的内容要与网页核心内容相关，确信使用的关键词出现在网页文本中。
* 使用用户易于通过搜索引擎检索的关键字，过于生僻的词汇不太适合做META标签中的关键词。
* 不要重复使用关键词，否则可能会被搜索引擎惩罚。
* 一个网页的关键词标签里最多包含3～5个最重要的关键词，不要超过5个。
* 每个网页的关键词应该不一样。
由于设计者或SEO优化者以前对Meta Keywords关键字的滥用，导致目前它在搜索引擎排名中的作用很小。
3 页面描述
Meta Description元标签描述元标签是一种HTML元标签，用来简略描述网页的主要内容，通常被搜索引擎用在搜索结果页上展示给最终用户看的一段文字片段。页面描述在网页中是显示不出来的，页面描述的使用格式如下。
meta name="description" content="网页的介绍"
例如，定义对页面的描述，代码如下。
meta name="description" content="免费的 web 技术教程。"
4 页面定时跳转
使用META标记可以使网页在经过一定时间后自动刷新，这可通过将http-equiv属性值设置为refresh来实现。Content属性值可以设置为更新时间。
在浏览网页时经常会看到一些欢迎信息的页面，当经过一段时间后，这些页面会自动转到其他页面，这就是网页的跳转。页面定时刷新跳转的语法格式如下。
meta http-equiv="refresh" content="秒;[url=网址]"
说明：上面的[url=网址]部分是可选项，如果有这个部分，页面定时刷新并跳转；如果省略该部分，页面只定时刷新，不进行跳转。
例如，实现每5秒刷新一次页面。将下述代码放入HEAD标记部分即可。
meta http-equiv="refresh" content="5"
2.2.4 网页的主体标记BODY
网页所要显示的内容都放在网页的主体标记内，它是HTML文件的重点所在。主体标记是以BODY 开始，以BODY标记结束，语法格式如下。
body
…
body
注意，在构建HTML结构时，标记不允许交错出现，否则会造成错误。
例如，在下列代码中，BODY开始标记出现在HEAD标记内。
html
head
title标记测试title
body
head
body
html
代码中的第4行BODY开始标记和第5行的HEAD结束标记出现了交叉，这是错误的。HTML中的所有代码都是不允许交错出现的。
2.2.5 页面注释标记!-- --
注释是在HTML代码中插入的描述性文本，用来解释该代码或提示其他信息。注释只出现在代码中，浏览器对注释代码不进行解释，并且在浏览器的页面中不显示。
在HTML源代码中适当地插入注释语句是一种良好的习惯，对于设计者日后的代码修改、维护工作很有好处。另外，如果将代码交给其他设计者，其他人也能很快读懂前者所撰写的内容。
其语法如下。
!--注释的内容--
注释语句元素由前后两半部分组成，前半部分由一个左尖括号、一个半角感叹号和两个连字符组成；后半部分由两个连字符和一个右尖括号组成。
html
head
title标记测试title
head
body
!-- 这里是标题--
h1HTML5从入门到精通h1
body
html
页面注释不但可以对HTML中一行或多行代码进行解释说明，而且可能注释掉这些代码。如果希望某些HTML代码在浏览器中不显示，可以将这部分内容放在“!—”和“--”之间。例如，修改上述代码如下。
html
head
title标记测试title
head
body
!—
h1HTML5从入门到精通h1
--
body
html
修改后的代码，将h1标记作为注释内容处理，在浏览器中将不会显示这部分内容。
2.3 综合案例——符合W3C标准的HTML5网页制作
下面将制作一个简单的符合W3C标准的HTML5的网页，以巩固前面所学知识。具体操作步骤如下。
启动Dreamweaver CC，新建HTML文档，单击文档工具栏中的【代码】视图按钮，切换至代码状态，如图2-2所示。
图2-2 使用Dreamweaver CC新建HTML文档
图2-2中的代码是XHTML1.0格式，尽管与HTML5完全兼容，但是为了简化代码，将其修改成HTML5规范。修改文档说明部分、HTML标记部分和META元信息部分，修改后，HTML5基本结构代码如下。
!DOCTYPE html
html
head
meta charset="utf-8"
titleHTML5网页设计title
head
body
body
html
在网页主体中添加内容。在BODY部分增加如下代码。
!--白居易诗--
h1续座右铭h1
P
千里始足下,br
高山起微尘。br
吾道亦如此,br
行之贵日新。br
P
保存网页，在IE中预览效果，如图2-3所示。
图2-3 网页预览效果
2.4 跟我练练手
2.4.1 练习目标
能够熟练掌握本章节所讲内容。
2.4.2 上机练习
练习1：制作符合W3C标准的HTML5网页。
练习2：了解HTML5文档的基本结构。
2.5 高 手 甜 点
甜点1：在网页中，语言的编码方式有哪些？
在HTML5网页中，META标记的charset属性用于设置网页的内码语系，也就是字符集的类型。国内常用的是GB码，对于国内，经常要显示汉字，通常设置为GB2312简体中文和UTF-8两种。英文是ISO-8859-1字符集。此外，还有其他字符集，这里不再介绍。
甜点2：在网页中基本标签是否必须成对出现？
在HTML5网页中，大部分标签都是成对出现，不过也有部分标签可以单独出现，如换行标签p、br、img和hr等。
|
|
購物車/收銀台(0) | 在線留言板
| 付款方式
| 運費計算
| 聯絡我們
| 幫助中心 |
加入書簽
HOME
新書上架
