描述
开 本: 16开纸 张: 胶版纸包 装: 平装-胶订是否套装: 否国际标准书号ISBN: 9787302474456丛书名: 网站开发案例课堂
清华大学出版社“案例课堂”大系
丛书以案例的形式讲解软件的内容，读者可以在实践中熟练掌握软件的使用方法。
每一个案例都精挑细选，同时配有全程语音讲解的视频文件，方便读者学习。
案例的选材广泛，涉及到软件应用的各个领域、各个行业，学习无死角。
“CG设计”系列全彩精印，同等价位下内容更多，同等内容下更实惠。
“网站开发”系列附赠超值，全面学习无障碍：
CSS属性速查表
HTML标签速查表
网页布局案例赏析
精彩网站配色方案赏析
精选JavaScript实例
JavaScript函数速查手册
CSS DIV布局案例赏析
案例源文件与教学课件
本书以零基础讲解为宗旨，用实例引导读者深入学习，采取“HTML 5网页开发→CSS3美化网页→jQuery Mobile移动技术→移动网站和APP开发实战”的讲解模式，深入浅出地讲解APP和移动网站开发的各项技术及实战技能。
本书第1篇“HTML 5网页开发”主要讲解HTML 5入门知识、HTML 5网页文档结构、HTML 5网页中的文本和图像、用HTML 5建立超链接、用HTML 5创建表格和表单、HTML 5中的多媒体、使用HTML 5绘制图形、获取地理位置、Web通信新技术、构建离线的Web应用等；第2篇“CSS 3美化网页”主要讲解CSS 3概述与基本语法、使用CSS 3美化网页字体与段落、使用CSS 3美化表格和表单样式、美化图片、背景和边框等；第3篇“jQuery Mobile移动技术”主要讲解JavaScript和jQuery、HTML 5、CSS 3和JavaScript的综合应用，熟悉jQuery Mobile、jQuery Mobile UI组件、jQuery Mobile 事件、数据存储和读取技术等；第4篇“移动网站和APP开发实战”主要讲解插件的使用与开发、将移动网站封装成APP、家庭记账本APP实战、连锁酒店订购系统实战。
本书适合任何想学习移动网站和APP开发的人员，无论您是否从事计算机相关行业，无论您是否接触过移动网站和APP，通过本书的学习均可快速掌握移动网站和APP开发的方法和技巧。
前 言
“网站开发案例课堂”系列图书是专门为网站开发和数据库初学者量身定做的一套学习用书，由刘玉红策划，千谷网络科技实训中心的高级讲师编著，整套书涵盖网站开发、数据库设计等方面。整套书具有以下特点。
前沿科技
无论是网站建设、数据库设计还是HTML 5、CSS 3，我们都精选较为前沿或者用户群的领域推进，帮助大家认识和了解动态。
权威的作者团队
组织国家重点实验室和资深应用专家联手编著该套图书，融合丰富的教学经验与优秀的管理理念。
学习型案例设计
以技术的实际应用过程为主线，全程采用图解和同步多媒体结合的教学方式，生动、直观、全面地剖析使用过程中的各种应用技能，降低难度，提升学习效率。
为什么要写这样一本书
原生应用程序APP的开发费用比较高，用时比较长，jQuery Mobile函数库的出现则很好地解决了这一问题，将HTML 5新技术和jQuery Mobile搭配使用，开发出的网站和普通APP没有区别，受到了广大客户的欢迎。目前学习和关注APP移动网站开发的人越来越多，而很多初学者都苦于找不到一本通俗易懂、容易入门和案例实用的参考书。通过本书的案例实训，可以很快地上手流行的工具，提高职业化能力，从而帮助解决公司与学生的双重需求问题。
本书特色
零基础、入门级的讲解
无论您是否从事计算机相关行业，无论您是否接触过APP和移动网站，都能从本书中找到起点。
超多、实用、专业的范例和项目
本书在编排上紧密结合深入学习APP和移动网站技术的先后过程，从HTML 5的基本概念开始，带大家逐步深入地学习各种应用技巧，侧重实战技能，使用简单易懂的实际案例进行分析和操作指导，让读者读起来简明轻松，操作起来有章可循。
随时检测自己的学习成果
每章首页中，均提供了学习目标，以指导读者重点学习及学后检查。
大部分章后的“跟我练练手”板块，均根据本章内容精选而成，读者可以随时检测自己的学习成果和实战能力，做到融会贯通。
细致入微、贴心提示
本书在讲解过程中，在各章中使用了“注意”“提示”“技巧”等小栏目，使读者在学习过程中更清楚地了解相关操作、理解相关概念，并轻松掌握各种操作技巧。
专业创作团队和技术支持
本书由千谷网络科技实训中心编著和提供技术支持。您在学习过程中遇到任何问题，可加入QQ群221376441进行提问，专家人员会在线答疑。
“移动网站和APP开发”学习途径
本书以学习“移动网站和APP开发”的制作流程来分配章节，从初的HTML 5基本概念开始，然后讲解了CSS 3美化网页技术、jQuery Mobile移动等。同时在后的项目实战环节特意补充了两个移动网站和APP的开发过程，以便更进一步提高读者的实战技能。
超值光盘
全程同步教学录像
涵盖本书所有知识点，详细讲解每个实例与项目的过程及技术关键点，比看书更轻松地掌握书中所有的APP和移动网站开发知识，而且扩展讲解部分能得到比书中更多的收获。
超多容量王牌资源大放送
赠送大量王牌资源，包括本书案例源代码、教学幻灯片、本书精品教学视频、HTML 5标签速查手册、CSS属性速查表、jQuery Mobile 事件参考手册、CSS DIV布局赏析案例、精彩网站配色方案赏析、网页样式与布局案例赏析等。
读者对象
没有任何APP和移动网站开发基础的初学者
有一定的HTML 5和CSS 3基础，想精通APP和移动网站开发的人员
有一定的HTML 5和CSS 3基础，没有项目经验的人员
正在进行毕业设计的学生
大专院校及培训学校的老师和学生
创作团队
本书由刘玉红和蒲娟编著，参加编写的人员还有刘玉萍、周佳、付红、李园、郭广新、侯永岗、王攀登、刘海松、孙若淞、王月娇、包慧利、陈伟光、胡同夫、梁云梁和周浩浩。在编写过程中，我们竭尽所能地将好的讲解呈现给读者，但难免有疏漏和不妥之处，敬请读者不吝指正。如读者在学习中遇到困难或疑问，或有何建议，可写信至邮箱[email protected]。
编 者
第2章 HTML 5网页文档结构
文档结构，主要是指文章的内部结构，在网页中则表现为整个页面的内部结构。在HTML 5之前，并没有对网页文档的结构进行明确的规范，因而如果打开一个网页源代码，可能无法分清哪些是头部哪些是尾部，而在HTML 5中则对这些进行了明确的规范。
学习目标(已掌握的在方框中打钩)
掌握Web标准规定的内容
掌握HTML 5文档的基本结构
掌握制作符合W3C标准的HTML 5网页
2.1
Web标准
在学习HTML 5网页文档结构之前，首先需要了解Web的标准，该标准主要是为了解决各种浏览器与网页的兼容性问题。
2.1.1
Web标准概述
无规矩不成方圆，对于网页设计也是如此。为了Web更好地发展，对于开发人员和终用户而言，非常重要的事情就是在开发新的应用程序时，浏览器开发商和站点开发商需要共同遵守标准，这个标准就是Web标准。
Web标准的终目的就是可确保每个人都有权利访问相同的信息。如果没有Web标准，那么未来的Web应用，都是不可能实现的。同时，Web标准也可以使站点开发更快捷，更令人愉快。
为了缩短开发和维护时间，未来的网站将不得不根据标准来进行编码。这样，开发人员就不必为了得到相同的结果，而挣扎于多版本的开发。一旦Web开发人员遵守了Web标准，由于开发人员可以更容易地理解彼此的编码，那么，Web开发的团队协作也将会得到简化。因此，Web标准在开发中是很重要的。
使用Web标准有以下几个优点。
1．对于访问者
* 文件下载与页面显示速度更快。
* 内容能被更多的用户所访问(包括失明、视弱、色盲等残障人士)。
* 内容能被更广泛的设备所访问(包括屏幕阅读机、手持设备、打印机等)。
* 用户能够通过样式选择定制自己的表现界面。
* 所有页面都能提供适于打印的版本。
2．对于网站所有者
* 更少的代码和组件，容易维护。
* 带宽要求降低(代码更简洁)，成本降低。
* 更容易被搜索引擎搜索到。
* 改版方便，不需要变动页面内容。
* 提供打印版本而不需要复制内容。
* 提高网站易用性。在美国，有严格的法律条款(Section
508)来约束政府网站必须达到一定的易用性，其他国家也有类似的要求。
2.1.2
Web标准规定的内容
Web标准不是某一个标准，而是一系列标准的集合。网页主要由3部分组成，即结构(Structure)、表现(Presentation)和行为(Behavior)，那么，对应的标准也分3个方面，分别如下。
* 结构化标准语言，主要包括XHTML和XML。
* 表现标准语言，主要包括CSS。
* 行为标准，主要包括对象模型，如W3C
DOM、ECMAScript等。
这些标准大部分由W3C起草和发布。也有一些是其他标准组织制定的标准，如ECMA(European Computer Manufacturers Association)的ECMAScript标准。
1. 结构化标准语言
(1) XML语言
XML是The Extensible Markup Language(可扩展标识语言)的简写。目前推荐遵循的是W3C于2000年10月6日发布的XML 1.0。和HTML一样，XML同样来源于SGML，但XML是一种能定义其他语言的语言。XML初设计的目的是弥补HTML的不足，以强大的扩展性满足网络信息发布的需要，后来逐渐用于网络数据的转换和描述。
(2) XHTML语言
XHTML是The Extensible HyperText Markup Language(可扩展超文本标识语言)的缩写。目前遵循的是W3C于2000年1月26日推荐的XML 1.0。虽然XML数据转换能力强大，完全可以替代HTML，但面对成千上万已有的站点，直接采用XML还为时过早，因此在HTML 4.0的基础上，用XML的规则对其进行扩展，得到了XHTML。简单地说，建立XHTML的目的就是实现HTML向XML的过渡。
2. 表现标准语言
CSS是Cascading Style Sheets(层叠样式表)的缩写。目前遵循的是W3C于1998年5月12日推荐的CSS2。W3C创建CSS标准的目的是以CSS取代HTML表格式布局、帧和其他表现的语言。纯CSS布局与结构化XHTML相结合，能帮助设计师分离外观与结构，使站点的访问及维护更加容易。
3. 行为标准
(1) DOM标准
DOM是Document Object Model(文档对象模型)的缩写。根据W3C DOM规范，DOM是一种浏览器平台语言的接口，使用它可以访问页面其他的标准组件。简单理解，DOM解决了Netscaped的JavaScript和Microsoft的JScript之间的冲突，给予Web设计师和开发者一个标准的方法，让他们来访问站点中的数据、脚本和表现层对象。
(2) ECMAScript标准
ECMAScript是ECMA制定的标准脚本语言(JavaScript)。目前推荐遵循的是ECMAScript 262。
2.2
HTML 5文档的基本结构
HTML 5文档基本的结构主要包括文档类型说明、开始标记、元信息、主体标记和页面注释标记等。
2.2.1
HTML 5结构
在一个HTML文档中，必须包含标记，并且放在一个HTML文档中的开始和结束位置，即每个文档以开始，以结束。
之间通常包含两个部分，分别是
和。HEAD标记包含HTML头部信息，如文档标题、样式定义等。BODY标记包含文档主体部分，即网页内容。需要注意的是，HTML标记不区分大小写。
为了便于读者从整体上把握HTML文档结构，下面通过一个HTML页面来介绍HTML页面的整体结构，示例代码如下。
网页内容
从代码中可以看出，一个基本的HTML页由以下几部分构成。
* 声明必须位于HTML 5文档中的行，也就是位于标记之前。该标记告知浏览器文档所使用的HTML规范。声明不属于HTML标记；它是一条指令，告诉浏览器编写页面所用标记的版本。由于HTML 5版本还没有得到浏览器的完全认可，后面介绍时还采用以前通用的标准。
* 说明本页面使用HTML语言编写，使浏览器软件能够准确无误地解释、显示。
*
是HTML的头部标记。头部信息不显示在网页中，此标记内可以保护其他标记，用于说明文件标题和整个文件的一些公用属性。可以通过标记定义CSS样式表，通过标记定义JavaScript脚本文件。
*
* 包含HTML页面的实际内容，显示在浏览器窗口的客户区中。例如，页面中的文字、图像、动画、超链接以及其他HTML相关的内容，都是定义在BODY标记里面。
2.2.2
文档类型说明
Web页面的文档类型说明(DOCTYPE)被极大地简化了。细心的读者会发现，在第1章中使用Dreamweaver CC创建HTML文档时，文档头部的类型说明代码如下。
上面为XHTML文档类型说明，读者可以看到这段代码既麻烦又难记，HTML 5对文档类型进行了简化，简单到15个字符就可以了，代码如下。
DOCTYPE的声明需要出现在HTML 5文件的行。
2.2.3
HTML 5标记html
HTML 5标记代表文档的开始，由于HTML 5语言语法的松散特性，该标记可以省略，但是为了使之符合Web标准和文档的完整性，养成良好的编写习惯，建议不要省略该标记。
HTML 5标记以开头，以结尾，文档的所有内容书写在开头和结尾的中间部分。语法格式如下。
…
2.2.4
头标记head
头标记head用于说明文档头部相关信息，一般包括标题信息、元信息、定义CSS样式和脚本代码等。HTML的头部信息是以开始，以结束，语法格式如下。
…
元素的作用范围是整篇文档，定义在HTML语言头部的内容往往不会在网页上直接显示。
1．标题标记title
HTML页面的标题一般是用来说明页面的用途，显示在浏览器的标题栏中。在HTML文档中，标题信息设置在与之间。标题标记以
在标记中间的“…”就是标题的内容，可以帮助用户更好地识别页面。预览网页时，设置的标题在浏览器的左上方标题栏中显示，此外，在Windows任务栏中显示的也是这个标题，如图2-1所示。
图2-1 标题栏在浏览器中的显示效果
页面的标题只有一个，位于HTML文档的头部，即和之间。
2．元信息标记meta
元素可提供有关页面的元信息(meta-information)，如针对搜索引擎和更新频度的描述和关键词。
标记位于文档的头部，不包含任何内容。标记的属性定义了与文档相关联的名称/值对，标签提供的属性及取值，如表2-1所示。
表2-1 标记提供的属性及取值
属 性
值
描 述
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属性
在HTML 5中，有一个新的charset属性，其使字符集的定义更加容易。例如，下列代码告诉浏览器，网页使用ISO-8859-1字符集显示。
(2) 搜索引擎的关键字
在早期，meta keywords关键字对搜索引擎的排名算法起到一定的作用，也是很多人进行网页优化的基础。关键字在浏览时是看不到的，使用格式如下。
说明：
* 不同的关键词之间，应用半角逗号隔开(英文输入状态下)，不要使用“空格”或“|”间隔。
* 是keywords，不是keyword。
* 关键字标记中的内容应该是一个个的短语，而不是一段话。
例如，定义针对搜索引擎的关键词，代码如下。
关键字标记keywords，曾经是搜索引擎排名中很重要的因素，但现在已经被很多搜索引擎完全忽略。加上这个标记对网页的综合表现没有坏处，但如果使用不恰当，对网页非但没有好处，还有欺诈的嫌疑。在使用关键字标记Keywords时，要注意以下几点。
* 关键字标记中的内容要与网页核心内容相关，确信使用的关键词出现在网页文本中。
* 使用用户易于通过搜索引擎检索的关键字，过于生僻的词汇不太适合做meta标记中的关键词。
* 不要重复使用关键词，否则可能会被搜索引擎惩罚。
* 一个网页的关键词标记里多包含3～5个重要的关键词，不要超过5个。
* 每个网页的关键词应该不同。
由于设计者或SEO优化者以前对meta keywords关键字的滥用，导致目前其在搜索引擎排名中的作用很小。
(3) 页面描述
meta description元标记(描述元标记)是一种HTML元标记，用来简略描述网页的主要内容，通常被搜索引擎用在搜索结果页上展示给终用户看的一段文字片段。页面描述在网页中不显示出来，使用格式如下。
例如，定义对页面的描述，代码如下。
(4) 页面定时跳转
使用标记可以使网页在经过一定时间后自动刷新，这可通过将http-equiv属性值设置为refresh来实现。content属性值可以设置为更新时间。
在浏览网页时，经常会看到一些欢迎信息的页面，在经过一段时间后，这些页面会自动转到其他页面，这就是网页的跳转。页面定时刷新跳转的语法格式如下。
其中，“[url=网址]”部分是可选项，如果有这部分，则页面定时刷新并跳转，如果省略该部分，页面只定时刷新，不进行跳转。
例如，实现每5秒刷新一次页面，将下述代码放入head标记部分即可。
2.2.5
网页的主体标记body
网页所要显示的内容都放在网页的主体标记内，它是HTML文件的重点所在。主体标记是以标记开始，以标记结束，语法格式如下。
…
注意，在构建HTML结构时，标记不允许交错出现，否则会造成错误。
例如，在下列代码中，开始标记出现在标记内。
代码中的第4行开始标记和第5行的结束标记出现了交叉，这是错误的。HTML中的所有代码不允许交叉出现。
2.2.6
页面注释标记
注释是在HTML代码中插入的描述性文本，用来解释该代码或提示其他信息。注释只出现在代码中，浏览器对注释代码不进行解释，并且在浏览器的页面中不显示。
在HTML源代码中适当地插入注释语句是一种非常好的习惯，对于设计者日后的代码修改、维护工作很有帮助。另外，如果将代码交给其他设计者，其他设计者也能很快读懂前者所撰写的内容。
语法如下。
注释语句元素由前后两部分组成，前部分由一个左尖括号、一个半角感叹号和两个连字符组成，后部分由两个连字符和一个右尖括号组成。
HTML 5从入门到精通
页面注释不但可以对HTML中一行或多行代码进行解释说明，而且可能注释掉这些代码。如果希望某些HTML代码在浏览器中不显示，可以将这部分内容放在“”之间，例如，修改上述代码如下。
<!—-
HTML 5从入门到精通
–>
修改后的代码，将
标记作为注释内容处理，在浏览器中将不会显示这部分内容。
2.3 综合案例——符合W3C标准的HTML 5网页
下面将制作一个简单的符合W3C标准的HTML 5网页，以巩固前面所学知识。具体操作步骤如下。
启动Dreamweaver CC，新建HTML文档，单击文档工具栏中的【代码】按钮，切换至代码状态，如图2-2所示。
图2-2中的代码是XHTML 1.0格式，尽管与HTML 5完全兼容，但是为了简化代码，将其修改成HTML 5规范。文档说明部分、标记部分和元信息部分修改后，HTML 5基本结构代码如下。
在网页主体中添加内容，即在body部分增加如下代码。
续座右铭
千里始足下,
高山起微尘。
吾道亦如此,
行之贵日新。
保存网页，在IE中预览效果，如图2-3所示。
图2-3 网页预览效果
2.4 高 手 甜 点
甜点1：在网页中，语言的编码方式有哪些？
在HTML 5网页中，meta标记的charset属性用于设置网页的内码语系，也就是字符集的类型，国内常用的是GB码，对于国内因经常要显示汉字，通常设置为GB2312(简体中文)和UTF-8两种。英文是ISO-8859-1字符集，此外还有其他的字符集，这里不再介绍。
甜点2：在网页中基本标记是否必须成对出现？
在HTML 5网页中，大部分标记都是成对出现，但也有部分标记可以单独出现，如换行标记
、、
等。
2.5 跟我练练手
练习1：制作符合W3C标准的HTML 5网页。
练习2：了解HTML 5文档的基本结构。
评论
还没有评论。